@charset "utf-8";
/*
*
* Usage: Base layout
*
* Name: style.css
*
*/
/* FONT size
---------------------------------------------------------------------
[ px ]	[ % ]
10px 	83  %		19px 	158 %
11px 	92  %		20px 	167 %
12px 	100 %		21px 	175 %
13px 	108 %		22px 	183 %
14px 	117 %		23px 	192 %
15px 	125 %		24px 	200 %
16px 	133 %		25px 	208 %
17px 	142 %		26px 	217 %
18px 	150 %
---------------------------------------------------------------------*/


/*---------------------------------------------------------------------
setting
---------------------------------------------------------------------*/
@import url(http://fonts.googleapis.com/css?family=Josefin+Sans);
body  { color:#666;}
body a  {color:#666;text-decoration: none;}
.jsf    {font-family: 'Josefin Sans', "游ゴシック体", "Yu Gothic", YuGothic, sans-serif; letter-spacing: 3px; font-style: italic;}
.jsf_n  {font-family: 'Josefin Sans', "游ゴシック体", "Yu Gothic", YuGothic, sans-serif; letter-spacing: 3px;}


/* ========769x以上======== */
@media(min-width: 769px) {
  html,body   {height:100%;}
  body  {min-width:960px; width:100%; color:#666; letter-spacing:3pt;}
  ::-moz-selection {background: #fff; color: #98d9e7;}
  ::selection {background: #fff; color: #98d9e7;}
  ::-moz-selection {background: #fff; color: #98d9e7;}

  /*---------------------------------------------------------------------
  CSS3 animation & parts layout
  ---------------------------------------------------------------------*/
  /* link */
  .trans_bg a         {opacity:1; filter:alpha(opacity=100); display:block; overflow:hidden; height:0; -moz-transition:all 0.2s ease-in; -webkit-transition:all 0.2s ease-in;}
  .trans_bg a:hover   {opacity:0; filter:alpha(opacity=0); -moz-transition: all 0.2s ease-in; -webkit-transition:all 0.2s ease-in;}
  .trans_bg_disabled a        {opacity:1; display:block; overflow:hidden; height:0; cursor: default;}
  .trans_bg_disabled a:hover  {}

  .obj  {position:absolute; z-index:0;}
  .bimg {border: 1px solid #000000;}
  .t_disabled {color: #cacaca;}

  /*---------------------------------------------------------------------
  Common layout
  ---------------------------------------------------------------------*/
  #header  { position: fixed; width: 100%; height: 50px; min-width: 960px; z-index: 9999; padding: 30px 30px 0;  }
  #header h1{ float: left; }
  #header h1 img { width: 178px; }
  /* global navigation */
  .hamburger { display: none; }
  #header #gnav       { float: right;  margin-right: 70px; margin-top: 10px;}
  #header #gnav li    { float: left; margin-right: 25px;}
  #header #gnav a             { padding:25px 10px 10px; text-decoration: none; font-size: 117%; font-weight: bold; letter-spacing: 2px;}
  #header #gnav a:hover       { border-bottom: 1px dashed #000;}
  #header #gnav a.active      { border-bottom: 1px dashed #000;}

  /*gnav-sns*/
  .gnav-sns {
    position: relative;
  }
  .gnav-sns__btn {
    background-color: transparent;
    border: none;
    color: #666;
    cursor: pointer;
    font-size: 117%;
    font-weight: bold;
    outline: none;
    padding: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  .gnav-sns-list {
    position: absolute;
    left: 50%;
    top: 15px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-transition: .1s;
    transition: .1s;
  }
  .gnav-sns:hover .gnav-sns-list {
    padding-top: 15px;
  }
  #header #gnav .gnav-sns-list__item {
    float: none;
    margin-right: 0;
  }
  .gnav-sns-list__item {
    background: #EEE;
    max-height: 0;
    overflow: hidden;
    text-align: center;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
  }
  .gnav-sns:hover .gnav-sns-list__item {
    max-height: 40px;
  }
  .gnav-sns:hover .gnav-sns-list__item:first-child {
    padding-top: 5px;
  }
  .gnav-sns:hover .gnav-sns-list__item:last-child {
    padding-bottom: 5px;
  }
  #header #gnav .gnav-sns-list__link {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    height: 40px;
    padding: 10px;
  }

  /* side & bottom navigation */
  #snav_left {
    position: fixed; top: 20%; left: 20px; z-index: 9998;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;

    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
  }
  #snav_right {
    position: fixed; top:65%; right:-150px; z-index: 9998;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;

    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
  }
  .sidenav a             { padding:10px; text-decoration: none; font-size: 117%; font-weight: bold; letter-spacing: 2px;}
  .sidenav a:hover       { border-bottom: 1px dashed #000;}
  .sidenav a.active      { border-bottom: 1px dashed #000;}
  .sidenav img           { vertical-align: middle; }

  /*********************************************************
  PageTopボタン
  *********************************************************/
  #page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10000;
  }
  #page-top a {
    background: #333;
    text-decoration: none;
    color: #fff;
    width: 50px;
    padding: 3px 0;
    text-align: center;
    display: block;
    border-radius: 5px;
    opacity: 0.6;
    font-size: 14px;
  }
  #page-top a:hover {
    text-decoration: none;
    opacity: 1;
  }

  /* page layout */
  #wrapper    {width:100%; overflow:hidden; min-width:960px;}
  #content    {margin: 180px auto 0;z-index: 0;}
  #footer     {height: 90px; text-align: center; }
  #footer p   {margin-top: 20px;}

  /* フッター上部のSNSリンク */
  #sns-img {
    display: table;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    margin-top: 130px;
  }
  #sns-img .img-sns {
    display: table-cell;
    vertical-align: middle;
  }
  #sns-img .img-sns a img {
    display: inline-block;
    margin: 0 0 0 13px;
    width: 50px;
    height: 49px;
  }

  /* common title */
  #title      {height:166px; background: url("../images/common/h2_bg.gif") top center no-repeat;}
  #title h2   {font-size: 183%; padding-top: 10px; }
  h3.title    { padding:15px; display:inline-block; font-size: 150%;  border-bottom: 1px dashed #000;}

  /*---------------------------------------------------------------------
  Top layout
  ---------------------------------------------------------------------*/
  #top_wrapper         {width: 1075px; height: 4250px; margin: 0 auto; position: relative; }
  #top_wrapper .lnk    {z-index: 4;}
  #top_wrapper .stitch {z-index: 3;}
  #top_wrapper .photo  {z-index: 2;}

  #top_wrapper #photo_01     { top: 0;      left:60px; }
  #top_wrapper #photo_02     { top: 560px;  right:30px;}
  #top_wrapper #photo_03     { top: 890px;  left:60px;}
  #top_wrapper #photo_04     { top: 1370px; left:77px;}
  #top_wrapper #photo_05     { top: 2040px; right:30px;}
  #top_wrapper #photo_06     { top: 2310px; left:0; max-width: 500px;}
  #top_wrapper #photo_07     { top: 2800px; right:30px; max-width: 640px;}
  #top_wrapper #photo_08     { top: 3600px; left:77px; }
  /*#top_wrapper #fb           { top: 3500px; left:0px; width: 400px;}*/
  /*#top_wrapper #insta        { top: 3700px; right:30px; width: 500px;}*/
  #top_wrapper #description  { top: 70px;   right: 140px;}
  #top_wrapper #description img { max-width: 160px; }

  #top_wrapper #lnk_01       { top:660px;   left:23%; }
  #top_wrapper #lnk_02       { top:1570px;  left:80%; }
  #top_wrapper #lnk_03       { top:2050px;  left:25%; }
  #top_wrapper #lnk_04       { top:2580px;  right:25%; }
  #top_wrapper #lnk_05       { top:2880px;  left:18%; }
  #top_wrapper #lnk_06       { top:3350px;  right:25%; }
  /*#top_wrapper #lnk_sns       { top:3350px;  right:50%; }*/

  #top_wrapper h2#lnk_01 {
    background:url(../images/top/lnk_01_on.gif) no-repeat 0 0;
    text-align: center;
  }
  #top_wrapper h2#lnk_01 a { 
    background:url(../images/top/lnk_01.gif) no-repeat 0 0;
    padding-top: 114px;
    color: #333;
    padding-bottom: 5px;
  }
  #top_wrapper h2#lnk_01 .number {
    width: 70px;
    color: #333;
    font-size: 30px;
    border-bottom: solid 1px #333;
    padding: 0 0 25px 0;
    margin: 0 0 25px 0;
    display: block;
  }
  #top_wrapper h2#lnk_01 .title {
    margin-left: -5px;
    padding-bottom: 5px;
    font-size: 18px;
    display: block;
  }
  #top_wrapper h2#lnk_01 a .title:hover {
    border-bottom: 1px dashed #000;
  }
  #top_wrapper h2#lnk_02 {
    background:url(../images/top/lnk_02_on.gif) no-repeat 0 0;
    width: 70px;
    text-align: center;
  }
  #top_wrapper h2#lnk_02 a {
    background:url(../images/top/lnk_02.gif) no-repeat 0 0;
    padding-top: 115px;
    color: #333;
    font-size: 18px;
    padding-bottom: 5px;
  }
  #top_wrapper h2#lnk_02 .number {
    color: #333;
    font-size: 30px;
    border-bottom: solid 1px #333;
    padding: 0 0 25px 0;
    margin: 0 0 25px 0;
    text-align: center;
    display: block;
  }
  #top_wrapper h2#lnk_02 a .title:hover {
    border-bottom: 1px dashed #000;
  }
  #top_wrapper h2#lnk_02 .title {
    display: block;
    padding-bottom: 5px;
    font-size: 18px;
  }
  #top_wrapper h2#lnk_03 {
    background:url(../images/top/lnk_03_on.gif) no-repeat 0 0;
    text-align: center;
  }
  #top_wrapper h2#lnk_03 a {
    background:url(../images/top/lnk_03.gif) no-repeat 0 0;
    padding-top: 115px;
    color: #333;
    font-size:18px;
  }
  #top_wrapper h2#lnk_03 .number {
    width: 70px;
    color: #333;
    font-size: 30px;
    border-bottom: solid 1px #333;
    padding: 0 0 25px 0;
    margin: 0 0 25px 0;
    display: block;
  }
  #top_wrapper h2#lnk_03 .title {
    margin-left: -40px;
    padding-bottom: 5px;
    font-size: 18px;
    display: block;
  }
  #top_wrapper h2#lnk_03 a .title:hover {
    border-bottom: 1px dashed #000;
  }
  #top_wrapper h2#lnk_04 {
    background:url(../images/top/lnk_04_on.gif) no-repeat 0 0;
    width: 70px;
    text-align: center;
  }
  #top_wrapper h2#lnk_04 a {
    background:url(../images/top/lnk_04.gif) no-repeat 0 0;
    padding-top: 116px;
    color: #333;
    font-size: 18px;
    padding-bottom: 5px;
  }
  #top_wrapper h2#lnk_04 .number {
    color: #333;
    font-size: 30px;
    border-bottom: solid 1px #333;
    padding: 0 0 25px 0;
    margin: 0 0 25px 0;
    display: block;
  }
  #top_wrapper h2#lnk_04 .title {
    margin-left: -5px;
    padding-bottom: 5px;
    font-size: 18px;
  }
  #top_wrapper h2#lnk_04 a .title:hover {
    border-bottom: 1px dashed #000;
  }
  #top_wrapper h2#lnk_05 {
    background:url(../images/top/lnk_01_on.gif) no-repeat 0 0;
    text-align: center;
  }
  #top_wrapper h2#lnk_05 a { 
    background:url(../images/top/lnk_01.gif) no-repeat 0 0;
    padding-top: 114px;
    color: #333;
    padding-bottom: 5px;
  }

  #top_wrapper h2#lnk_05 .number {
    width: 70px;
    color: #333;
    font-size: 30px;
    border-bottom: solid 1px #333;
    padding: 0 0 25px 0;
    margin: 0 0 25px 0;
    display: block;
  }
  #top_wrapper h2#lnk_05 .title {
    margin-left: -5px;
    padding-bottom: 5px;
    font-size: 18px;
  }
  #top_wrapper h2#lnk_05 a .title:hover {
    border-bottom: 1px dashed #000;
  }
  #top_wrapper h2#lnk_06 {
    background:url(../images/top/lnk_04_on.gif) no-repeat 0 0;
    width: 115px;
    text-align: center;
  }
  #top_wrapper h2#lnk_06 a {
    background:url(../images/top/lnk_04.gif) no-repeat 0 0;
    padding-top: 116px;
    color: #333;
    font-size: 18px;
    padding-bottom: 5px;
  }
  #top_wrapper h2#lnk_06 .number {
    color: #333;
    font-size: 30px;
    border-bottom: solid 1px #333;
    padding: 0 0 25px 0;
    margin: 0 0 25px 0;
    display: block;
  } 
  #top_wrapper h2#lnk_06 .title {
    display: block;
    padding-bottom: 5px;
  }
  #top_wrapper h2#lnk_06 a .title:hover {
    border-bottom: 1px dashed #000;
  }
  #top_wrapper h2#lnk_sns {
    background:url(../images/top/lnk_04_on.gif) no-repeat 0 0;
    width: 115px;
    text-align: center;
  }
  #top_wrapper h2#lnk_sns a {
    color: #333;
    font-size: 18px;
    padding-bottom: 5px;
    display: block;
  }
  #top_wrapper h2#lnk_sns a .title01:hover,
  a .title02:hover {
    border-bottom: 1px dashed #000;
  }
  #top_wrapper h2#lnk_sns .title01 {
    font-size: 18px;
    padding: 0 0 10px 0;
    margin: 0 0 0px 0;
    display: block;
  }
  .title02 {
    display: block;
    border-top: solid 1px #333;
    padding: 25px 0 10px 0;
    margin: 10px 0 0px 0;
  }

  #top_wrapper #stitch_01  { top:190px;   right:25%;  width: 260px; height: 260px; }
  #top_wrapper #stitch_02  { top:1095px;  right:35%;  width: 210px; height: 210px; }
  #top_wrapper #stitch_03  { top:1290px;  left:0;     width: 480px; height: 480px; }
  #top_wrapper #stitch_04  { top:1780px;  right:30%;  width: 330px; height: 330px; }
  #top_wrapper #stitch_05  { top:2095px;  left:77px;   width: 250px; height: 250px;}
  #top_wrapper #stitch_06  { top:2445px;  right:20%;  width: 2px;   height: 440px; }
  #top_wrapper #stitch_07  { top:4100px;  left:20%;   width: 190px; height: 190px; }
  #top_wrapper #stitch_08  { top:330px;   left:130px; width: 570px; height: 570px;}
  #top_wrapper #stitch_09  { top:3150px;  right:350px; width: 480px; height: 480px; }
}


