/*
Theme Name: children-house
Theme URI: https://children-house.nanrin.com/
Description: Our theme is designed for a children-house
Version: 1.0
Author: toshiaki tokita
Author URI: https://children-house.nanrin.com/
*/

/* # ===========================
 * ress.css • v2.0.2
 * MIT License
 * github.com/filipelinhares/ress
# =========================== */


html {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS */
  word-break: break-word;
  -moz-tab-size: 4;
  tab-size: 4;
}

*,
::before,
::after {
  background-repeat: no-repeat; /* Set `background-repeat: no-repeat` to all elements and pseudo elements */
  box-sizing: inherit;
}

::before,
::after {
  text-decoration: inherit; /* Inherit text-decoration and vertical align to ::before and ::after pseudo elements */
  vertical-align: inherit;
}

* {
  padding: 0; /* Reset `padding` and `margin` of all elements */
  margin: 0;
}


hr {
  overflow: visible; /* Show the overflow in Edge and IE */
  height: 0; /* Add the correct box sizing in Firefox */
}

details,
main {
  display: block; /* Render the `main` element consistently in IE. */
}

summary {
  display: list-item; /* Add the correct display in all browsers */
}

small {
  font-size: 80%; /* Set font-size to 80% in `small` elements */
}

[hidden] {
  display: none; /* Add the correct display in IE */
}

abbr[title] {
  border-bottom: none; /* Remove the bottom border in Chrome 57 */
  /* Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari */
  text-decoration: underline;
  text-decoration: underline dotted;
}

a {
  background-color: transparent; /* Remove the gray background on active links in IE 10 */
}

a:active,
a:hover {
  outline-width: 0; /* Remove the outline when hovering in all browsers */
}

code,
kbd,
pre,
samp {
  font-family: monospace, monospace; /* Specify the font family of code elements */
}

pre {
  font-size: 1em; /* Correct the odd `em` font sizing in all browsers */
}

b,
strong {
  font-weight: bolder; /* Add the correct font weight in Chrome, Edge, and Safari */
}

/* https://gist.github.com/unruthless/413930 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

input {
  border-radius: 0;
}

/* Replace pointer cursor in disabled elements */
[disabled] {
  cursor: default;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto; /* Correct the cursor style of increment and decrement buttons in Chrome */
}

[type="search"] {
  -webkit-appearance: textfield; /* Correct the odd appearance in Chrome and Safari */
  outline-offset: -2px /* Correct the outline style in Safari */
}

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; /* Remove the inner padding in Chrome and Safari on macOS */
}

textarea {
  overflow: auto; /* Internet Explorer 11+ */
  resize: vertical; /* Specify textarea resizability */
}

button,
input,
optgroup,
select,
textarea {
  font: inherit; /* Specify font inheritance of form elements */
}

optgroup {
  font-weight: bold; /* Restore the font weight unset by the previous rule */
}

button {
  overflow: visible; /* Address `overflow` set to `hidden` in IE 8/9/10/11 */
}

button,
select {
  text-transform: none; /* Firefox 40+, Internet Explorer 11- */
}

/* Apply cursor pointer to button elements */
button,
[type="button"],
[type="reset"],
[type="submit"],
[role="button"] {
  cursor: pointer;
  color: inherit;
}

/* Remove inner padding and border in Firefox 4+ */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/* Replace focus style removed in the border reset above */
button:-moz-focusring,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  outline: 1px dotted ButtonText;
}

button,
html [type="button"], /* Prevent a WebKit bug where (2) destroys native `audio` and `video`controls in Android 4 */
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; /* Correct the inability to style clickable types in iOS */
}

/* Remove the default button styling in all browsers */
button,
input,
select,
textarea {
  background-color: transparent;
  border-style: none;
}

/* Style select like a standard input */
select {
  -moz-appearance: none; /* Firefox 36+ */
  -webkit-appearance: none; /* Chrome 41+ */
}

