@charset "UTF-8";
/*===========================================================
＊ Set Base Style
===========================================================*/
/* line 7, ../sass/_base.scss */
html, body {
  font-size: 13px;
  /* for IE6/7 */
  *font-size: small;
  /* for IE Quirks Mode */
  *font: x-small;
}

/* line 14, ../sass/_base.scss */
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;
  line-height: 1.5;
  vertical-align: baseline;
  background: transparent;
  font-family: Meiryo,'メイリオ','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',sans-serif;
}

/* line 36, ../sass/_base.scss */
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary {
  display: block;
}

/* line 41, ../sass/_base.scss */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

/* line 47, ../sass/_base.scss */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

/* line 54, ../sass/_base.scss */
del {
  text-decoration: line-through;
}

/* line 58, ../sass/_base.scss */
abbr[title], dfn[title] {
  border-bottom: 1px dotted #000;
  cursor: help;
}

/*	title
--------------------------------------*/
/* line 66, ../sass/_base.scss */
h1, h2, h3, h4, h5, h6 {
  font-size: 1em;
}

/*	image
--------------------------------------*/
/* line 72, ../sass/_base.scss */
img {
  margin: 0px;
  padding: 0px;
  border: none;
  vertical-align: bottom;
  /*IEの下スペ回避*/
}

/* line 78, ../sass/_base.scss */
a img {
  border: 0px;
}

