@charset "UTF-8";

/* ditai_reset */
* { margin: 0; padding: 0; }
body { -webkit-text-size-adjust: 100%; }
ul, li, ol { list-style: none; }
img { border: 0; }
br { letter-spacing: 0; }
a { text-decoration: none; outline: none; }
textarea, input, input[type='submit'] { -webkit-appearance: none; }

@font-face {
  font-family: はんなり明朝;
  src: url('https://cdn.leafscape.be/hannari/hannari_web.woff')
       format("woff");
}
@font-face {
  font-family: Lora;
  src: url('https://fonts.googleapis.com/css?family=Lora');
}

/* selection */
::selection { color: #444; background: #eee; }
::-moz-selection { color: #444; background: #eee; }

/* marker */
.marker_g {
  background: -webkit-linear-gradient(transparent 60%, #b3f5ef 0%);  /* Safari */
  background:    -moz-linear-gradient(transparent 60%, #b3f5ef 0%);  /* Firefox */
  background:      -o-linear-gradient(transparent 60%, #b3f5ef 0%);  /* Opera */
  background:     -ms-linear-gradient(transparent 60%, #b3f5ef 0%);  /* IE */
  background:         linear-gradient(transparent 60%, #b3f5ef 0%);  /* Default */
}

/* base */
html { font-size: 62.5%; }
body {
  font-family: 'Hiragino mincho ProN', 'MS Mincho', serif;
  font-size: 1.5em;
  line-height: 1.9;
  color: #333;
  background: #FFFEFC;
}
a {
  color: #333;
  background: none;
  border-bottom: 1px solid #eee;
}
.new a:hover,
a:hover {
  color: #82cac9;
}
footer a {
  margin-left: 10px;
  padding: 8px 10px;
  letter-spacing: 3px;
  background: rgba(130, 202, 201, .7);
  border-radius: 3px;
  border-bottom: none;
}
footer a:hover {
  color: #444;
  background: rgba(179, 245, 239, 1);
}

/* typo */
h1, h2 { text-align: right; }
h1 {
  font-family: 'Lora', 'はんなり明朝', 'Times New Roman', serif;
  font-size: 50px;
  line-height: 1.0;
  letter-spacing: 15px;
}
h2 {
  font-family: 'Lora', 'Segoe Script', 'Times New Roman', serif;
  font-size: 13px;
  font-weight: normal;
  letter-spacing: 7px;
  color: #999;
}
h3 {
  font-size: 16px;
  letter-spacing: 2px;
  line-height: 1.5;
  text-align: center;
}
h4 {
  font-size: 18px;
  letter-spacing: 2px;
}
p { font-size: inherit; }
.new {
  font-weight: bold;
  color: #ff4f43;
}
.meta, .notice {
  color: #bbb;
  font-size: 10px;
}
.meta {
  margin-right: 4.6%;
  text-align: right;
}
.notice { margin-bottom: 40px; }


/* foundation */
h1, h2, h4, .wrap, .onecolumn, .caution, ol, .title, .text {
  overflow: hidden;
  margin: 0 auto;
}
h1, h2, .wrap { max-width: 880px; }
h1, h2 { padding: 0 6%; }
h4 {
  width: 84%;
  max-width: 800px;
  padding: 0 2%;
}
.wrap { padding: 20px 0 120px; }
.onecolumn { width: 100%; }
header {
  width: 100%;
  height: auto;
  margin-bottom: 30px;
  background: url(img/senbg.jpg) repeat 0% 50%;
  background-size: 350px auto;
}
header.sec2 {
  background: url(img/senbg02.jpg) repeat 0% -5%;
  background-size: 320px auto;
}

.inline, .title {
  background: rgba(255, 255, 255, .1);
}
.inline { padding: 90px 0; }
.title { padding: 30px 0; }

.caution {
  width: 90%;
  margin-bottom: 50px;
}

.mkj {
  float: left;
  overflow: hidden;
  width: 26%;
  padding: 0 3%;
}
li {
  margin: 2px 0;
  padding: 4px 5%;
  color: #777;
}
li a { margin-left: 1em; }

.text {
  font-family: 'Hiragino Kaku Gothic ProN', 'MS P Gothic', sans-serif;
  line-height: 2.0;
  width: 86%;
  max-width: 800px;
  padding: 10px 2% 50px;
}

footer {
  width: 100%;
  margin: 60px 0;
  text-align: right;
}

@media (max-width: 1024px) {
  h1, h2, h4 { max-width: 600px; }
  h1, h2 { text-align: center; }
  .wrap {
    max-width: 600px;
    padding: 0 2.5% 100px;
  }
  .mkj {
    width: 40%;
    margin-bottom: 50px;
    padding: 0 3%;
  }
}

@media (max-width: 896px) {
  h1, h2 {
    width: 80%;
    padding: 0 10%;
  }
  .wrap {
    width: 86%;
    padding: 0 5% 100px;
  }
  .caution { width: 88%; }
  .mkj {
    float: none;
    width: 90%;
    padding: 0 3% 30px;
  }
  ol { width: 80%; }
  .title { width: 90%; }
  .text { width: 76%; }
}

@media (max-width: 414px) {
  h1 {
    font-size: 40px;
    letter-spacing: 12px;
  }
  h2 {
    font-size: 12px;
    letter-spacing: 5px;
  }
  .mkj {
    width: 96%;
    padding: 0 3% 30px;
  }
  ol { width: 86%; }
}