select::-ms-expand {
  display: none; /* Internet Explorer 11+ */
}

select::-ms-value {
  color: currentColor; /* Internet Explorer 11+ */
}

legend {
  border: 0; /* Correct `color` not being inherited in IE 8/9/10/11 */
  color: inherit; /* Correct the color inheritance from `fieldset` elements in IE */
  display: table; /* Correct the text wrapping in Edge and IE */
  max-width: 100%; /* Correct the text wrapping in Edge and IE */
  white-space: normal; /* Correct the text wrapping in Edge and IE */
  max-width: 100%; /* Correct the text wrapping in Edge 18- and IE */
}

::-webkit-file-upload-button {
  /* Correct the inability to style clickable types in iOS and Safari */
  -webkit-appearance: button;
  color: inherit;
  font: inherit; /* Change font properties to `inherit` in Chrome and Safari */
}

img {
  border-style: none; /* Remove border when inside `a` element in IE 8/9/10 */
}

/* Add the correct vertical alignment in Chrome, Firefox, and Opera */
progress {
  vertical-align: baseline;
}

svg:not([fill]) {
  fill: currentColor;
}


/* Hide content from screens but not screenreaders */
@media screen {
  [hidden~="screen"] {
    display: inherit;
  }
  [hidden~="screen"]:not(:active):not(:focus):not(:target) {
    position: absolute !important;
    clip: rect(0 0 0 0) !important;
  }
}

/* Specify the progress cursor of updating elements */
[aria-busy="true"] {
  cursor: progress;
}

/* Specify the pointer cursor of trigger elements */
[aria-controls] {
  cursor: pointer;
}

/* Specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements */
[aria-disabled] {
  cursor: default;
}
/* # ===========================
    # End of ress.css

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







/* # ===========================
      smartPhone  */
    @media screen and (max-width: 640px) {

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


table {
     border-collapse: collapse;
     border-spacing: 0;
     empty-cells: show;
     font-size: inherit; }
@font-face {
  font-family: "uzupen";
  src: url("../font/uzupen.woff") format("woff");
    }
body {
     font-family: "M PLUS 1p", "Noto Sans JP", "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", Arial, Helvetica, Verdana, sans-serif; }
h1{
    font: 1.5em   "M PLUS 1p";
    color: white;
    text-shadow: 3px 4px 3px #010101;
    }
h2{
        font: 600 1.1em   "M PLUS 1p";
        color: #555;
        }
h3{
        font: 600 1.0em   "M PLUS 1p";
        color: #555;
        }
h3::before{
        content: url(../images/icon_bear14px.png) ;
        color: #555;
        }
/*h4 for footer*/
h4{
        font: 600 0.7em   "M PLUS 1p";
        color: #555;
        }
/*h5 for caption*/
h5,figcaption{
        font: 600 0.8em   "M PLUS 1p";
        color: #555;
        text-align: center;
        }
p{
        font: 0.9em   "M PLUS 1p";
        color: #555;
        line-height: 2.0em;
        }
a {
        font: 1.0em   "M PLUS 1p";
        font-weight: 600;
        color: #555;
        text-decoration: none;
       /*color: #328bda;
       text-decoration: underline;*/
        }
a:hover {
         color: #328bda;
         text-decoration: none; }
a:active, a:focus {
         outline: none; }
h1 rt {
  margin-bottom: -.5em;
  transform: translateY(.5em);
}
 /* # ===========================
     #  smartPhone
     # Wrap, Header & GlobalNavi
     # =========================== */

body {
         background-image: url(../images/RoughTextureShiningGolden.jpg);
         /*background-size: 100% 100%;*/
         background-repeat: repeat;
   }
.wrap{
        width:360px;
        margin: auto;
}
header{
        width: 360px;
        height:220px;
        background-image: url(../images/background_header_360px.jpg);
}
header h1{
        width: 320px;
        height: 140px;
        margin: 0 0 0 10px;
        padding: 85px 0 0 80px;
        text-shadow: -1px -1px 1px #000;
        color: wheat;
        transform: rotate(350deg);
        background-image: url(../images/background_logo_320px.png);
}
header img{
        float: right;
        width: 100px;
        height: auto;
        margin: -10px 25px 10px 0;
}
main{
        width: 360px;
        background-image: url(../images/background_main_360px.jpg);
        background-repeat: repeat-y;
        padding-bottom: 40px;
        }
.GlobalNavi{
        margin: 0 auto 20px auto;
        padding: 20px 40px;
        width: 280px;
        background-image:url(../images/komorebi.jpg);
        background-clip:padding-box;
        background-size: 100% 100%;
        }
.GlobalNavi ul li{
        height: auto;
        margin:0 0 15px 0;
        list-style-type: none;
        }
.GlobalNavi ul li a {
        display: block;
        width: 100%;
        height: 100%;
        padding-top: 9px;
        text-align: center;
}
.GlobalNavi ul li.Opened{
        background-image: url(../images/background_GlovalNavi_Opened_280px.png);
        background-size: 100% 100%;
        border-radius: 5px;
        box-shadow: 1px 2px 2px 2px #555555
}
.GlobalNavi ul li.NotOpened{
        background-image: url(../images/background_GlovalNavi_Closed_280px.png);
        background-size: 100% 100%;
        border-radius: 5px;
        box-shadow: 1px 2px 2px 2px #555555;
}
.GlobalNavi ul li.Opened:hover,
.GlobalNavi ul li.NotOpened:hover {
        /*color: #b22222 ; 効かない！*/
        animation-name: shake;
        animation-duration: 100ms;
        animation-timing-function: linear;
        animation-iteration-count:  3;
    }
      @keyframes shake {
        0% { transform: translate(3px, 0) rotate(0deg); }
        10% { transform: translate(2px, 0) rotate(0deg); }
        20% { transform: translate(1px, 0) rotate(0deg); }
        30% { transform: translate(0px, 0) rotate(0deg); }
        40% { transform: translate(-1px, 0) rotate(0deg); }
        50% { transform: translate(-2px, 0) rotate(0deg); }
        60% { transform: translate(-3px, 0) rotate(0deg); }
        70% { transform: translate(-2px, 0) rotate(0deg); }
        80% { transform: translate(-1px, -0) rotate(0deg); }
        90% { transform: translate(0px, 0) rotate(0deg); }
        100% { transform: translate(1px, 0) rotate(0deg); }
        }

article {
        clear: both;
        width: 300px;
        height: auto;
        margin: 40px auto 0 auto;
        padding: 30px 20px;
        background-image: url(../images/leafnote_300px.png);
        background-repeat: repeat-y;
        box-shadow: 2px 4px 8px 3px #888888;
        overflow:auto;
   }
   .PageTitle {
           margin-top: 20px;
           }

   .PageTitle p{
           margin-top: 20px;
   }

   /* # ===========================
       #  smartPhone
       # End of Wrap, Header & GlobalNavi
       # Top page for PageTitle & HowToUse
       # =========================== */

.information {
        width: 250px;
        margin-top: 20px;
        }
.information h3{
        margin-top: 20px;
}
.information p{
        padding-left: 20px;
}
.Illustration_for_Information{
        width: 250px;
        margin-top: 50px;
}
.Illustration_for_Information img{
        width: 100%;
        height: auto;
}
.HowToUse {
        width: 250px;
        margin-top: 20px;
        }
.HowToUse p {
        margin-top: 20px;
        padding-left: 1em;
        text-indent: -1.0em;
        }
.HowToUse p::before{
        content: "* ";
        color: #555;
        }
.Illustration_for_HowToUse{
        width: 250px;
        margin-top: 50px;
}
.Illustration_for_HowToUse img{
        width: 100%;
        height: auto;
}

   /* # ===========================
       #  smartPhone
       # End of  Top page for PageTitle & HowToUse
       # 2nd page for userguide
       # =========================== */
.facility {
        margin-top: 20px;
        }
.facilityInformation {
        margin-top: 20px;
        width: 250px;
        }
.facilityInformation h3{
        margin-top: 30px;
        }
.facilityInformation p{
        padding-left: 20px;
        }
.facilityInformation figure img{
        margin: auto;
        padding: 40px 0 0 20px;
        width: 250px;
        height: auto;
        }
.facilityInformation img{
        margin: 50px 90px 0 90px;
        width: 80px;
        height: auto;
        }
.facility_Pictures{
        height: auto;
        margin: 30px 20px 0 20px;
        }
.facility_Pictures img{
        width: 220px;
        height: auto;
        margin: 20px 0 0 0;
        }
.eventSchedule {
        margin-top: 20px;
        width: 250px;
        }
.eventSchedule h3{
        margin-top: 10px;
        }
.eventSchedule p{
        padding-left: 20px;
        }
.Illustration_for_eventSchedule1{
        height: auto;
        margin: 30px 20px 0 20px;
        }
.Illustration_for_eventSchedule1 figure img{
        width: 220px;
        height: auto;
        margin: auto;
        }
.Illustration_for_eventSchedule1 figcaption{
        /*width: 140px;*/
        margin-bottom: 20px;
        }
.Illustration_for_eventSchedule2{
        height: auto;
        margin: 30px 20px 0 20px;
        }
.Illustration_for_eventSchedule2 figure img{
        width: 220px;
        height: auto;
        margin: auto;
        }
.Illustration_for_eventSchedule2 figcaption{
        /*width: 140px;*/
        margin-bottom: 20px;
        }

   /* # ===========================
       #  smartPhone
       # End of  2nd page for userguide
       # 3rd page for access
       # =========================== */
.MapAndAppearance {
        margin-top: 20px;
        width: 300px;
        }
.MapAndAppearance p{
        width: 250px;
        }
.map {
        margin: 20px auto 0 auto;
        }
 .map img{
        padding: 40px 0 0 0;
        width: 250px;
        height: auto;
        }
.map h5{
       width: 250px;
       }
.map iframe{
      margin: 40px 0 0 0;
      width: 250px;
      height: 200px;
      }
.appearance{
        width: 220px;
        height: auto;
        margin: 43px auto 0 auto;
        }
.appearance img{
        width: 220px;
        height: auto;
        margin-top: 20px;
        }
.appearance p{
        width: auto;
        height: auto;
        font: 0.9em   "M PLUS 1p";
        font-weight: 600;
        text-align: center;
        }
.SomeComingWay {
      column-count: 1;
        width: 100%;
        margin-top: 20px;
        }
.SomeComingWay h3{
/*       margin-top: 10px;*/
       }
.SomeComingWay p{
       padding-left: 20px;
       margin-bottom: 10px;
       }
#Illustration_for_HowToCome_BG {
    position: relative ;
    margin-top: 20px;
    margin-left:-40px;
    height: 120px;
    }
