@charset "UTF-8";
/*------- 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%; font: inherit; vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

body { line-height: 1; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

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

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

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

/*------- common ---------*/
body { font: 13px "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", verdana, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif; }

/*------- txt color ----------------*/
/*------- link color ----------------*/
a { text-decoration: none; color: #666; }

/*------- bg color ----------------*/
.bg-gray { background: #EFEDED !important; }

/*------- txt style ----------------*/
.center { text-align: center !important; }

.left { text-align: left !important; }

.right { text-align: right !important; }

.v-top { vertical-align: top; }

.v-middle { vertical-align: middle; }

.v-bottom { vertical-align: bottom; }

.f-bold, em { font-weight: bold !important; }

.f-normal { font-weight: normal !important; }

/*------- border style ----------------*/
.bo-none { border: none !important; }

.bo-t-none { border-top: none !important; }

.bo-r-none { border-right: none !important; }

.bo-b-none { border-bottom: none !important; }

.bo-l-none { border-left: none !important; }

/*------- float ----------------*/
.f-left { float: left !important; }

.f-right { float: right !important; }

.f-none { float: none !important; }

.clear { clear: both; }

/*------- position ----------------*/
.pos-relative { position: relative !important; }

.pos-absolute { position: absolute !important; }

.pos-inherit { position: inherit !important; }

/*------- sp ----------------*/
.sp-show { display: hide; }

.sp-hide { display: inherit; }

@media screen and (max-width: 599px) { .sp-show { display: inherit; }
  .sp-hide { display: hide; } }
.header { padding: 20px 30px; box-sizing: border-box; }
.header::after { content: ""; display: block; clear: both; }
.header-logo { float: left; }
.header-logo img { width: 200px; height: auto; vertical-align: bottom; }
.header-nav { float: left; margin-left: 40px; margin-top: 14px; }
.header-nav ul { overflow: hidden; }
.header-nav ul li { float: left; margin-right: 20px; }
.header-nav ul li a { display: block; padding: 5px; box-sizing: border-box; position: relative; }
.header-nav ul li a:before { content: ""; position: absolute; width: 100%; height: 2px; background: #fff; bottom: 0; left: 0; transition: all 0.4s ease; transform: scaleX(0); }
.header-nav ul li a:hover:before { transform: scaleX(1); background-color: #e30060; }
.header-nav ul li a.current { color: #e30060 !important; }
.header-nav ul li a.current:before { transform: scaleX(1); background-color: #e30060 !important; }
.header-sns { float: right; margin-top: 6px; }
.header-sns ul { overflow: hidden; }
.header-sns ul li { float: left; margin: 0 5px; }
.header-sns ul li a { display: block; padding: 10px; }
.header-sns ul li i { font-size: 18px; }

/*--------------------- contents
-----------------------*/
.contents-section { width: 100%; padding: 60px 0; }

.contents-inner { margin: 0 5.5vw; box-sizing: border-box; }

.contents-title { text-align: center; font-size: 26px; color: #e30060; line-height: 1; margin-bottom: 30px; }
.contents-title small { font-size: 14px; color: #666; }
.contents-copy { font-size: 18px; text-align: center; margin: 30px 0; color: #444; }
.contents-txt { font-size: 14px; text-align: center; margin: 0 0 30px; color: #666; line-height: 2; }
.contents-img { text-align: center; }
.contents-img img { width: auto; height: 150px; }
.contents-main { width: 100%; height: 300px; }
.contents-main img { width: 100%; height: 100%; object-fit: cover; }

.contents-cols { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; /* Safari */ -moz-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-between; /* Safari */ -moz-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; }
.contents-cols-item { box-sizing: border-box; }
.contents-cols.cols-2 .contents-cols-item { width: 48%; }

/*--------------------- access
----------------------*/
.access-section { padding: 30px 0; }

.access-txt { color: #95989A; font-size: 12px; line-height: 1.8; margin-top: 20px; }
.access-txt small { font-size: 11px; }

.access-map { width: 100%; height: 240px; }

/*--------------------- contents footer
----------------------*/
.contents-footer { background: #767676; padding: 40px 0; }
.contents-footer__title { color: white; font-size: 18px; margin-bottom: 20px; }
.contents-footer__txt { font-size: 12px; line-height: 2; color: #ddd; }
.contents-footer__form dl dt { font-size: 12px; color: white; margin-top: 20px; }
.contents-footer__form dl dt:first-child { margin-top: 0; }
.contents-footer__form .btn-section { margin: 10px 0; }

.footer { text-align: center; padding: 10px 0; }
.footer p { font-size: 11px; }

/*--------------------- form
----------------------*/
.form-style, .form-input, .form-textarea { -moz-appearance: none; -webkit-appearance: none; -o-appearance: none; -ms-appearance: none; appearance: none; border: none; border-bottom: 1px solid white; width: 100%; box-sizing: border-box; padding: 5px; background: transparent; color: white; }
.form-style:focus, .form-input:focus, .form-textarea:focus { outline: none; }
.form-style:-webkit-autofill, .form-input:-webkit-autofill, .form-textarea:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px transparent inset; }

/*--------------------- top
----------------------*/
.top-main { width: 100%; height: 500px; position: relative; }
.top-main__img { width: 100%; height: 100%; position: relative; overflow: hidden; }
.top-main__img li { position: absolute; top: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 2.4s ease,left 1.2s ease; }
.top-main__img li.is-show { opacity: 1; left: 0; }
.top-main__img li img { width: 100%; height: 100%; object-fit: cover; }
.top-main__copy { position: absolute; bottom: 60px; left: 40px; color: white; }
.top-main__copy .copy-main { font-size: 48px; position: relative; z-index: 1; text-shadow: 0 4px 9px #000; line-height: 1.1; padding: 0 5px 5px; }
.top-main__copy .copy-main:before { position: absolute; content: ""; bottom: 0; left: 0; display: block; width: 100%; height: 30px; background: #212121; opacity: 0.7; z-index: -1; }
.top-main__copy .copy-main.small { font-size: 26px; margin-top: 20px; }
.top-main__copy .copy-main.small:before { height: 21px; }

/*--------------------- element
----------------------*/
/* btn */
.btn-style, .btn-type { border: 1px solid #95989A; color: #95989A; background: white; -moz-appearance: none; -webkit-appearance: none; -o-appearance: none; -ms-appearance: none; appearance: none; box-sizing: border-box; transition: all 0.6s ease; }

.btn-type { font-size: 12px; min-width: 200px; padding: 10px 30px; }
.btn-type:hover { background: #000; color: white; }

/* btn-section */
.btn-section { margin: 40px 0; text-align: center; }

/* tag */
.tag-item { font-size: 10px; font-weight: bold; color: #95989A; display: inline-block; padding: 2px 5px; text-align: center; background: #D7D8D9; }
.tag-item.tag-active { color: white; background: #e30060; }

.sp-show { display: none; }

.sp-hide { display: initial; }

/*--------------------- mobile
----------------------*/
@media screen and (max-width: 599px) { .sp-show { display: initial; }
  .sp-hide { display: none; }
  html, body { height: 100%; }
  .header { position: fixed; padding: 10px; z-index: 10; top: 0; background: rgba(255, 255, 255, 0.9); }
  .header-logo { width: 40%; }
  .header-logo img { width: 100%; height: auto; vertical-align: bottom; }
  .header-nav { float: none; position: absolute; right: -100%; top: 65px; background: rgba(255, 255, 255, 0.9); margin-top: 0; width: 100%; transition: all 0.3s ease; }
  .header-nav ul { text-align: center; }
  .header-nav ul li { display: inline-block; float: none; }
  .header-nav.is-show { right: 0; }
  .header-sns { margin-top: 3px; }
  /*--------------------- contents -----------------------*/
  .contents-section { padding: 30px 0; }
  .contents-title { margin-bottom: 20px; font-size: 24px; }
  .contents-copy { font-size: 15px; margin: 20px 10px; }
  .contents-txt { font-size: 12px; }
  .contents-main { height: 160px; padding-top: 65px; }
  .contents-cols { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; /* Safari */ -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; /* Safari */ -moz-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; }
  .contents-cols-item { box-sizing: border-box; }
  .contents-cols.cols-2 .contents-cols-item { width: 100%; }
  /*--------------------- access ----------------------*/
  .access-txt { margin-top: 0; margin-bottom: 20px; }
  /*--------------------- contents footer ----------------------*/
  .contents-footer__form { margin-top: 20px; }
  /*--------------------- top ----------------------*/
  .top-main { height: 90%; }
  .top-main__copy { left: 5%; bottom: 5%; max-width: 90%; }
  .top-main__copy .copy-main { font-size: 40px; }
  .top-main__copy .copy-main:before { height: 70px; }
  .top-main__copy .copy-main.small { font-size: 24px; }
  /*--------------------- contact ----------------------*/
  .page-contact .contact-section { margin-top: 65px; } }
/*--------------------- pages
----------------------*/
/* works */
/*--------------------- works archives
----------------------*/
.works-items { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; /* Safari */ -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: flex-start; /* Safari */ -moz-justify-content: flex-start; -ms-justify-content: flex-start; justify-content: flex-start; }

.works-item { width: 31%; display: block; margin: 1.1%; position: relative; }
.works-item:before { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.7); z-index: 1; opacity: 0; transition: all 0.5s ease; }
.works-item:after { position: absolute; top: 50%; left: 50%; display: inline-block; padding: 5px 20px; width: 160px; margin-left: -80px; margin-top: -5px; text-align: center; box-sizing: border-box; color: white; z-index: 2; opacity: 0; transition: all 0.5s ease 0.1s; background: transparent; }
.works-item:hover:before { opacity: 1; }
.works-item:hover:after { opacity: 1; background: rgba(255, 255, 255, 0.5); }
.works-item__img { width: 100%; height: 130px; }
.works-item__img img { width: 100%; height: auto; object-fit: cover; }
.works-item__body { padding: 10px; color: #95989A; }
.works-item__title { font-size: 16px; margin-bottom: 5px; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.works-item__name { font-size: 11px; margin-bottom: 5px; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.works-item__txt { font-size: 12px; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.works-item__tag { margin-top: 10px; text-align: right; }
.works-item__tag li { display: inline; margin-left: 2px; }

a.works-item:after { content: "loanch site"; border: 1px solid white; }

div.works-item:after { content: "※公開終了"; }

/* works detail */
.works-inner { margin: 0 8vw; }

.works-info .works-client { line-height: 1; padding-bottom: 16px; }

.works-info .works-title { font-size: 18px; border-bottom: solid 1px #6d6b6c; line-height: 1; padding-bottom: 12px; display: inline-block; margin-bottom: 12px; }

.works-url { margin-bottom: 60px; }

.works-img { display: flex; margin-bottom: 30px; justify-content: space-between; }

.cap-pc { height: 362px; overflow: scroll; position: relative; width: 75%; height: 100%; padding: 40% 0 0; }

.cap-pc-img { box-sizing: border-box; position: absolute; top: 0; left: 0; width: 100%; height: auto; }

.cap-sp { background-image: url(/common/img/works/smart-phone.png); -webkit-background-size: cover; background-size: cover; background-position: center; width: 166px; height: 334px; }

.cap-sp-inner { width: 149px; height: 256px; overflow: scroll; margin: 38px auto; }

.cap-sp-img { width: 147px; height: auto; }

.cap-pc::-webkit-scrollbar, .cap-sp-inner::-webkit-scrollbar { display: none; }

.works-info .works-item__tag { text-align: inherit; margin-bottom: 60px; }

.works-achie-title { font-size: 18px; margin-bottom: 30px; }

.works-achie-content { margin-bottom: 60px; }

.works-inner .btn-section .btn-type { font-size: 18px; padding: 30px 80px; }

.works-inner .btn-section { margin: 90px 0; }

.page-list { display: flex; justify-content: space-between; }

.page-item { position: relative; overflow: hidden; width: 370px; height: 130px; }

.page-item:hover .page-bg { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); }

.page-inner { z-index: 1; position: relative; width: 370px; height: 130px; }

.page-inner a { position: absolute; content: ""; display: block; width: 100%; height: 100%; top: 0; }

.page-bg { width: 100%; height: 100%; -webkit-transition: all .3s ease; transition: all .3s ease; }

.page-btn { width: 100%; height: 100%; position: absolute; top: 0; color: #fff; background-color: rgba(0, 0, 0, 0.63); padding: 19px 66px; box-sizing: border-box; }

.page-arrow { margin-bottom: 20px; }

.page-btn .fas { font-size: 20px; vertical-align: -3px; }

.fas.fa-angle-double-left { margin-right: 12px; }

.fas.fa-angle-double-right { margin-left: 12px; }

.page-title { font-size: 14px; }

.back-worksindex { color: #666; text-align: center; margin: auto 0; }

.fas.fa-undo-alt { font-size: 30px; margin-bottom: 9px; }

@media only screen and (max-width: 500px) { .sp-none { display: none; }
  .works-inner { margin: 0; }
  .works-info .works-client { padding-bottom: 7px; }
  .works-info .works-title { font-size: 16px; padding-bottom: 12px; line-height: 1.2; }
  .works-url { margin-bottom: 40px; }
  .fa-external-link-alt { font-size: 14px; }
  .works-img { display: block; margin-bottom: 20px; }
  .cap-pc { width: 100%; height: 159px; overflow: hidden; padding: 0; }
  .cap-pc-img { width: 100%; }
  .cap-sp-inner { overflow: hidden; }
  .cap-sp { margin: 40px auto 0; overflow: hidden; }
  .works-info .works-item__tag { margin-bottom: 40px; }
  .works-achie-title { margin-bottom: 10px; font-size: 16px; }
  .works-achie-content { margin-bottom: 30px; }
  .works-inner .btn-section { margin: 70px 0; }
  .page-item { width: 30%; height: 60px; }
  .page-item:after { background-image: none; }
  .page-btn { width: 100%; padding: 20px 15px; background-color: inherit; color: inherit; } }
@media screen and (max-width: 599px) { .works-item { width: 100%; margin: 0 0 20px; }
  .works-item__body { padding: 5px 0; }
  .works-item__title { font-size: 14px; margin-bottom: 0; } }
/* about */
/*--------------------- about-info
----------------------*/
.about-info { position: relative; }
.about-info:before { content: ""; position: absolute; top: 0; z-index: -1; opacity: 0.3; width: 100%; height: 100%; display: block; background: -webkit-gradient(radial, 0% 100%, 0, 0% 100%, 241, color-stop(1, #FAB5CD), color-stop(0.84, #FAC6A0), color-stop(0.68, #DDE1A8), color-stop(0.51, #CEE9BE), color-stop(0.32, #D5F5D1), color-stop(0.13, #B4F7E8), color-stop(0, #D5EBFD)); background: -webkit-radial-gradient(0% 100%, circle, #D5EBFD 0%, #B4F7E8 13%, #D5F5D1 32%, #CEE9BE 51%, #DDE1A8 68%, #FAC6A0 84%, #FAB5CD 100%); background: -moz-radial-gradient(0% 100%, circle, #D5EBFD 0%, #B4F7E8 13%, #D5F5D1 32%, #CEE9BE 51%, #DDE1A8 68%, #FAC6A0 84%, #FAB5CD 100%); background: -o-radial-gradient(0% 100%, circle, #D5EBFD 0%, #B4F7E8 13%, #D5F5D1 32%, #CEE9BE 51%, #DDE1A8 68%, #FAC6A0 84%, #FAB5CD 100%); background: -ms-radial-gradient(0% 100%, circle, #D5EBFD 0%, #B4F7E8 13%, #D5F5D1 32%, #CEE9BE 51%, #DDE1A8 68%, #FAC6A0 84%, #FAB5CD 100%); background: radial-gradient(0% 100%, circle, #D5EBFD 0%, #B4F7E8 13%, #D5F5D1 32%, #CEE9BE 51%, #DDE1A8 68%, #FAC6A0 84%, #FAB5CD 100%); }
.about-info__list { position: absolute; bottom: -100px; left: 0; right: 0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; /* Safari */ -moz-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-around; /* Safari */ -moz-justify-content: space-around; -ms-justify-content: space-around; justify-content: space-around; width: 100%; box-sizing: border-box; max-width: 1000px; margin: 0 auto; }
.about-info__list li { width: 20%; }
.about-info__list li figure { width: 100%; height: 18vw; text-align: center; background: white; border-radius: 50%; padding: 30px 0 80px; box-sizing: border-box; position: relative; }
.about-info__list li figure img { width: auto; height: 100%; max-height: 100px; }
.about-info__list li figure figoption { position: absolute; bottom: 3vw; left: -5%; text-align: center; font-size: 11px; color: #666; width: 110%; }

.page-about .about-info { margin-bottom: 100px; padding-bottom: 100px; }

@media screen and (max-width: 599px) { /*--------------------- about-info ----------------------*/
  .about-info__list { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; /* Safari */ -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-around; /* Safari */ -moz-justify-content: space-around; -ms-justify-content: space-around; justify-content: space-around; }
  .about-info__list li { width: 45%; margin-bottom: 10px; }
  .about-info__list li figure { height: 48vw; padding: 24px 0 60px; }
  .about-info__list li figure figoption { font-size: 10px; }
  .about-info .btn-section { margin: 20px 0 0; }
  .page-about .about-info { padding-bottom: 70vw; } }
/* about */
/*--------------------- service main
----------------------*/
.service-main__items { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; /* Safari */ -moz-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-between; /* Safari */ -moz-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; }

.service-main__item { width: 50%; }
.service-main__item .item-img { position: relative; }
.service-main__item .item-img img { width: 100%; height: auto; vertical-align: bottom; }
.service-main__item .item-img figcaption { display: inline-block; font-size: 28px; color: white; position: absolute; left: 0; bottom: 30px; z-index: 1; text-shadow: 0 4px 9px #000; line-height: 1.1; padding: 0 10px 5px; }
.service-main__item .item-img figcaption:before { position: absolute; content: ""; bottom: 0; left: 0; display: block; width: 100%; height: 20px; background: #212121; opacity: 0.7; z-index: -1; }
.service-main__item .item-txt { padding: 20px; color: #666; }
.service-main__item:last-child .item-img figcaption { left: initial; right: 0; }

/*--------------------- service contents
----------------------*/
/* service-flow */
.service-flow { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; /* Safari */ -moz-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-around; /* Safari */ -moz-justify-content: space-around; -ms-justify-content: space-around; justify-content: space-around; width: 100%; box-sizing: border-box; }
.service-flow li { width: 20%; }
.service-flow li figure { width: 100%; height: 18vw; text-align: center; border-radius: 50%; padding: 30px 0 70px; box-sizing: border-box; position: relative; }
.service-flow li figure img { width: auto; height: 100%; max-height: 100px; }
.service-flow li figure figoption { position: absolute; bottom: 1vw; left: -5%; text-align: center; font-size: 11px; color: #666; width: 110%; }

/* service-education */
.service-education { position: relative; }
.service-education:before, .service-education:after { content: ""; position: absolute; width: 100%; height: 100%; display: block; top: 0; left: 0; }
.service-education:before { background: #D5DEEB; opacity: 0.9; z-index: -1; }
.service-education:after { background: url(/common/img/service/service_studio.jpg) center center no-repeat; background-size: cover; z-index: -2; }

@media screen and (max-width: 599px) { .service-main__items { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; /* Safari */ -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; /* Safari */ -moz-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; }
  .service-main__item { width: 100%; }
  .service-main__item .item-txt { padding: 10px; }
  .service-flow { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; /* Safari */ -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-around; /* Safari */ -moz-justify-content: space-around; -ms-justify-content: space-around; justify-content: space-around; }
  .service-flow li { width: 45%; margin-bottom: 10px; }
  .service-flow li figure { height: 42vw; padding: 24px 0 40px; }
  .service-flow li figure figoption { font-size: 10px; } }
/* blog */
/*--------------------- column
----------------------*/
.column-block { overflow: hidden; }
.column-block__main { width: 70%; float: left; }
.column-block__aside { width: 300px; float: right; }

/* column-head */
.column-head { margin-bottom: 30px; }
.column-head__date { margin-bottom: 10px; }
.column-head__title { font-size: 24px; margin-bottom: 20px; }

.column-post { color: #666; margin-bottom: 50px; }
.column-post__img { margin-bottom: 20px; }
.column-post__img img { width: 100%; height: auto; }
.column-post__title { font-size: 18px; margin-bottom: 10px; border-left: 4px solid #666; padding-left: 8px; }
.column-post__content { font-size: 15px; line-height: 2; }

/* post-pickup */
.post-pickup { overflow: hidden; padding-top: 5px; margin-bottom: 10px; }
.post-pickup__img { float: left; width: 30%; }
.post-pickup__img img { width: 100%; height: auto; }
.post-pickup__body { float: right; width: 65%; }
.post-pickup__date { font-size: 11px; margin-bottom: 3px; }
.post-pickup__date .label-cat { font-size: 10px; padding: 2px 4px; position: relative; top: -2px; }

/*--------------------- aside
----------------------*/
.aside-cat-nav { margin-bottom: 40px; }
.aside-cat-nav li { border-bottom: 1px dotted #ccc; }
.aside-cat-nav li a { padding: 10px 20px; box-sizing: border-box; display: block; position: relative; }
.aside-cat-nav li a:hover { background: #eee; }
.aside-cat-nav li a:before { font-family: "FontAwesome"; position: absolute; left: 0; top: 50%; margin-top: -6px; }
.aside-cat-nav li a.column:before { content: "\f108"; }
.aside-cat-nav li a.news:before { content: "\f0f3"; }
.aside-cat-nav li a.studio:before { content: "\f19d"; }

/*--------------------- label
----------------------*/
.label-cat { background: #aaa; border-radius: 4px; font-size: 12px; color: white; text-align: center; padding: 3px 10px; display: inline-block; }

.label-tag { background: white; border-radius: 4px; font-size: 11px; color: #333; text-align: center; padding: 2px 10px; display: inline-block; border: 1px solid #ccc; }

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