@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,700');
*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { display: table; content:"";}
.clearfix:after { clear: both; }

body {
background: #fff;
color: #fff;
font-weight: 400;
font-size: 1em;
font-family: 'Josefin Sans', "Hannari", "Sawarabi Mincho", YuMincho, serif;
}

*a {
outline: none;
text-decoration: none;
}

a:focus, *:focus{
outline: none;
color: #528cb3;
}

section {
padding: 1em;
text-align: center;
}

a img{
    background-color:#ffffff;
    display:block;
}

a:hover img{
    cursor:pointer;
    filter: alpha(opacity=60);        /* ie lt 8 */
    -ms-filter: "alpha(opacity=60)";  /* ie 8 */
    -moz-opacity:0.6;                 /* FF lt 1.5, Netscape */
    -khtml-opacity: 0.6;              /* Safari 1.x */
    opacity:0.6;
    zoom:1;
}

img {
  -webkit-backface-visibility: hidden;
}

/*side bar */
.sidebar {
display: block;
padding:0;
position: fixed;
width: 20%;
height: 100%;
left:0;
z-index:100;
background-color: #fff;
}
.logo {
display: inline-block;
width: 100%;
text-align: center;
}

.logo a.logos {
display: inline-block;

}

svg#logo_1 {
padding: 0 1em;
}

a.sm-logo2, a.sm-logo3{
display:none;
}
ul.nav, ul.nav2, ul.nav3 {
height: auto;
position: absolute;
margin: 0;
padding: 0;
width: 100%;
list-style: none;
text-align: center;

}
ul.nav li{
display: block;
padding: 0;
margin: 2vh 5% 0;
-webkit-transition: all 0.25s;
transition: all 0.25s;
z-index:100;
}
ul.nav li a {
position: relative;
font-family: "Sawarabi Mincho", "Hannari",YuMincho,serif;
display: inline-block;
padding: .2em 0;
color: #000;
width: 80%;
font-size: 1em;
font-weight: 400;
letter-spacing: .2em;
line-height: 1;
text-decoration: none;
overflow: hidden;
}

ul.nav li a::after {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height:3px;
margin: 0 auto;
content: "";
z-index:10;
display: block;
background-color:rgb(255, 225, 0);
-webkit-transition: .3s ease;
transition: .3s ease;
transform: translateX(-100%);
}

ul.nav li a:hover::after,
ul.nav li a:focus::after {
transform: translateX(0);
}

/*active subpage*/

/*

*/
.sidebar li.active a::after {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height:100%;
margin: 0 auto;
content: "";
z-index:-1;
display: block;
opacity:1;
background-color:rgb(255, 225, 0);
-webkit-transition: .3s ease;
transition: .3s ease;
transform: translateX(0%);
}

/*--nav2--*/
/*------------------------------------------------------
ul.nav2 li {
display: inline-block;
margin: 0 5%;
width: 80%;
text-align: center;
vertical-align: top;
}

ul.nav2 li a.afront{
position: relative;
display: inline-block;
width: 100%;
height:auto;
opacity:1;
color: #000;
line-height: 1;
text-transform: uppercase;
text-decoration: none;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}
------------------------------------------------------*/

/*------------------------------------------------------
.webshop {
display: inline-block;
margin: 0 auto;
width: 80%;
text-align: center;
vertical-align: top;
}
------------------------------------------------------*/

.webshop {
width: 72%;
margin: 0 auto;
text-align: center;
vertical-align: top;
}

.webshop a.afront{
position: relative;
display: inline-block;
width: 100%;
height:auto;
opacity:1;
color: #000;
line-height: 1;
text-transform: uppercase;
text-decoration: none;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
margin-left: 12%;
}

.fa {
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

}

/*---------------------------------------------------------------
ul.nav2 li a::before {
position: absolute;
left:0;
bottom:5px;
margin:0 auto;
content: attr(data-hover);
color:#000;
width:100%;
opacity:1;
font-size:1.3em;
display: block;
-webkit-transition: .3s ease;
transition: .3s ease;
transform: scale(0.8, 0.8) translateX(5px);
}

ul.nav2 li a:hover::before {
opacity:1;
transform: scale(1, 1) translateX(-10px);
}

ul.nav2 li a i,
ul.nav2 li a i {
-webkit-transition: .3s ease;
transition: .3s ease;
transform: translateX(-60px);
}
ul.nav2 li a:hover i,
ul.nav2 li a:focus i {
transform: translateX(60px);
}

ul.nav2 li a::after {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height:3px;
margin: 0 auto;
content: "";
display: block;
opacity:0;
background-color:rgb(255, 225, 0);
-webkit-transition: .3s ease;
transition: .3s ease;
transform: translateX(-100%);
}

ul.nav2 li a:hover::after,
ul.nav2 li a:focus::after {
opacity:1;
transform: translateX(0);
}

ul.nav2 {
padding: 0;
list-style: none;
bottom: 15%;
}

---------------------------------------------------------------*/

.webshop a::before {
position: absolute;
left:0;
bottom:5px;
margin:0 auto;
content: attr(data-hover);
color:#000;
width:100%;
opacity:1;
font-size:1.3em;
display: block;
-webkit-transition: .3s ease;
transition: .3s ease;
transform: scale(0.8, 0.8) translateX(18px);
}

.webshop a:hover::before {
opacity:1;
transform: scale(1, 1) translateX(0);
}

.webshop a i,
.webshop a i {
-webkit-transition: .3s ease;
transition: .3s ease;
transform: translateX(-75px);
}
.webshop a:hover i,
.webshop a:focus i {
transform: translateX(100px);
}

.webshop a::after {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height:3px;
margin: 0 auto;
content: "";
display: block;
opacity:0;
background-color:rgb(255, 225, 0);
-webkit-transition: .3s ease;
transition: .3s ease;
transform: translateX(0);
}

.webshop a:hover::after,
.webshop a:focus::after {
opacity:1;
transform: translateX(0);
}

.webshop {
padding: 0;
list-style: none;
}