#Illustration_for_HowToCome_BG img {
    float: right;
    height: 100%;
    }
#Illustration_for_HowToCome img{
    width: 222px;
    height: 120px;
    position: absolute; top:0px; left:80px  ;
}
#Illustration_for_HowToCome img:hover{
  -webkit-animation-name: "shake";
  -webkit-animation-duration: .1s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: 3;
  animation-name: "shake";
  animation-duration: .1s;
  animation-timing-function: linear;
  animation-iteration-count: 3;
}   
    @-webkit-keyframes shake {
        0% { transform: translate(3px, 0) rotate(0deg); }
        25% { transform: translate(0px, 0) rotate(0deg); }
        50% { transform: translate(-3px, 0) rotate(0deg); }
        75% { transform: translate(0px, 0) rotate(0deg); }
        100% { transform: translate(3px, 0) rotate(0deg); }
}
    @keyframes shake {
        0% { transform: translate(3px, 0) rotate(0deg); }
        50% { transform: translate(-3px, 0) rotate(0deg); }
        75% { transform: translate(0px, 0) rotate(0deg); }
        100% { transform: translate(3px, 0) rotate(0deg); }
}


#Illustration_for_HowToCome.move img{
  -webkit-animation-name: "bus_drive";
  -webkit-animation-duration: 2s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-name: "bus_drive";
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}
@-webkit-keyframes "bus_drive" {
    0% {left: 80px; }
  100% {left: -200px; }
}
@keyframes "bus_drive" {
    0% {left: 80px; }
  100% {left: -200px; }
}

