@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Expletus+Sans:600&display=swap');

/*------------------------------------------------------

	リセット

------------------------------------------------------*/

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%;
	font-style: normal;
	font-weight: normal;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
a {
	margin: 0;
	padding: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
/* change colours to suit your needs */
ins {
	background-color: #ff9;
	color: #544c4a;
	text-decoration: none;
}
/* change colours to suit your needs */
mark {
	background-color: #ff9;
	color: #544c4a;
	font-style: italic;
	font-weight: bold;
}
del {
	text-decoration: line-through;
}
abbr[title], dfn[title] {
	border-bottom: 1px dotted;
	cursor: help;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* change border colour to suit your needs */
hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #cccccc;
	margin: 0;
	padding: 0;
}
input, select {
	vertical-align: middle;
}
img {
	max-width: 100%;
	height: auto;
	border: none;
	vertical-align: middle;
}
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
*:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}


/*------------------------------------------------------

	グローバル

------------------------------------------------------*/

body {
	font-family: "Hiragino Maru Gothic W4 JIS2004", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 500;
	color: #544c4a;
	font-size: 0.93em;
	line-height: 2;
	position: relative;
	min-width: 1030px;
}

.fo_es { font-family: 'Expletus Sans', cursive;}

p { margin-bottom: 30px;}
p:last-child { margin-bottom: 0px;}