/*---------------------------------------------------------------------
concept layout
---------------------------------------------------------------------*/

#concept_wrapper              { width: 1075px; height: 2160px; margin: 0 auto; position: relative; }
#concept_wrapper #photo_01    { top: 0px;  left:74px; max-width: 280px; }
#concept_wrapper #photo_02    { top: 100px;  right:40px; max-width: 280px; }
#concept_wrapper #photo_03    { top: 580px;  left:74px; max-width: 400px; }
#concept_wrapper #photo_04    { top: 900px;  left:310px; max-width: 350px; }
#concept_wrapper #photo_05    { top: 600px;  right:40px; max-width: 310px; }
#concept_wrapper #photo_06    { top: 1200px;  left:74px; max-width: 320px; }
#concept_wrapper #photo_07    { top: 1290px;  right:40px; max-width: 480px; }
#concept_wrapper #photo_08    { top: 1740px;  left:230px; max-width: 650px; }

#concept_wrapper #description { top: 0px;   right: 480px;}
#concept_wrapper #description img { max-width: 160px; }
#concept_wrapper #text_box    { top: 150px;  right: 380px; }
#concept_wrapper #stitch_01   { top:140px; left:33%; z-index: 3; }
#concept_wrapper #stitch_02   { top:720px; left:30%; z-index: 3; }
#concept_wrapper #stitch_03   { top:880px; left:15%; z-index: 3; }
#concept_wrapper #text_box    {font-size:117%; line-height: 280%;}