/*----nav3----*/
ul.nav3 {
padding: 0;
list-style: none;
text-align: left;
left: 5%;
bottom: 3vh;
}
ul.nav3 li{
display: block;
margin: 0;
}
ul.nav3 li a {
position: relative;
display: inline-block;
padding: .0 1em;
color: #000;
font-size:0.9em;
opacity: 1;
text-transform: uppercase;
text-decoration: none;
overflow: hidden;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s
}
ul.nav3 li a:hover {
opacity: .9;
}
ul.nav3 li a::after {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height:2px;
margin: 0 auto;
content: "";
display: block;
background-color:rgb(255, 225, 0);
-webkit-transition: .3s ease;
transition: .3s ease;
transform: translateX(-100%);
}

ul.nav3 li a:hover::after,
ul.nav3 li a:focus::after {
transform: translateX(0);
}

.container {
/* margin: 30px 0 0 260px; */
width: 100%;
}

.content {
position: relative;
margin: 0 0 0 20%;
text-align: center;
overflow: hidden;
width: 80%;
background-color: #fff;
}

.grid {
position: relative;
clear: both;
margin: 0 auto;
padding: 1em 0 4em .5%;
max-width: 1000px;
list-style: none;
text-align: center;
}

/* Common style */

.grid figure {
position: relative;
float: left;
overflow: hidden;
margin: 3%;
min-width: 180px;
max-width: 330px;
max-height: 240px;
width: 27%;
height: auto;
background-color: #fff;
text-align: center;
cursor: default;
-webkit-transition: all 0.15s;
transition: all 0.15s;
}

.grid figure figcaption {
padding: 2em;
color: #fff;
background-color: rgba(9, 32, 158, 0.75);
text-transform: uppercase;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: all 0.35s;
transition: all 0.35s;
}
.grid figure figcaption:hover {

background-color: rgba(66,66,66,0.5);

}

.grid figure figcaption::before,
.grid figure figcaption::after {
pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.grid figure.effect-goliath:hover,
.grid figure.effect-white2:hover,
.grid figure.effect-title:hover,
.grid figure.effect-form:hover,
.grid figure.slider:hover,
.grid figure.effect-iframe:hover{
   box-shadow:3px 3px 3px #888;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a {
z-index: 1000;
text-indent: 200%;
white-space: nowrap;
font-size: 0;
opacity: 0;
cursor: pointer;
}

.grid figure h2 {
word-spacing: -0.15em;
font-weight: normal;
}

.grid figure h2 span {
font-weight: bold;
}

.grid figure h2,
.grid figure p {
margin: 0;
}

.grid figure p {
letter-spacing: 1px;
font-size: 68.5%;
}

/* Individual effects */

figure.slider {
min-width: 300px;
max-width: 660px;
max-height: 240px;
width: 60%;
}

#cssSlider {
width: auto;
height:100%;
min-height: 100%;
overflow: hidden;
}

#sliderImages {
width : 4000px;
overflow: hidden;
/* animation duration: 16s : 5x ~3s display image + 5x ~0.2s slide */
animation: slide 16s infinite;
-moz-animation: slide 16s infinite;
-webkit-animation: slide 16s infinite;
-o-animation: slide 16s infinite;
}

.grid figure.slider figcaption{
background-color: rgba(0,0,0,0);
border: 1em solid rgba(255, 255, 255, 0.46);
}

#sliderImages img {
float: left;
height: 360px;
width: 800px;
}

.slider h2 {
   color: #000;
   letter-spacing:.5em;
   padding-left:.5em;
   position: absolute;
   top: 0;
   width: 40%;
   left: 30%;
}

.slider h2.slider_text{
position:relative;
width:100%;
color:#fff;
left:0;
}
.grid figure h2.slider_text span {
    font-weight: normal;
    font-size: 1.2em;
}

@keyframes slide{
0%{margin-left: 0px;}
17%{margin-left: 0px;}
20%{margin-left: -800px;}
37%{margin-left: -800px;}
40%{margin-left: -1600px;}
57%{margin-left: -1600px;}
60%{margin-left: -2400px;}
77%{margin-left: -2400px;}
80%{margin-left: -3200px;}
97%{margin-left: -3200px;}
100%{margin-left: 0px;}
}

@-moz-keyframes slide{
0%{margin-left: 0px;}
17%{margin-left: 0px;}
20%{margin-left: -800px;}
37%{margin-left: -800px;}
40%{margin-left: -1600px;}
57%{margin-left: -1600px;}
60%{margin-left: -2400px;}
77%{margin-left: -2400px;}
80%{margin-left: -3200px;}
100%{margin-left: -3200px;}
}

@-webkit-keyframes slide{
0%{margin-left: 0px;}
17%{margin-left: 0px;}
20%{margin-left: -800px;}
37%{margin-left: -800px;}
40%{margin-left: -1600px;}
57%{margin-left: -1600px;}
60%{margin-left: -2400px;}
77%{margin-left: -2400px;}
80%{margin-left: -3200px;}
100%{margin-left: -3200px;}
}

/*—————*/
/***** logo *****/
/*—————*/

figure.effect-logo {
width: 100%;
padding-top: 17%;
height: 20vh;
background-color: navy;
}

figure.effect-logo svg {
opacity: 1;
-webkit-transition: all 0.35s;
transition: all 0.35s;
-webkit-transform: scale(1,1);
transform: scale(1,1);
}

figure.effect-logo:hover svg{
fill:rgb(255, 225, 0);
-webkit-transform: scale(1.05,1.05);
transform: scale(1.15,1.15);
/*animation: huerotator 5s infinite alternate;*/
}

@keyframes huerotator {
0% {
-webkit-filter: hue-rotate(0deg);
filter: hue-rotate(0deg);
}

100% {
-webkit-filter: hue-rotate(360deg);
filter: hue-rotate(360deg);
}
}

/*—————*/
/***** iframe *****/
/*—————*/
figure.effect-iframe {

background-color:#dcdcdc;
}

figure.effect-iframe div{
width:300px;
margin:0 auto;
height:300px;
text-align:center;
}
figure.effect-iframe{
overflow-y:auto;
}

figure.effect-iframe h2 {
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
}

