@charset "utf-8";

@import url('./common.css');

/* reset */
strong { font-weight: bold; }
ol, ul { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }
img { max-width: 100%; }


/* ------------------ 공통 ------------------ */
html { font-size: 13px; line-height: 1.5; letter-spacing: -0.04em; }
.contents_wrap { margin: 0 20px; padding: 44px 0 30px; }
.contents_wrap .header { margin-bottom: 24px; padding-bottom: 26px; background: url('../img/d.jpg') center bottom no-repeat; text-align: center; }
.contents_wrap .header h2 { font-size: 2em; font-weight: bold; }
.contents_wrap .header p { margin-top: 10px; }
.contents_wrap .contents { text-align: center; word-wrap: break-word; word-break: keep-all; }
.contents_wrap p .contrast { padding: 2px 4px; background-color: #000; color: #fff; }


@media all and (max-width: 810px) { /* 900px 기준, 최소폭 850 */
}


@media all and (max-width: 728px) { /* 모바일, 768px 기준 */
	html { font-size: 12px; }
	.contents_wrap .header h2 { font-size: 1.5em; }
	.contents_wrap { margin: 0 15px; padding: 15px 0 20px; }
}


/* ------------------ MAIN ------------------ */
.main .header h2 em { color: #c60000; }
.main .contents p + p { margin-top: 1em; }
.main .contents .note { max-width: 480px; margin: 0 auto; margin-top: 60px; border: 1px solid #eaeaea; padding: 20px 20px 16px; text-align: left; }
.main .contents .note li { position: relative; margin-bottom: 8px; padding-left: 1em; font-size: 12px; }
.main .contents .note li:before { content: "*"; position: absolute; left: 0; top: 0.3em; font-size: 0.85em; }

@media all and (max-width: 748px) { 
	.main .contents .note { margin-top: 40px; padding: 15px 15px 10px; text-align: left; }
	.main .contents .note li { font-size: 11px; }
}


/* ------------------ ABOUT ------------------ */
.about .contents .dim { color: #999; font-size: 0.9em; }
.about .contents .sign { margin-top: 30px; }


/* ------------------ ORDER ------------------ */
.order .order_caution { display: inline-block; margin: 0 auto; line-height: 1.3; }
.order .order_caution .title { margin-bottom: 10px; font-weight: bold; text-align: center; }
.order .order_caution li { position: relative; padding-left: 1em; margin-bottom: 3px; font-size: 0.85em; text-align: left; }
.order .order_caution li:before { content: "*"; position: absolute; left: 0; top: 0.3em; font-size: 0.85em; }

.order .order_sheet { margin-top: 30px; }
.order .order_sheet strong { color: #C60000; }
.order .order_form { position:relative; max-width: 360px; margin: 20px auto; padding: 16px 20px; border: 1px solid #000; border-left: none; border-right: none; text-align: left; }
.order .order_form:before,
.order .order_form:after { content: "†"; position: absolute; display: inline-block; left: 50%; margin-left: -7px; width: 14px; background-color: #fff; text-align: center; }
.order .order_form:before { top: -10px; }
.order .order_form:after { bottom: -9px; }
.order .order_form > ul { display: inline-block; vertical-align: top; }
.order .order_form > ul > p { margin-top: 1px; margin-bottom: 8px; padding-left: 5px; border-left: 5px solid #000; font-weight: bold; text-transform: uppercase; line-height: 1; }
.order .order_form li { position: relative; padding-left: 6px; text-align: left; margin-bottom: 5px; }
.order .order_form li:last-child { margin-bottom: 0; }
.order .order_form li:before { content: ""; display: block; position: absolute; left: 0; top: 8px; width: 1px; height: 1px; background-color: #000; border-dadius: 50%; }

.order .address { margin-top: 20px; }

.order .for_overseas { margin-top: 50px; border-top: 1px dashed #000; }
.order .for_overseas .order_sheet { margin-top: 0; }
.order .for_overseas .h3 { margin-bottom: 20px; padding: 30px 0 25px; font-size: 1.5em; font-weight: bold; text-transform: uppercase; background-color: #f4f4f6; }
/*.order .for_overseas .order_form li { display: inline-block; min-width: 47%; vertical-align: top; }*/

@media all and (max-width: 748px) { 
	.order .order_form { width: 80%; }
	.order .for_overseas .h3 { margin-bottom: 10px; padding: 20px 0 15px; font-size: 1.35em; }
	/*.order .for_overseas .order_form li { display: block; }*/
}


/* ------------------ LINK ------------------ */
.link .link_about { position: relative; }
.link .link_about dt { margin: 0 auto; margin-bottom: 12px; }
.link .link_about .url { color: #999; font-size: 0.9em; }

.link .link_sns { max-width: 600px; margin: 0 auto; margin-top: 60px; padding-top: 30px; border-top: 1px solid #eaeaea; }
.link .link_sns p { margin-bottom: 24px; text-align: top; font-size: 1.15em; }
.link .link_sns ul { display: table; width: 100%; max-width: 100%; table-layout: fixed; }
.link .link_sns li { display: table-cell; width: 33.3%; padding: 0 10px; vertical-align: top; text-align: center; font-size: 0.9em; }
.link .link_sns li a,
.link .link_sns li span { display: block; }
.link .link_sns li a { overflow: hidden; line-height: 1.3; }
.link .link_sns li .icon { overflow: hidden; width: 32px; margin: 0 auto; border-radius: 4px; }
.link .link_sns li .title { padding-top: 10px; }
.link .link_sns li .id { color: #999; font-size: 0.9em; }

@media all and (max-width: 748px) { 
	.link .link_about dt { width: 150px; }

	.link .link_sns { margin-top: 40px; padding-top: 20px; }
	.link .link_sns p { margin-bottom: 20px; }
	.link .link_sns ul { display: block; width: auto; }
	.link .link_sns li { overflow: hidden; display: block; width: auto; margin-bottom: 10px; padding: 0; text-align: left; font-size: 0.95em; }
	.link .link_sns li a { padding-left: 30px; }
	.link .link_sns li .icon { float: left; width: 24px; margin: 0; margin-left: -30px; }
	.link .link_sns li .title { padding-top: 0; }
}