*,*::before,*::after { box-sizing: border-box; }
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  margin:0; padding:0; border:0; outline:0; vertical-align:baseline; background:transparent; }
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block; }
nav ul { list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; }
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; color: inherit; transition: background-color .2s ease-in-out; }
ins { background-color:#ff9; color:#000; text-decoration:none; }
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
table { border-collapse:collapse; border-spacing:0; }
hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0; }
input, select { vertical-align:middle; }
img { max-width: 100%; vertical-align: bottom; }
sup { font-size: 0.688em; vertical-align: top; }
sub { font-size: 0.688em; vertical-align: baseline; }




@font-face {
  font-family: "Pinyon Script";
  src: url("../fonts/PinyonScript-Regular.woff") format("woff");
}
@font-face {
  font-family: "クレー One";
  src: url("../fonts/KleeOne-SemiBold.woff") format("woff");
  font-weight: 600;
}




html { font-size: 3.57vw; }
@media (min-width: 450px) {
  html { font-size: 100%; }
}
body {
  font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 300;
  line-height: 1.75;
  letter-spacing: 0.04em;
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%; }


.iv.fadeIn {
    opacity: 0;
    transition: opacity 1s;
}
.iv.fadeIn.is-show {
    opacity: 1;
}
.iv.fadeInUp {
    opacity: 0;
    transform: translate(0, 2rem);
    transition: opacity 1s, transform 1s;
}
.iv.fadeInUp.is-show {
    transform: translate(0, 0);
    opacity: 1;
}

section {
  position: relative; }


/* --------------------
   media query
-------------------- */
@media (max-width: 812px) {
  .pc { display: none; }
}
@media (min-width: 813px) {
  .sp { display: none; }
}


/* --------------------
   Layout
-------------------- */
#container {
    background-color: #EBF7F2;
    overflow: hidden;
}
#content {
    background-color: #DCF3E9;
    max-width: 32em;
    margin-right: auto;
    margin-left: auto;
}

.container {
  width: 91%;
  margin-right: auto;
  margin-left: auto;
}

/* --------------------
   Fixed Bnr
-------------------- */
#fixedBnr {
    width: 100%;
    max-width: 425px;
    position: fixed;
    bottom: 0;
    right: 0;
    visibility: hidden;
    opacity: 0;
    transform: translateY(50%);
    transition: .8s;
}
#fixedBnr.active {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}
#fixedBnr .fixedBnr-close {
    display: block;
    width: 3em;
    height: 1.25em;
    background: rgba(0,0,0,0.3);
    color: #FFF;
    border: none;
    outline: none;
    cursor: pointer;
    position: absolute;
    bottom: 100%;
    right: 0;
}

/* --------------------
   Button
-------------------- */
.btnBox {
    padding: 0 1.25em;
}
.btn {
    width: 100%;
    margin: 0 auto;
    padding: .65em 1em;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.213em;
    line-height: 1.5;
    letter-spacing: 0.06em;
    color: #646464;
    background: #FFF;
    border: 1px solid currentColor;
    text-align: center;
    text-decoration: none;
    outline: none;
    cursor: pointer;
}
.btn.btn_S {
    font-size: 1.154em;
    line-height: 1.25;
    padding: .9em 1em;
}
.img-btn {
    width: 100%;
    margin: 1.75em auto 0;
    display: block;
    border: 1px solid currentColor;
}

.btn span {
    display: inline-block;
    padding: 0 1.25em;
    position: relative;
}
.btn span::before,
.btn span::after {
    content: '';
    display: inline-block;
    width: .75em;
    height: 1px;
    background-color: currentColor;
    position: absolute;
    top: calc(50% - (1px/2));
    right: 0;
}
.btn span::after {
    transform: rotate(90deg);
}

.pageclose .btn span::before {
    width: 1em;
    transform: rotate(-45deg);
}
.pageclose .btn span::after {
    width: 1em;
    transform: rotate(45deg);
}

.c1 {
    color: #49B8B1;
}
.c2 {
    color: #C79B59;
}
.c3 {
    color: #FFA0AF;
}

/* --------------------
   hr
-------------------- */
hr {
    margin: .35em auto;
    width: 14.6em;
    height: .462em;
    border: none !important;
    background: url(../img/hr.svg) repeat-x left center / contain;
}

/* --------------------
   Font
-------------------- */
.Mincho {
    font-family: "クレー One", serif;
    font-weight: 600 !important;
}
/* --------------------
   Header
-------------------- */
#siteHeader {
    background: #FFF;
    width: 100%;
    max-width: 32em;
    margin: 0 auto;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 100;
}
#siteHeader .header__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .75em 0;
}
#siteHeader .logo a {
    display: block;
    width: 6.4em;
}


/* --------------------
   sns link
-------------------- */
ul.sns {
    display: flex;
    list-style-type: none;
}
ul.sns li {
    padding: 0 .25em;
}
ul.sns li a {
    display: block;
    width: 2em;
    padding: 0 .25em;
}


/* --------------------
   Profile
-------------------- */
#profile {
    margin: 3em 0;
}
#profile .ttl {
    display: inline-block;
    color: #49B8B1;
    background: #FFF;
    padding: .5em .5em .25em 1.125em;
    font-family: 'Pinyon Script', cursive;
    font-size: 1.538em;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1;
    position: relative;
}
#profile .ttl::after {
    content: '';
    width: 1.5em;
    height: 100%;
    clip-path: polygon(0 0, 1px 0, 100% 100%, 0% 100%);
    background: #FFF;
    position: absolute;
    left: calc(100% - 1px);
    top: 0;
}
.profile {
    background: #FFF;
    padding: 1.75em;
    position: relative;
}
.profile .data {
    color: #49B8B1;
    padding: 0 0 1em;
    border-bottom: 1px solid currentColor;
    line-height: 1.5;
}
.profile .data::before {
    content: '';
    display: block;
    width: 47.5%;
    height: 1px;
    background: #49B8B1;
    margin-bottom: 1em;
}
.profile .data .name {
    font-size: 1.231em;
    margin-bottom: .25em;
}
.profile .data .name small {
    display: block;
    font-size: .75em;
}
.profile .img {
    width: 45%;
    position: absolute;
    top: -2em;
    right: 1.25em;
}
.profile .img img {
    display: block;
    border-radius: 50%;
}
.profile .txt {
    font-size: .923em;
    font-feature-settings: normal;
    letter-spacing: 0;
}
.profile .txt p {
    margin: 1.5em 0;
}
.profile .txt ul::before {
    content: '';
    display: block;
    width: 100%;
    height: 6px;
    background-color: #fff;
    background-image: radial-gradient(#49B8B1 18%, transparent 18%);
    background-size: 6px 6px;
    margin: 1.5em 0;
}
.profile .txt ul {
    list-style-type: none;
}

/* --------------------
   Footer
-------------------- */
#siteFooter {
    margin-top: 3em;
}
#siteFooter .btnBox > p:not(:first-of-type) {
    margin-top: 1.75em;
}
#siteFooter .note {
    margin-top: 3em;
    font-size: .846em;
}
#siteFooter .links {
    margin-top: 2em;
}
#siteFooter .links .ttl {
    text-align: right;
}
#siteFooter .links ul {
    list-style-type: none;
    display: flex;
    justify-content: center;
}
#siteFooter .links ul li a {
    display: inline-block;
}
#siteFooter .links ul li a .logo {
    width: 7.3em;
}
#siteFooter .copyright {
    padding: 3em 0;
    text-align: center;
    font-size: .769em;
}