figure.effect-iframe h2{
text-align:center;
width:300px;
position: absolute;
font-size:2em;
color:#fff;
bottom: 25%;
height:50px;
left: 50%;
margin-left:-150px;
line-height: 1.2;
padding:5px 30px ;
background-color: navy;
}

figure.effect-iframe:hover h2 {
-webkit-transform: translate3d(0,-250px,0);
transform: translate3d(0,-250px,0);
}

figure.effect-iframe figcaption {
   border: none;
}
figure.effect-iframe figcaption:hover {
   border: none;
}
figure.effect-iframe h2{
width:300px
}

/*—————–*/
/***** NEWS & slide  *****/
/*—————–*/

#newsSliderImages {
width : 4000px;
overflow: hidden;
/* animation duration: 16s : 5x ~3s display image + 5x ~0.2s slide */
animation: slide 40s infinite;
-webkit-animation: slide 40s infinite;

}

div.slideinner {
   padding: 2em 350px 1em 1.5em;
font-family: "Sawarabi Mincho", YuMincho, serif;
display: block;
float: left;
height: 100%;
width: 800px;
height:240px;
color: #000;
background-color: #fff;
text-align: left;
background-position: top left;
}

div.slideinner p{
font-size: 1em;
line-height: 1.5;
letter-spacing: 0;
}
div.slideinner p span.up_ymd{
font-size:1.2em;
}

figure.slider h2{
color:#dcdcdc;
margin-top:.5em;
}

/*—————–*/
/***** title *****/
/*—————–*/

figure.effect-title figcaption{
background-color: rgba(208, 197, 194, 0.83);
   text-align: left;
   line-height: 1.3;

}
figure.effect-title  figcaption:hover{
   background-color: rgba(97, 89, 74, 0.78);
}

figure.effect-title h2{
    color: #fff;
    float: right;
    font-size: 1.3em;
    display: inline-block;
    padding: 0em 1em;
    width: 10px;
    letter-spacing:.3em;
}


/*—————–*/
/***** Moses2 *****/
/*—————–*/

figure.effect-moses2  figcaption{
padding:0;
background-color: #dcdcdc;
-webkit-transition: all 0.35s;
transition: all 0.35s;
}
figure.effect-moses2  figcaption:hover{
background-color:  #dcdcdc
}

figure.effect-moses2  figcaption > div{
position: relative;
float: left;
width:50%;
height:50%;
    display: flex;
   justify-content: center;
   align-items: center;
}

figure.effect-moses2  figcaption div img{
position: relative;
width:auto;
height:auto;
max-width:120px;
max-height:120px;
vertical-align: middle;

background-color: rgba(255,255,255,1);
-webkit-transition: all 0.35s;
transition: all 0.35s;
}

figure.effect-moses2 h2{
padding:0;
font-size:3em;
-webkit-transition: all 0.35s;
transition: all 0.35s;
color: transparent; 
background-color: #666666;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;

}

/*—————–*/
/***** SNS *****/
/*—————–*/

figure.effect-sns  figcaption{
padding:0;
background-color: #dcdcdc;
-webkit-transition: all 0.35s;
transition: all 0.35s;
}

figure.effect-sns  figcaption:hover{
background-color: #dcdcdc;
padding:0;
}
figure.effect-sns  a{
width:100%;
height:100%;
}

figure.effect-sns .fa{
color: #fff;
text-shadow:3px 2px 6px #888;
-webkit-transform: scale(1,1);
transform: scale(1,1);
    -webkit-transition: all 0.35s;
transition: all 0.35s;
}

figure.effect-sns div:hover .fa{
text-shadow:5px 5px 8px yellow;
-webkit-transform: scale(1.1,1.1);
transform: scale(1.2,1.2);

}

figure.effect-sns  figcaption > div{
position: relative;
float: left;
padding: 1em .5em;
width:50%;
height:50%;
    -webkit-transition: all 0.35s;
transition: all 0.35s;
}

figure.effect-sns  figcaption .mos3{
font-size:3em;
line-height:1;
color:#333;
}
figure.effect-sns  figcaption:hover .mos3{
color:#fff;
}

figure.effect-sns h2{
padding:0em;
font-weight:bold;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
opacity: 1;

}

/*—————–*/
/***** Goliath *****/
/*—————–*/

figure.effect-goliath figcaption{
text-align:center;
padding:1em .2em;
}
figure.effect-goliath img,
figure.effect-goliath h2 {
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
}

figure.effect-goliath img {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

figure.effect-goliath h2,
figure.effect-goliath h3{
text-align:center;
width:100%;
position: absolute;
font-size:1.6em;
bottom: 0;
top:0;
left: 0;
color:#fff;
line-height: 1.2;
padding:2em 0;
}

figure.effect-goliath h2.big{
padding:1em 0;
}

figure.effect-goliath h2 span{
font-size:1.5em;
font-weight:100;

}

figure.effect-goliath figcaption:after {
position: absolute;
content: "";
bottom: 0;
left: 0;
width: 100%;
background-color: rgb(255, 225, 0);
height: 7px;
-webkit-transition: .3s;
transition: .3s;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}

figure.effect-goliath figcaption:hover:after {
transform: translateX(0);
}

figure.effect-goliath.icon h2 {
opacity: 0;
-webkit-transition: .3s;
transition: .3s;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}

figure.effect-goliath h3{
width: 100%;
opacity: 1;
padding:0 30px;
font-weight:400;
-webkit-transition: 0.35s;
transition:  0.35s;
-webkit-transform: translate(0,40px);
transform: translate(0,40px);
}

figure.effect-goliath p {
position: absolute;
bottom: 0;
left: 0;
padding-top: 35px;
padding-bottom: 20px;
text-transform: none;
font-size: 1.2em;
width: 100%;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate(0,50px);
transform: translate(0,50px);
}

figure.effect-goliath:hover img {
-webkit-transform: translate3d(0,-70px,0);
transform: translate3d(0,-70px,0);
}

figure.effect-goliath:hover h2 {
opacity: 1;
-webkit-transform: translate(0,5px);
transform: translate(0,5px);
}
figure.effect-goliath.icon:hover h2 {
opacity: 1;
-webkit-transform: translate(0,15px);
transform: translate(0,15px);
}

figure.effect-goliath:hover h3 {
opacity: 1;
letter-spacing:.1em;
-webkit-transform: translate(0,10px);
transform: translate(0,10px);
}
figure.effect-goliath:hover p {
opacity: 1;
-webkit-transform: translate(0,0);
transform: translate(0,0);
}

/****   history count   *****/
figure.effect-goliath figcaption#history p.count_p {
   padding: 0;
   margin: 0;
   top: 50%;
}
figure.effect-goliath figcaption#history p.count_p span{
   font-size: 2em;
   }

