@charset "utf-8";

/* =============================================================================
Reset style
========================================================================== */
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
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 }
body { line-height: 1 }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block }
nav 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 }
ins { background-color: #ff9; color: #000; text-decoration: none }
mark { background-color: #ff9; color: #000; 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 }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #cccccc; margin: 1em 0; padding: 0 }


/* =============================================================================
Basic style
========================================================================== */

/*
* body InitialStyle
*/
body { -webkit-text-size-adjust: none; background: #fff;font-size: .2rem; }
p { font-size: .26rem; }
/*
* Wrapper InitialStyle
*/
#wrapper { overflow: hidden; position: relative; margin: 0 auto; background:#fff; }

/*
* Inner InitialStyle
*/
.inner { position: relative; margin:0 auto; padding:0 0.3rem; }
a { display: block; }


/* =============================================================================
Image
========================================================================== */

img { vertical-align: bottom; max-width :100%; width:100%; }

/* Image center */
.img-center { display:block; margin:0 auto; }
.img-right { display:block; margin:0 0 0 auto; }
.img-left { display:block; margin:0 0 0 auto; }

/* =============================================================================
Common Style
========================================================================== */

table { font-size:inherit;font:100%;}

pre, code, kbd, samp, tt { font-family: monospace; *font-size: 100%; font: 115% monospace; line-height: 150%; }

input,textarea,select { font-family:inherit; font-size:inherit; font-weight:inherit;}

input,textarea,select { *font-size:100%; }

ul, li { list-style: none; }

/*
* box-sizing
*/
div,p,dl,dt,dd,ol,ul,li,h1,h2,h3,h4,h5,h6,form,input,button,textarea,table,tr,th,td,article,aside,header,footer,section,nav{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }


/* =============================================================================
Typography
========================================================================== */

body { color: #000; letter-spacing: 0px; font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W6", "メイリオ", Meiryo,"游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic","MS P Gothic", "ＭＳ Ｐゴシック", Osaka, Arial, Helvetica, sans-serif; }

p { line-height: 1.6; text-align: left; }

dt, dd { line-height: 1.6; }

h1,h2,h3,h4,h5,h6 { text-align:center; font-weight:bold; line-height: 1.6; }

a { color:inherit; text-decoration:underline; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);　tap-highlight-color: rgba(0, 0, 0, 0); text-decoration: none;}

input[type="text"],input[type="button"],input[type="submit"] { -webkit-appearance: none; border-radius: 0; }

select { -moz-appearance: none; -webkit-appearance: none; appearance: none; border: 0; background: none transparent; vertical-align: middle; box-sizing: content-box; }

button { background-color:transparent; border:none; padding: 0; outline: none; }

textarea { -moz-appearance: none; -webkit-appearance: none; appearance: none; border: 0; border-radius:.3rem; background:#fff; }

html { font-size: 13.3333333333333vw; }


/* =============================================================================
Layout style
========================================================================== */

/* Header */
#header { width:100%; }

/* Footer */
#footer { width:100%; }

/* Container */
#container { width:100%; }

/* absolute-center */
.ab-center { position:absolute; left:0; right:0; margin:auto; }

/*
* clearfix
*/
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }

/* =============================================================================
Others
========================================================================== */

#wrapper.fixed { position: fixed; left: 0; right: 0; width: 100%; margin: 0 auto; z-index: 1;}

/*
* convenient
*/

.arial { font-family: Arial, Helvetica, sans-serif; }
/*
 * letter-spacing
 */
.xxs-spacing { letter-spacing:.01rem; }
.xs-spacing { letter-spacing:.02rem; }
.s-spacing { letter-spacing:.03rem; }
.m-spacing { letter-spacing:.04rem; }
.l-spacing  { letter-spacing:.05rem; }
.ll-spacing  { letter-spacing:.06rem; }
.xl-spacing  { letter-spacing:.07rem; }

/**
*
* Enter the font size
* pattern to be used in this coding.
*
*/
.fs-14 { font-size:.14rem; }
.fs-16 { font-size:.16rem; }
.fs-18 { font-size:.18rem; }
.fs-20 { font-size:.2rem; }
.fs-22 { font-size:.22rem; }
.fs-24 { font-size:.24rem; }
.fs-26 { font-size:.26rem; }
.fs-28 { font-size:.28rem; }
.fs-30 { font-size:.3rem; }
.fs-32 { font-size:.32rem; }
.fs-33 { font-size:.33rem; }
.fs-34 { font-size:.34rem; }
.fs-35 { font-size:.35rem;}
.fs-36 { font-size:.36rem; }
.fs-38 { font-size:.38rem; }
.fs-40 { font-size:.40rem; }
.fs-42 { font-size:.42rem; }
.fs-43 { font-size:.43rem; }
.fs-44 { font-size:.44rem; }
.fs-46 { font-size:.46rem; }
.fs-47 { font-size:.47rem; }
.fs-48 { font-size:.48rem; }
.fs-50 { font-size:.5rem; }
.fs-52 { font-size:.52rem; }
.fs-54 { font-size:.54rem; }
.fs-56 { font-size:.56rem; }
.fs-58 { font-size:.58rem; }
.fs-60 { font-size:.6rem; }
.fs-62 { font-size:.62rem; }
.fs-64 { font-size:.64rem; }
.fs-65 { font-size:.65rem; }
.fs-66 { font-size:.66rem; }
.fs-70 { font-size:.7rem; }
.fs-80 { font-size:.8rem; }
.fs-85 { font-size:.85rem; }
.fs-88 { font-size:.88rem; }
.fs-100 { font-size:1rem; }

/*
* line-height
*/
.line-10 { line-height: 1.0; }
.line-11 { line-height: 1.1; }
.line-12 { line-height: 1.2; }
.line-13 { line-height: 1.3; }
.line-14 { line-height:1.4; }
.line-16 { line-height:1.6; }
.line-17 { line-height:1.7; }
.line-18 { line-height:1.8; }
.line-19 { line-height:1.9; }
.line-20 { line-height:2; }

.fw-300 { font-weight: 300; }
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.bold { font-weight: bold; }

/*
 * convenient styles
 */
.ta-c { text-align:center; }
.ta-l { text-align:left; }
.ta-r { text-align:right; }
.bold { font-weight:bold; }


/*
* hover effect
*/
.u-target { transition: opacity .3s; }

.u-target:hover { opacity: .8; filter: alpha(opacity=80); -ms-filter: "alpha(opacity=80)"; }

/*
* display
*/
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.va-t { display: inline-block; vertical-align: text-top; }
.ds-none { display: none; }

/*form*/
:placeholder-shown { color: #b6b7b7; }
::-webkit-input-placeholder { color:#b6b7b7; }
:-moz-placeholder {color:#b6b7b7;; opacity: 1; }
::-moz-placeholder {color: #b6b7b7;; opacity: 1; }
:-ms-input-placeholder { color: #b6b7b7;; }

.cur { cursor: pointer; }
.link-universal { color: #777; text-decoration: underline; }
.relative { position: relative;}
.absoulte { position: absolute; }

/* =============================================================================
Media queri
========================================================================== */
@media (min-width: 840px) {
html { font-size: 100px; }
#wrapper { max-width: 750px; }
}