@charset "utf-8";
/*
Theme Name: design works
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: design-works
Tags:

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

design works is based on Underscores http://underscores.me/, (C) 2012-2016 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
*/



/*--------------------------------------------------
  reset css
--------------------------------------------------*/
/* margin, paddingの幅を考慮せずに幅指定を可能にする */
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
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 { 
  padding: 0; margin: 0; border: 0; font-style:normal; font-weight: normal; font-size: 100%; vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
html {
  /*font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;*/
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "ＭＳ ゴシック", sans-serif;
}
h1, h2, h3, h4, h5, h6 {
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  /*font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "ＭＳ ゴシック", sans-serif;*/
}
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
input, textarea,{ padding: 0; margin: 0; }
input[type="button"],input[type="submit"] { -webkit-appearance: none; }
ol, ul{ list-style:none; }
table{ border-collapse: collapse; border-spacing:0; }
caption, th{ text-align: left; }
a:focus { outline:none; }
img { width: 100%; height: auto; display: block; vertical-align: bottom; }
.inline_block { display: inline-block; *display: inline; *zoom: 1; }
/* 入力フォームのパーツデザイン */
input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"],
input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"],
input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"],
select, textarea, .field {
  padding: 0 14px; display: block; height: 60px; line-height: 60px;
  border-radius: 6px; vertical-align: middle; box-shadow: none; border: 0;
  width: 100%; background-color: #eaedf2; font-size: 16px; font-size: 1.6rem;
  -webkit-transition: background-color 0.24s ease-in-out;
  transition: background-color 0.24s ease-in-out;
}
input::-webkit-input-placeholder, input:-ms-input-placeholder, input::-moz-placeholder {
  color: #ccc; font-weight: normal;
}
select {
  -webkit-appearance: none;
  /* 1 */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAHCAYAAADXhRcnAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpEOEZCMjYxMEYwNUUxMUUyOTI4REZGQTEzMzA2MDcyNiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpEOEZCMjYxMUYwNUUxMUUyOTI4REZGQTEzMzA2MDcyNiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkQ4RkIyNjBFRjA1RTExRTI5MjhERkZBMTMzMDYwNzI2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkQ4RkIyNjBGRjA1RTExRTI5MjhERkZBMTMzMDYwNzI2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Vxkp9gAAAI9JREFUeNpidHFxucHAwKAOxE+AmJmBMPgLxDJAfJMFSKwD4kqoAClgA+P///8ZXF1dPaCGcBKh6QcQB+3evXs7WDMIAA2QB1I7gFgDj0aQFz2BGh+AOEwwUaDAQyBlCMR7cGjcC5KHaQQBuM3IAOiKTiBVhiTUDdRUhq4Oq2aoAelAahIQ5wM1zsCmBiDAADhYMJXVZ9u9AAAAAElFTkSuQmCC);
  background-repeat: no-repeat;
  background-position: 97.5% center;
}


/*--------------------------------------------------
  reset css
--------------------------------------------------*/
/* PC対応 */
@media screen and (min-width: 769px) {
  .pc_view { display:block; }
  .sp_view { display:none; }
}

/* スマートフォン対応 */
@media screen and (max-width: 768px) {
  .pc_view { display:none; }
  .sp_view { display:block; }
}

/*--------------------------------------------------
  リンク
--------------------------------------------------*/
/*【注意】順番を入れ替えると正常に動作しなくなります*/
a {
  color: #1e1e1e; text-decoration: none; -webkit-transition: 0.3s; -moz-transition: 0.3s;
  -o-transition: 0.3s; -ms-transition: 0.3s; transition: 0.3s;
}
a:visited { color: #1e1e1e; }
a:hover { color: #0a4e99; /*background: rgba(255,255,255,0.8);*/ opacity:0.8; -moz-opacity:0.8; filter: alpha(opacity=80); }
a:active { color: #1e1e1e; }



/*--------------------------------------------------
  画像
--------------------------------------------------*/


/*--------------------------------------------------
  装飾
--------------------------------------------------*/
/* margin */

/* padding */

/* 位置揃え */

/* フォント */
html, body { width: 100%; height: 100%; color: #1e1e1e; background-color: #FFF; line-height: 1.6;  }
html { font-size:62.5%; }   /* ！！！消去厳禁！！！ */
.bold { font-weight: bold; }
em { color: #829505; }

/* デフォルトフォントサイズ */
.fs20 { font-size: 20px; font-size: 2.0rem; }
.fs18 { font-size: 18px; font-size: 1.8rem; }
.fs16 { font-size: 16px; font-size: 1.6rem; }
.fs14 { font-size: 14px; font-size: 1.4rem; }
.fs12 { font-size: 12px; font-size: 1.2rem; }
.fs10 { font-size: 10px; font-size: 1.0rem; }


/* お問い合わせの必須項目文字色 */
.hissu { color: #b50000; }

/* PC, TAB, SP共通 */
/* clearfixを使用する場合は、親要素のclassに「cf」を追加する */
.cf:after { content: ""; clear: both; display: block; }


/*--------------------------------------------------
  メインスタイル開始
--------------------------------------------------*/ 
/*--------------------------------------------------
                全サイズの基盤スタイル
--------------------------------------------------*/

  #main { margin: 0 auto; width: 100%; font-size: 16px; font-size: 1.6rem; }
  #content { margin: 0 auto; width: 100%; }
  .wrap { padding: 0 0%; margin: 0 auto 5%; width: 100%; max-width: 1100px; }
  .visual {
    margin: 0 auto 4%; width: 100%; max-width: 2000px;
    background-color: #fff; background-repeat: no-repeat; background-position: center; background-size: cover;
  }
  .visual img { width: 100%; }
  a.btn { background: #0a4e99; color: #fff; text-align: center; border-radius: 3px; padding: 2% 6%; display: inline-block; }

    /*

    <div id="top" class="wrap">
      横100%で展開する要素がない限り、このように使用すること
    </div>

  */

  /* 矢印アイコン */
  .arrow { position: relative; display: inline-block; padding: 0 16px 0 0; vertical-align: middle; text-decoration: none; }
  .arrow::before, .arrow::after {position: absolute;top: 0;bottom: 0;right: 0;margin: auto;content: "";vertical-align: middle;}
  .maru::before {/* width: 12px; *//* height: 12px; *//* -webkit-border-radius: 50%; *//* border-radius: 50%; *//* background: transparent; */}
  .maru::after { right: 5px; width: 3px; height: 3.2px; border-top: 1px solid #fff; border-right: 1px solid #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
  .maru:hover::after { border-color: #fff; }

/* font-family */
.mincho {  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; }
.gothic { font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "ＭＳ ゴシック", sans-serif; }


  /*--------------------------------------------------
  ヘッダー
  --------------------------------------------------*/ 
  header { margin: 0; width: 100%; height: auto; position: relative; }
  header #header { max-width: 1100px; margin: 20px auto; }
  header .logo { display: block; float: left; width: 17%; }
  header .logo img { width: 100%; }

  /* グローバルナビゲーション用 */
  header nav { float: right; width: 73%; }
  header nav ul { padding: 1% 0 1.5%; margin: 0 auto; width: 100%; }
  header nav ul li { padding: 5px 0; width: auto; text-align: center; float: left; margin-left: 3%; }
  header nav ul li a { display: block; width: 100%; height: 100%; font-size: 16px; font-size: 1.6rem; color: #17a1c1; }
  header nav ul li a:visited { color: #17a1c1; }
  header nav ul li a span { display: inline-block; margin-bottom: 5px; font-size: 16px; font-size: 1.6rem; }


  /*--------------------------------------------------
  フッター
  --------------------------------------------------*/ 
  footer { margin: 0 auto; width: 100%; height: auto; position: relative; background: #fff; border-top: 1px solid #f2eded; }
  #footer { max-width: 1100px; margin: 0 auto; padding: 2% 0; }
  #footer ul { float: left; width: 70%; }
  #footer ul li { float: left; margin-right: 3%; }
  #footer ul li:last-of-type { margin-right: 0; }
  #footer ul li a { font-size: 14px; font-size: 1.4rem; color: #17a1c1; }

  #copy { padding: 5px 0; margin: 0 auto; font-size: 12px; font-size: 1.2rem; text-align: center; }
/* Powered by ITreat */
  .poweredby { width: auto; height: 9px; display: inline-block; vertical-align: text-top; }

#footer #footer_link { text-align: center; margin-bottom: 2%; }
#footer #footer_link a { font-size: 16px; font-size: 1.6rem; border-bottom: 1px dotted #888; }

/* フッターボタン */
#footer_btn { font-size: 0; margin-bottom: 3%; }
#footer_btn a { display: inline-block; width: 31.3%; margin-right: 3%; }
#footer_btn a:last-of-type { margin-right: 0; }

/* ソーシャルボタン */
#social { font-size: 0; text-align: center; margin-bottom: 1%; }
#social a { display: inline-block; height: 38px; margin-right: 2.5%; }
#social a:last-of-type { margin-right: 0; }
#social a img { width: auto; height: 100%; }

/* ----------------------------------------
* ページトップボタン 
---------------------------------------- */
.gotop { position: fixed; bottom: 20px; right: 20px; }
.gotop a { display: block; z-index: 999; padding: 15px 0 0 8px; border-radius: 30px; width: 50px; height: 50px; background-color: rgba(47,47,47,0.6); color: #fff; font-weight: bold; text-decoration: none; text-align: center; }
.gotop a:hover { text-decoration: none; opacity: 0.7; }
.gotop i { position: relative; display: inline-block; padding-left: 20px; }
.gotop i::before { content: ''; width: 14px; height: 14px; border-radius: 50%; position: absolute; top: 50%; left: 0; margin-top: -7px; }
.gotop i::after { content: ''; width: 10px; height: 10px; border: 0px; border-top: solid 1px #fff; border-left: solid 1px #fff; position: absolute; top: 50%; left: 0px; margin-top: -5px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

  /*--------------------------------------------------
  ページの余白設定
  --------------------------------------------------*/
  /* コンテンツとコンテンツの間の余白 */
  #top, #news { padding-top: 0%; }  /* トップページで必要なければ削除すること */
  #main section { margin-bottom: 6%; }

  /* 共通部分 */


  /*--------------------------------------------------
  見出しの設定
  --------------------------------------------------*/
  /* ページの見出し */
  h1 {}
  #top h2.ttl { font-size: 40px; font-size: 4.0rem; border-bottom: 1px solid #0a4e99; color: #0a4e99; text-align: center; margin: 0 auto 2% auto; padding: 1% 0; max-width: 600px;}
  .description { font-size: 18px; font-size: 1.8rem; text-align: center; margin-bottom: 5%; }
  .text_right { text-align: right; font-size: 14px; font-size: 1.4rem; padding-top: 1%; }

  /*--------------------------------------------------
  固定ページの共通部分
  --------------------------------------------------*/
  /* 固定ページの親要素として使用する */
  #page { letter-spacing: -0.4px; }
  #page h1.ttl { font-size: 40px; font-size: 4.0rem; border-bottom: 1px solid #0a4e99; color: #0a4e99; text-align: center; margin: 0 auto 5% auto; padding: 1% 0; max-width: 600px;}
  #page .h2_wrap { text-align: center; }
  #page h2.ttl { font-size: 24px; font-size: 2.4rem; text-align: center; margin: 0 0 5% 0; padding: 40px 0 0; position: relative; color: #0a4e99; display: inline-block; }
  #page h2.ttl::before { font-size: 24px; font-size: 2.4rem; color: #0a4e99; position: absolute; content: attr(title); top: 0; left: 0; right: 0; margin: 0 auto; border-bottom: 1px solid #0a4e99; }

  .table { display: table; width: 100%; }
  .table .th, .table .td { display: table-cell; }
  #page .wrap .commentary { border-bottom: 1px dotted #ccc; margin-bottom: 5%; padding-bottom: 4%; }
  .left { float: left; }
  .right { float: right; }
  #page .inner { margin-bottom: 5%; }

  #online_shop .cover { width: 100%; margin-bottom: 5%; position: relative; }
  #online_shop .cover a { font-size: 18px; font-size: 1.8rem; font-weight: 600; text-align: center; color: #0a4e99; background: #fff; border: 2px solid #0a4e99; position: absolute; right: 0; bottom: 10%; left: 0; margin: 0 auto; display: block; width: 300px; padding: 1% 0; }
  #online_shop .cover a:hover { color: #fff; background: #0a4e99; border: 2px solid #fff; opacity: 0.9; }
  .text p { margin-bottom: 1em; }

  /*--------------------------------------------------
  TOP
  --------------------------------------------------*/
  #top .visual { margin: 0 auto; }
  #introduction #index_topics { font-size: 0; }
  #introduction #index_topics .box { display: inline-block; width: 31.3%; margin: 0 3% 1% 0; vertical-align: top; }
  #introduction #index_topics .box h3 { font-size: 20px; font-size: 2.0rem; text-align: center; color: #0a4e99; padding: 1% 0; }
  #introduction #index_topics .box .text { font-size: 14px; font-size: 1.4rem; }
  #introduction #index_topics .box:last-of-type { margin-right: 0; }
  #introduction #aura_diagnosis { padding-top: 3%; }
  #introduction #aura_diagnosis .image { width: 35%; }
  #introduction #aura_diagnosis .right { width: 60%; }
  #introduction #aura_diagnosis h3 { font-size: 20px; font-size: 2.0rem; color: #0a4e99; padding: 0 0 1%; }

  #top #news .inner { margin-bottom: 3%; font-size: 0; }
  #top #news .box { display: inline-block; width: 22.4%; margin: 0 3% 3% 0; vertical-align: top; }
  #top #news .box:last-of-type { margin-right: 0; }
  #top #news .box .image { height: 240px; overflow: hidden; position: relative; }
  #top #news .box .image img { height: 100%; width: auto; margin: 0 auto; position: absolute; top: 0; right: -100%; bottom: 0; left: -100%; }
  #top #news .box .date { font-size: 12px; font-size: 1.2rem; padding: 4% 0 1% 0; }
  #top #news .box h3 { font-size: 16px; font-size: 1.6rem; padding: 0; }
  #top #news a.btn { display: block; padding: 0.5% 0; color: #1e1e1e; background: #fff; border: 1px solid #1e1e1e; border-radius: 0; }
  #top #news a.btn:hover { color: #fff; background-color: #0a4e99; opacity: 1; }
  #top #news a.btn .maru::after { border-color: #1e1e1e; }
  #top #news a.btn:hover .maru::after { border-color: #fff; }

  #top #access .wrap { margin: 0 auto 3%; }
  #top #access .address { text-align: center; }
  #top #access .moyori { text-align: center; font-size: 14px; font-size: 1.4rem; }
  #top #access #map { width: 100%; }
  #access #map iframe { width: 100%; }


  /*--------------------------------------------------
  about
  --------------------------------------------------*/
  #about #staff {}
  #about #staff .inner { border-bottom: 1px solid #ccc; margin-bottom: 4%; padding-bottom: 3%; }
  #about #staff .inner .job { font-size: 16px; font-size: 1.6rem; color: #17a1c1; }
  #about #staff .inner h3 { font-size: 30px; font-size: 3.0rem; color: #0a4e99; margin-bottom: 1%; font-weight: 500; }
  #about #staff .inner .left { width: 62%; }
  #about #staff .inner .right { width: 30%; }
  #about #staff .inner .right .image { margin-bottom: 2%; }
  #access .left #address { margin-right: 30px; }
  #access .left #address .caption { font-size: 18px; font-size: 1.8rem; font-weight: 600; }
  #access .left #address .detail { margin-bottom: 1em; }


  /*--------------------------------------------------
  made_to_order
  --------------------------------------------------*/
  #made_to_order {}
  #made_to_order .inner { margin-bottom: 4%; padding-bottom: 3%; }
  #made_to_order .inner .text { width: 62%; }
  #made_to_order .inner .image { width: 30%; }
  #made_to_order #example .box { float: left; width: 15%; margin-right: 2%; }
  #made_to_order #example .box:nth-of-type(6n) { margin-right: 0; }
  #made_to_order #message .text { width: 900px; margin: 0 auto 5%; }
  #made_to_order #message .link { text-align: center; }
  #made_to_order #message .link a.btn { background-color: #17a1c1; font-size: 32px; font-size: 3.2rem; padding: 1.3% 8%; }
  #made_to_order #message .link a.maru::after { right: 30px; width: 14px; height: 14.2px; }

#made_to_order #example h2 { width: 50%; }
#made_to_order #message h2 { width: 50%; }


  /*--------------------------------------------------
  design
  --------------------------------------------------*/
  #design {}
  #design .inner { font-size: 0; }
  #design .box { display: inline-block; width: 48%; margin: 0 4% 4% 0; vertical-align: top; }
  #design .box:nth-of-type(2n) { margin-right: 0; }
  #design .box .left { width: 38%; }
  #design .box .right { width: 56%; font-size: 16px; font-size: 1.6rem; }
  #design .box .text { margin-bottom: 4%; font-weight: 500; }
  #design .box .used { color: #17a1c1; }
  #design .box ul.stones {}
  #design .box ul.stones li { display: inline-block; margin: 0 2% 3% 0; background-color: #17a1c1; color: #fff; text-align: center; padding: 2% 4%; font-size: 14px; font-size: 1.4rem; font-weight: 500; }


  /*--------------------------------------------------
  天然石
  --------------------------------------------------*/
  #stones h2 { font-size: 24px; font-size: 2.4rem; margin: 0 0 5% 0; position: relative; padding: 1% 1%; display: block; border-top: 4px double #fff; border-bottom: 4px double #fff; }
  #stones {}
/* navi */
  #stones #menuNavi { text-align: center; }
  #stones #menuNavi li { display: inline-block; font-size: 20px; font-size: 2.0rem; margin-left: 40px; }
  #stones #menuNavi li a { position: relative; }
  #stones #menuNavi li a::before { content: ''; width: 14px; height: 14px; border-radius: 50%; position: absolute; top: 50%; left: 0; margin-top: -7px; }
  #stones #menuNavi li a::after { content: ''; width: 10px; height: 10px; border: 0px; position: absolute; top: 40%; left: -20px; margin-top: -5px;
  -ms-transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
  }
  #stones #menuNavi li a.health::after { border-top: solid 1px #eaaa39; border-left: solid 1px #eaaa39; }
  #stones #menuNavi li a.money::after { border-top: solid 1px #c9c41b; border-left: solid 1px #c9c41b; }
  #stones #menuNavi li a.love::after { border-top: solid 1px #e59e9e; border-left: solid 1px #e59e9e; }
  #stones #menuNavi li a.healing::after { border-top: solid 1px #4ead1c; border-left: solid 1px #4ead1c; }
  #stones #menuNavi li a.wish::after { border-top: solid 1px #9d6ad8; border-left: solid 1px #9d6ad8; }
  #stones #menuNavi li a.amulet::after { border-top: solid 1px #1bc9c4; border-left: solid 1px #1bc9c4; }
#stones #menuNavi {
  z-index: 10;
  position: relative;
  height: 30px;
}
#stones #menuNavi .fixheader {
  position: absolute;
  width: 100%;
  top: 0px;
}
#stones #menuNavi.fixed .fixheader {
  position: fixed;
  top: 0px;
  background-color: #fff;
  padding: 1% 0;
}
/* 色設定 */
  #stones .health { color: #eaaa39; border-color: #eaaa39; }
  #stones .money { color: #c9c41b; border-color: #c9c41b; }
  #stones .love { color: #e59e9e; border-color: #e59e9e; }
  #stones .healing { color: #4ead1c; border-color: #4ead1c; }
  #stones .wish { color: #9d6ad8; border-color: #9d6ad8; }
  #stones .amulet { color: #1bc9c4; border-color: #1bc9c4; }
/* 共通設定 */
  #stones .commentary { padding-top: 2%; }
  #stones .commentary h2.ttl { display: block; border-top: 1px solid #fff; border-bottom: 1px solid #fff; padding: 1% 0; }
  #stones .commentary h2.ttl::before { content: none; }
  #stones .commentary .inner { font-size: 0; }
  #stones .commentary .box { display: inline-block; width: 18.4%; margin: 0 2% 2% 0; padding: 1%; background-color: #f2f2f2; vertical-align: top; }
  #stones .commentary .box:nth-of-type(5n) { margin-right: 0; }
  #stones .commentary .box .name { font-size: 16px; font-size: 1.6rem; color: #17a1c1; text-align: center; padding: 3% 0 1%; }
  #stones .commentary .box .text { font-size: 14px; font-size: 1.4rem; }


  /*--------------------------------------------------
  アクセス
  --------------------------------------------------*/
  #access .left { width: 30%; }
  #access .left .address { line-height: 1.8; margin-bottom: 3%; }
/*  #access .left a { background: #0a4e99; color: #fff; text-align: center; border-radius: 3px; padding: 2% 6%; display: inline-block; }*/
  #access .right { width: 63%; }


  /*--------------------------------------------------
  お客様の声
  --------------------------------------------------*/
  #voice h2.ttl { display: block; margin: 0 0 3% 0; padding: 0; text-align: right; border-bottom: 1px dashed #17a1c1; }
  #voice h2.ttl::before { border-bottom: none; }
  #voice .box { margin-bottom: 2%; border: 1px solid #0a4e99; padding: 2% 3%; display: inline-block; width: 48%; margin-right: 3%; vertical-align: top; }
  #voice .box:nth-of-type(2n) { margin-right: 0; }


  /*--------------------------------------------------
  お知らせ
  --------------------------------------------------*/
/* アーカイブ */
  #archive .wrap { margin: 0 auto 8%; }
  #archive .box { display: block; margin: 0 0 3% 0;}
  #archive .box .right { width: 73%; }
  #archive .box .meta { margin-bottom: 2px; }
  #archive .box .meta .date { float: left; }
  #archive .box .meta .cate { float: right; color: #fff; padding: 1% 2%; font-size: 13px; font-size: 1.3rem; }
  #archive .box .meta .cate.restaurant { background-color: #65a702; }
  #archive .box .meta .cate.apparel { background-color: #da005a; }
  #archive .box .meta .cate.sports { background-color: #f69a07; }
  #archive .box .meta .cate.management { background-color: #4889d2; }
  #archive .box .eyecatch { height: 180px; position: relative; overflow: hidden; width: 23%; float: left; }
  #archive .box .eyecatch img { height: 100%; width: auto; margin: 0 auto; position: absolute; top: 0; right: -100%; bottom: 0; left: -100%; }
  #archive .box .title { font-size: 20px; font-size: 2.0rem; line-height: 1.4; margin-bottom: 2%; font-weight: 600; }
  #archive .box .contents { font-size: 14px; font-size: 1.4rem;  height: 8em; overflow: hidden; }


/* シングル */
  #single { margin: 0 auto; width: 100%; max-width: 1100px; }
  #single h1.ttl { line-height: 1.2; max-width: 1100px; }
  #single .date { margin: 0 auto; max-width: 1100px; }
  #single .news { margin: 0 auto 70px; width: 100%; }
  #single .news .date { margin: 0 auto 3%; font-size: 14px; font-size: 1.4rem; max-width: 1100px; }
  #single .news .eyecatch { width: 50%; margin: 0 auto 4%; }
  #single .news .eyecatch img, #single .news .box img { margin: 0 auto; width: auto; max-width: 100%; height: auto; max-height: 400px; }
  #single .news .text { font-size: 18px; }

  #single .pagelink { margin: 0 auto; width: 100%; height: 50px; position: relative; }
  #single .pagelink img.btn { width: 80px; }
  #single .pagelink .prev { position: absolute; top: 0; left: 0; bottom: 0; }
  #single .pagelink .next { position: absolute; top: 0; right: 0; bottom: 0; }
  #single .pagelink a { font-size: 20px; font-size: 2.0rem; font-weight: 600; color: #0a4e99; }
  #page .back { padding: 50px 0; margin: 0 auto; width: 100%; max-width: 1100px; }
  #page .back > .box { padding: 0 0%; }
  #page .back .btn { width: 48.5%; height: 80px; line-height: 80px; float: left; background-color: #17a1c1; text-align: center; font-size: 22px; font-size: 2.2rem; border-radius: 10px; }
  #page .back .btn:nth-of-type(1) { margin-right: 1.5%; }
  #page .back .btn:nth-of-type(2) { margin-left: 1.5%; }
  #page .back .btn a { width: 100%; height: 100%; display: block; color: #fff; border-radius: 10px; }
  #page .back .btn a:hover { background-color: #0a4e99; color: #fff; }


  /* wp-pagenavi */
  .wp-pagenavi { padding: 3% 0 0%; font-size: 16px; font-size: 1.6rem; text-align:center; font-size: 26px; font-size: 2.6rem; }
  .wp-pagenavi a, .wp-pagenavi span { padding: 12px 18px; margin: 0 1%; background-color: #17a1c1; color: #fff; border: none; }
  .wp-pagenavi a:hover, .wp-pagenavi span.current { background-color: #0a4e99; color: #FFF; }
  .wp-pagenavi span.pages { display: none; }
  .wp-pagenavi span.current { font-weight: normal; }
  .wp-pagenavi a.nextpostslink, .wp-pagenavi a.previouspostslink { padding: 10px 18px; font-family: "Trebuchet MS",sans-serif; }


  /* ビジュアルリッチテキストエディタ */
  #page #single .box .text h1, #page #single .box .text h2, #page #single .box .text h3,
  #page #single .box .text h4, #page #single .box .text h5, #page #single .box .text h6 {
    font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "游ゴシック体", "Yu Gothic", YuGothic, "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "ＭＳ ゴシック", sans-serif;
    line-height: 1.6; font-weight: bold;
  }
  #page #single .box .text h1 span, #page #single .box .text h2 span, #page #single .box .text h3 span,
  #page #single .box .text h4 span, #page #single .box .text h5 span, #page #single .box .text h6 span {
    font-weight: bold;
  }
  #page #single .box .text h1 { font-size: 30px; font-size: 3.0rem; }
  #page #single .box .text h2 { font-size: 26px; font-size: 2.6rem; }
  #page #single .box .text h3 { font-size: 22px; font-size: 2.2rem; }
  #page #single .box .text h4 { font-size: 18px; font-size: 1.8rem; }
  #page #single .box .text h5 { font-size: 14px; font-size: 1.4rem; }
  #page #single .box .text h6 { font-size: 12px; font-size: 1.2rem; }
  #page #single .box .text strong { font-weight: bold; }
  #page #single .box .text em { font-style: italic; }
  #page #single .box .text ol li { list-style-type: decimal; }
  #page #single .box .text ul li { list-style-type: disc; }
  #page #single .box .text a { text-decoration: underline; color: #009BD4; }



  /*--------------------------------------------------
  お問い合わせ
  --------------------------------------------------*/
  #contact {}
  #contact .wrap { padding: 0; }
  #contact .text { line-height: 1.8; margin-bottom: 3%; }
  /* aura */
  .aura h3 {}
  .aura .ex { margin-bottom: 2%; }
  .aura .price { width: 80%; margin: 0 auto 1%; border-collapse: collapse; }
  .aura .price th, .aura .price td { border: 1px solid #ccc; padding: 1%; text-align: center; }
  .aura .price th { color: #0a4e99; font-weight: 500; }
  .aura .price td { }
  .aura .price+.text { width: 80%; margin: 0 auto 5%; }
  .aura .price+.text a { color: #b50000; }
  /* tel */
  #contact #tel a { display: block; width: 34%; }
  #contact h3 { border-bottom: 2px solid #0a4e99; font-size: 20px; font-size: 2.0rem; margin: 0 0 20px 0; color: #0a4e99; display: inline-block; font-weight: 600; }
  #contact #form { max-width: 800px; margin: 0 auto; }

  #contact #contact_arrow { display: inline-block; width: 24px; height: 14px; vertical-align: baseline; }
  #contact .box { margin: 0 auto 5%; width: 100%; padding: 0; }
  #contact input[type=text], #contact textarea { border: 1px solid #ccc; background: #fff; font-size: 16px; font-size: 1.6rem; }
  #contact input[type=text] { height: 60px; }
  #contact input[type=tel], #contact textarea { border: 1px solid #ccc; background: #fff; font-size: 16px; font-size: 1.6rem; }
  #contact input[type=tel] { height: 60px; }
  #contact input[type=email], #contact textarea { border: 1px solid #ccc; background: #fff; font-size: 16px; font-size: 1.6rem; }
  #contact input[type=email] { height: 60px; }
  #contact textarea { height: 175px; line-height: 1.4; padding: 5px 10px 0 10px; font-size: 1.8rem;　}
  #contact label:hover { cursor: pointer; }
  #contact .wpcf7-radio label span { font-size: 16px; font-size: 1.6rem; }

  #contact .box .table { width: 100%; display: inline-table; border-collapse: separate; border-spacing: 0; border-bottom: 1px dotted #e7dddd; }
  #contact .box .table .th, #contact .box .table .td { vertical-align: middle; display: table-cell; }
  #contact .box .table .th { width: 35%; padding: 3% 3.5% 3% 0%; background: #fff; color: #0a4e99; position: relative; font-size: 16px; font-size: 1.6rem; font-weight: 500; }
  #contact .box .table .td { width: 65%; padding: 3% 0% 3% 3%; background: #fff; font-size: 14px; font-size: 1.4rem; }
  #contact .w50 { width: 50%; }



  /*ie firefoxでのselect矢印*/
  select { -webkit-appearance: none; -moz-appearance: none; appearance: none; text-indent: 0.01px; text-overflow: ""; }
  select::-ms-expand { display: none; }

  /* 送信ボタン（共通） */
  input[type=submit] {
    padding: 0; margin: 3% auto 0; width: 32%; height: 66px; line-height: 66px;
    background-color: #dce2e5; color: #0a4e99; font-size: 18px; font-size: 1.8rem; text-align: center;
    border: 1px solid #fff; outline: 1px solid #dce2e5; display: block;
  }
  input[type=submit]:hover { cursor: pointer; background-color: #0a4e99; color: #FFF; }

  /* formの枠 */
  div.wpcf7-response-output { padding: 0; margin: 0; margin-top: 1.5%; }
  /* メール送信完了ボックス */
  div.wpcf7-mail-sent-ok {
    padding: 2%; border: 2px solid #17a1c1; background-color: #F5F5F5; text-align: center;
    color: #666; font-size: 13px; font-size: 1.3rem; border-radius: 6px; color: #17a1c1;
  }
  /* 警告文のボックス */
  div.wpcf7-validation-errors {
    padding: 2%; border: 2px solid #666; background-color: #F5F5F5; text-align: center;
    color: #666; font-size: 13px; font-size: 1.3rem; border-radius: 6px;
  }
  /* エラーメッセージのカラー */
  span.wpcf7-not-valid-tip { color: #b50000; font-size: 13px; font-size: 1.3rem; }
  /* エラー箇所の背景色 */
  .wpcf7 .wpcf7-not-valid { background-color: #DDD; color: #666; }

  /*--------------------------------------------------
  オーダーフォーム
  --------------------------------------------------*/
  #order_flow .inner { font-size: 0; margin-bottom: 8%; }
  #order_flow .box { width: 23%; display: inline-block; margin: 0 2% 3% 0; position: relative; vertical-align: top; }
  #order_flow .box:last-of-type { width: 87%; display: block; margin: 0 auto; }
  #order_flow .box::before { content: ''; margin: 0 auto 30px; display: block; width: 110px; height: 110px; background-position: center; background-repeat: no-repeat; background-size: contain; }
  #order_flow .box:nth-of-type(1)::before { background-image: url(/wp-content/themes/design-works/svg/order_step1.svg); }
  #order_flow .box:nth-of-type(2)::before { background-image: url(/wp-content/themes/design-works/svg/order_step2.svg); }
  #order_flow .box:nth-of-type(3)::before { background-image: url(/wp-content/themes/design-works/svg/order_step3.svg); }
  #order_flow .box:nth-of-type(4)::before { background-image: url(/wp-content/themes/design-works/svg/order_step4.svg); }
  #order_flow .box:nth-of-type(5)::before { background-image: url(/wp-content/themes/design-works/svg/order_step5.svg); display: inline-block; margin-right: 2%; }
  #order_flow .box::after {
  content: '';
  display: inline-block;
  width: 110px;
  height: 110px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top:0;
  right: -70px;
  background-image: url(/wp-content/themes/design-works/svg/order_arrow.svg);
  }
  #order_flow .box:nth-of-type(4)::after { content: none; }
  #order_flow .box:nth-of-type(5)::after { content: none; }

  #order_flow .box h3 { display: block; border-bottom: none; text-align: center; font-size: 18px; font-size: 1.8rem; }
  #order_flow .box:nth-of-type(5) .image { display: inline-block; width: 30%; }
  #order_flow .box:nth-of-type(5) .content { display: inline-block; width: 50%; margin-left: 2%; }
  #order_flow .box:nth-of-type(5) .content h3 { text-align: left;  }
  #order_flow .box .text { font-size: 16px; font-size: 1.6rem; }
/*form*/
  #order_form {}


  /*--------------------------------------------------
  404 Not Found
  --------------------------------------------------*/
  #notfound { margin-top: 50px; }
  #notfound h1 { text-align: center; color: #17a1c1; font-size: 80px; font-size: 8.0rem; }
  #notfound .txt { margin: 0 auto; width: 100%; }
  #notfound ul { padding: 2%; margin: 1.5% auto; width: 100%; background-color: #f5f5f5; }
  #notfound ul li { list-style-type: disc; margin-left: 2%; }
  .back404 { padding: 50px 0; margin: 0 auto -50px; width: 100%; }
  .back404 .btn { margin: 0 auto; width: 50%; height: 80px; line-height: 80px; background-color: #f0dc9b; text-align: center; font-size: 22px; font-size: 2.2rem; border-radius: 10px; }
  .back404 .btn a { width: 100%; height: 100%; display: block; color: #958266; border-radius: 10px; }
  .back404 .btn a:hover { background-color: #d8bc7b; color: #fff; }

  /* flex slider */
  .flexslider { border: none!important; margin: 0 auto 6vh auto!important; }
  .flexslider ul li { max-height: 500px; overflow: hidden; }
  .flexslider img { width: 100%; }
  .flex-control-paging li a { width: 8px!important; height: 8px!important; background: rgba(224, 224, 224, 0.9)!important; box-shadow: none!important; border-radius: 20px!important; -webkit-border-radius: 20px!important; }
  .flex-direction-nav a { height: 50px!important; top: 37%!important; }
  .flex-control-paging li a.flex-active { background: rgba(23, 161, 193, 0.9)!important; }


  /*--------------------------------------------------
  LP
  --------------------------------------------------*/
  #xmas { margin: 0 0 50px; font-size: 20px; }
  #xmas .link { text-align: center; margin: 50px 0; }
  #xmas .link a.btn { background-color: #17a1c1; font-size: 32px; font-size: 3.2rem; padding: 1.3% 8%; }
  #xmas .link a.maru::after { right: 30px; width: 14px; height: 14.2px; }
  #xmas #xmax_voice { margin: 0 0 50px; border-bottom: 1px solid #e2e2e2; }
  #xmas #xmax_voice h2.ttl { display: block; width: 65%; margin: 0 auto 5%; padding-bottom: 1%; border-bottom: 1px solid #895d10; color: #895d10; line-height: 1.2; font-size: 28px; font-size: 2.8rem; }
  #xmas #xmax_voice h2.ttl::before { content: none; }
  #xmas #xmax_voice .block { margin: 0 0 50px; }
  #xmas #xmax_voice .block .image { width: 43%; float: left; }
  #xmas #xmax_voice .block .box { width: 54%; float: right; }
  #xmas #xmax_voice .block .box h3 { margin: 0 0 20px; font-weight: bold; font-size: 20px; font-size: 2.0rem; text-decoration: underline; font-family: "游ゴシック体", "Yu Gothic", YuGothic; }
  #xmas #xmax_stones .block { margin: 0 0 100px; }
  #xmas #xmax_stones .block .stone1 { margin: 0 0 20px; }
  #xmas #xmax_stones .block .stone1 .image { width: 46%; float: left; padding: 50px 0 0; }
  #xmas #xmax_stones .block .stone1 .box { width: 50%; float: right; text-align: center; }
  #xmas #xmax_stones .block .stone1 .box h2 { margin: 0 auto 20px; font-size: 34px; font-size: 3.4rem; color: #895d10; }
  #xmas #xmax_stones .block .stone1 .box h2::before { content: ''; display: block; width: 62px; height: 41px; margin: 0 auto; background: url(/wp-content/themes/design-works/img/xmas/xmas_stone_ttl_01.svg); background-repeat: no-repeat; background-size: 100%; }
  #xmas #xmax_stones .block .stone1 .box h2::after { content: ''; display: block; width: 236px; height: 23px; margin: 0 auto; background: url(/wp-content/themes/design-works/img/xmas/xmas_stone_ttl_02.svg); background-repeat: no-repeat; background-size: 100%; }
  #xmas #xmax_stones .block .stone1 .box .text { font-size: 20px; }
  #xmas #xmax_stones .block .stone2 { margin: 0 0 80px; }
  #xmas #xmax_stones .block .stone2 .image { width: 30%; float: right; }
  #xmas #xmax_stones .block .stone2 .box { width: 50%; float: left; text-align: center; text-align: left; }
  #xmas #xmax_stones .block .stone2 .box h3 { margin: 0 0 20px; font-size: 34px; font-size: 3.4rem; color: #895d10; }
  #xmas #xmax_stones .block .power {}
  #xmas #xmax_stones .block .power h4 { display: block; width: 60%; margin: 0 auto 5%; padding-bottom: 1%; border-bottom: 1px solid #895d10; color: #895d10; line-height: 1.2; font-size: 34px; font-size: 3.4rem; text-align: center; }
  #xmas #xmax_stones .block .power ul { display: flex; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; flex-wrap: wrap; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; justify-content: center; align-items: stretch; }
  #xmas #xmax_stones .block .power ul:after { clear: both; }
  #xmas #xmax_stones .block .power ul li { margin: 0 0 10px 20px; padding: 5px 10px; border-radius: 4px; background: #c5ac84; color: #fff; text-align: center; font-size: 20px; font-size: 2.0rem; font-weight: bold; }
  #xmas #xmax_stones > .image { max-width: 1000px; margin: 0 auto 100px; }
  #xmas #hosyo { margin: 0 0 100px; }
  #xmas #hosyo h2 { width: 26%; margin: 0 0 50px; padding: 0 0 10px; border-bottom: 1px solid #895d10; color: #895d10; font-size: 34px; font-size: 3.4rem; text-align: left; }
  #xmas #hosyo .block {}
  #xmas #hosyo .block .image { float: right; width: 40%; }
  #xmas #hosyo .block .text { float: left; width: 50%; }


.grecaptcha-badge { visibility: hidden; }


/*------------------------------------------------------------------------
                                < 1280
------------------------------------------------------------------------*/

@media screen and (max-width: 1280px) {

  header nav { width: 83%; }
  header nav ul li { margin-left: 2%; }
  header #header { padding: 0 3%; }
  footer #footer { padding: 4% 3%; }
  .wrap { padding: 0 3%; }
  #page .back > .box { padding: 0 3%; }


  #contact .wrap { padding: 0 3%; }

}

/*------------------------------------------------------------------------
                                < 1100
------------------------------------------------------------------------*/

@media screen and (max-width: 1100px) {

#stones .commentary .box:nth-of-type(5n) { margin: 0 2% 3% 0; }
#stones .commentary .box { width: 23.4%; margin: 0 2% 3% 0; }
#stones .commentary .box:nth-of-type(4n) { margin: 0 0% 3% 0; }

}


/*------------------------------------------------------------------------
                                < 1000
------------------------------------------------------------------------*/

@media screen and (max-width: 1000px) {

  header .logo { width: 300px; }
  header nav { width: 56%; }
  header nav ul li { margin-left: 5%; }

  #top #news .box { width: 48%; margin-right: 4%; }
  #top #news .box:nth-of-type(2n) { margin-right: 0; }

  #made_to_order #message .text { width: 100%; }

  #order_flow .box::after { width: 80px; right: -50px; }
  #order_flow .box:last-of-type { width: 100%; }

}



/*------------------------------------------------------------------------
                                < 768
------------------------------------------------------------------------*/

@media screen and (max-width: 768px) {

#main section { margin-bottom: 8%; }

header .left { width: 100%; float: none; }
header .left .inner .box { width: 80%; float: none; margin: 0 auto; }
header .left .inner .box:last-of-type { width: 80%; float: none; margin: 0 auto 5%; }
header .right { width: 100%; float: none; margin-bottom: 5%; }
header nav ul { display: none; }
header .address { font-size: 16px; font-size: 1.6rem; width: 80%; margin: 0 auto 5%; }
#footer ul { display: none; }
footer .left { width: 80%; float: none; margin: 0 auto 5%; }
footer .left .footerLogo { margin-bottom: 0; }
footer .right { width: 100%; float: none; margin: 0; }
footer #copy { padding-bottom: 62px; text-align: center; float: none; }
  header .logo { width: 50%; margin: 0 auto; float: none; }
.gotop { display: none!important; }

#footer_btn a { display: block; width: 80%; margin: 0 auto 5% auto; }
#footer_btn a:last-of-type { margin-right: auto; }

.description { font-size: 16px; font-size: 1.6rem; margin-bottom: 10%; }

#page h1.ttl { font-size: 32px; font-size: 3.2rem; }
#page h2.ttl { text-align: left; line-height: 1; display: block; }
#page h2.ttl::before { top: 10px; }


  /*--------------------------------------------------
  見出しの設定
  --------------------------------------------------*/
  /* ページの見出し */
  h1.ttl { font-size: 24px; font-size: 2.4rem; }
  h1.ttl span { font-size: 20px; font-size: 2.0rem; }
  h2.ttl { font-size: 30px; font-size: 3.0rem; }
  h2.ttl span { font-size: 24px; font-size: 2.4rem; }

  /*--------------------------------------------------
  TOP
  --------------------------------------------------*/
  #top h2.ttl { font-size: 30px; font-size: 3.0rem; }

  #introduction #index_topics .box { width: 100%; margin: 0 0 8% 0; }
  #top #news a.btn { padding: 2% 0; }
  #introduction #index_topics .box h3 { padding: 1% 0 0; }
  #introduction #aura_diagnosis { padding-top: 0; }
  #introduction #aura_diagnosis .image { width: 100%; }
  #introduction #aura_diagnosis .right { width: 100%; }
  #introduction #aura_diagnosis h3 { text-align: center; }


  /*--------------------------------------------------
  お知らせ
  --------------------------------------------------*/
/* アーカイブ */
#archive .box .eyecatch { width: 30%; }
#archive .box .right { width: 67%; }
/* シングル */
  #single .news { margin: 0 auto 5%; }
  #single .news .eyecatch { margin: 0 auto; width: 80%; float: none; margin-bottom: 5%;}
  #single .news .eyecatch img, #single .news .box img { max-height: 350px; }
  #single .news .text { width: 100%; float: none; }

  #archive .news .box { margin-bottom: 5%; }
  #archive .news .box a { padding: 2% 3%; }
  #archive .news .box a .title { line-height: 1.4; }

  #page .back { padding: 5% 0; }
  #page .back .btn { width: 100%; height: 50px; line-height: 50px; float: none; display: block; font-size: 20px; font-size: 2.0rem; border-radius: 6px; }
  #page .back .btn:nth-of-type(1) { margin-right: 0; margin-bottom: 5%; }
  #page .back .btn:nth-of-type(2) { margin-left: 0; }

  /* wp-pagenavi */
  .wp-pagenavi { padding: 5% 0 0%; font-size: 16px; font-size: 1.6rem; }


  /*--------------------------------------------------
  about
  --------------------------------------------------*/
#about #staff .inner .left { width: 100%; float: none; }
#about #staff .inner .right { width: 100%; float: none; }
#about #staff .inner .right .image { width: 49%; margin: 0 auto 1%; display: inline-block; vertical-align: top; }

  /*--------------------------------------------------
  made_to_order
  --------------------------------------------------*/
#made_to_order .inner .image { width: 80%; float: none; margin: 0 auto 5%; }
#made_to_order .inner .text { width: 100%; float: none; }
#made_to_order #message .link a.btn { font-size: 28px; font-size: 2.8rem; width: 80%; }
#made_to_order #example .box { width: 31.3%; margin: 0 3% 3% 0; }
#made_to_order #example .box:nth-of-type(3n) { margin: 0 0% 3% 0; }

#made_to_order #example h2 { width: 100%; }
#made_to_order #message h2 { width: 100%; }

  /*--------------------------------------------------
  design
  --------------------------------------------------*/
#design .box { margin: 0 4% 6% 0;}
#design .box .left { width: 100%; float: none; }
#design .box .right { width: 100%; float: none; }

  /*--------------------------------------------------
  天然石
  --------------------------------------------------*/
#stones #menuNavi { height: 40px; }

  /*--------------------------------------------------
  アクセス
  --------------------------------------------------*/
#access .left { width: 100%; }
#access .right { width: 100%; margin-bottom: 10%; }

  /*--------------------------------------------------
  お客様の声
  --------------------------------------------------*/
  #voice h2.ttl { padding-bottom: 2%; text-align: right; }
  #voice h2.ttl::before {  }
  #voice .box { display: block; width: 100%; margin-right: 0; margin-bottom: 5%; }


  /*--------------------------------------------------
  お問い合わせ
  --------------------------------------------------*/
#contact .box .table { display: block; }
#contact .box .table .th, #contact .box .table .td { display: block; width: 100%; }
#contact .box .table .th { padding: 3% 0% 0% 0%; }
#contact .box .table .td { padding: 1% 0% 3% 0%; }

input[type=submit] { width: 50%; }

  #notfound h1 { font-size: 40px; font-size: 4rem; line-height: 1.2; margin-bottom: 5%; }
  #notfound ul li { list-style-type :none }
  .back404 { padding: 50px 3%; }
  .back404 .btn { width: 100%; height: 50px; line-height: 50px; }


  /* スマホ用フッターメニュー */
  #fixed_fotter_bottom { width: 100%; height: 57px; line-height: 50px; line-height: 5.0rem; border-top: 3px solid #fff; background-color: #17a1c1; position: fixed; bottom: 0; z-index: 99999; padding-top:5px; }
  #fixed_fotter_bottom .fixed_footer_menu_box { width: 100%; display: table; }
  #fixed_fotter_bottom .fixed_footer_menu { margin: 0 auto; width: 25%; display: table-cell; text-align: center; }
  #fixed_fotter_bottom .fixed_footer_menu img { width: 50px; height: 50px; display: inline-block; }
  /* ドロワーメニュー */
  nav.drawer-nav ul.drawer-menu { font-size: 14px; font-size: 1.4rem; }
  nav.drawer-nav ul.drawer-menu li { height: 50px; line-height: 50px; text-indent: 3%; border-bottom: 1px solid #EFEFEF; }
  nav.drawer-nav ul.drawer-menu li:last-of-type { border-bottom: none; }
  nav.drawer-nav ul.drawer-menu li a { width: 100%; height: 100%; display: block; }
  nav.drawer-nav ul.drawer-menu li a:hover { color: #24cddd; }
  nav.drawer-nav ul.drawer-menu li:hover { background-color: #F5F5F5; }
  nav.drawer-nav ul.drawer-menu li.sub { text-indent: 2em; }
  /* ドロワーの装飾 */
  .drawer--left .drawer-hamburger { display: none; }  /* ページ上部の開閉メニューを非表示 */

  /*--------------------------------------------------
  オーダーフォーム
  --------------------------------------------------*/
  #order_flow .box { width: 100%; margin: 0 0% 3% 0; }
  #order_flow .box .inbox { float: right; width: 70%; }
  #order_flow .box::before { display: inline-block; float: left; margin: 0 0px 30px 0; width: 30%; }
  #order_flow .box:nth-of-type(5)::before { margin: 0 0px 30px 0; }
  #order_flow .box::after { content: none; clear: both; }
  #order_flow .box h3 { text-align: left; }
  #order_flow .box:nth-of-type(5) .content { width: 100%; margin: 2% 0 0 0; }
  #order_flow .box:nth-of-type(5) .content h3 { margin-bottom: 3%; }
  #order_flow .box:nth-of-type(5) .image { width: 100%; }

  /*--------------------------------------------------
  404 Not Found
  --------------------------------------------------*/

#xmas #xmax_voice h2.ttl { width: 100%; }
#xmas #xmax_voice .block .image { width: 80%; margin: 0 auto 20px; float: none; }
#xmas #xmax_voice .block .box { width: 100%; float: none; }
#xmas #xmax_stones .block .stone1 .image { width: 80%; margin: 0 auto 20px; float: none; }
#xmas #xmax_stones .block .stone1 .box { width: 100%; float: none; }
#xmas #xmax_stones .block .stone2 .image { width: 60%; margin: 0 auto 20px; float: none; }
#xmas #xmax_stones .block .stone2 .box { width: 100%; float: none; }
#xmas #xmax_stones .block .power h4 { width: 100%; }
#xmas #hosyo h2 { width: 100%; }
#xmas #hosyo .block .image { width: 60%; margin: 0 auto 20px; float: none; }
#xmas #hosyo .block .text { width: 100%; float: none; }

}

/*------------------------------------------------------------------------
                                < 640
------------------------------------------------------------------------*/

@media screen and (max-width: 640px) {


#stones #menuNavi { height: 80px; }
#stones .commentary .box:nth-of-type(4n) { margin: 0 2% 5% 0; }
#stones .commentary .box:nth-of-type(5n) { margin: 0 2% 5% 0; }
#stones .commentary .box { width: 32%; margin: 0 2% 5% 0; padding: 2%; }
#stones .commentary .box:nth-of-type(3n) { margin: 0 0% 5% 0; }

}