/*—————–*/
/***** white *****/
/*—————–*/

figure.effect-white figcaption{
padding:1.5em 0;
text-align:center;
background-color:rgba(0,0,0,.3);
}
figure.effect-white figcaption:hover{
background-color:rgba(255,255,255,.3);
}
figure.effect-white img,
figure.effect-white h2 {
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
}

figure.effect-white img {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

figure.effect-white h2 {
    text-align: center;
    position: relative;
    font-size: 1em;
    bottom: 0;
    top: 0;
    left: 0;
    line-height: 1.2;
    padding: 0;


}

figure.effect-white h2 span{
font-size:1.8em;
font-weight:100;

}

figure.effect-white p {
position: absolute;
bottom: 0;
left: 0;
padding-top: 35px;
padding-bottom: 20px;

text-transform: none;
font-size: 1.2em;
width: 100%;
opacity: 0;
}

figure.effect-white:hover img {
-webkit-transform: translate(0,-70px);
transform: translate(0,-70px);
}

/*—————–*/
/***** white2 *****/
/*—————–*/

figure.effect-white2 figcaption{
text-align:left;
background-color:rgba(255,255,255,.3);

}

figure.effect-white2 img,
figure.effect-white2 h2 {
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
}

figure.effect-white2 figcaption div.tate{
background-color:rgba(255,255,255,0);
width:100%;
height:100%;
word-wrap: break-word;
writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
-webkit-writing-mode:vertical-rl;
}

@media screen\0 {
figure.effect-white2 figcaption div.tate{
background-color:rgba(255,255,255,0);
width:100%;
height:100%;
word-wrap: break-word;
writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
-webkit-writing-mode:vertical-rl;
}
}


figure.effect-white2 img {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translate(-10px,-10px) scale(1,1);
transform: translate(-10px,-10px) scale(1,1);
}

figure.effect-white2 h2{
letter-spacing:0.3em;
width:100%;
font-size:1.6em;

}

figure.effect-white2 h2 span{
font-size:1.8em;
font-weight:100;

}

figure.effect-white2 p {
text-transform: none;
font-size: 1.2em;
width: 100%;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate(0,50px);
transform: translate(0,50px);
}

figure.effect-white2 figcaption:hover:after {
transform: translateX(0);
}

figure.effect-white2:hover img {
-webkit-transform: scale(1.1,1.1);
transform: scale(1.1,1.1);
}

figure.effect-white2:hover h2 {
-webkit-transform: translate(0,-5px);
transform: translate(0,-5px);
}

figure.effect-white2:hover p {
opacity: 1;
-webkit-transform: translate(0,0);
transform: translate(0,0);
}

/************* effect-form   ****************/

figure.effect-form figcaption {
padding: 1em;
background-color: rgba(152, 152, 152, 0.41);
-webkit-transition: all 0.35s;
transition: all 0.35s;
}

figure.effect-form #image {
font-family: Arial, sans-serif;
color: #FFF;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
  -ms-flex-pack: center;
      justify-content: center;
-webkit-box-align: center;
  -ms-flex-align: center;
      align-items: center;
text-transform: uppercase;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
text-shadow: 0 2px 1px rgba(0, 0, 0, 0.5);
font-size: 32px;
letter-spacing: 0.1em;
border-radius: 3px;
}

figure.effect-form form {
font-size:1.5em;
max-width: 300px;
height: auto;
margin: auto;
}
figure.effect-form form input
{
color: #000;
border: none;
padding: 12px;
width: 100%;
cursor: pointer;
margin-bottom:5px;
}

figure.effect-form form label {
margin: 10px auto 100px;
display: block;
color: #FFF;
width: 100%;
padding: 1.1em;
 cursor: pointer;
 height: 220px;
}
figure.effect-form form label.toukou{
height: auto;
 width: 60%;
 padding: .3em;
 font-size: .8em;
 border: 5px solid #fff;
}

figure.effect-form #image {
background-color: #fff;
height: 300px;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}

figure.effect-form form .fa{
text-shadow: 2px 2px 6px #666;
}
figure.effect-form div#name-mail {
   height: 220px;
   padding: 1em 0;
   margin-bottom: 2em;
}
figure.effect-form .toukou{
opacity:0;
}
figure.effect-form h2{
margin-bottom:1em;
font-size:1em;
padding: 1em;
}
figure.effect-form textarea.title {
 font-size: 0.85em;
 width: 100%;
 margin-bottom: 5px;
 resize: none;
 border: none;
 font-weight: 200;
}
figure.effect-form textarea.article {
 font-size: 0.7em;
 width: 100%;
 height: 4em;
 resize: none;
 border: none;
 font-weight: 200;
}