#contact                    {font-size:117%; line-height: 280%; }
#contact a                  {width: 400px; margin:20px auto 0; padding: 20px 0; display: block; border: 2px solid #000;
  text-decoration: none; font-size: 117%;}
#contact a:hover            {border: 2px dashed #000;}

/*---------------------------------------------------------------------
Menu layout
---------------------------------------------------------------------*/
#menu_wrapper { width: 1075px; height: 1500px; margin: 0 auto; position: relative; }
#menu_wrapper h3 { margin:0 0 60px; }
#menu_wrapper h3 span { font-size: 12px; }
#menu_wrapper table {
  width: 100%;
  margin:0 0 60px;
}
#menu_wrapper table th {
  text-align: center;
  width: 50%;
  font-weight: bold;
  font-size:117%;
  line-height: 280%;
}

#menu_wrapper table td {
  text-align: center;
  width: 50%;
  font-weight: bold;
  font-size:117%;
  line-height: 280%;
}

/*---------------------------------------------------------------------
Calendar layout
---------------------------------------------------------------------*/
#calendar_wrapper { width: 1075px;/* height: 580px;*/ margin: 0 auto; position: relative; }
#calendar_wrapper table {
  border-collapse: collapse;
}
#calendar_wrapper table th {
  padding: 10px 0;
}
#calendar_wrapper table td {
  padding: 10px 0;
}

