* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    }

html, body { height: 100%; }

body {
  margin: 0;
  padding: 20px;
  color: #333;
  font-family: "游明朝",serif;
  font-size: 108%;
  line-height: 240%;
  letter-spacing: 0.03em;
  -webkit-text-size-adjust: 100%; /* ブラウザ側で自動調整しない */
  -webkit-font-smoothing: antialiased; /* アンチエイリアス */
  overflow-x: hidden;
  animation: fadeIn 1s ease 0s 1 normal;
  -webkit-animation: fadeIn 1s ease 0s 1 normal;
  }

@keyframes fadeIn {
     0% { opacity: 0 }
  100% { opacity: 1 }
  }

@-webkit-keyframes fadeIn {
     0% { opacity: 0 }
  100% { opacity: 1 }
  }

@media screen and (max-width: 640px) {
body { padding: 20px; }
}

/* -------------------------------------------------------- ★ a */

a { transition: 0.4s; text-decoration: none; }
a:link { color: #003; }
a:visited { color: #999; }
a:hover { color: #003; }

.text a { font-weight: bold; }

/* -------------------------------------------------------- ★ img */

img { max-width: 100%; height: auto; border: none; vertical-align: bottom; transition: 0.4s; } /* DIV内で画像の下にできる隙間をなくす */

a:img { max-width: 100%; }
a:hover img { opacity: 0.4; filter: alpha(opacity=40);  }

/* -------------------------------------------------------- ★ p */

p { margin: 0; }

.text p { margin-bottom: 30px; }
.text .r { margin-bottom: 20px; }

/* --------------------------------------------------------★  li */

ol, ul { margin: 0; padding: 0; }
li { display: inline-block; max-width: 100%; vertical-align: top; }
.list { margin: 30px 0; }
.list li {
  display: list-item;
  list-style-position: inside;
  padding-left: 1.5em;
  text-indent: -1.5em;
  text-align: left;
  }

/* --------------------------------------------------------------------------------- ★ LR */

.center { text-align: center; }
.left { text-align: left; }

.l { float: left; }
.r { overflow: hidden; }

.clear: { clear: both; }

.space { margin-top: 60px; }
.space2 { margin-top: 40px; text-align: center; }
.space3 { padding-top: 80px; }
.space-b { margin-bottom: 40px; }

/* -------------------------------------------------------- ★ shuffle.js */

.alpha:hover { opacity: 0.7; filter: alpha(opacity=70); }
#btn .active { color: #fff; background: #003; }
#btn { overflow: hidden; margin-bottom: 40px; text-align: center; }
#btn li { margin: 5px; padding: 7px 10px; cursor: pointer; }

/* -------------------------------------------------------- ★ h */

h1, h2 { font-family: "Century Gothic","Meiryo","Futura","Hiragino Kaku Gothic Pro",sans-serif; }
h1 { font-size: 115%; margin: 80px 0 80px 0; text-align: center; }
h2 { font-size: 110%; margin: 30px 0; }
h3 { font-size: 110%; }
h4 { font-size: 115%; margin: 60px 0 40px 0; text-align: center; letter-spacing: 0.1em; }
h5 { font-size: 100%; margin: 80px 0 40px 0; padding: 20px 10px; color: #fff; background: #003; text-align: center; border-radius: 3px; }

.about h2 { margin-top: 60px; }

/* -------------------------------------------------------- ★ hr */

hr { display: block; border: none; background-image: url('../img/line.gif'); height: 1px; margin: 25px 0; }

/* -------------------------------------------------------- ★ Logo */

.logo { width: 100%; padding-top: 40px; text-align: center; }
.logo img { height: 30px; }

/* -------------------------------------------------------- ★ box footer */

.box { max-width: 900px; margin: auto; padding-bottom: 60px; }

footer { padding: 40px; text-align: center; }

.copy { font-size: 11px; }

.border { border: solid 1px #ccc; }

.frame { border: solid 1px #ccc; padding: 10px; }

.f-menu { margin-top: 40px; text-align: center; z-index: 200; } 
.f-menu li { margin: 15px 5px; } 
.f-menu a { padding: 10px 20px; border: solid 1px #ccc; border-radius: 2px; } 
.f-menu a:visited { color: #003; }
.f-menu a:hover,
.f-menu a.active { color: #fff; background: #003; border: solid 1px #003; border-radius: 2px; }

@media screen and (max-width: 640px) {
.pc { display: none; }
}

/* --------------------------------------------------------★  item */

.item { max-width: 1600px; margin: auto; padding-top: 60px; line-height: 150%; text-align: center; }
.item li { width: 400px; padding: 0 40px 100px 40px; text-align: left; }
.item img { margin-bottom: 5px; padding: 5px; }
.item p { margin-top: 20px; font-size: 90%; text-align: left; }
.item .l { margin-right: 5px; padding: 3px 10px; border: solid 1px #ccc; text-transform: uppercase; }
.item .r { text-align: right; }
.item p,
.item .l,
.item .r { font-size: x-small; }

/* --------------------------------------------------------★  料金・テーブル */

th { vertical-align: top; }

#price h2 { font-size: 110%; margin: 60px 0 30px 0; text-align: center; }

.price-list {
  width: 100%;
  margin-bottom: 20px;
  border-collapse: collapse;
  }

.price-list th,
.price-list td {
  border-left: 0;
  border-bottom: 1px dotted #999;
  border-right: 0;
  padding: 20px 0;
  }

.price-list p  { 
  width: 200px; 
  margin-right: 20px; 
  padding: 10px 15px; 
  color: #fff; 
  background: #003; 
  white-space: nowrap; 
  border-radius: 3px; 
  text-align: center; 
  }

.options th { text-align: left; }
.options span { font-weight: normal; }

.memo {
  width: 100%;
  margin-bottom: 20px;
  border-collapse: collapse;
  }

.memo th,
.memo td { padding: 10px 0; }
.memo td { width: 80%; }
.memo p { width: 200px; margin-right: 20px; padding: 10px 15px; border: solid 1px #aaa; border-radius: 3px; white-space: nowrap; }

.p3 td { width: 33%; }
.p4 td { width: 25%; }

.other span { margin: 10px 10px 20px 0; padding: 10px; color: #fff; background: #003; border-radius: 3px; line-height: 1; }
.other { margin-top: 40px; line-height: 4; }

/* -------------------------------------------------------- ★ About */

.about { margin: 40px 0 60px 0; text-align: center; }

.timeline { max-width: 900px; margin: auto; padding-bottom: 60px; line-height: 250%; }
.timeline li { width: 100%; }
.timeline  p { margin-bottom: 30px; }
.timeline a:hover { padding: 10px; font-size: 120%; background: #003; color: #fff; }
.timeline  .r { margin-bottom: 20px; }
.timeline .l { width: 80px; }

@media screen and (max-width: 640px) {
.about { margin: 30px 0 60px 0; text-align: left; }
.timeline .l { font-weight: bold; }
.timeline .r { width: 100%; }
}

/* -------------------------------------------------------- ★ button */

a.btn { display: block; padding: 15px 30px; border: solid 1px #aaa; border-radius: 3px; font-weight: bold; text-align: center; }
.btn:link { text-decoration: none; transition: 0.4s; }
.btn:hover { border: solid 1px #999; background: #999; color: #fff; }

/* -------------------------------------------------------- ★ more */

a.more { display: inline-block; margin: 40px; padding: 15px 40px; border: solid 1px #aaa; border-radius: 3px; font-weight: bold; }
.more:link { text-decoration: none; transition: 0.4s; }
.more:hover { border: solid 1px #003; background: #003; color: #fff; }

/* -------------------------------------------------------- ★ gnav */

.gnav {
  overflow-y: auto;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  text-align: center;
  -webkit-transition: all 1s;
  transition: all 1s;
  visibility: hidden;
  opacity: 0;
  z-index: 100;
  }

.gnav ul { width: 60%; margin: auto; padding-top: 170px; }
.gnav li { display: block; border-bottom: 1px solid #ccc; }
.gnav li a { display: block; padding: 20px 0; color: #333; }
.gnav li a:hover,
.gnav li .active { color: #fff; background: #003; }
.gnav.on { visibility: visible; opacity: 1; }

.icon-animation {
    position: fixed;
    display: block;
    right: 20px;
    top: 15px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 110;
    }

.icon-animation span {
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    margin-left: -20px;
    width: 40px;
    height: 1px;
    background: #2d281e;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;  
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    }

.icon-animation .top { transform: translateY(-13px); -webkit-transform: translateY(-13px); }
.icon-animation .bottom { transform: translateY(13px); -webkit-transform: translateY(13px) }

.is-open .middle { background: rgba(255, 255, 128, 0) !important; }
.is-open .top { transform: rotate(-45deg) translateY(0px); -webkit-transform: rotate(-45deg) translateY(0px); }
.is-open .bottom { transform: rotate(45deg) translateY(0px); -webkit-transform: rotate(45deg) translateY(0px); }

/* -------------------------------------------------------- ★ Back */

.back { display: block; margin: 40px 0; padding: 30px; }
.back div {
  width: 40px;
  height: 40px;
  margin: auto;
  border-left: 1px solid #888;
  border-bottom: 1px solid #888;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  transition: 0.4s;
  }

.back:hover > .back div { border-left: 1px solid #003; border-bottom: 1px solid #003; }

/* -------------------------------------------------------- ★ フォーム */

.formbox { max-width: 900px; margin: auto; padding: 40px 20px; }
.form-p { margin-bottom: 40px; text-align: center; }

.data { margin-top: 40px; }
.data span { color: #f36; }

.msg { color: #f03; }
.check { margin: 20px 0; }

#contact h2 { font-size: 100%; font-weight: bold; margin-bottom: 0px; }

input[type="text"],
textarea,
label span {
  display: block;
  margin-bottom: 15px;
  border: 1px solid #aaa;
  border-radius: 3px;
  line-height: 150%;
  }

input[type="text"] { width: 100%; }

textarea { width: 100%; height: 12em; }

input[type="text"],
textarea { padding: 10px; }

label span { padding: 20px; text-align: center; }

input[type="button"],
input[type="submit"] { 
  margin: 20px 10px; 
  padding: 15px 25px; 
  border: 1px solid #aaa;
  border-radius: 3px;
  font-weight: bold;
  -webkit-appearance: none;
  transition: 0.4s;
  }

input[type="button"]:hover,
input[type="submit"]:hover { color: #fff; background: #003; border: 1px solid #003; cursor: pointer; cursor: hand; }

/* -------------------------------------------------------- ★ チェックボタン カスタマイズ */

label input { display: none; }
label input:checked + span { color: #fff; background: #003; }
label span:hover { cursor: pointer; cursor: hand; }

/* -------------------------------------------------------- ★ wow */

.animated {
  animation-duration: 2s; -webkit-animation-duration: 2s;
  animation-fill-mode: both; -webkit-animation-fill-mode: both;
  }

.animated { backface-visibility:hidden; -webkit-backface-visibility:hidden; }

/* -------------------------------------------------------- ★ wow FadeInUp */

.fadeInUp,
.fadeInUp li,
h1,h2 { animation-name: fadeInUp; -webkit-animation-name: fadeInUp; }

@keyframes fadeInUp {
    0% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); }
  100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
  }

/* -------------------------------------------------------- ★ wow Horizon */

.horizon { position: relative; padding-bottom: 20px; }
.horizon-l,
.horizon-r { position: absolute; height: 1px; background-color: #333; }
.horizon-l { animation: horizon-l 1.5s forwards; }
.horizon-r { animation: horizon-r 1.5s forwards; }

@keyframes horizon-l {
    0% { opacity: 0; width: 0; left: 50%; }
  100% { opacity: 1; width: 50%; left: 0; }
  }

@keyframes horizon-r {
    0% { opacity: 0; width: 0; right: 50%; }
  100% { opacity: 1; width: 50%; right: 0; }
  }