/* CSS Document for Screens */
@import url('https://fonts.googleapis.com/css2?family=Atma:wght@400;500;600;700&display=swap');
body { font-family: "Atma"; font-size: 16px; font-weight: 500; color: #006666; margin: 0; padding: 0}

/* Text */

h1{margin: 0 0 1em 0; font-size:2.8em; font-weight: 700}
h2{margin: 0 0 .5em 0; font-size:1.6em; font-weight: 700; line-height: 1.1em}
h3{margin: 0 0 .5em 0; font-size:1.3em; font-weight: 700}
h3{margin: 0 0 1.5em 0; font-size:1em; font-weight: 700}

p{margin: 0 0 1em 0}

a{color: #00b3b3}
a:visited{color: #00e6e6}

a.btn{font-size: 1.2em; text-decoration: none; color: #fff; border: 1px solid #fff; padding:4px 15px; transition: background-color .5s;}
a.btn:hover{background-color: rgba(0,0,0,.3);}

/* Header */
header{height: 430px; background: #557abc url(/banner/1200.jpg) no-repeat center bottom; position: relative}

header a.logo{
  z-index: 1;
  position: absolute;
  display: block; width:220px; height:255px;
  background: url(/banner/logo.svg) no-repeat 0 0; background-size:contain;
  top: 15px; left: 20px
  }
  
header a.logo span {display: none;}

header div.name {position: absolute; width: 42%; top: 130px; left: 55%}
header div.name h1 {line-height: 1em; margin: 0 0 30px 0; color:#fff}

/* Section- All */
section {padding: 0 30px; }
section::after {content:''; display: block; clear: both;}

/* Section- Main */
section.main{margin-top: 20px; margin-bottom: 30px; padding: 0;}
section.main aside{width: 33%; float: left; text-align: center;}
section.main .content{margin: 15px; background: no-repeat center top; background-size: 75px 75px; padding-top: 85px}
section.main aside h3 a {text-decoration: none;}
section.main aside h3 a:hover {text-decoration: underline;}

section.main aside .content.trans {background-image: url(/icon/trans.svg)}
section.main aside .content.mug {background-image: url(/icon/mug.svg)}
section.main aside .content.dog {background-image: url(/icon/dog.svg)}

/* Section- Atmosphere */
section.atmosphere {background-color: #006666; padding-top: 30px; padding-bottom: 30px; color: #fff}
section.atmosphere article {padding: 0 20px 0 465px; background: url(pic/atmosphere.jpg) no-repeat 0 5px; min-height: 250px}

/* Section- Animals */
section.animals {background-color: #ebfafa; position: relative; }
section.animals aside {width: 35%; float: left;}
section.animals aside .content {padding: 30px 30px 20px 0;}
section.animals aside .content img {display: block; margin-bottom: 15px; width: 70%}

section.animals aside .content h4 {margin-bottom: 0;}
section.animals aside .content p {margin-bottom: .5em;}
section.animals aside .content a {display: inline-block; color: #00b3b3; font-weight: 700;}

section.animals blockquote {
  margin: 0; width: 32%;
  color: #444;
  background-color:#fff;
  position: absolute; bottom:0; right: 4%;
  }
  
section.animals blockquote p{ margin: 30px 30px 20px 50px}

section.animals blockquote p.quote {font-style: italic; font-size:1.2em;}
section.animals blockquote p.credit {
  color: #777;
  font-size: .9em; margin-top: 0; padding-left: 20px; line-height: 1.3em;
  position: relative;}
  
section.animals blockquote::before {
  content:'\201c'; color:#006666;
  position: absolute;
  top: 10px; left: 8px;
  font-size: 5em;
  font-family: serif
  }
  
section.animals blockquote p.quote::after {content:'\201d'; font-family: serif; }
section.animals blockquote p.credit::before {content:'\2014'; position: absolute; top: -1px; left: 0; }
  
/* Nav */
nav {
  background-color: rgba(0, 0, 0, .25);
  position: absolute;
  top: 0; left: 0;
  padding: 50px 0 0 0;
  width: 100%
  }
  
nav::after {content:''; display: block; clear: both;}

nav ul { list-style: none; margin: 0; padding: 0;}

nav ul li:hover {background-color: #006666}
nav ul li:hover > ul {display: block;}

nav ul li a {
  display: inline-block;
  color: #fff;
  padding: 10px 20px;
  text-decoration: none;
  width: 125px;
  position: relative;
  }
  
nav ul li a:visited {color: #fff}
  
nav ul li a:hover {background-color: #009999}

nav ul ul { position: absolute; top: 100%; background-color: #006666; display: none;}

nav ul ul li { position: relative; }

nav ul ul ul { left: 100%; top: 0}


/* top-level*/
nav > ul { padding-left: 250px; }
nav > ul > li {float: left; }
nav > ul > li > a { width: auto; padding: 10px 20px 15px 20px; }
  
/* Footer */
  footer {font-size: .8em; margin: 40px; color: #000}