@import url('https://fonts.googleapis.com/css2?family=Akaya+Kanadaka&family=Noto+Sans+JP&family=Yellowtail&display=swap');
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;}
body {line-height:1;}
ol, ul {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after,
q:before, q:after {content:'';content:none;}
table {border-collapse:collapse;border-spacing:0;}
body, html, .main {height: 100%;}

h1{
  color:#fff;
  font-family: 'Yellowtail', cursive;
  font-size:10vh;
  text-shadow: 4px 4px 2px rgba(0,0,0,0.5);
}
@media only screen and (min-aspect-ratio: 4/3) {
  h2{
    color:#00c9ff;
    font-family: 'Akaya Kanadaka', cursive;
    font-size:7.5vh;
    margin-bottom:-1.5vh;
    text-align: center;
    text-shadow: 4px 4px 2px rgba(0,0,0,0.5);
    width:100%;
  }
}
@media only screen and (max-aspect-ratio: 4/3) {
  h2{
    color:#00c9ff;
    font-family: 'Akaya Kanadaka', cursive;
    font-size:7.5vw;
    margin-bottom:3vw;
    text-align: center;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.5);
    width:100%;
  }
}
h2 span{
  color:#ff33de;
}
h3{
  color:#666;
  font-family: 'Akaya Kanadaka', cursive;
  font-size:4.5vh;
}
@media only screen and (min-aspect-ratio: 4/3) {
  body{
    color:#000;
    font-family: 'Noto Sans JP', sans-serif;
    /* font-size:2.1vh; */
  }
}
@media only screen and (max-aspect-ratio: 4/3) {
  body{
    color:#000;
    font-family: 'Noto Sans JP', sans-serif;
    /* font-size:3vw; */
  }
}
a{
  color:#00c9ff;
  font-family: 'Noto Sans JP', sans-serif;
  text-decoration:none;
}
a:hover{
  color:#444;
  cursor:pointer;
}
.c{clear:both;}

@media only screen and (min-aspect-ratio: 4/3) {
  .header{
    background-image:url('images/background-flamingo.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height:50vh;
    position:relative;
  }
  .header h1{
    position:absolute;
    top:calc(50% - 5vh);
    left:10vw;
  }
  .header p{
    color:#fff;
    position:absolute;
    top:calc(50% + 8vh);
    left:11vw;
    text-shadow: 4px 4px 2px rgba(0,0,0,0.5);
  }
  .header form{
    display:block;
    position:absolute;
    bottom:2vh;
    right:10vw;
  }
  .header form input{
    background:#fff;
    border:0;
    color:#000;
    font-size:2vh;
    padding:1vh;
    width:15vw;
  }
  ::placeholder{ color:#bbb; opacity:1; }
  :-ms-input-placeholder{ color:#bbb; }
  ::-ms-input-placeholder{ color:#bbb; }
  .header form button{
    background:#00c9ff;
    border:0;
    color:#fff;
    font-size:2vh;
    padding:1vh;
  }
  .header form button:hover{
    background:#ff33de;
    cursor:pointer;
  }
}
@media only screen and (max-aspect-ratio: 4/3) {
  .header{
    background-image:url('images/background-flamingo.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height:50vw;
    position:relative;
  }
  .header h1{
    display:block;
    font-size:18vw;
    position:absolute;
    top:calc(50% - 9vw);
    text-align:center;
    width:100%;
  }
  .header p{
    color:#fff;
    display:block;
    font-size:3.2vw;
    position:absolute;
    top:calc(50% + 14vw);
    text-align:center;
    text-shadow: 4px 4px 2px rgba(0,0,0,0.5);
    width:100%;
  }
  .header form{ display:none; }
}
@media only screen and (min-aspect-ratio: 4/3) {
  .menu{
    background:#fff;
    height:8vh;
  }
  .menu ul{margin-left:11vw;}
  .menu ul li{
    display:inline-block;
    /* font-size:2.4vh; */
    font-size:1.2em;
    height:8vh;
    line-height:8vh;
    margin-right:2.2vw;
  }
}
@media only screen and (max-aspect-ratio: 4/3) {
  .menu{
    background:#fff;
    height:9vw;
  }
  .menu ul{text-align:center;}
  .menu ul li{
    display:inline-block;
    font-size:3vw;
    /* font-size:1.2em; */
    height:9vw;
    line-height:9vw;
    margin:0 3vw;
  }
}
.menu ul li a{color:#000;}
.menu ul li a:hover{color:#00c9ff;}
.menu ul li .yt{color:#da0000;}
.menu ul li .fb{color:#0079e9;}
.menu ul li .ig{color:#d50086;}
.menu ul li .fb:hover, .menu ul li .ig:hover{color:#ccc;}

@media only screen and (min-aspect-ratio: 4/3) {
  .woodsection{
    background-image:url('images/background-wood.png');
    background-repeat:repeat;
    min-height:22vh;
    padding:10vh 10vw;
  }
  .section{
    background:#fff;
    border-radius: 10px;
    -webkit-box-shadow: 0px 4px 2px 0px rgba(0,0,0,0.5);
    box-shadow: 0px 4px 2px 0px rgba(0,0,0,0.5);
    line-height:1.3em;
    padding:5vh;
  }
  .about-left{
    float:left;
    padding:10vh 0;
    width:45%;
  }
  .about-left img{width:100%;}
  .about-right{
    float:right;
    padding:10vh 0;
    width:55%;
  }
  .about-right span{
    color:#ff33de;
    font-weight:bold;
  }
  .videoWrapper {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 */
    padding-top: 25px;
    height: 0;
  }
  .videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
@media only screen and (max-aspect-ratio: 4/3) {
  .woodsection{
    background-image:url('images/background-wood.png');
    background-repeat:repeat;
    min-height:22vh;
    padding:10vh 4vw;
  }
  .section{
    background:#fff;
    border-radius: 10px;
    -webkit-box-shadow: 0px 4px 2px 0px rgba(0,0,0,0.5);
    box-shadow: 0px 4px 2px 0px rgba(0,0,0,0.5);
    line-height:1.3em;
    padding:4vw;
  }
  .about-left{display:none;}
  .about-right{margin:10vh 0;}
  .ytvideo{display:none;}
}

@media only screen and (min-aspect-ratio: 4/3) {
  .footer{
    background-image:url('images/background-palms.png');
    background-repeat:repeat;
    border-top:1vh solid #ccc;
    color:#666;
    font-size:0.8em;
    padding:5vh 10vw;
    text-align:right;
  }
  .footer img{
    display:inline-block;
    height:4.2vh;
    margin-left:-5.2vh;
    margin-top:-1vh;
    position:absolute;
  }
}
@media only screen and (max-aspect-ratio: 4/3) {
  .footer{
    background-image:url('images/background-palms.png');
    background-repeat:repeat;
    border-top:1vh solid #ccc;
    color:#666;
    font-size:2.5vw;
    padding:5vh 0;
    text-align:center;
  }
  .footer img{
    display:none;
  }
}