input,textarea{
font-family: 'Josefin Sans', "Noto Sans Japanese", sans-serif;
}
textarea:placeholder-shown,
input:placeholder-shown {
 color: #ccc; }
 textarea::-webkit-input-placeholder,
input::-webkit-input-placeholder {
 color: #ccc; }

.headerbar{display:none;}
.grid figure.small {
display:none;
}

.back a{
position: fixed;
bottom: 5%;
right: 3%;
color: #fff;
opacity:0.65;
   -webkit-transition: all 0.15s;
transition: all 0.15s;

text-shadow:1px 1px 4px #888;
-webkit-animation: bounce 2s linear 8s  infinite;
animation: bounce 2s linear 8s infinite;
}

.back:hover a{
opacity:1;
animation:none;
-webkit-animation:none;
text-shadow:2px 2px 2px #888,1px 1px 1px #000;
}

/****************/
.topnav{
height: 100vh;
position:absolute;
width:100%;
margin: 0;
background-repeat: no-repeat;
background-size: 40%;
background-position: 3% 91%;
    background-color: #fff;
}
.space{
display:block;
position:relative;
margin:0;
padding:0;
width:100%;
height:100vh;
}

ul.navtop{
height: 100%;
width: 100%;
float: right;
position: relative;
margin: 0;
padding: 1em 1em;
list-style: none;
text-align: center;
background: rgba(255, 255, 255, 0.84);
    overflow:hidden;
}

ul.navtop li {
display: inline-block;
width: 30px;
float: right;
font-size: 1.4em;
margin: 5% 3% 0 1%;
-webkit-transition: all 0.25s;
transition: all 0.25s;
height: 400px;
position: relative;
-ms-writing-mode: tb-rl;
}

@media screen\0 {
ul.navtop li {
height: 500px;
}
}

ul.navtop li a{
position: absolute;
display: inline-block;
padding: .1em 0;
color: #888;
width: 80%;
left: 0;
right: 0;
font-size: 1em;
font-weight: 400;
letter-spacing: .2em;
line-height: 2;
text-decoration: none;
z-index:10;
transition: .6s ease;
}

@media screen\0 {
ul.navtop li a{
font-weight: 400;
letter-spacing: 1em;
line-height: 2;
}
}

.topnav ul.navtop li:hover a,
.topnav ul.navtop li a:hover{
font-size: 1.4em;
color:#000;
}

ul.navtop li a::after {
position: absolute;
right: 0;
top: 0;
width: 3px;
height:0%;
content: "";
z-index:-1;
display: block;
background-color:rgb(255, 225, 0);
-webkit-transition: .3s ease;
transition: .3s ease;
}

ul.navtop li:hover a::after,
ul.navtop li:focus a::after {	
height:100%;
}
/*
ul.navtop li::before {
position: absolute;
width: 0;
height:0;
right: 30px;
top: 90%;
content: "";
-webkit-transition: .4s ease-in-out;
transition: .4s ease-in-out;
z-index:-1;
background-image: url(https://fujikake21.co.jp/wp-content/uploads/2012/01/store.jpg);
background-repeat: no-repeat;
background-size: 100%;
-webkit-transform:  scale(0.8,0.8);
transform:  scale(0.8,0.8);
opacity:0;
}
*/
ul.navtop li:hover::before{
position:absolute;
opacity:0.8;
height:250px;
width: 300px;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}

.topnav .hover_logo {
   position: absolute;
   width: 100%;
   height: 100%;
   padding: 0;
   margin: 0;
   z-index: 1;
}

ul.topnav3{
   height: auto;
   position: absolute;
   margin: 0;
   padding: 0;
   list-style: none;
   text-align: left;
   left: 3vh;
   bottom: 12vh;
   z-index:20;
}

ul.topnav3 li {
   display: block;
   margin: 0;
}
ul.topnav3 li a {
   position: relative;
   display: inline-block;
   padding: .0 1em;
   color: #000;
   font-size: 0.9em;
   opacity: 1;
   text-transform: uppercase;
   text-decoration: none;
   overflow: hidden;
   -webkit-transition: opacity 0.35s;
   transition: opacity 0.35s;
}

.topnav div.clicks {
  position: absolute;
  width: 80px;
  height: auto;
  z-index:100;
  left: 50%;
  margin-left: -40px;
  bottom: 10%;
-webkit-animation: bounce 2s linear 4s  infinite;
animation: bounce 2s linear 4s infinite;
}

.topnav div.clicks:hover{

-webkit-animation: none;
animation: none;
}
.topnav div.click {
position: absolute;
bottom: 0;
  left: 40px;
width: 80px;
height: 0px;
border-left: 2px dashed #888;
animation: downarrow 5s linear 0s 1 alternate; 
-webkit-animation: downarrow 5s linear 0s 1 alternate;
}
.topnav div.click2 {
position: absolute;
bottom: 0;
  left: 31.5px;
  width: 20px;
  height: 20px;
border-right: 2px dashed #888;
border-bottom: 2px dashed #888;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-animation: rotate 4s linear 0s 1 alternate;
animation: rotate 4s linear 0s 1 alternate;
}

.topnav div.clickbutton {
  position: absolute;
  width: 80px;
  height: 80px;
  display: block;
  bottom: 30px;
  cursor: pointer;
  border-radius: 50%;
}
.topnav div.clickbutton p {
  position: absolute;
  color: #888;
  font-size: 1em;
  padding: 2em;
  top: -100%; 
  opacity:1;
  -webkit-transition:0.3s;
  transition:0.3s;
animation: rotate 6s linear 0s 1 alternate; 
-webkit-animation: rotate 6s linear 0s 1 alternate;
}
.topnav div.clickbutton p:hover {
opacity:0.5;
}

@-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-moz-transform: translateY(-30px);
-ms-transform: translateY(-30px);
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-moz-transform: translateY(-15px);
-ms-transform: translateY(-15px);
-webkit-transform: translateY(-15px);
transform: translateY(-15px); }
}
@keyframes downarrow{
0%{bottom: 100vh;height: 0vh;}
20%{bottom: 100vh;height: 0vh;}
40%{bottom: 0px;height: 100vh;}
75%{bottom: 0px;height: 100vh;}
100%{bottom: 0;height: 150px;}
}
@-webkit-keyframes downarrow{
0%{bottom: 100%;height: 0%;}
20%{bottom: 100%;height: 0%;}
40%{bottom: 0%;height: 100%;}
75%{bottom: 0%;height: 100%;}
100%{bottom: 0%;height: 10%;}
}
@keyframes rotate{
0%{opacity: 0;}
75%{opacity: 0;}
100%{opacity: 1;}
}
@-webkit-keyframes rotate{
0%{opacity: 0;}
750%{opacity: 0;}
100%{opacity: 1;}
}

.topnav li a{
opacity:1
animation: intro 6s linear -1s 1 alternate; 
-webkit-animation: intro 6s linear -1s 1 alternate;
}

@keyframes intro{
0%{opacity: 0;}
60%{opacity: 0;}
100%{opacity: 1;}
}
@-webkit-keyframes intro{
0%{opacity: 0;}
60%{opacity: 0;}
100%{opacity: 1;}
}

