@charset "UTF-8";
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;font-size: 100%;vertical-align: baseline;background: transparent; list-style:none; line-height: 100%;}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}
a {color: #000;text-decoration: none;}
a:visited {color:#000;}
a:active {color: #000;}

.en_font{font-family: "futura-pt",sans-serif;letter-spacing: 0.1em;}
.video{position:relative;width:100%;padding-top:56.25%;}
.video iframe{position:absolute;top:0;right:0;width:100%;height:100%;}

.cent{ text-align:center !important;}
sup{ font-size: 60%;vertical-align: top;position: relative;top: -0.1em; font-weight: normal;}

.mt0 {margin-top:0 !important;}
.mt3 {margin-top:3% !important;}
.mt5 {margin-top: 5px;}
.mb2 { margin-bottom:2% !important;}
.mb3 { margin-bottom:3% !important;}
.mt10 {margin-top: 10px;}
.mt20 {margin-top: 20px;}
.mt25 {margin-top: 25px;}
.mt30 {margin-top: 30px;}
.mt40 {margin-top: 40px;}
.mt60 {margin-top: 60px;}
.mt100 {margin-top: 100px;}
.mr0 {margin-right:0 !important;}
.mr5 {margin-right: 5px;}
.mr10 {margin-right: 10px !important;}
.mr15 {margin-right: 15px;}
.mr18 {margin-right: 18px;}
.mr20 {margin-right: 20px;}
.mr22 {margin-right: 22px;}
.mr25 {margin-right: 25px;}
.mr36 {margin-right: 36px;}
.mr32 {margin-right: 32px;}
.mr74 {margin-right: 74px;}
.ml10 {margin-right: 10px !important;}
.mb0 {margin-bottom: 0!important;}
.mb5 {margin-bottom: 5px;}
.mb0 {margin-bottom: 0 !important;}
.mb10 {margin-bottom: 10px;}
.mb15 {margin-bottom: 15px;}
.mb20 {margin-bottom: 20px;}
.mb25 {margin-bottom: 25px;}
.mb30 {margin-bottom: 30px;}
.mb50 {margin-bottom: 50px;}
.mb60 {margin-bottom: 60px;}
.mb80 {margin-bottom: 80px;}
.pt0{ padding-top: 0 !important;}
.pt10{ padding-top: 10px !important;}
.pb0{ padding-bottom: 0 !important;}

body {font-family:YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; background:#fff; color:#000; padding-top: constant(safe-area-inset-top);/* iOS 11.2未満用 */ padding-top: env(safe-area-inset-top);/* iOS 11.2以上用 */}

body { max-width:375px; width: 100%; margin: 0 auto; }

@media screen and (max-width: 1024px) {
body { max-width:100%; width: 100%; margin: 0 auto;}
}

.con_tab{ width: 100%; box-sizing: border-box; font-size: 15px; line-height: 15px; border-bottom: 1px solid #BAB192;  padding-top: 10vh;}
.con_tab #tab1{ width: 50%; float:left; text-align: center; border-right: 1px solid #BAB192;box-sizing: border-box;}
.con_tab #tab2{ width: 50%;float: left; text-align: center;}
.con_tab #tab1 a{ width: 100%;text-align: center;display:block; padding: 12px 0;border-bottom: 5px solid #fff; font-size: 15px; }
.con_tab #tab2 a{ width: 100%;text-align: center;display:block; padding: 12px 0; font-size: 15px; }
.con_tab #tab3{ width: 50%; float:left; text-align: center; border-right: 1px solid #BAB192;box-sizing: border-box; font-size: 15px; }
.con_tab #tab4{ width: 50%;float: left; text-align: center;}
.con_tab #tab3 a{ width: 100%;text-align: center;display:block; padding:11px 0 5px 0;border-bottom: 5px solid #fff;}
.con_tab #tab4 a{ width: 100%;text-align: center;display:block; padding:11px 0 5px 0;}
.con_tab a.on{border-bottom: 5px solid #BAB192!important; box-sizing: border-box;}
.con_tab a img{ height: 19px;}
.con_tab #tab3.left{ width: 28%;}
.con_tab #tab4.right{width: 72%;}
.con_tab #tab3.left img{ width:95%; padding: 0 2.5%;}
.con_tab #tab4.right img{width: 95%; padding: 0 2.5%;}

.con_tab2{ padding-top: 10vh;}
.con_tab2{ width: 100%; box-sizing: border-box; line-height: 15px; border-bottom: 1px solid #BAB192;}
.con_tab2 #tab1{ width: 33.333333%; float:left; text-align: center; border-right: 1px solid #BAB192;box-sizing: border-box;}
.con_tab2 #tab2{ width: 33.333333%;float: left; text-align: center; border-right: 1px solid #BAB192;box-sizing: border-box;}
.con_tab2 #tab3{ width: 33.333333%;float: left; text-align: center;}
.con_tab2 #tab1 a{ width: 100%;text-align: center;display:block; padding: 9px 0 5px  0;border-bottom: 5px solid #fff; font-size: 15px; }
.con_tab2 #tab2 a{ width: 100%;text-align: center;display:block; padding: 9px 0 5px  0;border-bottom: 5px solid #fff; font-size: 15px; }
.con_tab2 #tab3 a{ width: 100%;text-align: center;display:block; padding: 9px 0 5px  0; font-size: 15px; }
.con_tab2 span{ font-size: 8px; letter-spacing: -0.2em;}
.con_tab2 a.on{border-bottom: 5px solid #BAB192!important; box-sizing: border-box;}

.con_tab3{ width: 100%; box-sizing: border-box;line-height: 15px; border-bottom: 1px solid #BAB192;}
.con_tab3 #tab1{ width: 25%; float:left; text-align: center; border-right: 1px solid #BAB192; box-sizing: border-box;}
.con_tab3 #tab2{ width: 25%; float: left; text-align: center; border-right: 1px solid #BAB192; box-sizing: border-box;}
.con_tab3 #tab3{ width: 25%; float: left; text-align: center; border-right: 1px solid #BAB192; box-sizing: border-box;}
.con_tab3 #tab4{ width: 25%; float: left; text-align: center;}
.con_tab3 #tab1 a{ width: 100%;text-align: center;display:block; padding: 12px 0;border-bottom: 5px solid #fff; font-size: 15px; }
.con_tab3 #tab2 a{ width: 100%;text-align: center;display:block; padding: 12px 0;border-bottom: 5px solid #fff; font-size: 15px; }
.con_tab3 #tab3 a{ width: 100%;text-align: center;display:block; padding: 12px 0;border-bottom: 5px solid #fff; font-size: 15px; }
.con_tab3 #tab4 a{ width: 100%;text-align: center;display:block; padding: 12px 0; font-size: 15px; }
.con_tab3 span{ font-size: 8px; letter-spacing: -0.2em;}
.con_tab3 a.on{border-bottom: 5px solid #BAB192!important; box-sizing: border-box;}



.warp{ padding: 20px 0;}
.warp img{ width: 100%;}

header{ height: 10vh; width: 100%; display: flex;justify-content: center;align-items: center; border-bottom: 1px solid #BAB192; box-sizing: border-box; position:relative; position: fixed; z-index: 10; background: #fff; top: 0; left: 0;}
header .logo{ width: 80px;}
header .page_tit{ font-size: 18px; font-weight: bold; text-align: center; line-height: 120%;}
header .page_tit span{ font-size: 13px;}
header img{ width: 100%; vertical-align: bottom;}
header .back{ width: 12px; height: 24px;position: absolute; left: 15px;top: 0; bottom: 0; margin: auto;}
header .btn{ width: 40px; height: 24px; position: absolute; right: 15px; top: 0; bottom: 0; margin: auto;}


#home .main{ height:90vh; width: 100%; background: url(../images/home/bg.png); padding-top: 10vh;}
#home .main .left{ width: 50%; float: left; border-right: 1px solid #fff; box-sizing: border-box;}
#home .main .right{ width: 50%; float: left;}
#home .main .sns{ height:11vh; width: 100%; }
#home .main .other{ height: 21.5vh; background: #fff;}
#home .main .nav01 a{ height: 14.3vh;width:100%; border-bottom: 1px solid #fff; box-sizing: border-box; display: flex;justify-content: center; align-items: center; position: relative;}
#home .main .nav02 a{ height: 14.3vh;width:100%; border-bottom: 1px solid #fff; box-sizing: border-box; display: flex;justify-content: center; align-items: center;}
#home .main .nav03 a{ height: 14.3vh;width:100%; border-bottom: 1px solid #fff; box-sizing: border-box; display: flex;justify-content: center; align-items: center; position: relative;}
#home .main .nav04 a{ height: 14.3vh;width:100%; border-bottom: 1px solid #fff; box-sizing: border-box; display: flex;align-items: center; position: relative;}
#home .main .nav05 a{ height: 14.3vh;width:100%; border-bottom: 1px solid #fff; box-sizing: border-box; display: flex;align-items: center; position: relative;}
#home .main .nav06 a{ height: 14.3vh;width:100%; border-bottom: 1px solid #fff; box-sizing: border-box; display: flex;align-items: center; position: relative;}
#home .main .nav07 a{ height: 14.3vh;width:100%; border-bottom: 1px solid #fff; box-sizing: border-box; display: flex;align-items: center; position: relative;}
#home .main .nav08 a{ height: 14.3vh;width:100%; border-bottom: 1px solid #fff; box-sizing: border-box; display: flex;align-items: center; position: relative;}
#home .main .nav09 a{ height: 11vh;float: left; width: 33.33333%; border-right: 1px solid #fff; box-sizing: border-box; display: flex; align-items: center; position: relative;}
#home .main .nav10 a{ height: 11vh;float: left; width: 33.33333%; border-right: 1px solid #fff; box-sizing: border-box; display: flex; align-items: center;}
#home .main .nav11 a{ height: 11vh;float: left; width: 33.33333%; box-sizing: border-box; display: flex;align-items: center}
#home .main .nav12 a{ height: 15.5vh; box-sizing: border-box; text-align: center;width: 100%; border-right: 1px solid #666; display: flex;align-items: center;}
#home .main .nav13 a{ height: 15.5vh; box-sizing: border-box; text-align: center;width: 100%; display: flex;align-items: center;}
#home .main .nav01 img{ width: 100%;}
#home .main .nav01 a .up{ position: absolute; top: 0; left:0; z-index: 1;width: 40px;}
#home .main .nav01 a .up img{ vertical-align: top; width: 100%;}
#home .main .nav02 img{ width: 100%;}
#home .main .nav03 img{ width: 100%;}
#home .main .nav03 a .up{ position: absolute; top: 0; left:0; z-index: 1;width: 40px;}
#home .main .nav03 a .up img{ vertical-align: top; width: 100%;}
#home .main .nav04 img{ width: 100%;}
#home .main .nav05 img{ width: 100%;}
#home .main .nav06 img{ width: 100%;}
#home .main .nav07 img{ width: 100%;}
#home .main .nav08 img{ width: 100%;}
#home .main .nav09 img{width: 100%;}
#home .main .nav10 img{width: 100%;}
#home .main .nav11 img{width: 100%;}
#home .main .nav12 img{width: 100%;}
#home .main .nav13 img{width: 100%;}
#home .main .nav07 a .play{ position: absolute; bottom: 0; right:0; z-index: 1;width: 40px;}
#home .main .nav08 a .play{ position: absolute; bottom: 0; right:0; z-index: 1;width: 40px;}
#home .main .nav07 a .play img{ vertical-align: bottom; width: 100%;}
#home .main .nav08 a .play img{ vertical-align: bottom; width: 100%;}
#home .main .nav09 a .up{ position: absolute; top: 0; left:0; z-index: 1;width: 50px;}
#home .main .nav09 a .up img{ vertical-align: top; width: 100%;}
#home .main .nav05 a .up{ position: absolute; top: 0; left:0; z-index: 1;width: 50px;}
#home .main .nav05 a .up img{ vertical-align: top; width: 100%;}
#home .main .copy{ width: 100%; height:6.3vh; text-align: center; background: #3f3f3f;display: flex;align-items: center;justify-content: center;}
#home .main .copy img{  width: 70%;}

#colorvariation { padding-top: 10vh;}
#colorvariation .slider_box01{ width: 100%;}
#colorvariation .slider_box01 .bx-pager{ text-align: center;}
#colorvariation .slider_box01 .bx-pager img{ width: 100%;}
#colorvariation .slider_box01 .bx-wrapper{ margin-bottom: 0;}
#colorvariation .slider_box01 .bx-wrapper .bx-controls-direction a{ top:-7%;}
#colorvariation .slider_box01 .btn{}
#colorvariation .slider_box01 .btn li{ display: inline-block; width: 10% !important; margin: 0 1% 3% 1%; vertical-align: bottom;}
#colorvariation .slider_box01 .btn li img{ vertical-align: bottom;}
#colorvariation .slider_box01 .ochre a.active{ border-bottom: 2px solid #bcae8c;}
#colorvariation .slider_box01 .russet a.active{ border-bottom: 2px solid #8e5c4c;}
#colorvariation .slider_box01 .aqua a.active{ border-bottom: 2px solid #5596cf;}
#colorvariation .slider_box01 .charcoal a.active{ border-bottom: 2px solid #726f65;}
#colorvariation .slider_box01 .bayleaf a.active{ border-bottom: 2px solid #7aa388;}
#colorvariation .slider_box01 .lilac a.active{ border-bottom: 2px solid #ac2d67;}
#colorvariation .slider_box01 .bg_img{ margin-top: 30px;}
#colorvariation .main{}
#colorvariation .main img{ width: 100%; vertical-align: bottom;}
#colorvariation .main .color_box{ padding:2px 0; border-bottom: 1px solid #6D6D6D; position: relative;}
#colorvariation .main .icon{ width: 26%;display: inline-block; text-align: center;vertical-align: middle;}
#colorvariation .main .copy{ width: 65.5%;display: inline-block; vertical-align: middle;}
#colorvariation .main .go{ display: inline-block;width: 3%; vertical-align: middle;}
#colorvariation .main .copy .sienna{ font-size: 15px; font-weight: bold; color:#b77e56; }
#colorvariation .main .copy .amaranth{ font-size: 15px; font-weight: bold; color:#8783BB; }
#colorvariation .main .copy .ochre{ font-size: 15px; font-weight: bold; color:#bcae8c; }
#colorvariation .main .copy .russet{ font-size: 15px; font-weight: bold; color:#8e5c4c; }
#colorvariation .main .copy .aqua{ font-size: 15px; font-weight: bold; color:#5596cf; }
#colorvariation .main .copy .charcoal{ font-size: 15px; font-weight: bold; color:#726f65; }
#colorvariation .main .copy .bayleaf{ font-size: 15px; font-weight: bold; color:#7aa388; }
#colorvariation .main .copy .lilac{ font-size: 15px; font-weight: bold; color:#ac2d67; }
#colorvariation .main .copy .tear{ font-size: 15px; font-weight: bold; color:#95b6e0; }
#colorvariation .main .copy .sunbeat{ font-size: 15px; font-weight: bold; color:#d5be4e; }
#colorvariation .main .copy .catmint{ font-size: 15px; font-weight: bold; color:#6f506b; }
#colorvariation .main .copy .seacave{ font-size: 15px; font-weight: bold; color:#272659; }
#colorvariation .main .copy .wistaria{ font-size: 15px; font-weight: bold; color:#806bae; }
#colorvariation .main .copy .rainwood{ font-size: 15px; font-weight: bold; color:#00ac9f; }
#colorvariation .main .copy .txt{ font-size: 10px;font-weight: bold; margin-top: 5px; line-height: 140%;}
#colorvariation .detail { width: 100%; position: relative;}
#colorvariation .main .color_box .limited{ position: absolute; top:0; right:10%; width: 50px;}


#colorvariation .detail a.amaranth10{ position: absolute; width: 29.7%; height: 5.8%; top: 66.3%; left: 16.2%;}
#colorvariation .detail a.amaranth8{ position: absolute; width: 29.7%; height: 5.8%; top: 78%; left: 16.2%;}
#colorvariation .detail a.amaranth6{ position: absolute; width: 29.7%; height: 5.8%; top: 89.7%; left: 16.2%;}

#colorvariation .detail a.ochre10{ position: absolute; width: 29.7%; height: 5.8%; top: 60.3%; left: 16.2%;}
#colorvariation .detail a.ochre8{ position: absolute; width: 29.7%; height: 5.8%; top: 72.2%; left: 16.2%;}
#colorvariation .detail a.ochre6{ position: absolute; width: 29.7%; height: 5.8%; top: 83.7%; left: 16.2%;}

#colorvariation .detail a.russet10{ position: absolute; width: 29.7%; height: 5.8%; top: 60.3%; left: 16.2%;}
#colorvariation .detail a.russet8{ position: absolute; width: 29.7%; height: 5.8%; top: 72.2%; left: 16.2%;}
#colorvariation .detail a.russet6{ position: absolute; width: 29.7%; height: 5.8%; top: 83.7%; left: 16.2%;}

#colorvariation .detail a.aqua10{ position: absolute; width: 29.7%; height: 5.8%; top: 60.3%; left: 16.2%;}
#colorvariation .detail a.aqua8{ position: absolute; width: 29.7%; height: 5.8%; top: 72.2%; left: 16.2%;}
#colorvariation .detail a.aqua6{ position: absolute; width: 29.7%; height: 5.8%; top: 83.7%; left: 16.2%;}

#colorvariation .detail a.charcoal10{ position: absolute; width: 29.7%; height: 5.8%; top: 60.3%; left: 16.2%;}
#colorvariation .detail a.charcoal8{ position: absolute; width: 29.7%; height: 5.8%; top: 72.2%; left: 16.2%;}
#colorvariation .detail a.charcoal6{ position: absolute; width: 29.7%; height: 5.8%; top: 83.7%; left: 16.2%;}

#colorvariation .detail a.bayleaf10{ position: absolute; width: 29.7%; height: 5.8%; top:  60.3%; left: 16.2%;}
#colorvariation .detail a.bayleaf8{ position: absolute; width: 29.7%; height: 5.8%; top: 72.2%; left: 16.2%;}
#colorvariation .detail a.bayleaf6{ position: absolute; width: 29.7%; height: 5.8%; top: 83.7%; left: 16.2%;}

#colorvariation .detail a.lilac10{ position: absolute; width: 29.7%; height: 5.8%; top: 60.3%; left: 16.2%;}
#colorvariation .detail a.lilac8{ position: absolute; width: 29.7%; height: 5.8%; top: 72.2%; left: 16.2%;}
#colorvariation .detail a.lilac6{ position: absolute; width: 29.7%; height: 5.8%; top: 83.7%; left: 16.2%;}

#colorvariation .detail a.sienna12{ position: absolute; width: 29.7%; height: 5.5%; top: 51.7%; left: 16.2%;}
#colorvariation .detail a.sienna10{ position: absolute; width: 29.7%; height: 5.5%; top: 62.7%; left: 16.2%;}
#colorvariation .detail a.sienna8{ position: absolute; width: 29.7%; height: 5.5%; top: 73.7%; left: 16.2%;}
#colorvariation .detail a.sienna6{ position: absolute; width: 29.7%; height: 5.5%; top: 84.7%; left: 16.2%;}

#colorvariation .detail a.tear10{ position: absolute; width: 29.7%; height: 5.5%; top: 62.7%; left: 16.2%;}
#colorvariation .detail a.tear8{ position: absolute; width: 29.7%; height: 5.5%; top: 73.7%; left: 16.2%;}
#colorvariation .detail a.tear6{ position: absolute; width: 29.7%; height: 5.5%; top: 84.7%; left: 16.2%;}

#colorvariation .detail a.sunbeat12{ position: absolute; width: 29.4%;height: 5.5%;top: 51.3%;left: 16.7%;}
#colorvariation .detail a.sunbeat10{ position: absolute; width: 29.4% ;height: 5.5%; top: 62.2%; left: 16.7%;}
#colorvariation .detail a.sunbeat8{ position: absolute; width:29.4%; height: 5.5%; top: 73.0%; left: 16.7%;}
#colorvariation .detail a.sunbeat6{ position: absolute; width: 29.4%; height: 5.5%; top: 83.9%; left: 16.7%;}

#colorvariation .detail a.catmint10_01{ position: absolute; width: 29.4%;height: 5.3%;top: 51.3%;left: 17.4%;}
#colorvariation .detail a.catmint10_02{ position: absolute; width: 29.4% ;height: 5.3%; top: 56.9%; left: 17.4%;}
#colorvariation .detail a.catmint8_01{ position: absolute; width: 29.4% ;height: 5.3%; top: 67.6%; left: 17.4%;}
#colorvariation .detail a.catmint8_02{ position: absolute; width: 29.4% ;height: 5.3%; top: 73.3%; left: 17.4%;}

#colorvariation .detail a.seacave8_01{ position: absolute; width: 29.4%;height: 5.3%;top: 51.3%;left: 17.4%;}
#colorvariation .detail a.seacave8_02{ position: absolute; width: 29.4% ;height: 5.3%; top: 56.9%; left: 17.4%;}
#colorvariation .detail a.seacave6_01{ position: absolute; width: 29.4% ;height: 5.3%; top: 67.6%; left: 17.4%;}
#colorvariation .detail a.seacave6_02{ position: absolute; width: 29.4% ;height: 5.3%; top: 73.3%; left: 17.4%;}

#colorvariation .detail a.rainwood10_01{ position: absolute; width: 29.4%;height: 5.8%;top: 55.6%;left: 17.4%;}
#colorvariation .detail a.rainwood10_02{ position: absolute; width: 29.4% ;height: 5.8%; top: 61.5%; left: 17.4%;}
#colorvariation .detail a.rainwood8_01{ position: absolute; width: 29.4% ;height: 5.8%; top: 73.3%; left: 17.4%;}
#colorvariation .detail a.rainwood8_02{ position: absolute; width: 29.4% ;height: 5.8%; top: 79.2%; left: 17.4%;}

#colorvariation .detail a.wistaria10_01{ position: absolute; width: 29.4%;height: 5.8%;top: 55.6%;left: 17.4%;}
#colorvariation .detail a.wistaria10_02{ position: absolute; width: 29.4% ;height: 5.8%; top: 61.5%; left: 17.4%;}
#colorvariation .detail a.wistaria8_01{ position: absolute; width: 29.4% ;height: 5.8%; top: 73.3%; left: 17.4%;}
#colorvariation .detail a.wistaria8_02{ position: absolute; width: 29.4% ;height: 5.8%; top: 79.2%; left: 17.4%;}

#colorvariation .detail a{outline: none;}


#tonedown .inner{}
#tonedown .inner2{padding: 0 5%;}
#tonedown .midashi{width: 90%;margin: 20px auto 0 auto;}
#tonedown img{width: 100%; }
#tonedown .midashi02{width: 90%;margin: 20px auto 0 auto;}
#tonedown .pattern{margin: 0 auto;}
#tonedown .pattern02{width: 60%; margin:0 auto;}
#tonedown .sub_tit {font-size: 100%;font-weight: bold;margin: 30px auto 0 auto;text-align: center;}

#tonedown .table01 table { font-size: 80%;margin:15px auto 0 auto;border-collapse: collapse;width: 100%;border: 1px solid #595858;text-align: center;vertical-align: middle; box-sizing: border-box;}
#tonedown .table01 table thead {border-right: 1px solid #595858;border-left: 1px solid #595858;text-align: center; background: url(../images/colorrecipe/bg_table.png);box-sizing: border-box;}
#tonedown .table01 table thead th {color: #000;border-right: 1px solid #595858; border-bottom: 1px solid #595858;line-height: 100%;font-size: 60%;padding: 10px 0;box-sizing: border-box;}
#tonedown .table01 table tbody th {text-align: center;vertical-align:middle;border-bottom: 1px solid #595858;background: #efefef;border-left: 1px solid #595858;box-sizing: border-box;}
#tonedown .table01 table td {padding: 10px 0;border-bottom: 1px solid #595858;border-right: 1px solid #595858;line-height: 140%; font-size: 80%; color: #585858;box-sizing: border-box;}
#tonedown .table01 table td span{;line-height: 140%; font-size: 70%; color: #585858;}
#tonedown .table01 table .w01{ width:32%;text-align: center;vertical-align: middle;}
#tonedown .table01 table .w02{ width:24%;text-align: center;vertical-align: middle;}
#tonedown .table01 table .w03{ width:44%;text-align: center;vertical-align: middle;}
#tonedown .table01 table .nop{ padding:2px;}

#tonedown .table02 table { font-size: 80%;margin: 15px auto 0 auto;border-collapse: collapse;text-align: center;vertical-align: middle;width: 100%;border: 1px solid #595858;box-sizing: border-box;}
#tonedown .table02 table thead {border-right: 1px solid #595858;border-left: 1px solid #595858;text-align: center; background: url(../images/colorrecipe/bg_table.png);box-sizing: border-box;}
#tonedown .table02 table thead th {color: #000;border-right: 1px solid #595858; border-bottom: 1px solid #595858;line-height: 100%;font-size: 80%;padding: 0;box-sizing: border-box;}
#tonedown .table02 table tbody th {text-align: center;vertical-align:middle;border-bottom: 1px solid #595858;background: #efefef;border-left: 1px solid #595858;box-sizing: border-box;}
#tonedown .table02 table td {border-bottom: 1px solid #595858;border-right: 1px solid #595858;line-height: 140%; font-size: 80%; color: #585858;box-sizing: border-box;}
#tonedown .table02 table .w01{ width:20%;vertical-align: middle; color: #000; font-weight: bold;}
#tonedown .table02 table .w02{ width:calc(80% / 3); text-align: center;vertical-align: middle;}
#tonedown .table02 table .w03{ width:calc(80% / 3); text-align: center;vertical-align: middle;}
#tonedown .table02 table .w04{ width:calc(80% / 3); text-align: center;vertical-align: middle;}

#tonedown .table02 table span{font-weight: bold;}
#tonedown .table02 table .hoshi{width: 7px; height: 10px; background:url(../images/tonedown/hoshi.png) no-repeat; background-size: contain; display: inline-block;}

#tonedown .table03 table { font-size: 80%;margin:15px auto;border-collapse: collapse;width: 100%;border: 1px solid #595858;text-align: center;vertical-align: middle; box-sizing: border-box;}
#tonedown .table03 table thead {border-right: 1px solid #595858;border-left: 1px solid #595858;text-align: center; background: url(../images/colorrecipe/bg_table.png);box-sizing: border-box;}
#tonedown .table03 table thead th {color: #000;border-right: 1px solid #595858; border-bottom: 1px solid #595858;line-height: 100%;font-size: 60%;padding: 10px 0;box-sizing: border-box;}
#tonedown .table03 table tbody th {text-align: center;vertical-align:middle;border-bottom: 1px solid #595858;background: #efefef;border-left: 1px solid #595858;box-sizing: border-box;}
#tonedown .table03 table td {padding: 10px 5px 10px 5px;border-bottom: 1px solid #595858;border-right: 1px solid #595858;line-height: 140%; font-size: 85%; color: #585858;box-sizing: border-box;}
#tonedown .table03 table .w01{ width:50%;text-align: center;vertical-align: middle;}
#tonedown .table03 table .w02{ width:50%;text-align: center;vertical-align: middle;}
#tonedown .table03 table .nop{ padding:2px;}
#tonedown .table {margin-top:15px;}

#tonedown .bg{ background: url(../images/colorrecipe/bg_table.png);}
#tonedown .padding{padding: 10px 0;}

.slash {padding: 0;width: 30%;}
.slash-inner {position: relative;width: 100%;height: 100%;}
.slash-char {position: relative;display: block;padding: 0.17em;}
.slash-char-row {padding-left: 35%;text-align: right;}
.slash-char-col {text-align: left; top: 19%;letter-spacing: -0.2em;}
#svg-bg {position: absolute;top: 0;left: 0;z-index: 100; width: 100%;height: 100%;}

#tonedown .note {font-size: 60%;text-align: right; margin-top: 10px;color: #585858;line-height: 120%;}
#tonedown .note2{font-size: 75%;text-align: left; margin-top: 10px;color: #585858;line-height: 120%; }
#tonedown .note3 {font-size: 60%;text-align: left; margin-top: 10px;color: #585858;line-height: 140%;}
#tonedown .note4{font-size: 60%;text-align: left; margin-top: 5px;color: #585858;line-height: 140%; padding-left:1.9em;
text-indent:-1.9em;}
	
#casestudy .inner{}
#casestudy .page_tit{ font-size: 100%; font-weight: bold; padding-bottom: 10px; border-bottom: 5px solid #d8d1bf; text-align: center;}
#casestudy .content { padding: 20px 5%;text-align:center;}
#casestudy .hide {display:none;}
#casestudy .case_tit{ font-size: 100%; font-weight: bold; text-align: center; color: #585858; line-height: 150%;}
#casestudy .zukai{ width: 100%; margin-top: 20px;}
#casestudy .sub_tit{ font-size: 130%; font-weight: 500; margin: 30px 0 10px 0; }
#casestudy .point{ border: 1px solid #d8d1bf; box-sizing: border-box; padding: 20px; text-align: left;font-size: 75%; color: #585858;line-height: 140%;}
#casestudy .note{ font-size: 60%; text-align: right; margin-top: 10px;color: #585858;}

#casestudy .process{padding: 0;}
#casestudy .process dl{ padding:0; width: 100%; border: 1px solid #595858; box-sizing: border-box; position: relative; height: 70px; display:table;}
#casestudy .process dt{position: absolute; top: 0; left: 0; width:40px; height: 35px; background: url(../images/colorrecipe/kado.png) no-repeat; background-size: cover;  padding: 5px 0 0 10px; color: #fff;font-family: "futura-pt",sans-serif; text-align: left;}
#casestudy .process .txt{ text-align: center; font-size: 80%; line-height: 140%;color: #595858; display: table-cell; vertical-align: middle;}
#casestudy .process .txt span{font-size: 80%;}
#casestudy .process .sankaku{width: 0;height: 0;border: 15px solid transparent;border-top: 15px solid #b7b7b7; margin:20px auto 5px auto;}
#casestudy .process_tit{ font-size: 100%; color: #595858; text-align: center; font-weight: normal; margin:30px 0 10px 0;}
#casestudy .process .mini{ letter-spacing: -0.05em;}

#colorrecipe{ padding-top: 10vh;}
#colorrecipe .inner{}
#colorrecipe .thmb{ text-align: center;}
#colorrecipe .thmb li{ width:70%; margin: 0 auto 8% auto; position: relative; }
#colorrecipe .thmb .no{position:absolute; top: 0;left:0; width:30% }
#colorrecipe .thmb .no img{width: 100%; }
#colorrecipe .thmb li .tit{ font-size: 80%; font-weight: bold; margin-top: 10px;line-height: 140%;}
#colorrecipe .page_tit{ font-size: 100%; font-weight: bold; padding-bottom: 10px; border-bottom: 5px solid #d8d1bf; text-align: center;}
#colorrecipe .tab li{ width: 50%; float: left; background: #dcdddd; color: #595858; text-align: center; padding: 10px 0; font-size: 120%; font-weight: 300;}
#colorrecipe .tab{  height: 40px;}
#colorrecipe .tab li.select{background: #595858; color: #fff;}
#colorrecipe .tab li.select .sankaku{ position: absolute; bottom: 0; left: 0; right: 0; margin:auto;width: 0;height: 0;border: 8px solid transparent;border-bottom: 8px solid #d8d1bf;}
#colorrecipe .content img{ vertical-align: bottom;}
#colorrecipe .content li{text-align:center;}
#colorrecipe .hide {display:none;}
#colorrecipe .content .before{ width: 100%;}
#colorrecipe .slider_box02{ width: 100%;}
#colorrecipe .slider_box02 .bx-wrapper{ margin-bottom: 0;}
#colorrecipe .slider_box02 .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto{bottom:10px;}
#colorrecipe .colorrecipe li{ display: block !important;}
#colorrecipe .sub_tit{ font-size: 130%; font-weight: 500; margin: 30px 0 10px 0; text-align: center;}
#colorrecipe .item { padding: 0 5%;}
#colorrecipe .item dl{ border-bottom: 1px solid #595858; padding: 10px 0; font-size: 80%;}
#colorrecipe .item dt{ width: 15%; display: inline-block;vertical-align: middle; margin:0 0 0 2%; text-align: center;}
#colorrecipe .item .mini{ width: 2%; display: inline-block; text-align: center; line-height: 140%; vertical-align: middle;}
#colorrecipe .item .mid{ width: 15%; display: inline-block; text-align: center;line-height: 140%;vertical-align: middle;}
#colorrecipe .item .big{ width: 23%; display: inline-block; text-align: center;line-height: 140%;vertical-align:bottom;}
#colorrecipe .item span{ font-size: 80%;}
#colorrecipe .design{}
#colorrecipe .design_tit{ font-size: 100%; color: #595858; text-align: center; font-weight: normal; margin-bottom: 20px;}
#colorrecipe .design_photo{ width: 100%;}
#colorrecipe .process{padding: 0 5%;}
#colorrecipe .process dl{ padding:0; width: 100%; border: 1px solid #595858; box-sizing: border-box; position: relative; height: 70px; display:table;}
#colorrecipe .process dt{position: absolute; top: 0; left: 0; width:40px; height: 35px; background: url(../images/colorrecipe/kado.png) no-repeat; background-size: cover;  padding: 5px 0 0 10px; color: #fff;font-family: "futura-pt",sans-serif;}
#colorrecipe .process .txt{ text-align: center; font-size: 90%; line-height: 140%;color: #595858; display: table-cell; vertical-align: middle;}
#colorrecipe .process .txt span{font-size: 80%;}
#colorrecipe .process .sankaku{width: 0;height: 0;border: 15px solid transparent;border-top: 15px solid #b7b7b7; margin:20px auto 5px auto;}
#colorrecipe .process_tit{ font-size: 100%; color: #595858; text-align: center; font-weight: normal; margin:30px 0 10px 0;}
#colorrecipe .note{ font-size: 60%; text-align: right; margin-top: 10px;color: #585858;}
table.type01 { font-size: 80%;margin: 0 0 10px 0;border-collapse: collapse;text-align: left;width: 100%;border: 1px solid #595858;}
table.type01 thead {border-right: 1px solid #595858; border-left: 1px solid #595858; background: #fff; text-align: center; background: url(../images/colorrecipe/bg_table.png);}
table.type01 thead th {color: #000;border-right: 1px solid #595858; border-bottom: 1px solid #595858; padding: 5px; line-height: 140%;}
table.type01 tbody th {text-align: center;vertical-align:middle;border-bottom: 1px solid #595858;background: #efefef;border-left: 1px solid #595858;}
table.type01 td {width: 350px;padding: 10px 3px;vertical-align:middle;border-bottom: 1px solid #595858;border-right: 1px solid #595858;text-align: center;}
table.type01 .w01{ width:20%;}
table.type01 .w02{ width:40%;}
table.type01 .w03{ width:40%;}

#graycolor{ padding-top:10vh;}
#graycolorrecipe{ padding-top:10vh;}
#graycolorrecipe .inner{padding: 0 5%;}
#graycolorrecipe img{width:100%;}
#graycolorrecipe .thema{  margin: 20px auto 0 auto;}
#graycolorrecipe .read{ text-align: left; font-size: 65%; line-height: 165%;color: #595858; margin-top: 10px;}
#graycolorrecipe .y_marker{ font-size: 90%; line-height: 140%; color: #595858; text-align: center; margin:0 auto;  background: linear-gradient(transparent 70%, #faf1cc 0%);display: inline;/*横に余白をつけたり、下にずらしたりするときは以下のpaddingを調整してください*/padding: 3px 0;}
#graycolorrecipe .marker{text-align: center; margin:10px auto 0 auto;}

#graycolorrecipe .page_tit{ font-size: 100%; font-weight: bold; padding-bottom: 10px; border-bottom: 5px solid #d8d1bf; text-align: center;}
#graycolorrecipe .sub_tit{ font-size:80%; font-weight: bold; margin: 10px 0; text-align:left; color: #585858;line-height: 140%;}
#graycolorrecipe .sub_tit span{ font-size:75%; font-weight: 300; margin: 10px 0; text-align:left; color: #585858;}
#graycolorrecipe .mix{margin-top: 20px;}
#graycolorrecipe .ex{margin-top: 30px;}
#graycolorrecipe .ex .flame{ width: 100%; border: 1px solid #595858; box-sizing: border-box;}

#graycolorrecipe table { font-size: 80%;margin: 10px auto;border-collapse: collapse;text-align: left;width: 100%;border: 1px solid #595858;}
#graycolorrecipe table thead {border-right: 1px solid #595858;border-left: 1px solid #595858;text-align: center; background: url(../images/colorrecipe/bg_table.png);}
#graycolorrecipe table thead th {color: #000;border-right: 1px solid #595858; border-bottom: 1px solid #595858;line-height: 100%;font-size: 60%;vertical-align: middle;}
#graycolorrecipe table tbody th {text-align: center;vertical-align:middle;border-bottom: 1px solid #595858;background: #efefef;border-left: 1px solid #595858;}
#graycolorrecipe table td {width: 350px;padding: 10px 5px 10px 5px;vertical-align:middle;border-bottom: 1px solid #595858;border-right: 1px solid #595858;line-height: 140%; font-size: 70%; color: #585858;}
#graycolorrecipe table .w01{ width:15%;vertical-align: middle;}
#graycolorrecipe table .w02{ width:55%;vertical-align: middle;}
#graycolorrecipe table .w03{ width:15%; text-align: center;vertical-align: middle;}
#graycolorrecipe table .w04{ width:15%;vertical-align: middle;text-align: center;}

#graycolorrecipe table .w05{ width:15%;vertical-align: middle;text-align: center;}
#graycolorrecipe table .w06{ width:45%;vertical-align: middle;text-align: center;}
#graycolorrecipe table .w07{ width:40%;vertical-align: middle;text-align: center;}

#graycolorrecipe .process {margin: 30px auto 50px auto;}
#graycolorrecipe .process .tit{ font-size:80%; font-weight:bold; margin: 15px 0; text-align:center; color: #585858;}
#graycolorrecipe .process dl{ padding:0; width: 100%; border: 1px solid #595858; box-sizing: border-box; position: relative; height: 70px; display:table;}
#graycolorrecipe .process dt{position: absolute; top: 0; left: 0; width:40px; height: 35px;   padding: 5px 0 5px 10px; color: #fff;font-family: "futura-pt",sans-serif;}
#graycolorrecipe .process .txt{ text-align: center; font-size: 90%; line-height: 140%;color: #595858; display: table-cell; vertical-align: middle;}
#graycolorrecipe .process .txt2 {font-size: 80%;text-align: center;line-height: 140%;color: #595858;margin-bottom: 10px;}
#graycolorrecipe .process .step1{width:55%; text-align: center;margin: 15px auto 5px auto; font-size:100%; background: #d9d9d9;padding: 5px 15px; color: #585858;}
#graycolorrecipe .process .step2{width:55%; text-align: center;margin: 15px auto 5px auto; font-size:100%; background: #9b9b9b;padding: 5px 15px; color: #fff;}
#graycolorrecipe .process .sankaku{width: 0;height: 0;border: 15px solid transparent;border-top: 15px solid #b7b7b7; margin:20px auto 5px auto;}
#graycolorrecipe .process_tit{ font-size: 100%; color: #595858; text-align: center; font-weight: normal; margin:30px 0 10px 0;}
#graycolorrecipe .note {text-align: right;font-size: 75%;color: #595858; margin-top: 5px;}
#graycolorrecipe .note span{font-size: 95%;}
#graycolorrecipe .bg_root{background: rgba(148,120,100,0.25);}

@media screen and (max-width: 320px) {
#graycolorrecipe .note span{font-size: 75%; letter-spacing: -0.04em;}
}


#step{ padding-top: 10vh;}
#step .inner{ margin-bottom: 60px;}
#step .inner02{ padding: 0 5%;}
#step .top_top{ height: 30vh;background: url(../images/step/top_short.png) no-repeat center; background-size:cover; position: relative;}
#step .top_mid{ height: 30vh;background: url(../images/step/top_bob.png) no-repeat center; background-size:cover; position: relative;}
#step .top_bottom{ height: 30vh; background: url(../images/step/top_long.png) no-repeat center; background-size: cover;position: relative;}
#step .top_line{height: 0.5vh; background: #d9d2be;}

#step .icon{ position: absolute; bottom: 0; right: 0; width: 60px;}
#step .icon img{ vertical-align: bottom;}
#step .step_box{border: 1px solid #d9d2be; box-sizing: border-box;position:relative; margin-bottom: 16%;}
#step .step_box:first-child{ margin-top: 5%;}
#step .step_box .left{ width: 35%; display: inline-block;vertical-align: middle;}
#step .step_box .right{ width: 63%; display: inline-block; text-align: center; vertical-align: middle; }
#step .step_box .right .tit{ font-size: 90%; font-weight: bold; line-height: 140%;}
#step .step_box span{ font-size: 140%;}
#step .step_box img{ vertical-align: bottom;}
#step .step_box .icon02{ position: absolute; bottom:-37%; right: 25%; margin: auto;width: 40px;}
#step .step_box .icon02 img{ vertical-align: bottom;}

#step .process{padding: 0 5%;}
#step .process dl{ padding:0; width: 100%; border: 1px solid #595858; box-sizing: border-box; position: relative; height: 70px; display:table;}
#step .process dt{position: absolute; top: 0; left: 0; width:40px; height: 35px; background: url(../images/colorrecipe/kado.png) no-repeat; background-size: cover;  padding: 5px 0 0 10px; color: #fff;font-family: "futura-pt",sans-serif;}
#step .process .txt{ text-align: center; font-size: 80%; line-height: 140%;color: #595858; display: table-cell; vertical-align: middle;}
#step .process .txt span{font-size: 80%;}
#step .process .sankaku{width: 0;height: 0;border: 15px solid transparent;border-top: 15px solid #b7b7b7; margin:20px auto 5px auto;}
#step .process_tit{ font-size: 100%; color: #595858; text-align: center; font-weight: normal; margin:30px 0 10px 0;}



#step .step_top01{ height: 20vh;background: url(../images/step/step_short01.png) no-repeat; background-size:cover; position: relative; margin-top: 7vh;margin-bottom: 4vh; border: 1px solid #d9d2be; box-sizing: border-box;}
#step .step_mid01{ height: 20vh;background: url(../images/step/step_short02.png) no-repeat; background-size:cover; position: relative; margin-bottom: 4vh; border: 1px solid #d9d2be; box-sizing: border-box;}
#step .step_bottom01{ height: 20vh;background: url(../images/step/step_short03.png) no-repeat; background-size:cover; position: relative; border: 1px solid #d9d2be; box-sizing: border-box; }
#step .step_top02{ height: 20vh;background: url(../images/step/step_bob01.png) no-repeat; background-size:cover; position: relative; margin-top: 7vh;margin-bottom: 4vh; border: 1px solid #d9d2be; box-sizing: border-box;}
#step .step_mid02{ height: 20vh;background: url(../images/step/step_bob02.png) no-repeat; background-size:cover; position: relative; margin-bottom: 4vh; border: 1px solid #d9d2be; box-sizing: border-box;}
#step .step_bottom02{ height: 20vh;background: url(../images/step/step_bob03.png) no-repeat; background-size:cover; position: relative; border: 1px solid #d9d2be; box-sizing: border-box; }
#step .icon02{ position: absolute; bottom: -20px; right: 22.5%; width: 40px;}
#step .icon02 img{ vertical-align: bottom;}

@media screen and (min-width: 720px) {
#step .icon{ position: absolute; bottom: 0; right: 0; width: 100px;}
#step .step_box{ margin-bottom: 5%;}
#step .step_box:first-child{ margin-top: 3%;}
#step .step_box .icon02{ position: absolute; bottom: -20px; right: 28%; width: 60px;}
#casestudy .process .right{ text-align:center; padding-right: 0;}
	
}


#step .number{font-size: 120%; font-weight: bold;  padding: 5px 0; background:#d8d1bf; width: 80px; margin: 20px auto 0 auto; text-align: center;}
#step .page_tit{ font-size: 110%; font-weight: bold; padding-bottom: 10px; border-bottom: 5px solid #d8d1bf; text-align: center;}
#step .step_tit{ font-size: 110%; font-weight: bold; margin-top:20px;  text-align: center; }
#step .photo{ width: 80%; margin: 20px auto 0 auto;}
#step .sub_tit{ font-size: 130%; font-weight: 500; margin: 30px 0 10px 0; text-align: center;}
#step .item {  width: 90%; margin:0 auto;}
#step .item dl{ border-bottom: 1px solid #d8d1bf; padding: 10px 0; font-size: 80%;}
#step .item  dt{ width: 25%; display: inline-block;vertical-align: middle; margin:0 0 0 2%; text-align: center;}
#step .item  .mini{ width: 5%; display: inline-block; text-align: center; line-height: 140%; vertical-align: middle;}
#step .item  .mid{ width: 15%; display: inline-block; text-align: center;line-height: 140%;vertical-align: middle;}
#step .item  .big{ width: 24%; display: inline-block; text-align: center;line-height: 140%;vertical-align: middle;}
#step .design{}
#step .design_tit{ font-size: 100%; color: #595858; text-align: center; font-weight: normal; margin-bottom: 10px;}
#step .design_photo{ width: 100%;}
#step .technique{ padding: 0 5%;}
#step .technique dl{border-bottom: 1px solid #d8d1bf; padding: 10px 2%; font-size: 90%;}
#step .technique dt{line-height: 160%;}
#step .technique .top{color: #e1c39b;}
#step .technique .mid{color: #ccd4a5;}
#step .technique .nep{color: #ccca5c;}
#step .technique dd{ color: #595858; line-height: 140%;}
#step .note{ font-size: 60%; text-align: right;color: #585858; width: 90%; margin: 10px auto 0 auto;}
#step .item02{ padding: 0 5%;}
#step .item02 .txt{border-bottom: 1px solid #d8d1bf; padding: 10px 2%;color: #595858;line-height: 160%; font-size: 90%; }
table.type02 { font-size: 80%;margin: 30px auto 10px auto;border-collapse: collapse;text-align: left;width: 90%;border: 1px solid #595858;}
table.type02 thead {border-right: 1px solid #595858;border-left: 1px solid #595858;background: #fff;text-align: center; background: url(../images/colorrecipe/bg_table.png);}
table.type02 thead th {color: #000;border-right: 1px solid #595858; border-bottom: 1px solid #595858; padding: 5px; line-height: 140%;}
table.type02 tbody th {text-align: center;vertical-align:middle;border-bottom: 1px solid #595858;background: #efefef;border-left: 1px solid #595858;}
table.type02 td {width: 350px;padding: 10px 5px 10px 20px;vertical-align:middle;border-bottom: 1px solid #595858;border-right: 1px solid #595858;line-height: 140%; font-size: 90%; }
table.type02 .w01{ width:50%; }
table.type02 .w02{ width:50%;}
.indent01{margin-left:1em;text-indent:-1em;}
.indent02{margin-left:2em;text-indent:-2em; line-height: 140%;}

#drug .inner{ padding: 0 5%;}
#drug .page_tit{ font-size: 110%; font-weight: bold; padding-bottom: 10px; margin-bottom: 20px; border-bottom: 1px solid #595858; padding-left: 10px; }
#drug .sub_tit{padding-bottom: 15px; color: #595858; font-weight: normal; }
#drug .big{font-size: 150%;color: #595858; font-weight: bold;border-bottom: 1px solid #595858;padding-bottom: 20px;margin-bottom: 20px; }
#drug .txt{ line-height: 180%;}
#drug .note{line-height: 160%; font-size: 60%; margin-top: 10px;}
#drug .note02{line-height: 160%; font-size: 60%; margin-top: 10px; text-align: right;}
#drug .photo{ width: 100%; margin-top: 20px;}
table.type03 { font-size: 80%;margin: 20px 0 10px 0;border-collapse: collapse;text-align: left;width: 100%;border: 1px solid #595858;}
table.type03 thead {border-right: 1px solid #595858;border-left: 1px solid #595858;background: #fff;text-align: center; background: url(../images/colorrecipe/bg_table.png);}
table.type03 thead th {color: #000;border-right: 1px solid #595858; border-bottom: 1px solid #595858; padding: 5px; line-height: 140%;}
table.type03 tbody th {text-align: center;vertical-align:middle;border-bottom: 1px solid #595858;background: #efefef;border-left: 1px solid #595858;}
table.type03 td {width: 350px;padding: 10px 3px;vertical-align:middle;border-bottom: 1px solid #595858;border-right: 1px solid #595858;text-align: center; line-height: 140%; font-size: 90%; }
table.type03 td.bold{ font-weight: bold;}
table.type03 .w01{ width:30%;}
table.type03 .w02{ width:25%;}
table.type03 .w03{ width:45%; text-align: left;}
table.type04 { font-size: 80%;margin: 20px auto 10px auto;border-collapse: collapse;text-align: left;width: 100%;border: 1px solid #595858;}
table.type04 thead {border-right: 1px solid #595858;border-left: 1px solid #595858;background: #fff;text-align: center; background: url(../images/colorrecipe/bg_table.png);}
table.type04 thead th {color: #000;border-right: 1px solid #595858; border-bottom: 1px solid #595858; padding: 5px; line-height: 140%;}
table.type04 tbody th {text-align: center;vertical-align:middle;border-bottom: 1px solid #595858;background: #efefef;border-left: 1px solid #595858;}
table.type04 td {width: 350px;padding: 10px 5px 10px 5px;vertical-align:middle;border-bottom: 1px solid #595858;border-right: 1px solid #595858;line-height: 140%; font-size: 90%; }
table.type04 .w01{ width:50%;}
table.type04 .w02{ width:50%;}

table.type05 { font-size: 80%;margin: 0 0 0 0;border-collapse: collapse;text-align: left;width: 100%;border: 1px solid #595858;}
table.type05 thead {border-right: 1px solid #595858;border-left: 1px solid #595858;background: #fff;text-align: center; background: url(../images/colorrecipe/bg_table.png);}
table.type05 thead th {color: #000;border-right: 1px solid #595858; border-bottom: 1px solid #595858; padding: 5px; line-height: 140%;}
table.type05 tbody th {text-align: center;vertical-align:middle;border-bottom: 1px solid #595858;background: #efefef;border-left: 1px solid #595858;}
table.type05 td {width: 350px;padding: 10px 3px; vertical-align:middle; border-bottom: 1px solid #595858; border-right: 1px solid #595858; text-align: center; line-height: 140%; font-size: 100%;}
table.type05 td.bold{ font-weight: bold;}
table.type05 .w01{ width:30%;}
table.type05 .w02{ width:45%;}
table.type05 .w03{ width:25%; }


#careitem .inner{ padding: 0 5% 20px;}
#careitem .page_tit02{ font-size: 110%; font-weight: bold; padding-bottom: 10px;  padding-left: 10px; }
#careitem .line{margin-bottom: 20px; border-bottom: 1px solid #595858;}
#careitem .sub_tit{font-size: 80%; font-weight: bold;padding-bottom: 5px; text-align: center; }
#careitem .page_tit{ font-size: 90%; text-align: center; font-weight: bold; padding-bottom: 10px; margin-top: 20px; border-bottom: 1px solid #595858; padding-left: 10px; line-height: 140%; }
#careitem .note{line-height: 160%; font-size: 60%;}
#careitem .photo01{ width: 70%; margin: 20px auto 0 auto;}
#careitem .photo02{ width: 100%; margin: 50px auto 0 auto;}
#careitem .photo03{ width: 85%; margin: 0 auto 0 auto; padding-left: 7%;}
#careitem .photo04{ width: 100%; margin: 0 auto 40px auto;}
#careitem .photo04:last-child{ margin: 0 auto 0 auto;}
#careitem .photo05{ width: 100%; margin: 20px auto 0 auto;}
#careitem .list{}
#careitem .list li{font-size: 80%; font-weight: bold; padding-top: 10px; margin-left: 10px;}
#careitem .list li::before{content:url(../images/careitem/check.png); position: relative; bottom: -2px;}
#careitem .txt{ line-height: 180%;}
#careitem .txt02{ line-height: 180%; margin-top: 20px;}
#careitem .note{line-height: 160%; font-size: 60%; margin-top: 10px; }
#careitem .note02{line-height: 160%; font-size: 60%; margin-top: 10px; text-align: right;}
#careitem dl dt {}
#careitem .page_tit02 {display: none;}


#salonvoice{ padding-top: 10vh;}
#salonvoice .inner{padding: 0 2.5%;}
#salonvoice .thmb{ text-align: center;}
#salonvoice .thmb li{ width: 45%; margin: 0 2.5% 8% 2.5%; float: left; vertical-align: top;position: relative; }
#salonvoice .thmb .no{position:absolute; top: 0;left:0; width:40% }
#salonvoice .thmb .no img{width: 100%; }
#salonvoice .thmb li .tit{ font-size: 100%; font-weight: bold; margin-top: 10px;line-height: 140%;}
#salonvoice .page_tit{ font-size: 100%; border-bottom: 5px solid #d8d1bf;}
#salonvoice .photo{ width: 100%;}
#salonvoice .sub_tit{ font-size: 130%; font-weight: 500; margin: 30px 0 10px 0; text-align: center;}
#salonvoice .salon_prof{ font-size: 90%;margin: 10px 5% 0 5%; padding: 20px; border: 1px solid #d8d1bf; box-sizing: border-box; line-height: 160%;}
#salonvoice .photo02{ width: 50%; margin:0 auto 0 auto;}
#salonvoice .prof{ font-size: 90%;margin: 10px 5% 0 5%; padding: 20px; border: 1px solid #d8d1bf; box-sizing: border-box; line-height: 160%;}
#salonvoice .salon_prof span{ text-align: center; display: block; margin-bottom: 10px;}

#faq{}
#faq .inner{padding: 0 5%;}
#faq h3.open_h3{cursor: pointer; font-weight: normal;line-height: 140%; font-size: 90%;}
#faq h3.open_h3 .day{ font-family: "futura-pt",sans-serif; font-size: 90%; display: block; margin-bottom: 5px;font-weight:300; color: #585858;  }
#faq h3.open_h3 span{ font-family: "futura-pt",sans-serif; font-size: 80%; display: block;  width: 40px; padding: 5px; background: #c85391; text-align: center; margin-bottom: 5px; color: #fff;}
#faq .open_h3:after, #faq .open_h3.active:after {font-size: 22px;margin-left: 20px;}
#faq .info{ font-weight: bold; font-size: 90%; padding-top: 5%;line-height: 160%;}
#faq .title{margin-top: 50px;margin-bottom: 5%;font-size: 22px;font-weight: lighter;}
#faq .line{ border-bottom: 1px solid #595858; margin: 5% 0;}

#contact{}
.contact { background: url(../images/contact/bg.png); background-size: cover;}
#contact .inner{padding: 0 5%; max-width: 800px; margin: 0 auto; width: 90%;}
#contact dl{ width: 100%; margin-bottom: 20px;}
#contact dt{ width: 32%; display: inline-block; margin-right: 2%; font-size: 80%; font-weight: bold; vertical-align: middle;}
#contact dd{ width: 64%; display: inline-block; font-size: 80%; vertical-align: middle;}
label{ width: 28%; display: inline-block; margin-right: 2%;vertical-align: top; line-height: 140%; text-align: center;}
label input{width: auto;}
input{ border: 1px solid #000; padding:10px 5px; width: 90%;}
textarea{ border: 1px solid #000; padding:10px 5px; width: 90%;}
#contact .send{width: 120px; margin: 10px auto 10px auto;}
#contact .send input{ border: 0; padding:0; width: 100%;}
#contact .txtbox{font-size: 80%; line-height: 140%;}
#contact .txtbox a{ font-size: 120%; font-weight: bold; border-bottom: 1px solid #000;}

#tonedown .inner .pict{ position: relative;}
#tonedown .inner .pict a.more{ position: absolute; width: 49%; height: 13%; left: 43%; top: 17.78%;}

#graycolor{ height: 90vh; width: 100%; background: #666666;}
#graycolor .nav01 a, #graycolor .nav02 a, #graycolor .nav03 a{ height: 30vh; width: 100%; box-sizing: border-box; display: flex;justify-content: center;align-items: center;border-bottom: 1px solid #fff;}
#graycolor .nav_tit{ font-size:18px; font-weight: bold; color: #fff; width: 70%; padding-left: 5%; letter-spacing: 0.05em;line-height: 130%;}
#graycolor .go{ height: 15%; width: 15%; text-align: center;}
#graycolor .go img{ height: 100%; width: auto !important;}

#howto{ padding-top:10vh;}
#howto{ height: 90vh; width: 100%; background: #666666;}
#howto .nav01 a, #howto .nav02 a, #howto .nav03 a, #howto .nav04 a{ height: 45vh; width: 100%; box-sizing: border-box; display: flex;justify-content: center;align-items: center;border-bottom: 1px solid #fff;}
#howto .nav_tit{ font-size:18px; font-weight: bold; color: #fff; width: 70%; padding-left: 5%; letter-spacing: 0.05em; line-height: 130%;}
#howto .nav_tit span{ font-size: 15px; display: block; line-height: 200%; margin-top: 10px;}
#howto .go{ height: 15%; width: 15%; text-align: center;}
#howto .go img{ height: 100%; width: auto !important;}

#hightone .inner .pict{ position: relative;}
#hightone .inner .pict a.pale{ position: absolute; width: 38.7%; height: 3.7%; left: 38.6%; top: 13.45%;}
#hightone .inner .pict a.cold{ position: absolute; width: 38.7%; height: 3.7%; left: 38.6%; top: 44.3%;}
#hightone .inner .pict a.warm{ position: absolute; width: 38.7%; height: 3.7%; left: 38.6%; top: 84.8%;}
#hightone_warp .cboxPhoto{width: 100% !important;height: auto !important;}
#hightone .inner .pict a{outline: none;}









/* Label */
.ac-container {max-width: 100%;border: 1px solid #ccc;border-top: none;¥box-sizing: border-box;}
.ac-container label {height: 30px;line-height: 1.8;font-size: 18px;padding: 18px 20px;display: block;cursor: pointer;color: #251e1c;background: #fff7e6;border-top: 1px solid #ccc;}
.ac-container label{cursor: pointer;margin-top: 0; font-size: 15px;}
.ac-container label:after, 
.ac-container label:after {font-size: 16px;position: absolute; right: 20px;}
.ac-container label::after {content: "▲";}
.ac-container label::after {content: "▼";}

.ac-container {width: 100%;margin: 0 auto;margin-top:60px;}
.ac-container label:hover {background: #fff7e6;}
.ac-container input {display: none;}

/* Contents */
.ac-container article {overflow: hidden;height: 0;transition: 0.6s;}
.ac-container article p {padding: 20px 0;font-size: 12px;color: #666;line-height: 1.5;}
.ac-container input:checked ~ article {height: auto;border-top: 1px solid #ccc;}
.ac-container  img{ width: 100%;}
.ac-container .txt{ font-size: 16px; font-weight: bold; display: block; text-align: center;}


#drug{ padding-top: 10vh;}
#drug dt {background: #666666;border-bottom: solid 1px #fff;cursor: pointer;position: relative;height: 18vh;display: flex;align-items: center;font-size:16px; font-weight: bold; color: #fff; padding-left: 8%; }
#drug dt:before {display:inline-block;content:"";position: absolute;top: 45%;right: 15px;width: 29px;height: 15px;background:url(../images/drug/close.png);background-size:cover;vertical-align:middle;}
#drug dd img{ width: 100%;}

#careitem{ padding-top: 10vh;}
#careitem dt {background: #666666;border-bottom: solid 1px #fff;cursor: pointer;position: relative;height: 80px;display: flex;align-items: center;font-size:16px; font-weight: bold; color: #fff; padding-left: 8%;}
/*#careitem dt {background: #666666;border-bottom: solid 1px #fff;cursor: pointer;position: relative;height: 30vh;display: flex;align-items: center;font-size:16px; font-weight: bold; color: #fff; padding-left: 8%;}
#careitem dt:before {display:inline-block;content:"";position: absolute;top: 45%;right: 15px;width: 29px;height:15px;background:url(../images/drug/close.png);background-size:cover;vertical-align:middle;}*/
#careitem dd img{ width: 100%;}
#careitem dt p{padding-left:1.7em;text-indent:-1.7em; line-height: 130%;}

#step .page{ width: 100%; margin: auto; position: fixed; bottom: 0; left: 0; right: 0; z-index: 10; background: #fff; padding: 10px 0;}
#step .page img{ width: 45px;}
#step .page .prev{ float: left; width: 40%; padding-left: 15px;}
#step .page .next{ float: right;width: 40%; padding-right: 15px;text-align: right;}





/*---------------------------
レシピ
---------------------------*/
.recipe{ width: 100%; margin-top: 100px;}
.recipe ul{ width: 100%;overflow: hidden !important;  
    overflow: visible;  
    min-height: 100%;  
    height: auto !important;  
    height: 100%;
	margin:20px 0;}

.recipe .img{width: 100%; margin-left:15px; }
.recipe  img{width: 100%;}

.recipe h1{ font-size: 200%; font-weight: bold; margin-top: 3px;margin:0 0 20px 0; text-align: center;}


#main{ width:100%; margin:0 auto;  padding:10px 0;}
#main .inner{ max-width:80%; margin:0 auto;}

#main ul li{width: 50%; color: #000; text-align: center; float: left; display: block;}
#main ul li .style img{width: 100%; vertical-align:top; }





.recipe .tab{ width: 100%; border-bottom: 1px solid #595858;height:50px;}
.recipe .tab li{ width: 25%;border-right: 1px solid #595858; position: relative; box-sizing: border-box; text-align: center; float: left; height:50px; vertical-align: bottom; display: inline-block;}
.recipe .tab li:last-child{ border-right: none;}
.recipe .tab li a{color: #5b4e42; position:absolute; top:0; bottom: 0; left: 0; right: 0; margin: auto; font-size: 12px; margin-top: 8px;}
.recipe .tab li .mark{  width: 10px; position: absolute; bottom: 0; left: 0; right: 0; margin:auto; }
.recipe .tab li .mark img{ width: 100%; vertical-align: bottom;}


.recipe h3{ font-size: 13px; text-align:center;}
.recipe h3 span{ font-size: 8px; text-align:center; display: block;}
.recipe h4{font-size: 13px; text-align:left; line-height: 120%; font-weight: 100;}
.recipe h4 span{font-size: 8px; text-align:left; }
.recipe .sft{ font-size: 8px;  margin-left:10px;margin-top:4px; margin-bottom:10px; text-align:left; line-height: 120%;}
.recipe .sft2{ font-size: 8px;  margin-left:10px;margin-top:4px; margin-bottom:10px; text-align:right; line-height: 120%;}
.recipe .bnr{ margin: 20px auto; width: 95%;}
.youtube iframe{ width: 100%; height: 250px; margin-bottom: 20px;}
.comingsoon{ font-size: 20px; text-align: center; padding: 200px 0;}


area{
border:none;
outline:none;
}



/*---------------------------
siteinfo
---------------------------*/

.siteinfo {
 padding: 16% 20px 0;
 text-align: center;
}
.siteinfo p a {
 font-weight: 700;
}
.siteinfo h2 {
 font-size: 18px;
 font-weight: 700;
 margin-bottom: 40px;
 letter-spacing: .1rem;
 border-top: 1px solid #000;
 border-bottom: 1px solid #000;
 padding: 15px 0;
 display: inline-block;
}
.siteinfo p {
 font-size: 14px;
 line-height: 2.2;
 margin-bottom: 30px;
}
.siteinfo p.note {
 font-size: 13px;
 letter-spacing: .02rem;
 margin-bottom: 0px;
 margin-top: 60px;
 padding-top: 30px;
 color: #222;
 border-top: 1px dashed #fff;
}
.siteinfo p.note a {
 text-decoration: underline;
 color: #222;
}