@charset "utf-8";
/* CSS Document */

#ex1-01{	background-color: #edec9c;}
#ex1-02{	background-color: #fbd3ba;}
#ex1-03{	background-color: #c9e4bb;}
#ex1-04{	background-color: #f1bab7;}
#ex1-05{	background-color: #dbd4c4;}
#ex1-06{	background-color: #b5d6c3;}
#ex1-07{	background-color: #f4b1c3;}
#ex1-08{	background-color: #d0b8c6;}
#ex1-09{	background-color: #c1c9cc;}
#ex1-10{	background-color: #a1c7c8;}
#ex1-11{	background-color: #ef9fc6;}
#ex1-12{	background-color: #c7aac8;}
#ex1-13{	background-color: #bcb8cf;}
#ex1-14{	background-color: #afc1d7;}
#ex1-15{	background-color: #99c2d4;}
#ex1-16{	background-color: #e89ac4;}
#ex1-17{	background-color: #c6a3cd;}
#ex1-18{	background-color: #a79fce;}
#ex1-19{	background-color: #9fa7d5;}
#ex1-20{	background-color: #96acdb;}
#ex1-21{	background-color: #8bb5df;}

#ex2-01{	background-color: #F0EA7F;}
#ex2-02{	background-color: #F5B59D;}
#ex2-03{	background-color: #B0CEA2;}
#ex2-04{	background-color: #EC9A9C;}
#ex2-05{	background-color: #C1B8AA;}
#ex2-06{	background-color: #98BCAA;}
#ex2-07{	background-color: #EE90A8;}
#ex2-08{	background-color: #B79DAD;}
#ex2-09{	background-color: #A5ACB1;}
#ex2-10{	background-color: #84AEAF;}
#ex2-11{	background-color: #E97DAC;}
#ex2-12{	background-color: #B38CB0;}
#ex2-13{	background-color: #A199B6;}
#ex2-14{	background-color: #91A3BC;}
#ex2-15{	background-color: #7BA7BA;}
#ex2-16{	background-color: #E27AB0;}
#ex2-17{	background-color: #B684B7;}
#ex2-18{	background-color: #9181B7;}
#ex2-19{	background-color: #8488BC;}
#ex2-20{	background-color: #798FC3;}
#ex2-21{	background-color: #6E99C6;}

#ex3-01{	background-color: #F3E961;}
#ex3-02{	background-color: #F09680;}
#ex3-03{	background-color: #97B88A;}
#ex3-04{	background-color: #E87A80;}
#ex3-05{	background-color: #A69B90;}
#ex3-06{	background-color: #7BA390;}
#ex3-07{	background-color: #E86F8D;}
#ex3-08{	background-color: #9F8294;}
#ex3-09{	background-color: #898F96;}
#ex3-10{	background-color: #679597;}
#ex3-11{	background-color: #E25B93;}
#ex3-12{	background-color: #9F6E98;}
#ex3-13{	background-color: #867A9E;}
#ex3-14{	background-color: #7485A1;}
#ex3-15{	background-color: #5E8BA1;}
#ex3-16{	background-color: #DC599B;}
#ex3-17{	background-color: #A666A2;}
#ex3-18{	background-color: #7A639F;}
#ex3-19{	background-color: #686AA2;}
#ex3-20{	background-color: #5D72AA;}
#ex3-21{	background-color: #517EAD;}

#ex4-01{	background-color: #F6E744;}
#ex4-02{	background-color: #EA7863;}
#ex4-03{	background-color: #7EA171;}
#ex4-04{	background-color: #E35965;}
#ex4-05{	background-color: #8C7F75;}
#ex4-06{	background-color: #5D8977;}
#ex4-07{	background-color: #E14D72;}
#ex4-08{	background-color: #86677A;}
#ex4-09{	background-color: #6D727B;}
#ex4-10{	background-color: #4A7C7E;}
#ex4-11{	background-color: #DC3979;}
#ex4-12{	background-color: #8A4F7F;}
#ex4-13{	background-color: #6A5A85;}
#ex4-14{	background-color: #566685;}
#ex4-15{	background-color: #407087;}
#ex4-16{	background-color: #D53987;}
#ex4-17{	background-color: #96478C;}
#ex4-18{	background-color: #644588;}
#ex4-19{	background-color: #4D4B89;}
#ex4-20{	background-color: #405592;}
#ex4-21{	background-color: #346293;}