.top{
display:block;
position:fixed;
top:0;
width:100%;
z-index: 9999;
height:10px;
background-color:navy;
}
.right{
display:block;
position:fixed;
top:0;
right:0;
z-index: 9999;
height:110vh;
width:10px;
background-color:navy;
}
.bottom{
display:block;position:fixed;bottom:0;
z-index: 9999;width:100%;height:10px;background-color:navy;
}
.left{
display:block;
position:fixed;
top:0;
z-index: 9999;
left:0;
height:110vh;
width:10px;
background-color:navy;
}

.sale {
}

.sale .sale_banner {
	text-align: center;
	margin-bottom: 50px;
}

.sale .sale_title {
	margin-bottom: 10px;
}

.sale .sale_attention {
}

.sale .sale_at {
	display: block;
	font-size: 0.8em;
	width: 66%;
	margin: 0 auto 50px;
}

.sale .red {
	color: #f00;
}

.sale a {
	color: #000;
	text-decoration: none;
}

.sale .sale_fax-sheet {
	font-size: 1.1em;
	text-align: center;
	margin-bottom: 70px;
}

.sale .sale_tweet {
	font-size: 0.9em;
	text-align: center;
}

.sale .sale_tw {
	margin: 0 auto 100px;
}

.sale .sale_tw td {
	padding: 0 50px;
}

.sale .sale_tw td img {
	width: 120px;
}

.sale .sale_map {
	margin: 0 auto;
}

.sale .sale_map img {
	width: 200px;
}

.sale .sale_map td {
	text-align: left;
	padding: 10px 30px;
}

.sale .sale_map td .sale_small {
	text-align: center;
	font-size: 0.8em;
}


/*-----------------------------------------

　移転セールのお知らせ

-----------------------------------------*/
#relocation {
    color: #000000;
    padding-top: 100px;
}

#relocation h2 {
    color: #000080;
    font-size: 40px;
    margin: 0;
}

#relocation h3 {
    font-size: 25px;
    line-height: 1.1em;
    text-indent: 0;
    margin: 0;
    padding: 0;
}

#relocation .relocation-sns {
    display: block;
    margin-top: 80px;
}

#relocation .relocation-sns h4 {
    font-size: 25px;
    font-weight: normal;
    line-height: 1.1em;
    text-indent: 0;
    margin: 0 0 50px 0;
    padding: 0;
}

#relocation hr {
	margin: 100px 0;
}

#relocation table tr th {
        vertical-align: top;
}

#relocation table tr td {
        vertical-align: top;
	padding: 0 10px;
}

#relocation table tr td p {
	text-indent: -1em;
        padding-left: 1em;
}

#relocation .relocation-title table {
        width: 62.5%;
	margin: 30px auto;
}

#relocation .relocation-title table tr th {
        width: 40%;
	font-size: 1.5em;
        font-weight: bold;
        text-align: left;
        vertical-align: middle;
        padding: 0;
}

#relocation .relocation-title table tr td{
        text-align: left;
        vertical-align: middle;
	padding: 0;
}


#relocation .relocation-contents ul{
	width: 60%;
        list-style-type: none;
	text-align: left;
	line-height: 4em;
	margin: 100px auto;
}

#relocation .relocation-contents li a {
        color: #000;
	text-decoration: none;
}

#relocation .relocation-contents li a:hover {
	text-decoration: underline;
}

#relocation #fujikake-shop {
	text-align: left;
	margin-top: -10px;
	padding-top: 10px;
}

#relocation #furikake-shop {
	text-align: left;
	margin-top: -10px;
	padding-top: 10px;
}

#relocation #phone-fax {
	text-align: left;
	margin-top: -10px;
	padding-top: 10px;
}

#relocation #net-shop {
	text-align: left;
	margin-top: -10px;
	padding-top: 10px;
}

.performance_list table {

}

.performance_list table tr {

}

.performance_list table tr th {
	width: 15%;
	margin: 0;
	padding: 0 0 20px 0 !important;
}

.performance_list table tr th img {
	width: 100%;
	margin: 0;
	padding: 0 !important;
}

.performance_list table tr td.performance_date {
	width: 25%;
	vertical-align: middle;
	margin: 0;
	padding: 20px 20px 20px 60px;
}

.performance_list table tr td.performance_matter {
	width: 60%;
	vertical-align: middle;
	margin: 0;
	padding: 20px;
}


/* Media queries *//* Media queries *//* Media queries *//* Media queries *//* Media queries */

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

.grid figure{
margin:1%;
width:31%
}
figure.slider {
width:64%;
}

}

@media screen and (max-width: 940px) {
.sidebar{
width: 100%;
z-index: 100;
left:0;
right:0;
position: fixed;
top: 0;
height: auto;
}

.content {
padding: 0;
text-align: center;
margin: 0 auto;
width:100%;
    padding-top: 25vh;
}

.topnav {
width: 100%;
margin-left: 0;
left: 0;
z-index: 9996;
position: absolute;
top: 0;
}

.grid figure.small {
display:block;
}

.grid {
margin: 0 auto;
}

ul.nav2, ul.nav3{
display:none;
}

.webshop {
display:none !important;
}

svg#logo_1 {
padding: 0;
}
.logo {
width: 22%;
min-width: 150px;
margin: 0;
}
.logo a.logos {
float: left;
width: 50px;
height: 50px;
opacity: .4;
margin: .5em 0 0 1em;
background-color: rgb(3, 0, 167);
-webkit-transition: all 0.35s;
transition: all 0.35s;
}

.logo img{
-webkit-transform: scale(0.5, 0.5) translate(-50px, -65px);
transform: scale(0.5, 0.5) translate(-50px, -65px);
padding: 0;
}

.logo:hover a.logos {
opacity: .9;
-webkit-transition: all 0.35s;
transition: all 0.35s;
}
/*ロゴ*/

figure.effect-logo {
width: 100%;
height: auto;
min-width: 150px;
min-height: 65px;
margin: 0;
display: inline;
float: left;
background: navy;
padding-top: 8px;
}
a.sm-logo2, a.sm-logo3 {
display: block;
position: relative;
float: right;
opacity: .5;
color: #555;
overflow: hidden;
margin: 15px 15px 0;
}