/*---------------------------------------------------------------------
ShopInformation layout
---------------------------------------------------------------------*/
#contactbtn {
  padding: 50px 0 0 0;
}
#contactbtn p {
  font-size: 16px;
}
#contactbtn a:hover {
  color: #B7E9F6;
}
#shopinfo_wrapper { width: 1075px; height: 680px; margin: 0 auto; position: relative; }
#shopinfo_wrapper #map {
  top: 0px;
  left:74px;
}
#shopinfo_wrapper #map iframe {
  width: 450px;
}
#shopinfo_wrapper #shop-info {
  top: 0px;
  right: 45px;
}
#shopinfo_wrapper #shop-info p {
  font-size:117%;
  line-height: 200%;
}
#shopinfo_wrapper #shop-info iframe {
  margin: 15px 0 0 0;
  width: 450px;
}
#shop-img {
  top: 500px;
  left:70px;
}

#shop-img ul {
  list-style: none;
}

#shop-img ul:after {
  content: "";
  display: table;
  clear: both;
}
#shop-img li img{
  float: left;
  width: 33%;
  padding: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;  
}

/*---------------------------------------------------------------------
Style layout
---------------------------------------------------------------------*/

#style_wrapper              { width: 1075px; height: 1250px; margin: 0 auto; position: relative; }
#style_wrapper #photo_01    { top: 120px;  left:70px; width: 230px;}
#style_wrapper #photo_02    { top: 120px; left:330px; width: 230px;}
#style_wrapper #photo_03    { top: 510px; left:70px; width: 490px;}
#style_wrapper #photo_04    { top: 510px;  left:630px; width: 430px;}
#style_wrapper #photo_05    { top: 880px; left:130px; width: 430px;}
#style_wrapper #photo_06    { top: 880px; left:630px; width: 430px;}
#style_wrapper #text_box    { top: 130px;  right: 150px; }
#style_wrapper #stitch_01   { top:140px; left:33%; z-index: 3; }
#style_wrapper #stitch_02   { top:720px; left:30%; z-index: 3; }
#style_wrapper #stitch_03   { top:880px; left:15%; z-index: 3; }
#style_wrapper #text_box    {font-size:117%; line-height: 280%;}

