@charset "UTF-8";
/* Scss Document */
/* ======================== reset ======================== */
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,
b, u, i, center,
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%;
  line-height: 1.0;
  font-weight: normal;
  font-family: "游ゴシック", YoGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  vertical-align: baseline; }

img, input {
  vertical-align: bottom; }

img {
  border: 0; }

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box; }

article, aside, canvas, details, figcaption, figure, header, footer, main, menu, nav, section, summary {
  display: block; }

html {
  overflow-y: scroll; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

input, textarea {
  margin: 0;
  padding: 0; }

ol, ul {
  list-style: none; }

a {
  text-decoration: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

caption, th {
  text-align: left; }

a:focus {
  outline: none; }

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden; }

.clearfix {
  min-height: 1px; }

* html .clearfix {
  height: 1px;
  /*¥*/
     /*/
height: auto;
overflow: hidden;
/**/ }

.both {
  clear: both; }

.inline_block {
  display: inline-block;
  *display: inline;
  *zoom: 1; }

input[type='submit'] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  font: inherit;
  outline: none; }

/* ======================== style ======================== */
section h1 {
  border-bottom: 1px dotted #ffbcbc; }

#sec02 h1 {
  border-bottom: 1px dotted #fff; }

#back-top {
  border-bottom: 1px dotted #666; }

/* ======================== rayout & text ======================== */
a {
  color: #fff; }

::selection {
  background: #c9f9f5; }

header h1 a, header p, .nav li a, h1, small {
  font-family: "Petit Formal Script", "游ゴシック", YoGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; }

section h1 {
  font-size: 100%;
  padding: 0 0 0.75rem;
  margin: 0 0 2.5rem; }
  @media (min-width: 768px) {
    section h1 {
      font-size: 137.5%; } }

h2 {
  font-size: 87.5%;
  margin: 0 0 1.25rem; }
  @media (min-width: 768px) {
    h2 {
      font-size: 100%; } }

h3, h4 {
  font-size: 75%;
  margin: 0 0 0.5rem; }
  @media (min-width: 768px) {
    h3, h4 {
      font-size: 87.5%; } }

p {
  font-size: 75%;
  line-height: 1.8; }

body {
  font-size: 100%;
  color: #888;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%; }

#container {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin: 0 auto; }

header {
  width: 100%;
  position: fixed;
  padding: 1.25rem 0;
  z-index: 1000;
  text-align: center;
  background: #ffbcbc;
  opacity: 0.8; }
  header h1 {
    font-size: 150%; }
    @media (min-width: 768px) {
      header h1 {
        font-size: 180%; } }
  header p {
    margin: 0 0 1rem;
    color: #666; }
    @media (min-width: 768px) {
      header p {
        font-size: 100%; } }

.nav {
  display: flex;
  justify-content: center; }
  .nav li {
    margin: 0 0.5rem; }
    @media (min-width: 768px) {
      .nav li {
        font-size: 100%;
        margin: 0 1.25rem; } }

.topimg {
  width: 100%;
  height: auto;
  max-width: 1230px;
  margin: 0 auto; }
  .topimg img {
    width: 100%;
    height: auto;
    padding: 8rem 0 0; }

section {
  padding: 8rem 3rem; }
  @media (min-width: 768px) {
    section {
      padding: 10rem; } }

#sec03 {
  padding-bottom: 0; }

/* ======================== works & ill ======================== */
.ill_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 auto; }
  @media (min-width: 768px) {
    .ill_list {
      max-width: 850px; } }
  .ill_list li {
    padding: 1rem 0.5rem; }
    @media (min-width: 768px) {
      .ill_list li {
        padding: 1.5625rem; } }
    .ill_list li a:hover {
      opacity: 0.7; }

.ill_list::before {
  display: block;
  content: "";
  width: 170px;
  order: 1; }

.ill_list::after {
  display: block;
  content: "";
  width: 170px; }

p.ill_text {
  padding: 0 0.5rem 1.25rem;
  margin: 0 auto; }
  @media (min-width: 768px) {
    p.ill_text {
      padding: 0 1.5625rem 0.9375rem;
      max-width: 850px; } }

/* ======================== illustrations ======================== */
#sec02 {
  background: #ccc; }
  #sec02 h1 {
    color: #fff; }
  #sec02 p {
    color: #fff; }

/* ======================== about ======================== */
#sec03 p {
  margin: 0 0 1.25rem; }
  #sec03 p.photo {
    text-align: center;
    margin-bottom: 2.5rem; }

@media (min-width: 768px) {
  .wrapper {
    width: 650px;
    margin: 0 auto;
    overflow: hidden; }

  .photo {
    float: left;
    width: 40%; }

  .profile {
    float: right;
    width: 60%; } }
.marker {
  background: #ffbcbc; }

/* ======================== contact ======================== */
@media (min-width: 768px) {
  .contact_inner {
    width: 650px;
    margin: 0 auto; } }
/* ======================== footer ======================== */
footer {
  width: 100%;
  text-align: center;
  background: #aaa;
  padding: 4rem 0; }
  footer p {
    color: #fff; }
  @media (min-width: 768px) {
    footer {
      padding: 10rem 0; } }

@media (min-width: 768px) {
  .nav02 li {
    margin: 0;
    padding: 0.875rem 2.5rem;
    border-right: 1px solid #666; }
    .nav02 li:last-child {
      border: none; } }
.footer_link {
  display: flex;
  justify-content: center; }
  .footer_link li {
    padding: 0.625rem;
    margin: 0.625rem 0; }
    @media (min-width: 768px) {
      .footer_link li {
        margin: 0.625rem 0 1.25rem; } }

/* ======================== back-top ======================== */
#back-top {
  padding: 0 0 0.25rem;
  position: fixed;
  bottom: 5rem;
  right: 3rem; }

#back-top a {
  width: 5rem;
  display: block;
  text-align: center;
  font: 0.75rem/100% Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  text-decoration: none;
  color: #666;
  /* transition */
  -webkit-transition: 1s;
  -moz-transition: 1s;
  transition: 1s; }