a.sm-logo2, a.sm-logo3{
opacity: .9;
}

ul.nav {
position: relative;
margin: 1em 0;
width: 100%;
padding: 0;
display: inline-block;
}

ul.nav li {
display: inline-block;
margin: .2em .5em;
font-size: 1em;
}
ul.nav li a{
letter-spacing:0;
width:auto;
}

ul.nav li a::after {

}
ul.nav li a:hover span,
ul.nav li a:focus span {
-webkit-transform: translateY(0em);
transform: translateY(0em);
opacity:0.6;
}
}

@media screen and (max-width: 800px) {
.grid figure {
margin: 4%;
width: 42%;
max-width: 400px;
max-height: 250px;
}

figure.slider{
width:92%;
max-width: 800px;

min-width: 400px;
}
div.slideinner{
height: 250px;
max-height: 250px;
}

figure.effect-goliath h2 span{
font-size:1.4em;
}
figure.effect-goliath h3{
font-size:1.2em;
}
ul.navtop li { 
margin-top:4em;
}

figure.effect-goliath h2 {
opacity: 1;
-webkit-transform: translate(0,5px);
transform: translate(0,5px);
}
figure.effect-goliath.icon h2 {
opacity: 1;
-webkit-transform: translate(0,15px);
transform: translate(0,15px);
}

figure.effect-goliath h3 {
opacity: 1;
letter-spacing:.1em;
-webkit-transform: translate(0,10px);
transform: translate(0,10px);
}
figure.effect-goliath p {
opacity: 1;
-webkit-transform: translate(0,0);
transform: translate(0,0);
}
.grid figure figcaption > a {
    width: 50%;
    top: auto;
    bottom: 10px;
    right: 25%;
    height: 50px;
    border: 3px solid rgb(255, 212, 0);
    opacity: 1;
    z-index:10;
    left: 25%;
}

figure.effect-goliath figcaption{
    background-color: rgba(74, 74, 74, 0.75);
}

figure.effect-goliath figcaption:after{
content:none;
}

.sale {
	width: 100%;
	margin-top: 50px;
}

.sale img {
	width: 100%;
}

.sale .sale_banner {
	text-align: center;
	margin-bottom: 50px;
}

.sale .sale_title {
	margin-bottom: 10px;
}

.sale .sale_attention {
}

.sale .sale_at {
	display: block;
	font-size: 0.8em;
	width: 95%;
	margin: 0 auto 50px;
}

.sale .red {
	color: #f00;
}

.sale a {
	color: #000;
	text-decoration: none;
}

.sale .sale_fax-sheet {
	font-size: 0.9em;
	text-align: center;
	margin-bottom: 70px;
}

.sale .sale_tweet {
	font-size: 0.8em;
	text-align: center;
}

.sale .sale_tw {
	margin: 0 auto 100px;
}

.sale .sale_tw td {
	padding: 0 10px;
}

.sale .sale_tw td img {
	width: 100%;;
}

.sale .sale_map {
	width: 100% !important;
	margin: 0 auto;
}

.sale .sale_map tr {
	width: 100% !important;
}

.sale .sale_map td {
	display: block;
	width: 100%;
	text-align: left;
	padding: 10px 10px 50px;
}

.sale .sale_map td .sale_small {
	text-align: center;
	font-size: 0.8em;
}

.sale .sale_map img {
	width: 100%;
}

.sale .sale_map td iframe {
	width: 100% !important;
}

/*-----------------------------------------

　移転セールのお知らせ

-----------------------------------------*/
#relocation {
	width: 95%;
	color: #000000;
	margin: 100px auto 0;
}

#relocation h2 {
    color: #000080;
    font-size: 20px;
    margin: 0;
}

#relocation img {
    width: 100%;
}

#relocation h3 {
    font-size: 15px;
    line-height: 1.1em;
    text-indent: 0;
    margin: 0;
    padding: 0;
}

#relocation hr {
	margin: 100px 0;
}

#relocation table tr th {
	display: block;
	width: 100%;
        vertical-align: top;
}

#relocation table tr td {
	display: block;
	width: 100%;
        vertical-align: top;
	padding: 0 10px;
}

#relocation table tr td p {
	text-indent: -1em;
        padding-left: 1em;
}

#relocation .relocation-title table {
        width: 90%;
	margin: 30px auto;
}

#relocation .relocation-title table tr th {
	display: table-cell;
        width: 40%;
	font-size: 1.1em;
        font-weight: bold;
        text-align: left;
        vertical-align: middle;
        padding: 0;
}

#relocation .relocation-title table tr td{
	display: table-cell;
        text-align: left;
        vertical-align: middle;
	padding: 0;
}


#relocation .relocation-contents ul{
	width: 90%;
        list-style-type: none;
	text-align: left;
	line-height: 1.5em;
	margin: 100px auto;
}

#relocation .relocation-contents li a {
        color: #000;
	text-decoration: none;
}

#relocation .relocation-contents li a:hover {
	text-decoration: underline;
}

#relocation #fujikake-shop {
	text-align: left;
	margin-top: -200px;
	padding-top: 200px;
}

#relocation #furikake-shop {
	text-align: left;
	margin-top: -200px;
	padding-top: 200px;
}

#relocation #phone-fax {
	text-align: left;
	margin-top: -200px;
	padding-top: 200px;
}

#relocation #net-shop {
	text-align: left;
	margin-top: -200px;
	padding-top: 200px;
}

.performance_list table {
	border-collapse: separate;
	border-spacing: 0px 10px;
}

.performance_list table tr {

}

.performance_list table tr th {
	width: 40% !important;
	vertical-align: middle !important;
	margin: 0 !important;
	padding: 0 !important;
}

.performance_list table tr th img {
	width: 100% !important;
	vertical-align: middle !important;
	margin: 0 !important;
	padding: 0 !important;
}

.performance_list table tr td.performance_date {
	width: 20%;
	vertical-align: middle;
	margin: 0 !important;
	padding: 0 1% !important;
}

.performance_list table tr td.performance_matter {
	width: 40%;
	vertical-align: middle;
	margin: 0 !important;
	padding: 0 1% !important;
}


}

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