/*
#Illustration_for_HowToCome img{
    width: 222px;
    height: 120px;
    position: absolute; top:0px; left:100px  ;
  -webkit-animation-name: "bus_drive";
  -webkit-animation-duration: 4s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: 3;
  animation-name: "bus_drive";
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-iteration-count: 3;
}

@-webkit-keyframes "bus_drive" {
    0% {left: 400px; }
   25% {left: 250px; }
   50% {left: 100px; }
   75% {left: -50px; }
  100% {left: -200px; }
}
@keyframes "bus_drive" {
    0% {left: 489px; }
   25% {left: 300px; }
   50% {left: 100px; }
   75% {left: -100px; }
  100% {left: -300px; }
}
*/
   /* # ===========================
   #  smartPhone
   # End of  3nd page for access
   # 4th page for FAQ
   # =========================== */
.faq1,.faq2 {
        margin-top: 20px;
        }
.faqForChildren {
        margin-top: 20px;
        }
.faqForChildren h3{
        margin-top: 30px;
        }
.faqForChildren p{
        padding-left: 20px;
        }
.faq1 .kintaro img {
        width: auto;
        height: 150px;
        margin: 20px auto 30px auto;
        }
.kodomo_ji p{  
        text-align: center;
        font: 3.0em   "uzupen";
}
.faqForParent {
        margin-top: 20px;
        }
.faqForParent h3{
        margin-top: 30px;
        }
.faqForParent p{
        padding-left: 20px;
        }


   /* # ===========================
   #  smartPhone
   # End of  4th page for access
   # footer
   # =========================== */


article {
  position: relative;
}
.PageTitle h2 {
  padding-left: 8px;
}

.windmill_1,
.windmill_2 {
  position: absolute;
  top: 49px;
  left: 0px;
  width: 50px;
  height: 50px;
  background-image: url(../images/kazaguruma1_shadow.png);
  background-position: 2px 2px;
  background-size: 28px 28px;
}
.windmill_1 img,
.windmill_2 img {
  width: 26px;
  height: 26px;
/*  filter: drop-shadow(3px 5px 1px #555); 影まで回ってしまう！*/
  animation: rotation 2s ease-out 1;
  transform-style: preserve-3d;
} 
@keyframes rotation {
  0%   { 
  transform: translate(0,0) rotateZ(0deg); 
  opacity: 0; }
  100% { 
  transform: translate(0,0)  rotateZ(-1080deg); 
  opacity: 1.0; }
 }
 

footer{
        clear: both;
        font-size: 0.8em;
        width: 360px;
        height: 46px;
        text-align: right;
        padding: 0 20px;
        background-image: url(../images/background_footer_360px.jpg);
}
} /*end of smartphone*/