#ex5-01{	background-color: #f9e526;}
#ex5-02{	background-color: #e45946;}
#ex5-03{	background-color: #658b58;}
#ex5-04{	background-color: #de3949;}
#ex5-05{	background-color: #71625b;}
#ex5-06{	background-color: #406f5d;}
#ex5-07{	background-color: #db2c57;}
#ex5-08{	background-color: #6d4c61;}
#ex5-09{	background-color: #515560;}
#ex5-10{	background-color: #2d6365;}
#ex5-11{	background-color: #d5175f;}
#ex5-12{	background-color: #763167;}
#ex5-13{	background-color: #4f3b6c;}
#ex5-14{	background-color: #38486a;}
#ex5-15{	background-color: #22546d;}
#ex5-16{	background-color: #cf1872;}
#ex5-17{	background-color: #862876;}
#ex5-18{	background-color: #4d2770;}
#ex5-19{	background-color: #312c6f;}
#ex5-20{	background-color: #233879;}
#ex5-21{	background-color: #17467a;}

#ex6-01{	background-color: #e77324;}
#ex6-02{	background-color: #e1523e;}
#ex6-03{	background-color: #606640;}
#ex6-04{	background-color: #d33b40;}
#ex6-05{	background-color: #68564e;}
#ex6-06{	background-color: #3e594b;}
#ex6-07{	background-color: #d43851;}
#ex6-08{	background-color: #6a4a58;}
#ex6-09{	background-color: #4a4c51;}
#ex6-10{	background-color: #284e4f;}
#ex6-11{	background-color: #bd1c55;}
#ex6-12{	background-color: #5f2956;}
#ex6-13{	background-color: #3d3257;}
#ex6-14{	background-color: #2b3a53;}
#ex6-15{	background-color: #194554;}
#ex6-16{	background-color: #b7206f;}
#ex6-17{	background-color: #78236e;}
#ex6-18{	background-color: #402867;}
#ex6-19{	background-color: #2a2c65;}
#ex6-20{	background-color: #233a66;}
#ex6-21{	background-color: #143e5f;}

#ex7-01{	background-color: #E76B1F;}
#ex7-02{	background-color: #DB4737;}
#ex7-03{	background-color: #535A39;}
#ex7-04{	background-color: #CB3239;}
#ex7-05{	background-color: #5B4A44;}
#ex7-06{	background-color: #344C41;}
#ex7-07{	background-color: #C92F48;}
#ex7-08{	background-color: #5C3D4C;}
#ex7-09{	background-color: #3F4046;}
#ex7-10{	background-color: #234345;}
#ex7-11{	background-color: #B3184D;}
#ex7-12{	background-color: #54234D;}
#ex7-13{	background-color: #34294C;}
#ex7-14{	background-color: #253048;}
#ex7-15{	background-color: #173A48;}
#ex7-16{	background-color: #AD1C66;}
#ex7-17{	background-color: #671E61;}
#ex7-18{	background-color: #37215C;}
#ex7-19{	background-color: #252559;}
#ex7-20{	background-color: #1E3059;}
#ex7-21{	background-color: #133454;}

#ex8-01{	background-color: #E6641B;}
#ex8-02{	background-color: #D53C30;}
#ex8-03{	background-color: #474E32;}
#ex8-04{	background-color: #C32932;}
#ex8-05{	background-color: #4E3D3B;}
#ex8-06{	background-color: #293F36;}
#ex8-07{	background-color: #BD263F;}
#ex8-08{	background-color: #4E3040;}
#ex8-09{	background-color: #34343B;}
#ex8-10{	background-color: #1E383A;}
#ex8-11{	background-color: #A91545;}
#ex8-12{	background-color: #481C43;}
#ex8-13{	background-color: #2C2040;}
#ex8-14{	background-color: #1F273D;}
#ex8-15{	background-color: #142E3C;}
#ex8-16{	background-color: #A4175E;}
#ex8-17{	background-color: #571955;}
#ex8-18{	background-color: #2E1A50;}
#ex8-19{	background-color: #1F1D4D;}
#ex8-20{	background-color: #19264C;}
#ex8-21{	background-color: #112B4A;}

