@charset "UTF-8";

@media(max-width:767px) {
/*------------------------------------------------------------
	reset
------------------------------------------------------------*/
html, body, div, span, applet, object, iframe,
blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; background: transparent; outline: 0; } 

/*------------------------------------------------------------
	default style
------------------------------------------------------------*/
html { font-size: 62.5%; } 
body {}
img { margin: 0; border: 0; max-width: 100%; }
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }

article, aside, canvas, details, figcaption, figure, header, footer, hgroup, menu, nav, section, summary { display: block }
div, ul, li { box-sizing: border-box; }


/*------------------------------------------------------------
	text
------------------------------------------------------------*/
p, h1, h2, h3, h4, h5, h6 { line-height: 1.25; margin-bottom:.4em;  }
h1 { font-size:3.2rem; }
h2 { font-size:2.6rem;}
h3 { font-size: 1.8rem; }
h4 { font-size: 1.6rem;}
h5 { font-size: 1.6rem; margin-bottom:.5em; }
h6 { font-size: 1.4rem; line-height:1.5; font-weight:normal; }
p { font-size: 1.4rem; line-height:1.5; }
.caption { font-size: 1.2rem; padding-top:5px; }
br { display:none; }
br.brimp { display: block !important; }

/*------------------------------------------------------------
	list style
------------------------------------------------------------*/
ul { list-style: none outside; font-size: 1.4rem; line-height: 1.5; color: #333; }
ol { list-style: decimal; margin-left: 2.0rem; font-size: 1.4em; line-height: 1.5; color: #333; }
ul.square, ul.circle, ul.decimal, ul.alphavet { margin-left: 1.5rem; }
ul.square { list-style: square outside; }
ul.circle { list-style: circle outside; }
ul.decimal { list-style: decimal outside; }
ul.alphavet { list-style: lower-alpha outside; }
ul ul.circle, ol ul.circle, ul ul.square, ol ul.square, 
ul ul.decimal, ol ul.decimal, ul ul.alphavet, ol ul.alphavet { margin-top: 0; margin-bottom: 5px; color: #333; }

/*------------------------------------------------------------
	margin padding
------------------------------------------------------------*/
/* Margin */
.btmMgn0 { margin-bottom:0 !important; }
.btmMgn5 { margin-bottom:5px !important; }
.btmMgn10 { margin-bottom:.5em !important; }
.btmMgn15 { margin-bottom:.8em !important; }
.btmMgn20 { margin-bottom:1em !important; }
.btmMgn25 { margin-bottom:1em !important; }
.btmMgn30 { margin-bottom:1em !important; }
.btmMgn35 { margin-bottom:1.5em !important; }

.topMgn0 { margin-top:0 !important; }
.topMgn5 { margin-top:5px !important; }
.topMgn10 { margin-top:10px !important; }
.topMgn15 { margin-top:15px !important; }
.topMgn20 { margin-top:20px !important; }
.topMgn25 { margin-top:25px !important; }
.topMgn30 { margin-top:30px !important; }
.topMgn35 { margin-top:35px !important; }

/* Padding */
.btmPad0 { padding-bottom:0 !important; }
.btmPad5 { padding-bottom:5px !important; }
.btmPad10 { padding-bottom:10px !important; }
.btmPad15 { padding-bottom:15px !important; }
.btmPad20 { padding-bottom:20px !important; }
.btmPad25 { padding-bottom:25px !important; }
.btmPad30 { padding-bottom:30px !important; }
.btmPad35 { padding-bottom:35px !important; }

.topPad0 { padding-top:0 !important; }
.topPad5 { padding-top:5px !important; }
.topPad10 { padding-top:10px !important; }
.topPad15 { padding-top:15px !important; }
.topPad20 { padding-top:20px !important; }
.topPad25 { padding-top:25px !important; }
.topPad30 { padding-top:30px !important; }
.topPad35 { padding-top:35px !important; }


/*------------------------------------------------------------
	float
------------------------------------------------------------*/
/* IMG */
img.center { display:block; margin:0 auto; width:100%; }
img.left,
img.left0,
img.lefttop { width:35%; margin:0 2% 0 0; }
img.right,
img.right0 { width:35%; margin:0 0 0 2%; }
.flNo { float:none !important; width:100%; margin-bottom:1em; }
.flL { float:left; margin:0 .6em 0 0; }
.flR { float: right; margin:0 0 0 .6em; }


/*------------------------------------------------------------
	hr
------------------------------------------------------------*/
hr,
hr.dot,
hr.dash { margin:0 0 2em; }


/*------------------------------------------------------------
	display
------------------------------------------------------------ */
.onlyPc { display:none !important; }
blockquote { font-size:1.6rem; line-height:1.4; padding: 10px 20px; margin: 1em 0 ; border-left: 5px solid #eee;}
blockquote br { display:block; }


/* ============================================
	layout
============================================ */
section { position:relative; width:100%; margin:0 0 1.5em; padding:0; }
.inBox { position:relative; width:84%; margin:0 auto 2em; padding:0; }
.flBox { float:left; width:50%; }

/* col2 */
.col2-l, .col2-r { position:relative; width:84%; margin:0 auto; padding:0; float:none; }
.col2-l { margin:0 auto 2.5rem; }
.col2-r { margin:0 auto 1em; }
.col2-l p br, .col2-r p br { display:block; }
.col2-l h3, .col2-r h3 { position:absolute; top:2.4em; left:1.6em; font-size:1.6rem; }
.col2-l h3.bdr, .col2-r h3.bdr { border-bottom:1px solid #555; padding-bottom:5px; padding-right:1.6em; display:inline-block; }
.col2-l h3.bdr.right, .col2-r h3.bdr.right { left:inherit; right:1.2em; padding-left:1.2em; padding-right:0; } 
.col2-l h3.st, .col2-r h3.st { position: relative; top: inherit; left: inherit; font-size:2rem; margin-bottom:.8em; }
.col2-l img, .col2-r img {margin-bottom:1.5em; }
.col2-l h4, .col2-r h4 { position:relative; top:inherit; left:inherit; right:inherit; font-size:1.8rem; margin:0 0 .4em; }
.btmMgn-col2 { margin-bottom:4%; }
/*col3*/
.col3 li { width:84%; float:none; padding:0; margin:0 auto 1em; }
.col3 li:nth-child(3n+1) { margin:0 auto 1em; }
.col3 li:nth-child(3n) { margin:0 auto 1em; }
.col3 li:last-chaild { margin:0 auto; }
.col3 li h3 { position:absolute; top:30px; left:25px; font-size:1.6rem; z-index:10; }
.col3 li h3.bdr { border-bottom:1px solid #555; padding-bottom:5px; padding-right:1.6em; display:inline-block; }
.col3 li h3.bdr.right { left:inherit; right:28px; padding-left:1.2em; padding-right:0; } 
.col3 li img { width:100%; }
/*col3 border*/
.col3 li.box { width:84%; border:2px solid #ccc; padding-bottom:1em; }
.col3 li.box h3 { font-size:1.8rem; line-height:1.5; margin:.9em .8em .8em; padding-bottom:.8em; }
.col3 li.box h3 span { font-size:1.4rem; padding-top:.2em; }
.col3 li.box p { text-align:center; margin-bottom:1em; }
.col3 li.box img { display:block; margin:0 auto; width:90%; }
/*col3 ststyle*/
.col3 li.ststyle { margin:0 auto 2em; }
.col3 li.ststyle h3 { font-size:2rem; margin:0 0 .3em; }
}

@media(max-width:320px) {
h1 { font-size:2.6rem; }
h2 { font-size:2.2rem; margin-bottom:.6em; }
.col2-l, .col2-r { width:94%; }
.col3 li, .col3 li.box { width:94%; }
.col2-l h3, .col2-r h3, .col3 li h3 { position:absolute; top:1.5em; left:1em; font-size:1.6rem; z-index:10; }
.col2-l h3.bdr, .col2-r h3.bdr, .col3 li h3.bdr { border-bottom:1px solid #555; padding-bottom:5px; padding-right:.6em; display:inline-block; }
.col2-l h3.bdr.right, .col2-r h3.bdr.right, .col3 li h3.bdr.right { left:inherit; right:1em; padding-left:.6em; padding-right:0; } 
}