a { color: #544c4a; text-decoration: none;}
a:hover { color: #999; text-decoration: underline;}

/* 文字装飾 */
.fo06 { font-size: 0.6em !important;}
.fo07 { font-size: 0.7em !important;}
.fo075 { font-size: 0.75em !important;}
.fo08 { font-size: 0.8em !important;}
.fo085 { font-size: 0.85em !important;}
.fo088 { font-size: 0.875em !important;}
.fo09 { font-size: 0.9em !important;}
.fo105 { font-size: 1.05em !important;}
.fo11 { font-size: 1.1em !important;}
.fo115 { font-size: 1.15em !important;}
.fo12 { font-size: 1.2em !important;}
.fo125 { font-size: 1.25em !important;}
.fo13 { font-size: 1.3em !important;}
.fo14 { font-size: 1.4em !important;}
.fo15 { font-size: 1.5em !important;}
.fo16 { font-size: 1.6em !important;}
.fo18 { font-size: 1.8em !important;}
.fo20 { font-size: 2em !important;}

.lh12 { line-height: 1.2;}
.lh14 { line-height: 1.4;}
.lh16 { line-height: 1.6;}
.fo17 { font-size: 1.7em !important;}
.fo18 { font-size: 1.8em !important;}
.fo19 { font-size: 1.9em !important;}
.fo20 { font-size: 2em !important;}

.fo_white { color: #FFFFFF;}

/* ボックス */
.container {
	max-width: 1030px;
	padding: 0px 15px;
	margin: 0px auto;
}

.left { float: left;}
.right { float: right;}

.pos_rel { position: relative;}
.pos_ab { position: absolute;}

.bold { font-weight: bold;}

.ta_center { text-align: center;}
.ta_right { text-align: right;}
.ta_left { text-align: left;}
.ta_right-s_center { text-align: right;}
.ta_left-s_center { text-align: left;}
.ta_center-s_left { text-align: center;}

.back_white { background-color: #fff;}

@media print,  (min-width: 861px) {
	.hidden_l { display: none !important;}
}

/* リスト */
ol { padding-left: 2em;}
ol li { list-style: outside decimal;}

.list_disc { padding-left: 1em;}
.list_disc li { list-style: outside disc;}

.list_indent { padding-left: 1em;}
.list_indent li { text-indent: -1em;}

/* margin */
.mb00 { margin-bottom: 0px !important;}
.mb05 { margin-bottom: 5px !important;}
.mb10 { margin-bottom: 10px !important;}
.mb15 { margin-bottom: 15px !important;}
.mb20 { margin-bottom: 20px !important;}
.mb25 { margin-bottom: 25px !important;}
.mb30 { margin-bottom: 30px !important;}
.mb40 { margin-bottom: 40px !important;}
.mb50 { margin-bottom: 50px !important;}
.mb60 { margin-bottom: 60px !important;}
.mb80 { margin-bottom: 80px !important;}

.mb40-20 { margin-bottom: 40px !important;}
.mb60-30 { margin-bottom: 60px !important;}
.mb80-40 { margin-bottom: 80px !important;}
.mb100-60 { margin-bottom: 100px !important;}
.mb120-60 { margin-bottom: 120px !important;}
.mb120-80 { margin-bottom: 120px !important;}
.mb160-80 { margin-bottom: 160px !important;}

/* clearFix */
.clearFix { zoom: 100%;}
.clearFix:after {
	content: "";
	clear: both;
	height: 0;
	display: block;
	visibility: hidden;
}

/* ------------------------
	ヘッダー
------------------------ */

.header { display: flex; justify-content: space-between; align-items: center;}
.header h1 { padding-left: 20px;}
.header h1 img { width: auto; height: 45px;}
.header nav { display: flex; align-items: flex-end;}
.header_contact li { display: inline-block; margin-left: 10px; vertical-align: middle;}
.header_contact .tel a { display: inline-block; font-size: 1.6em; font-weight: bold; text-decoration: none; line-height: 1;}
.header_contact .btn_area a { display: inline-block; vertical-align: middle; width: 75px; line-height: 75px; background: url("../images/common/header_btn.png") no-repeat center center #544c4a; text-align: center; text-indent: 100%; overflow: hidden; white-space: nowrap;}

.clone-nav {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	width: 100%;
	min-width: 1030px;
	transition: .3s;
	transform: translateY(-100%);
	background: #fff;
}
.is-show { transform: translateY(0);}

/* ------------------------
	グローバルナビ
------------------------ */

.gn { display: flex; padding-bottom: 12px;}
.gn > li { margin: 0px 7px;}
.gn > li > a {
	color: #544c4a;
	text-decoration: none;
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	position: relative;
	overflow: hidden;
}
.gn > li > a:before {
	content: "";
	position: absolute;
	z-index: -1;
	left: 0;
	right: 100%;
	bottom: 2px;
	background: #544c4a;
	height: 1px;
	-webkit-transition-property: right;
	transition-property: right;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}
.gn > li > a:hover:before, .gn > li > a:focus:before, .gn > li > a:active:before { right: 0;}

@media only screen and (min-width: 1120px) {
	.gn > li { margin: 0px 1em;}
}


/* ------------------------
	フッター
------------------------ */

.footer h2 img { max-width: 164px; height: auto;}

.footer_nav li { display: inline-block;}
.footer_nav li:after { content: " | "; letter-spacing: 1em;}
.footer_nav li:last-Child:after { content: "";}

.footer hr { border: none; height: 8px; background-image:linear-gradient(45deg, transparent 25%, #dedddc 25%, #dedddc 50%, transparent 50%, transparent 75%, #dedddc 75%, #dedddc); background-size: 10px 10px;}

.footer .box { display: flex; justify-content: center; align-items: center;}
.footer .box > * { margin: auto 15px;}

.footer .produce_box { background-color: #544c4a; padding: 7px 0px;}

.pagetop { position: fixed; right: 30px; bottom: 0px; padding-bottom: 60px; z-index: 9999;}
.pagetop a { display: inline-block; width: 55px; height: 55px; border-radius: 100%; background-color: #544c4a; position: relative;}
.pagetop a:after {
	content: "";
	position: absolute;
    width: 25px;
    height: 25px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    transform: rotate(-45deg);
	top: 50%;
	left: 50%;
	margin: -8px 0px 0px -13px;
}

/*------------------------------------------------------

	トップページ

------------------------------------------------------*/

/* slider */
.viewer {
	margin: 0 auto;
	width: 100%;
	position: relative;
	overflow: hidden;
}
.viewer ul {
	width: 100%;
	overflow: hidden;
	position: relative;
}
.viewer ul li {
	top: 0;
	left: 0;
	width: 100%;
	position: absolute;
}
.viewer ul li img { width: 100%;}

.slide_wrap a img { transition: 0.3s;}
.slide_wrap a:hover img { opacity: 0.7;}

.top_ttl { background: url("../images/common/line01.png") no-repeat center bottom; padding-bottom: 25px;}
.top_ttl h2 { font-size: 3em;}
.top_ttl p { letter-spacing: 0.1em;}

.top_text { font-size: 2.5em; line-height: 1.4; letter-spacing: 0.05em; overflow: hidden}
.top_text:after { content: ""; position: absolute; max-width: 630px; width: 100%; height: 10px; bottom: 0px; left: 50%; transform: translateX(-50%); background-image:linear-gradient(45deg, transparent 25%, #dedddc 25%, #dedddc 50%, transparent 50%, transparent 75%, #dedddc 75%, #dedddc); background-size: 10px 10px; z-index: -1;}

/* about */
.top_about .box { display: flex; justify-content: space-between; align-items: center; flex-flow: row-reverse;}
.top_about .box_inner { width: 500px;}
.top_about figure { width: 400px; height: 482px;}
.top_about figure .pos_ab { right: 0px; top: 0px; height: 100%; width: 701px; max-width: 701px;}

.top_about.top_shop .box { flex-flow: row;}
.top_about.top_shop figure .pos_ab { left: 0px; right: auto;}

/* bnr */
.top_bnr ul { display: flex; justify-content: center;}
.top_bnr li { width: 260px; margin: 0px 4%;}
.top_bnr .img_box:after { content: ""; position: absolute; top: 8px; right: -8px; bottom: -8px; left: 8px; border-radius: 100%; background-image:linear-gradient(45deg, transparent 25%, #dedddc 25%, #dedddc 50%, transparent 50%, transparent 75%, #dedddc 75%, #dedddc); background-size: 10px 10px; z-index: -1;}
.top_bnr .img_box > div { border-radius: 100%; overflow: hidden;}
.top_bnr li img { width: 100%; height: auto; transition: 0.3s;}
.top_bnr li:hover img { transform: scale(1.05);}
.top_bnr li a { display: block; text-decoration: none; color: #544c4a;}

/* contact */
.top_contact { background: url("../images/top/contact_bg.jpg") no-repeat center center; background-size: cover; padding: 120px 0px;}
.top_contact .top_text:after { display: none;}
.top_contact ul { display: flex; justify-content: center; align-items: center;}
.top_contact li { margin: 0px 30px;}
.top_contact li:first-child { font-size: 1.4em; line-height: 1.2;}
.top_contact .tel a { color: #fff; text-decoration: none; font-weight: bold; font-size: 2em; line-height: 1;}
.top_contact .more_btn a span { border: solid 1px #fff; padding: 20px; font-size: 1.2em; min-width: 270px;}
.top_contact .more_btn a span:before { display: none;}
.top_contact .more_btn a span img { margin-right: 0.8em;}

/*------------------------------------------------------

	下層ページ

------------------------------------------------------*/

.show_sp { display: none;}

.over_hidden { overflow: hidden;}

/* 下層共通 */
.pagettl { background: url("../images/common/line01.png") no-repeat center bottom; font-size: 2.7em; line-height: 1.2; padding-bottom: 30px; text-align: center; font-weight: bold;}

.heading_btmline { font-size: 2em; line-height: 1.5; font-weight: bold; padding-bottom: 20px; margin-bottom: 40px; background: url("../images/blog/line03.png") repeat-x left bottom;}
.heading_btmline:before, .heading_btmline:after { display: none;}

.more_btn a {
	display: inline-block;
	position: relative;
	text-decoration: none;
	transition: 0.3s;
}
.more_btn a span {
	display: block;
	line-height: 1.6;
	color: #fff;
	letter-spacing: 0.1em;
	font-weight: 700;
	text-decoration: none;
	text-align: center;
	background-color: #544c4a;
	padding: 15px 40px 15px 30px;
	border-radius: 7px;
	min-width: 250px;
	position: relative;
	z-index: 100;
}
.more_btn a span:before {
	content: "";
	right: 20px;
	top: 50%;
	margin-top: -7px;
	position: absolute;
    width: 10px;
    height: 10px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
}
.more_btn a:after { content: ""; position: absolute; top: 8px; right: -8px; bottom: -8px; left: 8px; border-radius: 8px; background-image:linear-gradient(45deg, transparent 25%, #dedddc 25%, #dedddc 50%, transparent 50%, transparent 75%, #dedddc 75%, #dedddc); background-size: 10px 10px; transition: 0.3s;}
.more_btn a:hover { transform: translate(3px, 3px);}
.more_btn a:hover:after { top: 5px; right: -5px; bottom: -5px; left: 5px;}


/* ----------------------------
	固定ページテンプレート
---------------------------- */

.mainimage img { width: 100%; height: auto;}

.main_contents { max-width: 930px; margin: auto; padding: 0px 15px;}

.box30 { display: flex; flex-wrap: wrap; margin: auto -1.5%;}
.box30 > div { width: 29.3333%; margin: 0px 2% 50px;}

.box50 { display: flex; justify-content: space-between; flex-wrap: wrap;}
.box50 > div { width: 46%; margin: 0px 0px 50px;}

.img_border { margin: 15px 15px 80px 15px; position: relative;}
.img_border:before { content: ""; position: absolute; background-image: linear-gradient(45deg, #fff 25%, #ddd 25%, #ddd 50%, #fff 50%, #fff 75%, #ddd 75%, #ddd); background-size: 10px 10px; left: -15px; top: -15px; right: -15px; bottom: -15px; z-index: -1;}

.img_wide { position: relative; padding: 15px 0px; margin-bottom: 70px;}
.img_wide img { width: 100%; height: auto;}
.img_wide:before {
	content: "";
	position: absolute;
	background-image: linear-gradient(45deg, #fff 25%, #ddd 25%, #ddd 50%, #fff 50%, #fff 75%, #ddd 75%, #ddd);
	background-size: 10px 10px;
	width: 100%;
	height: 15px;
	left: 0px;
	top: 0px;
}
.img_wide:after {
	content: "";
	position: absolute;
	background-image: linear-gradient(45deg, #fff 25%, #ddd 25%, #ddd 50%, #fff 50%, #fff 75%, #ddd 75%, #ddd);
	background-size: 10px 10px;
	width: 100%;
	height: 15px;
	left: 0px;
	bottom: 0px;
}

.blog_content .img_left { display: flex; justify-content: space-between; margin-bottom: 60px;}
.blog_content .img_left > figure { width: 40%;}
.blog_content .img_left > div { width: 55%; padding-top: 1em;}
.blog_content .img_left p:last-child { margin-bottom: 0px;}

.blog_content .img_right { display: flex; justify-content: space-between; margin-bottom: 60px; flex-flow: row-reverse;}
.blog_content .img_right > figure { width: 40%;}
.blog_content .img_right > div { width: 55%; padding-top: 1em;}
.blog_content .img_right p:last-child { margin-bottom: 0px;}

.faq_sec { margin-bottom: 80px;}
.faq_sec dl { display: table; width: 100%;}
.faq_sec dl:first-child { padding-bottom: 15px; border-bottom: dotted 1px #ccc; margin-bottom: 15px;}
.faq_sec dt, .faq_sec dd { display: table-cell; vertical-align: top;}
.faq_sec dt { width: 65px;}
.faq_sec dt span { display: block; width: 50px; height: 50px; line-height: 53px; text-align: center; border-radius: 100%; font-size: 2.3em; background: #544c4a; color: #fff;}
.faq_sec dd { padding-top: 7px;}
.faq_sec dl:first-child dd { font-size: 1.4em; font-weight: bold; line-height: 1.6;}

.step_sec01 { display: flex; justify-content: space-between; margin-bottom: 80px;}
.step_sec01 > figure { width: 290px;}
.step_sec01 > div { width: 580px; padding-left: 100px;}
.step_sec01 .num_box { background: #544c4a; width: 80px; left: 0px; top: 0px; height: 160px; border-top-right-radius: 160px; border-bottom-right-radius: 160px; padding: 45px 8px 0px 0px;}
.step_sec01 .num_box span { font-size: 2.5em; line-height: 1;}

.step_sec02 { display: flex; justify-content: space-between; flex-flow: row-reverse; margin-bottom: 80px;}
.step_sec02 > figure { width: 415px;}
.step_sec02 > div { width: 450px; padding-top: 50px;}
.step_sec02 .num_box span { display: inline-block; vertical-align: middle; font-size: 2.5em; line-height: 1; margin-left: 0.2em;}
.step_sec02 .num_box .pos_ab { left: -80px; top: 50%; transform: translateY(-50%);}

/* 本文 */
.blog_content p:last-child { margin-bottom: 30px;}
.blog_content h2 {
	font-size: 2.3em;
	font-weight: bold;
	line-height: 1.5;
	padding-bottom: 30px;
	clear: both;
	position: relative;
	margin-bottom: 30px;
}
.blog_content h2:after { content: ""; position: absolute; width: 100%; left: 0px; height: 10px; bottom: 0px; background-image: linear-gradient(45deg, #fff 25%, #ddd 25%, #ddd 50%, #fff 50%, #fff 75%, #ddd 75%, #ddd); background-size: 10px 10px;}
.blog_content h3 {
	font-weight: bold;
	font-size: 1.8em;
	line-height: 1.5;
	background: url("../images/blog/line02.png") repeat-y left top, url("../images/blog/line02.png") repeat-y right top;
	padding: 0px 25px;
	clear: both;
	margin-bottom: 25px;
}
.blog_content h4 {
	font-weight: bold;
	font-size: 1.6em;
	line-height: 1.5;
	background: rgba(118,110,106,0.05);
	padding: 5px 0.8em;
	clear: both;
	margin-bottom: 25px;
}
.blog_content h5 {
	font-weight: bold;
	font-size: 1.5em;
	line-height: 1.4;
	clear: both;
	margin-bottom: 25px;
}
.blog_content h6 {
	font-size: 1.4em;
	line-height: 1.4;
	margin-bottom: 25px;
}

/* 引用 */
.blog_content blockquote {
	position: relative;
	padding: 40px 6%;
	margin: 70px 15px;
	background-color: #f8f8f7;
	clear: both;
}
.blog_content blockquote:before { content: ""; position: absolute; left: -15px; top: -15px; right: -15px; bottom: -15px; background-image: linear-gradient(45deg, #fff 25%, #ddd 25%, #ddd 50%, #fff 50%, #fff 75%, #ddd 75%, #ddd); background-size: 10px 10px; z-index: -1;}
.blog_content blockquote:after { content: ""; position: absolute; left: 15px; right: 15px; top: 20px; background: url("../images/blog/ico_blq01.png") no-repeat left bottom, url("../images/blog/ico_blq02.png") no-repeat right top; height: 19px;}

/* リスト */
.blog_content ul { margin-bottom: 30px; clear: both;}
.blog_content li { background: url("../images/blog/line03.png") no-repeat left 0.8em; padding-left: 27px;}
.blog_content li li { background: none; position: relative;}
.blog_content li li:before { content: ""; position: absolute; top: 0.6em; left: 0.8em; width: 0.6em; height: 0.6em; background-color: #57aab2;}

.blog_content ol { margin-bottom: 30px; padding-left: 2em;}
.blog_content ol li { list-style: outside decimal;}

/* テーブル */
.blog_content table {
	clear: both;
	width: 100%;
	margin-bottom: 30px;
}
.blog_content table th, .blog_content table td {
	padding: 8px;
	vertical-align: top;
}
.blog_content table td, .blog_content table th { border-right: solid 2px #ddd; border-bottom: dotted 1px #333;}
.blog_content table tr:last-child td, .blog_content table tr:last-child th { border-bottom: none;}
.blog_content table td:last-child, .blog_content table th:last-child { border-right: none;}
.blog_content table th {
	font-weight: bold;
	background-color: #544c4a;
	color: #fff;
	border-color: #fff;
}

.blog_content iframe { max-width: 100%;}

.blog_content strong { font-weight: bold;}
.blog_content em { font-weight: bold; color: #57aab2;}

.blog_content a { color: #a48522; text-decoration: underline;}
.blog_content a:hover { color: #57aab2;}
.blog_content a.icon { background: url("../images/blog/ico_link.png") no-repeat left 50%; padding-left: 20px;}
.blog_content a.icon:hover { background-image: url("../images/blog/ico_link_o.png");}
.blog_content a.box { background: url("../images/blog/ico_link.png") no-repeat 15px 50% #f8f8f7; padding: 7px 15px 7px 35px; display: inline-block;}
.blog_content a.box:hover { background-image: url("../images/blog/ico_link_o.png"); border-color: #f08c00;}
.blog_content a.btn01, .blog_content a.btn02, .blog_content a.btn03 { display: inline-block; min-width: 250px; position: relative; transition: 0.3s; text-align: center; padding: 13px 30px; text-decoration: none; font-weight: bold; line-height: 1.6; color: #544c4a;}
.blog_content a.btn01:hover, .blog_content a.btn02:hover, .blog_content a.btn03:hover { transform: translate(3px, 3px);}
.blog_content a.btn01 { border: solid 2px #544c4a; border-radius: 60px;}
.blog_content a.btn01:before, .blog_content a.btn02:before, .blog_content a.btn03:before { 
	content: "";
	right: 15px;
	top: 50%;
	margin-top: -6px;
	position: absolute;
    width: 9px;
    height: 9px;
    border-top: 2px solid #544c4a;
    border-right: 2px solid #544c4a;
    transform: rotate(45deg);
}
.blog_content a.btn02 { background-color: #57aab2; color: #fff; box-shadow: 7px 7px 0px #ddd;}
.blog_content a.btn02:before { border-color: #fff;}
.blog_content a.btn03 { padding: 30px 40px 50px 20px; min-width: 0px; background-color: #f8f8f7;}
.blog_content a.btn03:before { background-color: #f8f8f7; right: 20px; margin-top: -14px;}
.blog_content a.btn03:after { content: ""; position: absolute; left: -10px; top: -10px; right: 10px; bottom: 10px; border: solid 2px #544c4a;}



/*======================================
	背景
=======================================*/

.bgblue {background-color:#ddecfc;}
.bgyellow {background-color:#fffc00;}
.bgyellow2 {background-color:#fbfad0;}
.bgpink{background-color:#fde2fa;}
.bggreen{background-color:#e7fbdb;}
.bgred{background-color:red;}

/*======================================
	色
=======================================*/
.boxes{border: 1px dotted #777;padding:8px;}
.col-red {color:#f01c53;}
.col-red2 {color:#f01c1c;}

.col-red3 {color:#b02727;}
.col-blue {color:#3427b0;}
.col-blue2 {color:#2741b0;}
.col-blue3 {color:#183fe7;}
.col-pink{color:#f431a9;}
.col-pink2{color:#fb8174;}
.col-pink3{color:#ff7567;}
.col-yellow{color:#beae22;}
.col-yellow2{color:#e2cd17;}
.col-yellow3{color:#b3a63b;}
.col-green{color:#3bb357;}
.col-green2{color:#1e7132;}
.col-green3{color:#33840c;}
.col-purple{color:#861ddf;}
.col-purple2{color:#b16dea;}
.col-orange{color:#e49915;}
.col-mizu{color:#17cda0;}
.col-gray{color:#999;}
.col-gray2{color:#666666;}