/* # ===========================
      PC  */
    @media screen and (min-width: 641px) {

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


table {
     border-collapse: collapse;
     border-spacing: 0;
     empty-cells: show;
     font-size: inherit; }
@font-face {
  font-family: "uzupen";
  src: url("../font/uzupen.woff") format("woff");
    }
body {
     font-family: "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", Arial, Helvetica, Verdana, sans-serif; }
h1{
    font: 2.0em "Noto Sans JP";
    color: white;
    text-shadow: 3px 4px 3px #010101;
    }
h2{
        font: 600 1.2em  "Meiryo";
        color: #333;
        }
h3{
        font: 600 1.0em  "Meiryo";
        color: #333;
        }
h3::before{
        content: url(../images/icon_bear14px.png) ;
        color: #333;
        }
/*h4 for footer*/
h4{
        font: 600 0.7em  "Meiryo";
        color: #333;
        }
/*h5 for caption*/
h5,figcaption{
        font: 600 0.8em  "Meiryo";
        color: #333;
        text-align: center;
        }
p{
        font: 1.0em  "Meiryo";
        color: #333;
        line-height: 2.0em;
        }
a {
        font: 0.9em  "Meiryo";
        font-weight: 600;
        color: #333;
        text-decoration: none;
       /*color: #328bda;
       text-decoration: underline;*/
        }
a:hover {
         color: #328bda;
         text-decoration: none; }
a:active, a:focus {
         outline: none; }
h1 rt {
  margin-bottom: -.5em;
  transform: translateY(.5em);
}

 /* # ===========================
     #  PC
     # Wrap, Header & GlobalNavi
     # =========================== */
body {
         background-image: url(../images/RoughTextureShiningGolden.jpg);
         /*background-size: 100% 100%;*/
         background-repeat: repeat;
   }
.wrap{
        width:800px;
        margin: auto;
}
header{
        width: 800px;
        height: 260px;
        background-image: url(../images/background_header.jpg);
}
header h1{
        float: left;
        color: wheat;
        width: 500px;
        height: 250px;
        margin: 2px 0 0 15px;
        padding: 135px 0 0 160px;
        transform: rotate(350deg);
        background-image: url(../images/background_logo.png);
}
header img{
        float: right;
        margin: 50px 25px 0 0;
}
main{
        clear: both;
        width: 800px;
        background-image: url(../images/background_main.jpg);
        background-repeat: repeat-y;
        padding-bottom: 40px;
        }
.GlobalNavi{
                margin: 0 0 0 50px;
        }
.GlobalNavi ul li{
        float: left;
        width: 140px;
        height: 33px;
        margin:0 0 20px 30px;
        list-style-type: none;
        }
.GlobalNavi ul li a{
        display: block;
        width: 100%;
        height: 100%;
        padding-top: 9px;
        text-align: center;
/*        vertical-align: middle; blockでは使えない*/
      }
.GlobalNavi ul li.Opened{
        background-image: url(../images/background_GlovalNavi_Opened.png);
        background-size: 100% 100%;
        border-radius: 5px;
        box-shadow: 1px 2px 3px 2px #666;
		}
.GlobalNavi ul li.NotOpened{
        background-image: url(../images/background_GlovalNavi_Closed.png);
        background-size: 100% 100%;
        border-radius: 5px;
        box-shadow: 1px 2px 3px 2px #666;
		}
.GlobalNavi ul li.Opened:hover,
.GlobalNavi ul li.NotOpened:hover {
        /*color: #b22222 ; 効かない！*/
        animation-name: shake;
        animation-duration: 100ms;
        animation-timing-function: linear;
        animation-iteration-count:  3;
    }
/*    このチカチカは動くけど、うっとうしいので搭載しない！  
      @keyframes shake {
        0% {opacity: 0; }
        100% {opacity: 1; }
            }*/
      @keyframes shake {
        0% { transform: translate(3px, 0) rotate(0deg); }
        10% { transform: translate(2px, 0) rotate(0deg); }
        20% { transform: translate(1px, 0) rotate(0deg); }
        30% { transform: translate(0px, 0) rotate(0deg); }
        40% { transform: translate(-1px, 0) rotate(0deg); }
        50% { transform: translate(-2px, 0) rotate(0deg); }
        60% { transform: translate(-3px, 0) rotate(0deg); }
        70% { transform: translate(-2px, 0) rotate(0deg); }
        80% { transform: translate(-1px, -0) rotate(0deg); }
        90% { transform: translate(0px, 0) rotate(0deg); }
        100% { transform: translate(1px, 0) rotate(0deg); }
        }

article {
        clear: both;
        width: 720px;
        height: auto;
        margin: 80px auto 0 auto;
        padding: 30px 50px;
        background-image: url(../images/leafnote.png);
        background-repeat: repeat-y;
        box-shadow: 2px 4px 8px 3px #888888;
        overflow:auto;
   }
   .PageTitle {
           margin-top: 20px;
           }

   .PageTitle p{
           margin-top: 20px;
   }

   /* # ===========================
       #  PC
       # End of Wrap, Header & GlobalNavi
       # Top page for PageTitle & HowToUse
       # =========================== */

.information {
        float: left;
        width: 300px;
        margin-top: 20px;
        }
.information h3{
        margin-top: 20px;
}
.information p{
        padding-left: 20px;
}
.Illustration_for_Information{
        float: left;
        width: 320px;
        height: auto;
        margin-top: 100px;
}
.HowToUse {
        margin-top: 20px;
        float: left;
        }
.HowToUse p {
        width: 300px;
        margin-top: 20px;
        padding-left: 1em;
        text-indent: -1.0em;
        }
.HowToUse p::before{
        content: "* ";
        color: #333;
        }
.Illustration_for_HowToUse{
        float: right;
        width: 280px;
        height: auto;
        margin-top: 100px;
}

   /* # ===========================
       #  PC
       # End of  Top page for PageTitle & HowToUse
       # 2nd page for userguide
       # =========================== */
.facility {
        margin-top: 20px;
        }
.facilityInformation {
        float: left;
        width: 300px;
        margin-top: 20px;
        }
.facilityInformation h3{
        margin-top: 30px;
        }
.facilityInformation p{
        padding-left: 20px;
        }
.facilityInformation figure img{
        padding: 40px 0 0 20px;
        width: 340px;
        height: auto;
        }
.facilityInformation img{
        padding: 80px 0 0 20px;
        width: 160px;
        height: auto;
        }
.facility_Pictures{
        float: right;
        width: 280px;
        height: auto;
        margin: 30px auto 0 auto;
        }
.facility_Pictures img{
        width: 220px;
        height: auto;
        margin: 20px 0 0 30px;
        }
.eventSchedule {
        float: left;
        width: 300px;
        margin-top: 20px;
        }
.eventSchedule h3{
        margin-top: 10px;
        }
.eventSchedule p{
        padding-left: 20px;
        }
.Illustration_for_eventSchedule1,.Illustration_for_eventSchedule2{
        float: left;
        width: 160px;
        height: auto;
        margin-top: 30px;
        }
.Illustration_for_eventSchedule1 figcaption,.Illustration_for_eventSchedule2 figcaption{
        /*width: 140px;*/
        margin-bottom: 20px;
        }

   /* # ===========================
       #  PC
       # End of  2nd page for userguide
       # 3rd page for access
       # =========================== */
.MapAndAppearanc {
        margin-top: 20px;
        }
.map {
        float: left;
        width: 300px;
        margin-top: 20px;
        }
 .map img{
        padding: 40px 0 0 20px;
        width: 340px;
        height: auto;
        }
.map h5{
       padding: 0 0 0 20px;
       width: 340px;
       }
.map iframe{
      margin: 40px 0 0 0;
      }
.appearance{
        float: right;
        width: 220px;
        height: auto;
        margin-top: 43px;
        }
.appearance img{
        width: 220px;
        height: auto;
        margin-top: 20px;
        }
.appearance p{
        width: auto;
        height: auto;
        font: 0.9em  "Meiryo";
        font-weight: 600;
        text-align: center;
        }
.SomeComingWay {
	    column-count: 2;
        width: 100%;
        margin-top: 20px;
        }
.SomeComingWay h3{
/*       margin-top: 10px;*/
       }
.SomeComingWay p{
       padding-left: 20px;
       margin-bottom: 10px;
       }
#Illustration_for_HowToCome_BG {
    position: relative ;
    width: 620px;
    margin-top: 50px;
    margin-left:-40px;
    height: 120px;
    }