ul.navtop li::before{
display:none;
}

ul.navtop li { 
width: 8%;
}

.grid figure.effect-logo {
min-width: 150px;
min-height: 55px;

}

.grid figure {
display: inline-block;
float: none;
margin: 10px 15%;
max-width: 580px;
min-width: 270px;
width:70%;
max-height: 250px;
height: auto;
}
figure.slider {
width:96%;
margin:10px 2%;
max-width: 800px;
max-height: 300px;
}
div.slideinner {
height: 300px;
max-height: 300px;
}
figure.slider:nth-child(1), figure.effect-moses2,figure.effect-sns {
    display: none;
}
}
@media screen and (max-width: 550px) {

div.slideinner {
   padding: 2.2em 380px 1em 1em;
}
}

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

.grid figure {
margin: 10px 3%;
width:94%;
}
div.slideinner {
   padding: 2.2em 450px 1em 1em;
}
}

#top-slider{
	clear: both;
	all: initial;
	display: block;
	min-width: 300px;
	max-width: 660px;
	max-height: 240px;
	width: 60%;
	overflow: hidden;
}

#cssSlider {
width: auto;
height:100%;
min-height: 100%;

}

#sliderImages {
width : 4000px;
overflow: hidden;
/* animation duration: 16s : 5x ~3s display image + 5x ~0.2s slide */
animation: slide 16s infinite;
-moz-animation: slide 16s infinite;
-webkit-animation: slide 16s infinite;
-o-animation: slide 16s infinite;
}

.grid figure.slider figcaption{
background-color: rgba(0,0,0,0);
border: 1em solid rgba(255, 255, 255, 0.46);
}

#sliderImages img {
float: left;
height: 360px;
width: 800px;
}

.slider h2 {
   color: #000;
   letter-spacing:.5em;
   padding-left:.5em;
   position: absolute;
   top: 0;
   width: 40%;
   left: 30%;
}

.slider h2.slider_text{
position:relative;
width:100%;
color:#fff;
left:0;
}
.grid figure h2.slider_text span {
    font-weight: normal;
    font-size: 1.2em;
}

#top-banner a:hover img {
  opacity:0.8;
  filter:alpha(opacity=80);
  -ms-filter: “alpha( opacity=80 )”;
}

#top-banner {
    clear: both;
    width: 95%;
    margin: 0 auto;
    text-align: center;
}

#top-banner img {
    width: 100%;
}

#top-banner-two {
    clear: both;
    width: 95%;
    margin: 10px auto 0;
    text-align: center;
}

#top-banner-two img {
    width: 100%;
}

#top-movie {
  text-align: center;
      margin-top: 10px;
  margin-left: -5px;
  padding-left: -5px;
}

#top-movie iframe {
    width: 923px;
    margin-left: -5px;
}

#top-rooms {
    clear: both;
    width: 95%;
    margin: 10px auto 0;
    text-align: center;
    display:flex;
}

#top-rooms-side {
    display:flex;
    flex-flow: column wrap;
}

#top-rooms-side div {
    flex:1;
}

@media screen and (max-width: 850px) {
#top-banner {
    clear: both;
    width: 95%;
    margin: 0 auto;
    text-align: center;
}

#top-banner img {
    width: 100%;
}

#top-banner-two {
    clear: both;
    width: 95%;
    margin: 10px auto 0;
    text-align: center;
}

#top-banner-two img {
    width: 100%;
}

#top-movie {
      position: relative;
      width: 100%;
      margin-top: 10px;
      padding-top: 56.25%;
  /*width: 100% !important;
  margin-left: 0;*/
}

#top-movie iframe {
      position: absolute;
  top: 0;
  left: 4%;
  width: 94% !important;
  height: 100% !important;
  margin-left: 1px;
  /*width: 100% !important;*/
}

#top-rooms {
    clear: both;
    width: 95%;
    margin: 10px auto 0;
    text-align: center;
    display:flex;
}

#top-rooms-side {
    display:flex;
    flex-flow: column wrap;
}

#top-rooms-side div {
    flex:1;
}
}


.ninety img {
  width: 633px;
}

.ninety a:hover img {
  opacity:0.8;
  filter:alpha(opacity=80);
  -ms-filter: “alpha( opacity=80 )”;
}

.ninety .big_word{
  font-size: 2em;
  font-weight: bold;
}

.ninety .download {
	  font-size: 2em;
	  font-weight: bold;
}

.ninety .download a {
	  color: #000;
	  text-decoration: none;
}

.ninety .download  a:hover {
    text-decoration: underline;
}

@media screen and (max-width: 850px) {
.ninety img {
  width: 100% !important;
}

.ninety .big_word{
  font-size: 0.8em;
  font-weight: bold;
}

.ninety .download {
	  font-size: 1em;
	  font-weight: bold;
	  color: #000;
	  text-decoration: none;
}

#tategakiMenu{

}

#tategakiMenu li{
  font-size: 0.9em !important;
  margin-right: 0.1% !important;
  margin-left: 0 !important;
}

}

/* 20250418 TwitterアイコンをXアイコンに差し替え */
.fa.fa-twitter {
  position: relative;
  color: navy;
}

.fa.fa-twitter:before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background-image: url("../img/x-icon.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  font-family: initial;
  transition: all 0.35s;
}

.fa.fa-twitter {
  font-size: 2em;
  position: relative;
  top: 3px;
}
.fa.fa-twitter::before {
  width: 1em;
  height: 1em;
}

.fa.fa-twitter:hover:before {
  filter: drop-shadow(1px 1px 1px rgba(136, 136, 136, 0.6));
}

.mos0 .fa.fa-twitter:before {
  background-image: url("../img/x-icon-white.svg");
  filter: drop-shadow(3px 2px 6px #888);
  transition: filter 0.3s ease;
}

.mos0 .fa.fa-twitter:hover:before {
  filter: drop-shadow(5px 5px 8px yellow);
}

.fa.fa-twitter.fa-3x {
  font-size: 3em;
}

.effect-goliath .fa.fa-twitter:before {
  background-image: url("../img/x-icon-white.svg");
}