#style                    {font-size:117%; line-height: 280%; }
#style a                  {width: 400px; margin:20px auto 0; padding: 20px 0; display: block; border: 2px solid #000;
  text-decoration: none; font-size: 117%;}
#style a:hover            {border: 2px dashed #000;}


/*---------------------------------------------------------------------
How to order layout
---------------------------------------------------------------------*/
#howto_wrapper #para_01 { width: 760px; height: 1600px; position: relative; margin: 100px auto 0;}
#howto_wrapper #para_02 { width: 882px; margin: 100px auto 0;}
#howto_wrapper #para_03 { width: 1000px; margin: 100px auto 0; position: relative;}
#howto_wrapper h3       {margin:0 0 60px;}

#howto_wrapper #para_01 .step       {width: 345px; }
#howto_wrapper #para_01 .step h4    {font-size: 167%; margin: 20px 0;}
#howto_wrapper #para_01 .step p     {text-align: left; line-height: 180%;}
#howto_wrapper #para_01 #step_01    {top:120px; left: 0;}
#howto_wrapper #para_01 #step_02    {top:347px; right: 0;}
#howto_wrapper #para_01 #step_03    {top:577px; left: 0;}
#howto_wrapper #para_01 #step_04    {top:804px; right: 0;}
#howto_wrapper #para_01 #step_05    {top:1031px; left: 0;}
#howto_wrapper #para_01 #step_06    {top:1258px; right: 0;}
#howto_wrapper #para_01 #stitch_01  {top:80px;  left: 232px;}
#howto_wrapper #para_01 #stitch_02  {top:80px;  right:232px;}
#howto_wrapper #para_01 #stitch_03  {top:80px;  left: 232px;}
#howto_wrapper #para_01 #stitch_04  {top:80px;  right:232px;}
#howto_wrapper #para_01 #stitch_05  {top:80px;  left: 232px;}

