@charset "utf-8";

html {}
body {
  margin:0;
  padding:0;
  background-color:rgba(239, 255, 255, 1);
}

#header, #footer {
  background-color:rgba(1, 53, 115, 1);
  text-align:center;
  overflow:hidden;
}
#header h1 {
  margin:1.5rem 5% 1rem;
  height:54px;
  background:url(images/logo.webp) center no-repeat;
  background-size:contain;
  font-size:0;
  color:transparent;
}
#header h2 {margin:0.5em 5% 1.5rem;}

#content {
  margin:0 auto;
  max-width:390px;
  background-color:rgba(255, 255, 255, 1);
  overflow:hidden;
}

#footer {}
#ft_message {}
#ft_message p {margin:1em 5%;}

section h1 {margin:1.5em 5%;}
section h2 {
  position:relative;
  margin:2.5em 5% 1.25em;
  border-bottom:1px solid rgba(220, 220, 220, 1);
}
section h2::after {
  content:'';
  position:absolute;
  left:0;
  bottom:-1px;
  width:100px;
  border-bottom:1px solid rgba(1, 53, 115, 1);
}
section h2 span {display:block;}
section h2 span.en {margin-bottom:0.35em;}
section h3 {margin:1.125em 5%;}
section.no h3 {counter-increment:no;}
section.no h3:before {content:counter(no)'. ';}
section p {margin:1em 5%;}
section ul {margin:1.5em 5%;}
section li {margin:0.75em 0;}
section hr {
  margin:1.5em 5%;
  border:none;
  border-top:1px solid rgba(220, 220, 220, 1);
}

/* intro */

#intro h1 span {
  display:block;
  margin:0.5em 0;
}

/* index */

#index {
  background-color:rgba(244, 249, 248, 1);
  overflow:hidden;
}
#index h1 {
  margin:1.5em 5% 2rem;
  text-align:center;
}
#index ul {
  margin:2rem 0;
  padding:0;
  list-style-type:none;
}
#index li {
  margin:0.75rem 5%;
  padding:0;
}
#index li a {
  position:relative;
  display:block;
  padding:1em 1em 1em 3em;
  background-color:rgba(1, 53, 115, 1);
  border-radius:0.4rem;
}
#index li a:hover {background-color:rgba(1, 53, 115, 0.8);}
#index li a::before {
  content:'';
  position:absolute;
  left:1em;
  top:50%;
  translate:0 -50%;
  width:1em;
  height:1em;
  background:url(images/ic_arrow_04.webp) center no-repeat;
  background-size:100%;
}

/* typhoon */

#typhoon {
  padding-bottom:2rem;
  background-color:rgba(255, 201, 1, 1);
  overflow:hidden;
}
#typhoon h2 {
  text-align:center;
  border:none;
}
#typhoon h2::before {
  content:'';
  display:inline-block;
  width:56px;
  height:50px;
  background:url(images/ic_caution.webp) center no-repeat;
  background-size:contain;
}
#typhoon h2::after {content:none;}

/* contact */

#contact p {
  margin:1em 5%;
  text-align:center;
}
div.btn {
  margin:2rem 0;
  text-align:center;
}
a.btn {
  display:block;
  padding:0.75em 1em;
  text-align:center;
  background-color:rgba(0, 44, 102, 1);
  border-radius:100vh;
}
a.btn:hover {background-color:rgba(0, 44, 102, 0.8);}
a.btn.tel::before {
  content:'';
  display:inline-block;
  vertical-align:middle;
  margin:-0.2em 0.35em 0 0;
  width:1.25em;
  height:1.25em;
  background:url(images/ic_tel.webp) center no-repeat;
  background-size:contain;
}

/* characters */

body {
  font-size:16px;
  line-height:1;
  color:rgba(34, 34, 34, 1);
  font-family:serif;
  -webkit-font-smoothing:antialiased;
}

section h3 {font-size:1rem;}
section h2 {font-size:1.125rem;}
#header h2, section h1,
a.btn {font-size:1.25rem;}

h1, h2, h3, li {line-height:1.25;}
p {line-height:1.7;}

a.btn {font-weight:600;}

a:link, a:visited {text-decoration:underline;}
a:hover, a:active {text-decoration:none;}
a.btn,
#index li a {text-decoration:none;}

#header, #footer,
a.btn,
#index li a {color:rgba(255, 255, 255, 1);}
section h2 {color:rgba(1, 53, 115, 1);}
#typhoon h2 {color:rgba(34, 34, 34, 1)}