@charset "UTF-8";
/*------------------------------
リセットcssファイルをインポート
--------------------------------*/
/* normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css/*/
* { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; line-height: 1.7; list-style: none; text-decoration: none; font-weight: normal; color: #1e1e1e; }

html { -webkit-text-size-adjust: 100%; }

body { font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", sans-serif; }

main { display: block; }

h1 { font-size: 2em; margin: 0.67em 0; }

a { background-color: transparent; }

small { font-size: 80%; }

img { border-style: none; }

/*------------------------------
共通
--------------------------------*/
html { font-size: 62.5%; }

body { font-size: 1.6rem; }

.imgstyle { display: block; width: 100%; height: auto; }

/*------------------------------
ヘッダー
--------------------------------*/
.header { font-size: 2rem; position: fixed; top: 0; left: 0; z-index: 1; width: 100%; }
.header-nav { display: -webkit-box; display: -ms-flexbox; display: flex; width: 80%; margin: 0 auto; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.header-nav__icontop { padding: 5% 4.4%; width: 18%; height: auto; vertical-align: middle; -webkit-filter: invert(88%) sepia(61%) saturate(0%) hue-rotate(229deg) brightness(107%) contrast(101%); filter: invert(88%) sepia(61%) saturate(0%) hue-rotate(229deg) brightness(107%) contrast(101%); }
.header-nav__icon { padding: 5% 4.4%; width: 18%; height: auto; vertical-align: middle; }
.header-nav__list { display: -webkit-box; display: -ms-flexbox; display: flex; width: 42.7%; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
.header-nav__list-item { display: inline-block; width: 37.5%; }
.header-nav__list-item:first-of-type { margin-right: 12.5%; }
.header-nav__list-item:last-of-type { margin-left: 12.5%; }
.header-nav__list-item--black { color: #333; display: block; position: relative; padding: 21.9% 0; text-align: center; }

.box_navcol { color: #fff; }

.nav-in { color: #333; }

.icon-in { -webkit-filter: none; filter: none; }

/*------------------------------
フッター
--------------------------------*/
.footer { margin: 25.6% 0 5.3% 0; text-align: center; }
.footer-flex { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 5.3%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.footer-flex-icon { margin: 0 2.1%; }
.footer-flex-icon-size { padding: 33%; }
.footer-flex-icon-size--style { color: #eac7cd; }

/*------------------------------
index
--------------------------------*/
.firstview { width: 100%; text-align: center; position: relative; }
.firstview .slick_sp { width: block; }
.firstview .slick_sp img { width: 100%; }
.firstview .slick_pc { display: none; }
.firstview__ttlsite { font-family: 'Playfair Display', serif, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo"; color: #fff; margin: 0; padding: 72.5% 0; font-size: 5.1rem; letter-spacing: 0.1em; line-height: 1.2; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.firstview__ttlsite--small { color: #fff; font-weight: bold; font-size: 3rem; }

.works { width: 80%; margin: 0 auto; }
.works--ttlpage { margin: 26.7% 0; font-size: 3rem; }
.works__flexbox-bg { position: relative; width: 100%; margin-top: 13.3%; padding-bottom: 100%; background-color: #eeeeee; opacity: 0; -webkit-transform: translate(0, 80px); transform: translate(0, 80px); -webkit-transition: all 1200ms; transition: all 1200ms; }
.works__flexbox-bg-item { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 80%; }
.works__flexbox-bg-item--paper { width: 60%; }
.works__flexbox-bg-item--margin-s { margin-top: 2.7%; line-height: 1; }
.works__flexbox-bg.scrollin { opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0); }

.popup { display: none; height: 100vh; width: 100%; background-color: rgba(0, 0, 0, 0.7); position: fixed; top: 0; left: 0; }
.popup .content { background: #fff; padding: 30px; width: 50%; opacity: 1; }

.show { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

button { background: #eac7cd; border: none; padding: 1%; }

/*------------------------------
about
--------------------------------*/
.about { width: 80%; margin: 0 auto; }
.about--ttlpage { margin: 42.7% 0 0 0; font-size: 3rem; }
.about__contentbox { margin-top: 26.7%; }
.about__contentbox-intro { margin-top: 21.3%; }
.about__contentbox-intro--name { margin-bottom: 5.3%; font-size: 2rem; }
.about__contentbox-intro--dream { margin: 21.3% 0 5.3% 0; font-size: 2rem; }
.about--skill-ttl { margin: 21.3% 0 5.3% 0; font-size: 2rem; }
.about__graph { width: 100%; margin: 0 auto; }
.about__graph-bar { position: relative; margin-bottom: 2.7%; padding: 0.5% 0 0.5% 3.3%; vertical-align: middle; }
.about__graph-bar::before { position: absolute; top: 0; left: 0; z-index: -2; width: 100%; padding: 5% 0; background: #eeeeee; content: ''; }
.about__graph-bar::after { display: block; position: absolute; top: 0; left: 0; z-index: -1; width: 100%; padding: 5% 0; content: ''; }
.about__graph-bar--active:nth-of-type(1)::after { background: #eac7cd; max-width: 80%; -webkit-animation: bar-before 1.8s; animation: bar-before 1.8s; }
.about__graph-bar--active:nth-of-type(2)::after { background: #eac7cd; max-width: 15%; -webkit-animation: bar-before 1.8s; animation: bar-before 1.8s; }
.about__graph-bar--active:nth-of-type(3)::after { background: #eac7cd; max-width: 90%; -webkit-animation: bar-before 1.8s; animation: bar-before 1.8s; }
.about__graph-bar--active:nth-of-type(4)::after { background: #eac7cd; max-width: 90%; -webkit-animation: bar-before 1.8s; animation: bar-before 1.8s; }
.about__graph-bar--active:nth-of-type(5)::after { background: #eac7cd; max-width: 70%; -webkit-animation: bar-before 1.8s; animation: bar-before 1.8s; }
.about__graph-bar--active:nth-of-type(6)::after { background: #eac7cd; max-width: 70%; -webkit-animation: bar-before 1.8s; animation: bar-before 1.8s; }
.about__graph-bar--active:nth-of-type(7)::after { background: #eac7cd; max-width: 40%; -webkit-animation: bar-before 1.8s; animation: bar-before 1.8s; }
.about__graph-bar--active:nth-of-type(8)::after { background: #eac7cd; max-width: 5%; -webkit-animation: bar-before 1.8s; animation: bar-before 1.8s; }
.about__graph-bar--active:nth-of-type(9)::after { background: #eac7cd; max-width: 5%; -webkit-animation: bar-before 1.8s; animation: bar-before 1.8s; }
.about__graph-bar--active:nth-of-type(10)::after { background: #eac7cd; max-width: 90%; -webkit-animation: bar-before 1.8s; animation: bar-before 1.8s; }
.about__graph-bar:not(:first-of-type) { margin-top: 8%; }
.about__graph-bar--pos { position: absolute; right: 5%; padding: 0.5% 0; }
.about--like-ttl { margin: 21.3% 0 5.3% 0; font-size: 2rem; }
.about__sewing { position: relative; }
.about__sewing-description--bgstyle { display: inline-block; position: absolute; top: 27.9%; left: 56.7%; width: 40%; background-color: #eac7cd; font-size: 1.8rem; text-align: center; letter-spacing: 0.1em; }
.about__sewing-description--margin { margin-top: 2.6%; }
.about__traveling { position: relative; margin-top: 16%; }
.about__traveling-description--bgstyle { display: inline-block; position: absolute; top: 27.9%; left: 56.7%; width: 40%; background-color: #eac7cd; font-size: 1.8rem; text-align: center; letter-spacing: 0.1em; }
.about__traveling-description--margin { margin-top: 2.6%; }

@-webkit-keyframes bar-before { 0% { width: 0; }
  100% { width: 100%; } }

@keyframes bar-before { 0% { width: 0; }
  100% { width: 100%; } }
/*------------------------------
product共通
--------------------------------*/
.product { width: 80%; margin: 0 auto; }
.product__ttlpage { margin: 42.7% 0 0 0; font-size: 3rem; }
.product__flex { margin-top: 26.7%; }
.product__flex--margin { margin-bottom: 2.7%; font-size: 1.6rem; }
.product__flex-comment-item { margin-bottom: 18.7%; }
.product__flex-comment-item--border { margin-bottom: 2.7%; border-bottom: 2px solid #eac7cd; }
.product__flex-comment-item--txt:not(:last-of-type) { margin: 0 0 8% 0; }
.product__flex-comment-item--icon { padding-left: 1.6em; text-indent: -1.6em; }
.product__flex-comment-item--icon:not(:last-of-type) { margin-bottom: 5.3%; }
.product__flex-comment-item--icon::before { margin-right: 1em; color: #eac7cd; font-weight: 900; font-family: "Font Awesome 5 Free"; vertical-align: baseline; font-size: 1.6rem; content: ""; }

/*------------------------------
landing page/web site/postcard
--------------------------------*/
.product__flex-comment { margin-top: 18.7%; }

/*------------------------------
landing page
--------------------------------*/
.product__flex-img-site { margin-top: 10.7%; }
.product__flex-img-site-icon { width: 66.7%; text-align: center; }
.product__flex-img-site-icon:first-of-type { margin-bottom: 5.3%; }
.product__flex-img-site-icon--link { display: block; padding: 1.7% 0; background: #eac7cd; }
.product__flex-img-site-icon--link::after { display: inline-block; margin-left: 3.7%; font-weight: 900; font-family: "Font Awesome 5 Free"; content: "\f138"; }

/*------------------------------
portfolio paper ver.
--------------------------------*/
.product__flex-img-site-icon--width { width: 66.7%; margin-top: 10.7%; text-align: center; }

/*------------------------------
banner_okonomiyaki/banner_car
--------------------------------*/
.product__flex-wholeimg { margin: 18.7% 0 0 0; }

.product__flex-comment--margintop { margin-top: 18.7%; }

/*------------------------------
pc用スタイルシートをインポート
--------------------------------*/
@-webkit-keyframes swing { 10% { -webkit-transform: rotate(-30deg); transform: rotate(-30deg); }
  30% { -webkit-transform: rotate(20deg); transform: rotate(20deg); }
  50% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); }
  70% { -webkit-transform: rotate(5deg); transform: rotate(5deg); }
  90% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } }
@keyframes swing { 10% { -webkit-transform: rotate(-30deg); transform: rotate(-30deg); }
  30% { -webkit-transform: rotate(20deg); transform: rotate(20deg); }
  50% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); }
  70% { -webkit-transform: rotate(5deg); transform: rotate(5deg); }
  90% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } }
@media (min-width: 678px) { html { font-size: 87.5%; }
  body { font-size: 1.142rem; }
  /*------------------------------ ヘッダー --------------------------------*/
  .header-nav { width: 70%; margin: 0 auto; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
  .header-nav__icontop { padding: 1% 1%; width: 5%; height: auto; }
  .header-nav__icon { padding: 1% 1%; width: 5%; height: auto; }
  .header-nav__list { width: 32.89%; }
  .header-nav__list-item { width: 10.86%; }
  .header-nav__list-item:first-of-type { margin: 0 39.1%; }
  .header-nav__list-item:last-of-type { margin-left: 0; }
  .header-nav__list-item--black { padding: 83.3% 0; }
  .header-nav__list-item--black::after { position: absolute; bottom: 32.7%; left: 0; -webkit-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: left top; transform-origin: left top; width: 100%; padding-top: 2px; background: #fff; content: ''; -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; }
  .header-nav__list-item--black:hover::after { -webkit-transform: scale(1.6, 1); transform: scale(1.6, 1); }
  .line-in::after { background: #333; }
  /*------------------------------ フッター --------------------------------*/
  .footer { margin: 6.25% 0 1.04% 0; }
  .footer-flex { margin-bottom: 1%; }
  .footer-flex-icon { margin: 0 0.4%; }
  .footer-flex-icon:hover { -webkit-animation: swing 2s; animation: swing 2s; }
  .footer-flex-icon-size { padding: 14px; }
  /*------------------------------ index --------------------------------*/
  .firstview .slick_sp { display: none; }
  .firstview .slick_pc { display: block; }
  .firstview .slick_pc img { width: 100%; }
  .firstview__ttlsite { font-size: 6rem; padding: 6.25% 0; }
  .works { width: 70%; margin: 0 auto; }
  .works--ttlpage { margin: 8.9% 0 6% 0; }
  .works__flexbox { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; }
  .works__flexbox::after { display: block; width: 26%; content: ""; }
  .works__flexbox-bg { width: 26%; margin-top: 3%; padding-bottom: 26%; }
  .works__flexbox-bg .imgstyle { -webkit-transition-duration: 0.3s; transition-duration: 0.3s; }
  .works__flexbox-bg .imgstyle:hover { -webkit-transform: translateY(-10px); transform: translateY(-10px); -webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5); box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; }
  /*------------------------------ about --------------------------------*/
  .about { width: 50%; margin: 0 auto; }
  .about--ttlpage { margin-top: 23.6%; }
  .about__contentbox { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 20.8%; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
  .about__contentbox-me { width: 45.8%; }
  .about__contentbox-intro { width: 45.8%; margin-top: 0; }
  .about__contentbox-intro--name { margin: 0 0 3.6% 0; }
  .about__contentbox-intro--dream { margin: 18.1% 0 3.6% 0; }
  .about--skill-ttl { margin: 20.8% 0 4.2% 0; text-align: center; }
  .about__graph-bar { margin-bottom: 0.8%; padding: 0.2% 0 0.2% 1%; }
  .about__graph-bar::before { padding: 1.6% 0; }
  .about__graph-bar::after { padding: 1.6% 0; }
  .about__graph-bar:not(:first-of-type) { margin-top: 3.3%; }
  .about__graph-bar--pos { padding: 0.2% 0; }
  .about--like-ttl { margin: 20.8% 0 0 0; text-align: center; }
  .about__sewing { position: relative; width: 100%; height: auto; padding-top: 4.2%; }
  .about__sewing .imgstyle { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: -1; width: 60%; }
  .about__sewing-description { width: 31.25%; padding: 5% 4.4%; margin-top: 18.75%; background-color: #eac7cd; }
  .about__sewing-description--bgstyle { position: static; width: initial; background-color: transparent; }
  .about__sewing-description--margin { margin-top: 5.2%; }
  .about__traveling { position: relative; width: 100%; height: auto; margin: 0; padding-top: 8.3%; }
  .about__traveling .imgstyle { position: absolute; left: 50%; z-index: -1; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 60%; }
  .about__traveling-description { width: 31.25%; padding: 5% 4.4%; margin: 0 0 0 auto; margin-top: 18.75%; background-color: #eac7cd; }
  .about__traveling-description--bgstyle { position: static; width: initial; background-color: transparent; }
  .about__traveling-description--margin { margin-top: 5.2%; }
  /*------------------------------ product共通 --------------------------------*/
  .product { width: 70%; margin: 0 auto; }
  .product__ttlpage { margin-top: 16.9%; }
  .product__flex { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 8.9%; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
  .product__flex-img { width: 45%; }
  .product__flex--margin { margin-bottom: 1.3%; font-size: 1.142rem; }
  .product__flex--frame { width: 100%; height: auto; }
  .product__flex-comment-item { margin-bottom: 10.6%; }
  .product__flex-comment-item--border { margin: 0 0 1.3% 0; font-size: 1.142rem; }
  .product__flex-comment-item--icon:not(:last-of-type) { margin-bottom: 2.6%; }
  .product__flex-comment-item--icon::before { margin-right: 1em; color: #eac7cd; font-weight: 900; font-family: "Font Awesome 5 Free"; vertical-align: baseline; font-size: 1.142rem; content: ""; }
  /*------------------------------ landing page/web site/postcard --------------------------------*/
  .product__flex-comment { width: 45%; margin-top: 0; }
  /*------------------------------ landing page --------------------------------*/
  .product__flex-img-site { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 7.9%; }
  .product__flex-img-site-icon { width: 33.1%; }
  .product__flex-img-site-icon:first-of-type { margin: 0 6.6% 0 0; }
  .product__flex-img-site-icon--link { padding: 2.5% 0; }
  .product__flex-img-site-icon--link::after { margin-left: 4%; -webkit-transition: -webkit-transform ease .3s; transition: -webkit-transform ease .3s; transition: transform ease .3s; transition: transform ease .3s, -webkit-transform ease .3s; }
  .product__flex-img-site-icon--link:hover::after { -webkit-transform: translateX(100%); transform: translateX(100%); }
  /*------------------------------ portfolio paper ver. --------------------------------*/
  .product__flex-img-site-icon--width { width: 38%; margin-top: 7.9%; }
  /*------------------------------ banner_okonomiyaki/banner_car --------------------------------*/
  .product__flex-wholeimg { width: 45%; margin-top: 0; }
  .product__flex-comment--margintop { width: 45%; margin-top: 6%; } }

/*# sourceMappingURL=style.css.map */