#howto_wrapper #para_02 p           {margin-top: 50px; line-height: 180%;}

#howto_wrapper #para_03 ul,
#howto_wrapper #para_03 p {margin-left: 75px;  line-height: 200%;}
#howto_wrapper #para_03 #photo_01 {margin-right: 75px;}
#howto_wrapper #para_03 ul {font-size: 133%; list-style:disc inside; letter-spacing: 0;}
#howto_wrapper #para_03 p {margin-top: 20px;}
#howto_wrapper #stitch_06 {top: 41px; left: 0;}
#howto_wrapper #stitch_07 {top: 273px; right: 0;}



/*---------------------------------------------------------------------
details of list layout
---------------------------------------------------------------------*/

#detail_list_wrapper #para_01 { width: 890px; height: 560px; position: relative; margin: 100px auto 0;}
#detail_list_wrapper #para_02 { width: 900px; position: relative; margin: 100px auto 0;}
#detail_list_wrapper h3 { margin:0 0 60px;}

#detail_list_wrapper #para_01 ul                {width:700px;margin: 0 auto 40px; }
#detail_list_wrapper #para_01 li                {width: 130px; margin-bottom: 18px; float: left; margin-right: 60px;}
#detail_list_wrapper #para_01 li.end            {margin-right: 0;}
#detail_list_wrapper #para_01 li a              {padding-top: 130px; }
#detail_list_wrapper #para_01 li span           { display:block; margin-top:10px; font-size: 133%; line-height: 200%;text-align: center;}
#detail_list_wrapper #para_01 #icon_01          {background:url(../images/detail_list/icon_01_on.png) no-repeat 0 0;}
#detail_list_wrapper #para_01 #icon_02          {background:url(../images/detail_list/icon_02_on.png) no-repeat 0 0;}
#detail_list_wrapper #para_01 #icon_03          {background:url(../images/detail_list/icon_03_on.png) no-repeat 0 0;}
#detail_list_wrapper #para_01 #icon_04          {background:url(../images/detail_list/icon_04_on.png) no-repeat 0 0;}
#detail_list_wrapper #para_01 #icon_05          {background:url(../images/detail_list/icon_05_on.png) no-repeat 0 0;}
#detail_list_wrapper #para_01 #icon_06          {background:url(../images/detail_list/icon_06_on.png) no-repeat 0 0;}
#detail_list_wrapper #para_01 #icon_07          {background:url(../images/detail_list/icon_07_on.png) no-repeat 0 0;}
#detail_list_wrapper #para_01 #icon_08          {background:url(../images/detail_list/icon_08_on.png) no-repeat 0 0;}
#detail_list_wrapper #para_01 #icon_01 a        {background:url(../images/detail_list/icon_01.png) no-repeat 0 0;  }
#detail_list_wrapper #para_01 #icon_02 a        {background:url(../images/detail_list/icon_02.png) no-repeat 0 0;  }
#detail_list_wrapper #para_01 #icon_03 a        {background:url(../images/detail_list/icon_03.png) no-repeat 0 0;  }
#detail_list_wrapper #para_01 #icon_04 a        {background:url(../images/detail_list/icon_04.png) no-repeat 0 0;  }
#detail_list_wrapper #para_01 #icon_05 a        {background:url(../images/detail_list/icon_05.png) no-repeat 0 0;  }
#detail_list_wrapper #para_01 #icon_06 a        {background:url(../images/detail_list/icon_06.png) no-repeat 0 0;  }
#detail_list_wrapper #para_01 #icon_07 a        {background:url(../images/detail_list/icon_07.png) no-repeat 0 0;  }
#detail_list_wrapper #para_01 #icon_08 a        {background:url(../images/detail_list/icon_08.png) no-repeat 0 0;  }