#Illustration_for_HowToCome img{
    width: 222px;
    height: 120px;
    position: absolute; top:0px; left:400px  ;
}
#Illustration_for_HowToCome img:hover{
  -webkit-animation-name: "shake";
  -webkit-animation-duration: .1s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: 3;
  animation-name: "shake";
  animation-duration: .1s;
  animation-timing-function: linear;
  animation-iteration-count: 3;
}   
    @-webkit-keyframes shake {
        0% { transform: translate(3px, 0) rotate(0deg); }
        25% { transform: translate(0px, 0) rotate(0deg); }
        50% { transform: translate(-3px, 0) rotate(0deg); }
        75% { transform: translate(0px, 0) rotate(0deg); }
        100% { transform: translate(3px, 0) rotate(0deg); }
}
    @keyframes shake {
        0% { transform: translate(3px, 0) rotate(0deg); }
        50% { transform: translate(-3px, 0) rotate(0deg); }
        75% { transform: translate(0px, 0) rotate(0deg); }
        100% { transform: translate(3px, 0) rotate(0deg); }
}


#Illustration_for_HowToCome.move img{
  -webkit-animation-name: "bus_drive";
  -webkit-animation-duration: 4s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-name: "bus_drive";
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}
@-webkit-keyframes "bus_drive" {
	  0% {left: 400px; }
	 25% {left: 200px; }
	 50% {left: 000px; }
	 75% {left: -200px; }
	100% {left: -400px; }
}
@keyframes "bus_drive" {
    0% {left: 400px; }
   25% {left: 200px; }
   50% {left: 000px; }
   75% {left: -200px; }
  100% {left: -400px; }
}

   /* # ===========================
   #  PC
   # End of  3nd page for access
   # 4th page for FAQ
   # =========================== */