#ex9-01{	background-color: #E65C16;}
#ex9-02{	background-color: #CE3128;}
#ex9-03{	background-color: #3A422A;}
#ex9-04{	background-color: #BA1F2B;}
#ex9-05{	background-color: #413131;}
#ex9-06{	background-color: #1F312C;}
#ex9-07{	background-color: #B21C36;}
#ex9-08{	background-color: #3F2333;}
#ex9-09{	background-color: #28282F;}
#ex9-10{	background-color: #182D30;}
#ex9-11{	background-color: #9E113D;}
#ex9-12{	background-color: #3D163A;}
#ex9-13{	background-color: #231635;}
#ex9-14{	background-color: #181D32;}
#ex9-15{	background-color: #122330;}
#ex9-16{	background-color: #9A1355;}
#ex9-17{	background-color: #461348;}
#ex9-18{	background-color: #251345;}
#ex9-19{	background-color: #1A1640;}
#ex9-20{	background-color: #141C3E;}
#ex9-21{	background-color: #10213F;}

#ex10-01{	background-color: #e55411;}
#ex10-02{	background-color: #c82621;}
#ex10-03{	background-color: #2d3623;}
#ex10-04{	background-color: #b21624;}
#ex10-05{	background-color: #342427;}
#ex10-06{	background-color: #142421;}
#ex10-07{	background-color: #a6132d;}
#ex10-08{	background-color: #311627;}
#ex10-09{	background-color: #1d1c24;}
#ex10-10{	background-color: #132225;}
#ex10-11{	background-color: #940d35;}
#ex10-12{	background-color: #310f30;}
#ex10-13{	background-color: #1a0d29;}
#ex10-14{	background-color: #121327;}
#ex10-15{	background-color: #0f1724;}
#ex10-16{	background-color: #900e4c;}
#ex10-17{	background-color: #350e3b;}
#ex10-18{	background-color: #1c0c39;}
#ex10-19{	background-color: #140e34;}
#ex10-20{	background-color: #0f1231;}
#ex10-21{	background-color: #0e1734;}

#ex11-01{	background-color: #697A87;}
#ex11-02{	background-color: #535F6B;}
#ex11-03{	background-color: #3C4350;}
#ex11-04{	background-color: #262834;}
#ex11-05{	background-color: #0F0C18;}