#detail_list_wrapper #para_01 #stitch_01    {top: 68px; left: 63px; z-index:-1;}
#detail_list_wrapper #para_01 #stitch_02    {top: 193px; left: 0; z-index:-1;}
#detail_list_wrapper #para_01 #stitch_03    {top: 57px; right: 30px; z-index:-1;}
#detail_list_wrapper #para_01 #stitch_04    {top: 316px; right: 90px; z-index:-1;}

#detail_list_wrapper #para_02 .text_box     {width: 390px; height: 340px; float: left; position: relative;}
#detail_list_wrapper #para_02 .text_box h4  {top:0; left: 45px;}
#detail_list_wrapper #para_02 .text_box p   {width: 290px; top: 55px; right: 0; font-size: 117%; line-height: 200%;}
#detail_list_wrapper #para_02 #text_box_02  {margin-left: 70px;}
#detail_list_wrapper #para_02 .text_box_03     {width: 390px; height: 340px; float: left; position: relative;}
#detail_list_wrapper #para_02 #text_box_01 img  {top: 163px; left:0;}
#detail_list_wrapper #para_02 #text_box_02 img  {top: 215px; left:0;}


/*---------------------------------------------------------------------
details layout
---------------------------------------------------------------------*/

#detail_wrapper .sub_nav,
#detail_wrapper .tips_container { width: 800px; margin: 0 auto 70px; }
#detail_wrapper .page_header,
#detail_wrapper .container      { width: 940px; margin: 0 auto 70px; }

#detail_wrapper .page_title     { margin: 70px auto;}

#detail_wrapper .sub_nav         {border-bottom: 1px solid #000000; text-align: center;}
#detail_wrapper .sub_nav ul      { display: inline-block;}
#detail_wrapper .sub_nav ul li   {float: left; padding:15px 5px; margin-right: 5px; }
#detail_wrapper .sub_nav ul li.end   {margin-right:0; }
#detail_wrapper .sub_nav ul li a { text-decoration: none; font-size: 117%;}
#detail_wrapper .sub_nav ul li a:hover  {text-decoration: line-through;}
#detail_wrapper .sub_nav ul li a.active {text-decoration: line-through;}

#detail_wrapper .tips_container   { border: 1px dashed #000000; padding: 55px 45px; width: 708px; }
#detail_wrapper .tips_container .tips_box   { width: 210px;}
#detail_wrapper .tips_container h5 {font-size: 167%; line-height: 200%; margin-bottom:10px; }
#detail_wrapper .tips_container h6 {font-size: 117%; line-height: 200%; margin: 10px 0; text-align: center;}
#detail_wrapper .tips_container p.lead {font-size: 117%; line-height: 200%; letter-spacing: 0;}