/*	link
--------------------------------------*/
/* line 84, ../sass/_base.scss */
a {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

/*	ロールオーバー時、透過で使用
-------------------------------------*/
/* line 96, ../sass/_base.scss */
.toimg a:hover img {
  filter: alpha(opacity=75);
  -moz-opacity: 0.75;
  opacity: 0.75;
}

/* line 102, ../sass/_base.scss */
.tobg a:hover {
  filter: alpha(opacity=75);
  -moz-opacity: 0.75;
  opacity: 0.75;
}

/*	table
--------------------------------------*/
/* line 110, ../sass/_base.scss */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/*	list
--------------------------------------*/
/* line 118, ../sass/_base.scss */
nav ul {
  list-style: none;
}

/* line 121, ../sass/_base.scss */
li {
  list-style-type: none;
}

/*	blockquote
--------------------------------------*/
/* line 127, ../sass/_base.scss */
blockquote, q {
  quotes: none;
}

/* line 131, ../sass/_base.scss */
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

/*	line
--------------------------------------*/
/* line 140, ../sass/_base.scss */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

/*	form
--------------------------------------*/
/* line 151, ../sass/_base.scss */
input, select {
  vertical-align: middle;
}

/*	斜め文字と太字の初期化
--------------------------------------*/
/* line 158, ../sass/_base.scss */
address, caption, cite, code, dfn, em, var {
  font-style: normal;
  font-weight: normal;
}

/*===========================================================
＊ clearfix
===========================================================*/
/*	クリアフィックス - CLEAR FIX -
--------------------------------------*/
/* line 171, ../sass/_base.scss */
.cf:before, .detail__head:before,
.cf:after,
.detail__head:after {
  content: "";
  display: table;
}

/* line 173, ../sass/_base.scss */
.cf:after, .detail__head:after {
  clear: both;
}

/* line 174, ../sass/_base.scss */
.cf, .detail__head {
  zoom: 1;
}

/* overflo クリア
--------------------------------------*/
/* line 179, ../sass/_base.scss */
.c-fix {
  overflow: hidden;
  _zoom: 1;
}

/* ==================================================
 style info :
 
fonts
 10px = 77%     11px = 85%     12px = 93%     13px = 100%
 14px = 108%    15px = 116%    16px = 123.1%  17px = 131%
 18px = 138.5%  19px = 146.5%  20px = 153.9%  21px = 161.6%
 22px = 167%    23px = 174%    24px = 182%    25px = 189%
 26px = 197%
 
=================================================== */
/*===========================================================
＊ OHTER LAYOUT
===========================================================*/
/* 位置調整
--------------------------------------------------*/
/* line 220, ../sass/_base.scss */
.txtL {
  text-align: left !important;
}

/* line 221, ../sass/_base.scss */
.txtC {
  text-align: center !important;
}

/* line 222, ../sass/_base.scss */
.txtR {
  text-align: right !important;
}

/* line 223, ../sass/_base.scss */
.floatL {
  float: left;
}

/* line 224, ../sass/_base.scss */
.floatR {
  float: right;
}

/* line 225, ../sass/_base.scss */
.imgL {
  float: left;
  margin: 0 15px 15px 0;
}

/* line 226, ../sass/_base.scss */
.imgR {
  float: right;
  margin: 0 0 15px 15px;
}

/* スペース クリア
--------------------------------------------------*/
/* line 230, ../sass/_base.scss */
.noAll {
  margin: 0 !important;
  padding: 0 !important;
}

/* line 233, ../sass/_base.scss */
.bend {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/*===========================================================
Copyright (c) 2010, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 2.8.1
===========================================================*/
/* line 245, ../sass/_base.scss */
body {
  font: 13px/1.231 arial,helvetica,clean,sans-serif;
  *font-size: small;
  *font: x-small;
}

/* line 245, ../sass/_base.scss */
select, input, button, textarea, button {
  font: 99% arial,helvetica,clean,sans-serif;
}

/* line 245, ../sass/_base.scss */
table {
  font-size: inherit;
  font: 100%;
}

/* line 245, ../sass/_base.scss */
pre, code, kbd, samp, tt {
  font-family: monospace;
  *font-size: 108%;
  line-height: 100%;
}

/*===========================================================
＊ Layout
===========================================================*/
/* line 6, ../sass/_layout.scss */
body {
  color: #333;
}

/* line 9, ../sass/_layout.scss */
.gradient {
  background: linear-gradient(-29deg, #a0994b, #3199a4, #4e909c);
  background-size: 300% 300%;
  -webkit-animation: MoveBG 60s ease infinite;
  -moz-animation: MoveBG 60s ease infinite;
  -o-animation: MoveBG 60s ease infinite;
  animation: MoveBG 60s ease infinite;
}

@-webkit-keyframes MoveBG {
  0% {
    background-position: 0% 84%;
  }
  50% {
    background-position: 100% 16%;
  }
  100% {
    background-position: 0% 84%;
  }
}
@-moz-keyframes MoveBG {
  0% {
    background-position: 0% 84%;
  }
  50% {
    background-position: 100% 16%;
  }
  100% {
    background-position: 0% 84%;
  }
}
@-o-keyframes MoveBG {
  0% {
    background-position: 0% 84%;
  }
  50% {
    background-position: 100% 16%;
  }
  100% {
    background-position: 0% 84%;
  }
}
@keyframes MoveBG {
  0% {
    background-position: 0% 84%;
  }
  50% {
    background-position: 100% 16%;
  }
  100% {
    background-position: 0% 84%;
  }
}
/* line 39, ../sass/_layout.scss */
#header {
  padding-top: 1.5%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  pointer-events: none;
}

/* line 48, ../sass/_layout.scss */
.page-title {
  width: 50%;
  margin: 0 auto 0.1%;
  pointer-events: none;
}
/* line 52, ../sass/_layout.scss */
.page-title img {
  pointer-events: none;
}
@media (max-width: 480px) {
  /* line 48, ../sass/_layout.scss */
  .page-title {
    width: 70%;
  }
}

/*===========================================================
＊ Module
===========================================================*/
/* line 28, ../sass/_module.scss */
nav {
  display: none;
}

/* line 31, ../sass/_module.scss */
.nav {
  display: table;
  max-width: 420px;
  width: 80%;
  table-layout: fixed;
  margin: 0 auto;
}

/* line 38, ../sass/_module.scss */
.nav__item {
  display: table-cell;
  border-right: 1px solid #ebebeb;
}
/* line 41, ../sass/_module.scss */
.nav__item:first-child {
  border-left: 1px solid  #ebebeb;
}
/* line 44, ../sass/_module.scss */
.nav__item > a {
  display: block;
  text-align: center;
  text-decoration: none;
  color: #fff;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 85%;
  pointer-events: auto;
  font-weight: normal;
  outline: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  opacity: 0.5;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -moz-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
}

/* line 59, ../sass/_module.scss */
.thum {
  display: none;
}

/* line 62, ../sass/_module.scss */


/* line 69, ../sass/_module.scss */
#js-btn-0 {
  background: url(../img/btn_lurra.png) 0 0 no-repeat;
}

/* line 72, ../sass/_module.scss */
#js-btn-1 {
  background: url(../img/btn_designplusalpha.png) 0 0 no-repeat;
}

/* line 75, ../sass/_module.scss */
#js-btn-2 {
  background: url(../img/btn_portfolio.png) 0 0 no-repeat;
}

/* line 102, ../sass/_module.scss */
#js-btn-3 {
  background: url(../img/btn_saisui.png) 0 0 no-repeat;
}

#js-btn-4 {
  background: url(../img/btn_dotfes.png) 0 0 no-repeat;
}

/* line 111, ../sass/_module.scss */
#js-btn-5 {
  background: url(../img/btn_1click.png) 0 0 no-repeat;
}

.thum__item {
  width: 545px;
  height: 545px;
  overflow: hidden;
  text-indent: -9999px;
  display: block;
  background-size: cover;
}

/* line 116, ../sass/_module.scss */
#detail {
  position: absolute;
  z-index: 200;
  background-color: #FFF;
  padding: 80px 4%;
  width: 92%;
  display: none;
}

/* line 124, ../sass/_module.scss */
.detail__inner {
  max-width: 900px;
  margin: 0 auto;
}

