@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; overflow-x: hidden;}

/*
 * Wrapper InitialStyle
 */
#wrapper { position: relative; margin: 0 auto; overflow: hidden; background:#fff; }

/*
 * Inner InitialStyle
 */
.inner { margin: 0 auto; padding: 0; position:relative; }


/* =============================================================================
   Image
========================================================================== */
img { vertical-align: bottom; max-width :100%; }

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


/* =============================================================================
   Common Style
========================================================================== */
input,textarea,select { font-family:inherit; font-size:inherit; font-weight:inherit;}

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

ul, li { list-style: none;}

input, select { -webkit-appearance: none; -moz-appearance: none; appearance: none; }

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

/*
 * 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: #222; letter-spacing: 0px; font-family:"Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "メイリオ", Meiryo, "MS P Gothic", "ＭＳ Ｐゴシック", Osaka, Arial, Helvetica, sans-serif;  }

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

li,dt, dd { line-height: 1.6; }

h1,h2,h3,h4,h5,h6 { font-weight:bold; line-height: 1.4; letter-spacing: .07rem; }

a { color:inherit; text-decoration:none; }

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

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

/* .num {font-family: arial; } */

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

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

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

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


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

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


/* =============================================================================
   Responsive
========================================================================== */
html { font-size: 13.333333333vw; }

img { width: 100%; }

.inner { margin: 0 .3rem; }

.sp-only, .br-sp { display: block; }
.pc-only, .br-pc { display: none; }

@media (min-width: 768px) {
   .inner { width: 980px; margin: 0 auto; }  
   .sp-only, .br-sp { display: none; }
   .pc-only, .br-pc { display: block; }
}