.faq1,.faq2 {
        margin-top: 20px;
        }
.faqForChildren {
        margin-top: 20px;
        }
.faqForChildren h3{
        margin-top: 30px;
        }
.faqForChildren p{
        padding-left: 20px;
        }
.kodomo_ji p{  
        text-align: center;
        font: 5.0em   "uzupen";
        }
.faqForParent {
        margin-top: 20px;
        }
.faqForParent h3{
        margin-top: 30px;
        }
.faqForParent p{
        padding-left: 20px;
        }


   /* # ===========================
   # PC
   # End of  4th page for access
   # Animation & footer
   # =========================== */

article {
	position: relative;
}

.windmill_1,
.windmill_2 {
  position: absolute;
  top: 47px;
  left: 15px;
  width: 50px;
  height: 50px;
  background-image: url(../images/kazaguruma1_shadow.png);
  background-position: 2px 2px;
  background-size: 28px 28px;
}
.windmill_1 img,
.windmill_2 img {
  width: 26px;
  height: 26px;
/*  filter: drop-shadow(3px 5px 1px #555); 影まで回ってしまう！*/
  animation: rotation 2s ease-out 1;
  transform-style: preserve-3d;
} 
@keyframes rotation {
  0%   { 
  transform: translate(0,0) rotateZ(0deg); 
  opacity: 0; }
  100% { 
  transform: translate(0,0)  rotateZ(-1080deg); 
  opacity: 1.0; }
 }
 




footer{
        clear: both;
        width: 800px;
        height: 46px;
        text-align: right;
        padding: 14px 50px;
        background-image: url(../images/background_footer.jpg);
}
} /*end of PC*/