/* line 128, ../sass/_module.scss */
.detail__close {
  max-width: 60px;
  width: 5%;
  min-width: 40px;
  position: fixed;
  top: 20px;
  right: 3%;
}
/* line 135, ../sass/_module.scss */
.detail__close a img {
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  width: 100%;
  height: auto;
}
/* line 141, ../sass/_module.scss */
.detail__close a:hover img {
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
}

/* line 146, ../sass/_module.scss */
.detail__date {
  color: #989898;
  font-size: 85%;
  margin-bottom: 3px;
  float: right;
}

/* line 152, ../sass/_module.scss */
ul.detail__category {
  display: inline;
}
/* line 154, ../sass/_module.scss */
ul.detail__category li {
  float: left;
  padding-right: 3px;
  margin-bottom: 3px;
  color: #989898;
  font-size: 85%;
}
/* line 12, ../sass/_module.scss */
ul.detail__category li:after {
  content: ",";
}
/* line 15, ../sass/_module.scss */
ul.detail__category li:last-child:after {
  content: "";
}
/* line 18, ../sass/_module.scss */
ul.detail__category li a {
  color: #989898;
  text-decoration: underline;
}
/* line 22, ../sass/_module.scss */
ul.detail__category li a:hover {
  color: #989898;
  text-decoration: none;
}

/* line 159, ../sass/_module.scss */
.detail__head {
  margin-bottom: 30px;
}

/* line 166, ../sass/_module.scss */
.detail__title {
  font-size: 154%;
  line-height: 1.2;
  font-weight: normal;
  margin-bottom: 30px;
  clear: both;
}

/* line 173, ../sass/_module.scss */
dl.detail_device, dl.detail_skill, dl.detail_url {
  float: left;
  margin-right: 15px;
}
/* line 176, ../sass/_module.scss */
dl.detail_device dt, dl.detail_skill dt, dl.detail_url dt {
  float: left;
  padding-right: 3px;
  margin-bottom: 3px;
  color: #c3c3c3;
  font-size: 85%;
}
/* line 182, ../sass/_module.scss */
dl.detail_device dt:after, dl.detail_skill dt:after, dl.detail_url dt:after {
  content: ":";
  padding-left: 3px;
}
/* line 187, ../sass/_module.scss */
dl.detail_device dd, dl.detail_skill dd, dl.detail_url dd {
  float: left;
  padding-right: 3px;
  margin-bottom: 3px;
  color: #989898;
  font-size: 85%;
}
/* line 12, ../sass/_module.scss */
dl.detail_device dd:after, dl.detail_skill dd:after, dl.detail_url dd:after {
  content: ",";
}
/* line 15, ../sass/_module.scss */
dl.detail_device dd:last-child:after, dl.detail_skill dd:last-child:after, dl.detail_url dd:last-child:after {
  content: "";
}
/* line 18, ../sass/_module.scss */
dl.detail_device dd a, dl.detail_skill dd a, dl.detail_url dd a {
  color: #989898;
  text-decoration: underline;
}
/* line 22, ../sass/_module.scss */
dl.detail_device dd a:hover, dl.detail_skill dd a:hover, dl.detail_url dd a:hover {
  color: #989898;
  text-decoration: none;
}

/* line 192, ../sass/_module.scss */
.detail__body p {
  margin-bottom: 30px;
  font-size: 108%;
  line-height: 1.6;
}

/* line 199, ../sass/_module.scss */
p.detail__body__img img {
  max-width: 100%;
  height: auto;
  border: 1px solid #ddd;
}

/* line 205, ../sass/_module.scss */
p.detail__body__mb {
  text-align: center;
}
/* line 207, ../sass/_module.scss */
p.detail__body__mb img {
  max-width: 100%;
  height: auto;
}

/* line 212, ../sass/_module.scss */
p.detail__body__sp {
  text-align: center;
  margin-bottom: 0;
}
/* line 215, ../sass/_module.scss */
p.detail__body__sp img {
  max-width: 100%;
  height: auto;
}

/* line 222, ../sass/_module.scss */
.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  margin-left: -30px;
  display: none;
}

/* line 230, ../sass/_module.scss */
.loading__inner {
  box-sizing: border-box;
  position: relative;
  width: 4rem;
  height: 4rem;
  margin: 0px auto 0.8rem;
  border-width: 0.1rem;
  border-style: solid;
  -moz-border-top-colors: none;
  -moz-border-right-colors: none;
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  border-image: none;
  border-color: transparent #fff;
  border-radius: 100%;
  font-size: 0px;
  line-height: 0;
  will-change: animation;
  animation: 2s linear 0s normal none infinite running rotate-loading;
  transform-origin: 50% 50% 0px;
}

@keyframes rotate-loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/*===========================================================
＊ Set State Style
===========================================================*/
/* line 8, ../sass/_state.scss */
.nav__item--act > a {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}

/* line 13, ../sass/_state.scss */
.detail--show {
  display: block !important;
}