.c1 .color01{	background-color: #edec9c;}
.c1 .color02{	background-color: #fbd3ba;}
.c1 .color03{	background-color: #c9e4bb;}
.c1 .color04{	background-color: #f1bab7;}
.c1 .color05{	background-color: #dbd4c4;}
.c1 .color06{	background-color: #b5d6c3;}
.c1 .color07{	background-color: #f4b1c3;}
.c1 .color08{	background-color: #d0b8c6;}
.c1 .color09{	background-color: #c1c9cc;}
.c1 .color10{	background-color: #a1c7c8;}
.c1 .color11{	background-color: #ef9fc6;}
.c1 .color12{	background-color: #c7aac8;}
.c1 .color13{	background-color: #bcb8cf;}
.c1 .color14{	background-color: #afc1d7;}
.c1 .color15{	background-color: #99c2d4;}
.c1 .color16{	background-color: #e89ac4;}
.c1 .color17{	background-color: #c6a3cd;}
.c1 .color18{	background-color: #a79fce;}
.c1 .color19{	background-color: #9fa7d5;}
.c1 .color20{	background-color: #96acdb;}
.c1 .color21{	background-color: #8bb5df;}

.c2 .color01{	background-color: #F0EA7F;}
.c2 .color02{	background-color: #F5B59D;}
.c2 .color03{	background-color: #B0CEA2;}
.c2 .color04{	background-color: #EC9A9C;}
.c2 .color05{	background-color: #C1B8AA;}
.c2 .color06{	background-color: #98BCAA;}
.c2 .color07{	background-color: #EE90A8;}
.c2 .color08{	background-color: #B79DAD;}
.c2 .color09{	background-color: #A5ACB1;}
.c2 .color10{	background-color: #84AEAF;}
.c2 .color11{	background-color: #E97DAC;}
.c2 .color12{	background-color: #B38CB0;}
.c2 .color13{	background-color: #A199B6;}
.c2 .color14{	background-color: #91A3BC;}
.c2 .color15{	background-color: #7BA7BA;}
.c2 .color16{	background-color: #E27AB0;}
.c2 .color17{	background-color: #B684B7;}
.c2 .color18{	background-color: #9181B7;}
.c2 .color19{	background-color: #8488BC;}
.c2 .color20{	background-color: #798FC3;}
.c2 .color21{	background-color: #6E99C6;}

.c3 .color01{	background-color: #F3E961;}
.c3 .color02{	background-color: #F09680;}
.c3 .color03{	background-color: #97B88A;}
.c3 .color04{	background-color: #E87A80;}
.c3 .color05{	background-color: #A69B90;}
.c3 .color06{	background-color: #7BA390;}
.c3 .color07{	background-color: #E86F8D;}
.c3 .color08{	background-color: #9F8294;}
.c3 .color09{	background-color: #898F96;}
.c3 .color10{	background-color: #679597;}
.c3 .color11{	background-color: #E25B93;}
.c3 .color12{	background-color: #9F6E98;}
.c3 .color13{	background-color: #867A9E;}
.c3 .color14{	background-color: #7485A1;}
.c3 .color15{	background-color: #5E8BA1;}
.c3 .color16{	background-color: #DC599B;}
.c3 .color17{	background-color: #A666A2;}
.c3 .color18{	background-color: #7A639F;}
.c3 .color19{	background-color: #686AA2;}
.c3 .color20{	background-color: #5D72AA;}
.c3 .color21{	background-color: #517EAD;}

.c4 .color01{	background-color: #F6E744;}
.c4 .color02{	background-color: #EA7863;}
.c4 .color03{	background-color: #7EA171;}
.c4 .color04{	background-color: #E35965;}
.c4 .color05{	background-color: #8C7F75;}
.c4 .color06{	background-color: #5D8977;}
.c4 .color07{	background-color: #E14D72;}
.c4 .color08{	background-color: #86677A;}
.c4 .color09{	background-color: #6D727B;}
.c4 .color10{	background-color: #4A7C7E;}
.c4 .color11{	background-color: #DC3979;}
.c4 .color12{	background-color: #8A4F7F;}
.c4 .color13{	background-color: #6A5A85;}
.c4 .color14{	background-color: #566685;}
.c4 .color15{	background-color: #407087;}
.c4 .color16{	background-color: #D53987;}
.c4 .color17{	background-color: #96478C;}
.c4 .color18{	background-color: #644588;}
.c4 .color19{	background-color: #4D4B89;}
.c4 .color20{	background-color: #405592;}
.c4 .color21{	background-color: #346293;}

.c5 .color01{	background-color: #f9e526;}
.c5 .color02{	background-color: #e45946;}
.c5 .color03{	background-color: #658b58;}
.c5 .color04{	background-color: #de3949;}
.c5 .color05{	background-color: #71625b;}
.c5 .color06{	background-color: #406f5d;}
.c5 .color07{	background-color: #db2c57;}
.c5 .color08{	background-color: #6d4c61;}
.c5 .color09{	background-color: #515560;}
.c5 .color10{	background-color: #2d6365;}
.c5 .color11{	background-color: #d5175f;}
.c5 .color12{	background-color: #763167;}
.c5 .color13{	background-color: #4f3b6c;}
.c5 .color14{	background-color: #38486a;}
.c5 .color15{	background-color: #22546d;}
.c5 .color16{	background-color: #cf1872;}
.c5 .color17{	background-color: #862876;}
.c5 .color18{	background-color: #4d2770;}
.c5 .color19{	background-color: #312c6f;}
.c5 .color20{	background-color: #233879;}
.c5 .color21{	background-color: #17467a;}

.c6 .color01{	background-color: #e77324;}
.c6 .color02{	background-color: #e1523e;}
.c6 .color03{	background-color: #606640;}
.c6 .color04{	background-color: #d33b40;}
.c6 .color05{	background-color: #68564e;}
.c6 .color06{	background-color: #3e594b;}
.c6 .color07{	background-color: #d43851;}
.c6 .color08{	background-color: #6a4a58;}
.c6 .color09{	background-color: #4a4c51;}
.c6 .color10{	background-color: #284e4f;}
.c6 .color11{	background-color: #bd1c55;}
.c6 .color12{	background-color: #5f2956;}
.c6 .color13{	background-color: #3d3257;}
.c6 .color14{	background-color: #2b3a53;}
.c6 .color15{	background-color: #194554;}
.c6 .color16{	background-color: #b7206f;}
.c6 .color17{	background-color: #78236e;}
.c6 .color18{	background-color: #402867;}
.c6 .color19{	background-color: #2a2c65;}
.c6 .color20{	background-color: #233a66;}
.c6 .color21{	background-color: #143e5f;}

.c7 .color01{	background-color: #E76B1F;}
.c7 .color02{	background-color: #DB4737;}
.c7 .color03{	background-color: #535A39;}
.c7 .color04{	background-color: #CB3239;}
.c7 .color05{	background-color: #5B4A44;}
.c7 .color06{	background-color: #344C41;}
.c7 .color07{	background-color: #C92F48;}
.c7 .color08{	background-color: #5C3D4C;}
.c7 .color09{	background-color: #3F4046;}
.c7 .color10{	background-color: #234345;}
.c7 .color11{	background-color: #B3184D;}
.c7 .color12{	background-color: #54234D;}
.c7 .color13{	background-color: #34294C;}
.c7 .color14{	background-color: #253048;}
.c7 .color15{	background-color: #173A48;}
.c7 .color16{	background-color: #AD1C66;}
.c7 .color17{	background-color: #671E61;}
.c7 .color18{	background-color: #37215C;}
.c7 .color19{	background-color: #252559;}
.c7 .color20{	background-color: #1E3059;}
.c7 .color21{	background-color: #133454;}

.c8 .color01{	background-color: #E6641B;}
.c8 .color02{	background-color: #D53C30;}
.c8 .color03{	background-color: #474E32;}
.c8 .color04{	background-color: #C32932;}
.c8 .color05{	background-color: #4E3D3B;}
.c8 .color06{	background-color: #293F36;}
.c8 .color07{	background-color: #BD263F;}
.c8 .color08{	background-color: #4E3040;}
.c8 .color09{	background-color: #34343B;}
.c8 .color10{	background-color: #1E383A;}
.c8 .color11{	background-color: #A91545;}
.c8 .color12{	background-color: #481C43;}
.c8 .color13{	background-color: #2C2040;}
.c8 .color14{	background-color: #1F273D;}
.c8 .color15{	background-color: #142E3C;}
.c8 .color16{	background-color: #A4175E;}
.c8 .color17{	background-color: #571955;}
.c8 .color18{	background-color: #2E1A50;}
.c8 .color19{	background-color: #1F1D4D;}
.c8 .color20{	background-color: #19264C;}
.c8 .color21{	background-color: #112B4A;}

.c9 .color01{	background-color: #E65C16;}
.c9 .color02{	background-color: #CE3128;}
.c9 .color03{	background-color: #3A422A;}
.c9 .color04{	background-color: #BA1F2B;}
.c9 .color05{	background-color: #413131;}
.c9 .color06{	background-color: #1F312C;}
.c9 .color07{	background-color: #B21C36;}
.c9 .color08{	background-color: #3F2333;}
.c9 .color09{	background-color: #28282F;}
.c9 .color10{	background-color: #182D30;}
.c9 .color11{	background-color: #9E113D;}
.c9 .color12{	background-color: #3D163A;}
.c9 .color13{	background-color: #231635;}
.c9 .color14{	background-color: #181D32;}
.c9 .color15{	background-color: #122330;}
.c9 .color16{	background-color: #9A1355;}
.c9 .color17{	background-color: #461348;}
.c9 .color18{	background-color: #251345;}
.c9 .color19{	background-color: #1A1640;}
.c9 .color20{	background-color: #141C3E;}
.c9 .color21{	background-color: #10213F;}

.c10 .color01{	background-color: #e55411;}
.c10 .color02{	background-color: #c82621;}
.c10 .color03{	background-color: #2d3623;}
.c10 .color04{	background-color: #b21624;}
.c10 .color05{	background-color: #342427;}
.c10 .color06{	background-color: #142421;}
.c10 .color07{	background-color: #a6132d;}
.c10 .color08{	background-color: #311627;}
.c10 .color09{	background-color: #1d1c24;}
.c10 .color10{	background-color: #132225;}
.c10 .color11{	background-color: #940d35;}
.c10 .color12{	background-color: #310f30;}
.c10 .color13{	background-color: #1a0d29;}
.c10 .color14{	background-color: #121327;}
.c10 .color15{	background-color: #0f1724;}
.c10 .color16{	background-color: #900e4c;}
.c10 .color17{	background-color: #350e3b;}
.c10 .color18{	background-color: #1c0c39;}
.c10 .color19{	background-color: #140e34;}
.c10 .color20{	background-color: #0f1231;}
.c10 .color21{	background-color: #0e1734;}

.black .color01{	background-color: #697A87;}
.black .color02{	background-color: #535F6B;}
.black .color03{	background-color: #3C4350;}
.black .color04{	background-color: #262834;}
.black .color05{	background-color: #0F0C18;}



/* 大枠 */
main {
  max-width: 800px;
  margin: 0 auto;
}
#colorpicker {
  margin-top: 100px;
	padding: .5em 0;
}
@media only screen and (max-width:768px) {
#colorpicker {
  width:100%;
}
}
#colorpicker-plot-wrapper {
  width: 100%;
	padding: 2em;
	background-color: #f9f9f9;
	position: relative;
	overflow: hidden;
}

.c1,.c2,.c4,.c5,.c6,.c7,.c9,.c10{
  display: none;
}

.none{display: none;}
.block{display: block;}
.align-center{text-align: center;}
h3{
  font-weight: bold;
  font-size: 1.3em;
  margin-top: 10px;
  color: #111;
}
h3 br{
  display: none;
}
@media only screen and (max-width:768px) {
  h3 br{
    display: block;
  }
}


/* 手順 */
.process-title {
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px dashed #111;
  list-style: none;
  font-weight: bold; }

.process-title span {
  display: block;
  color: rgba(34, 34, 34, 0.2);
  font-size: 30px;
  padding-right: 0.5em; }
  @media screen and (min-width: 768px) {
    .process-title span {
      font-size: 36px; } }
  @media screen and (min-width: 1080px) {
    .process-title span {
      display: inline; } }

.process-list {
  padding: 20px;
  border: 1px solid #111; }

.process-list .process-title:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0; }


/* 濃度 */
.concentration{
  margin-top: 50px;
  margin-bottom: 50px;
  font-weight: bold;
}
.concentration p{
  display: inline-block;
}
.concentration p.none-inline{
  display:block;
}
.concentration .per{
  color: #1597ff;
  font-size: 1.3em;
}
.concentration .value,.concentration .value2{
  width: 60px;
  /*background: linear-gradient(transparent 0%, #1597ff 0%);*/
}
.concentration .value + p,.concentration .value2 + p{
  padding: 0 3px;
}



/* 配合算出 */
#colorpicker-cals {
	border-collapse: separate;
	border-spacing: .2em;
	width: 100%;
}
#colorpicker-cals ul{
  list-style:none;
}
#colorpicker-cals ul.calc{
	font-size: 1.5em;
	white-space: nowrap;
  margin-top: 30px;
}
#colorpicker-cals ul.calc li{
  display:inline-block;
  line-height: 1;
  vertical-align: middle;
  font-size: 20px;
}
#colorpicker-cals ul.calc.two{
  margin-right: auto;
  margin-left: auto;
  width: 80%;
}
#colorpicker-cals ul.calc.two li{
  width: 50%;
}
#colorpicker-cals ul.calc.three li{
  width: 33.333%;
}
#colorpicker-cals ul.calc li.first{
  line-height: 2;
}
.colorpicker-text-number {
	line-height: 1;
}
.colorpicker-text-number input {
	font-size: inherit;
  font-size: 1.2em;
	text-align: right;
	width: 3em;
  padding: 4px;
  border: 1px solid #c5c5c5;
}
.colorpicker-text-number > span > span {
	margin-left: .2em;
	font-size: .5em;
}
#colorpicker-cals ul.calc.two li > span{
  display: inline-block;
  width: 50%;
  vertical-align: middle;
}
#colorpicker-cals ul.calc li > span{
  display: inline-block;
}
#colorpicker-cals .small {
	font-size: 0.6em;
}
#colorpicker-cals .unit {
	font-size: 1em;
}
#colorpicker-cals .calc-title{
  font-size: 1.4em;
  font-weight: bold;
  text-align: center;
  margin-top: 40px;
  margin-bottom: 0px;
  padding: 1rem;
  border-bottom: solid 2px #222;
}
@media only screen and (max-width:768px) {
#colorpicker-cals ul.calc.two{
  width: 100%;
}
#colorpicker-cals ul.calc.two li{
  width: 46%;
  margin: 0 2%;
  text-align: center;
}
#colorpicker-cals ul.calc li > span{
	display: block !important;
}
#colorpicker-cals ul.calc.two li > span{
  width: 100%;
}
}
@media only screen and (min-width:768px) {
#colorpicker-cals input {
	width: 4em;
}
}




/* タブ */
.tabMenu{
  display: table;
  width: 100%;
  text-align: center;
  padding-bottom: 1px;
  font-size:0;
}
.tabMenu li{
  width:calc(100%/3);
  padding: 10px 0;
  margin: 0;
  font-weight: bold;
  display: inline-block;
  top: 1px;
  position: relative;
  background-color: #eee;
  font-size:18px !important;
  border-radius: 10px 10px 0px 0px;
  list-style:none;
  text-align:center;
  cursor:pointer;
  color: #fff;
}
@media only screen and (max-width:768px) {
  .tabMenu li{
    display: table-cell;
    vertical-align: middle;    
    line-height:1em;
    width:calc(100%/3);
    padding-right:1%;
    padding-left:1%;
  }
}
.tabMenu li:hover{
  cursor : pointer;
}
.tabMenu li:nth-child(1){
  background-color: #8bb5df;
  /*background-color: #E97DAC;*/
}
.tabMenu li:nth-child(2){
  background-color: #233a66;
  /*background-color: #A91545;*/
}
.tabMenu li:nth-child(3){
  background-color: #8a8a8a;
}
.panel:nth-child(1).is-show{
  border-top: solid 5px #8bb5df;
}
.panel:nth-child(2).is-show{
  border-top: solid 5px #233a66;
}
.panel:nth-child(3).is-show{
  border-top: solid 5px #8a8a8a;
}
.panel{
  text-align: center;
  display:none;
}
.panel.is-show{
  display:block;
}
.panel .black{
  margin-top: 50px;
}
.tabMenu li br{
  display: none;
}
@media only screen and (max-width:768px) {
.tabMenu li br{
  display: block;
}
}


/* カラー選択ボタン */
.color_square{
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}
.color_square .box{
  text-align: center;
  margin-bottom: 6px;
}
.color_square .box > div{
  display:inline-block;
  width:14%;
  margin:0 3px;
  text-align: center;
}
@media only screen and (max-width:768px) {
.color_square .box > div{
  margin:0;
}
}
.color_square .box > div.active{
  outline: 3px double black;
}
.color_square .box > div:hover{
  outline: 3px double black;
}
.color_square .box > div div {
  width : 100% ;
  padding-top : 100% ;
}


/* トグル */
.submenu {
  background: #fff;
  display: none;
}
.menu .title{
  font-weight: bold;
  font-size: 1.5em;
  margin-top: 50px;
  margin-bottom: 40px;
  color: #111;
}
.menu__item {
  display: block;
  margin-bottom: 1px;
  position: relative;
}
.menu__item__link {
  color: #fff !important;
  display: block;
  padding: 3px 1rem;
  border-top: none;
  text-align: center;
  width: 50%;
  margin: 0 auto;
  background-color: #222;
}
.menu__item__link span{
  display: block;
	-webkit-animation: arrow 2s infinite;
	animation: arrow 2s infinite;
}
@-webkit-keyframes arrow{
	0% {
		-webkit-transform: translate(0, 0);
	}
	8% {
		-webkit-transform: translate(0, 3px);
	}
	25% {
		-webkit-transform: translate(0, -3px);
	}
	40% {
		-webkit-transform: translate(0, 0);
	}
}
@keyframes arrow{
	0% {
		transform: translate(0, 0);
	}
	8% {
		transform: translate(0, 3px);
	}
	25% {
		transform: translate(0, -3px);
	}
	40% {
		transform: translate(0, 0);
	}
}


/* モーダルウィンドウ */
.modal{
	padding: 250px 10px 20px !important;
}
.modal p{
	text-align: center;
	font-size: 1.4em;
}
.modal p span{
	display: inline-block;
	padding: 0 10px;
	background-color: #fff;
}