#detail_wrapper .page_header .text_box,
#detail_wrapper .description    { width: 740px; margin-left: 100px;}
#detail_wrapper .description p             {font-size: 117%; line-height: 200%;}
#detail_wrapper .container .text_box    { width: 325px; margin-left: 100px;}
#detail_wrapper .text_box h4            {font-size: 167%; line-height: 200%; margin-bottom: 20px;}
#detail_wrapper .text_box p             {font-size: 117%; line-height: 200%;}
#detail_wrapper .page_header hr,
#detail_wrapper .container hr           {width: 800px; height: 1px; margin:70px auto 0;  background-color: #000; border: none; color: #000;}
#detail_wrapper .page_header img,
#detail_wrapper .container img          { margin-right: 100px;}

#detail_wrapper .bg_circle { background: url("../images/common/stitch_15.png") no-repeat 0 20px;}
#detail_wrapper .bg_line { background: url("../images/common/stitch_14.png") no-repeat 0 110px;}

/*---------------------------------------------------------------------
journal layout
---------------------------------------------------------------------*/

#journal_wrapper { width: 890px; margin:95px auto 0; }
#journal_wrapper #side_nav {width: 215px; display: block;}
#journal_wrapper #entries {width: 600px; display: block;}

#journal_wrapper #side_nav h4 { font-size:183%; line-height: 200%; display: block; }
#journal_wrapper #side_nav .category {margin-bottom: 70px;}
#journal_wrapper #side_nav .category h4             {border-bottom: 1px solid #000000;}
#journal_wrapper #side_nav .category ul li          {margin: 0; border-bottom: dashed 1px #000000;}
#journal_wrapper #side_nav .category ul li a        {display: block; width: 205px;padding: 15px 5px; text-decoration: none;}
#journal_wrapper #side_nav .category ul li a:hover  {text-decoration:underline;}

#journal_wrapper #side_nav #pull_down  {border: 1px solid #000;}
#journal_wrapper #side_nav #pull_down #button        {width: 213px; height:44px; position: relative; cursor: pointer;}
#journal_wrapper #side_nav #pull_down .selected      {border-bottom: 1px solid #000;}
#journal_wrapper #side_nav #pull_down #button p      {top: 13px; left: 10px;}
#journal_wrapper #side_nav #pull_down #button span   {top: 18px; right:15px;}
#journal_wrapper #side_nav #pull_down ul             {display: none;}
#journal_wrapper #side_nav #pull_down ul li          {margin: 0; border-bottom: dashed 1px #000000;}
#journal_wrapper #side_nav #pull_down ul li a        {display: block; width: 193px;padding: 15px 10px; text-decoration: none; background: #f8f8f8;}
#journal_wrapper #side_nav #pull_down ul li a:hover  { background: #fff;}
#journal_wrapper #side_nav #pull_down ul li:last-child{border-bottom: none;}


#journal_wrapper .entry           { margin-bottom:60px;}
#journal_wrapper .entry .ent_head { margin-bottom:20px;}
#journal_wrapper .entry .ent_head h3 { margin-bottom:10px; font-size:183%; line-height: 140%; padding:7px 0; border-bottom: 1px dashed #000;}
#journal_wrapper .entry .ent_head p { margin-left: 5px; font-size: 117%; line-height: 180%;}

#journal_wrapper .entry .ent_body {letter-spacing: 0; font-size: 117%; line-height: 180%; }
#journal_wrapper .entry .ent_body img {border: 1px solid #000; margin-bottom: 20px;}
#journal_wrapper .entry .ent_body p { margin-bottom: 20px;}
#journal_wrapper .entry .ent_body a,
#journal_wrapper .entry .ent_body a:visited{ background: #bbbbbb; color: #ffffff;}
#journal_wrapper .entry .ent_body a:hover  { background: none; color: #000000;}

#journal_wrapper #pagination {font-size:183%; line-height: 140%; }
#journal_wrapper #pagination img { vertical-align: middle; }