@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 {  display:block;margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent }
a:focus { outline: none; }
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 }


/*----------------------------------------------------------
    Styles for font
----------------------------------------------------------*/
html { font-size: 3.125vw; }

body {
    letter-spacing: 0px;
    -webkit-text-size-adjust: none; /* iPhone用フォント自動リサイズ防止 */
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "メイリオ", Meiryo, "MS P Gothic", "ＭＳ Ｐゴシック", Osaka, Arial, Helvetica, sans-serif;
}
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%; }
h1,h2,h3,h4,h5,h6 { line-height: 1.35; font-weight:normal; }

/*
 * letter-spacing
 */
.xxs-spacing { letter-spacing:.05rem; }
.xs-spacing { letter-spacing:.1rem; }
.s-spacing { letter-spacing:.15rem; }
.m-spacing { letter-spacing:.2rem; }
.l-spacing  { letter-spacing:.25rem; }
.ll-spacing  { letter-spacing:.3rem; }
.xl-spacing  { letter-spacing:.35rem; }

/**
 *
 * Enter the font size
 * pattern to be used in this coding.
 *
 */
.fs-14 { font-size:.7rem; }
.fs-16 { font-size:.8rem; }
.fs-18 { font-size:.9rem; }
.fs-20 { font-size:1rem; }
.fs-22 { font-size:1.1rem; }
.fs-23 { font-size:1.15rem; }
.fs-24 { font-size:1.2rem; }
.fs-26 { font-size:1.3rem; }
.fs-28 { font-size:1.4rem; }
.fs-30 { font-size:1.5rem; }
.fs-32 { font-size:1.6rem; }
.fs-34 { font-size:1.7rem; }
.fs-35 { font-size: 1.75rem;}
.fs-36 { font-size:1.8rem; }
.fs-38 { font-size:1.9rem; }
.fs-40 { font-size:2rem; }
.fs-42 { font-size:2.1rem; }
.fs-43 { font-size:2.15rem; }
.fs-44 { font-size:2.2rem; }
.fs-46 { font-size:2.3rem; }
.fs-48 { font-size:2.4rem; }
.fs-50 { font-size:2.5rem; }
.fs-52 { font-size:2.6rem; }
.fs-60 { font-size:3rem; }
.fs-64 { font-size:3.2rem; }
.fs-80 { font-size:4rem; }
.fs-88 { font-size:4.4rem; }

/*
 * line-height
 */
.line10 { line-height: 1.0; }
.line12 { line-height: 1.2; }
.line13 { line-height: 1.3; }
.line14 { line-height:1.4; }
.line16 { line-height:1.6; }
.line17 { line-height:1.7; }
.line18 { line-height:1.8; }
.line19 { line-height:1.9; }
.line20 { line-height:2; }

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

/*
 * color
 */
.white { color:#fff; }
.black {  color:#000; }
.navy { color: #233346; }
.gray { color: #666;}
.light-red { color:#ea5c57; }
.green { color:#0d9851; }
.brown { color: #8a6b4e; }
.pink { color: #ff0848; }
.navy { color: #07325e; }
.blue { color: #027aaf; }

/*----------------------------------------------------------
    Styles for font Color
----------------------------------------------------------*/
body { color:#333333;}
a { color:#d75050; text-decoration:underline;}

/*----------------------------------------------------------
    Styles for General
----------------------------------------------------------*/
* { box-sizing: border-box;}
img { vertical-align: bottom; max-width :100%; width: 100%; }
.img.center,.img-center { display:block; margin:0 auto; }
img.left,.img-left { float: left;}
img.right,.img-right { float: right;}

ul, li { list-style: none;}
p { line-height: 1.6; text-align: left;}
.tar { text-align:right!important;}
.tac { text-align:center!important;}
.tal { text-align: left!important;}
.justify { text-align: justify; text-justify: distribute; }
.table { display: table;}
.cell { display: table-cell;}

/*----------------------------------------------------------
    Styles for layout
----------------------------------------------------------*/
.inner { position: relative; margin:0 auto; padding:0 1rem; }
.fixed { position:fixed; left:0; top:0; z-index:9999;}
#wrapper { position:relative; text-align: center; max-width: 640px; margin: 0 auto; overflow: hidden; }
#header { width:100%;}
#footer { width:100%;}
#container { width: 100%;}
#gnav a { text-decoration: none;}

/*=================================================
    float解除用 clear
=================================================== */
.clear {clear:both}
br.clear {font-size: 1px;line-height: 100%; clear: both;}
div.clear { line-height: 100%;  clear:both;}

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

/*=================================================
    other
=================================================== */
/*
 * float
 */
.left { float:left; }
.right { float:right; }

/*
 * position styles
 */
.relative { position:relative; }
.absolute { position:absolute; }
.front-position { position:relative; z-index:1; }

/*
 * flex box
 */
.flex { display: flex; display: -webkit-flex;  }
.f-wrap { flex-wrap: wrap; -ms-flex-wrap: wrap; -moz-flex-wrap: wrap; -webkit-flex-wrap: wrap; }
.f-between { justify-content: space-between; -webkit-justify-content: space-between; }
.flex-list { display: flex; display: -webkit-flex; flex-wrap: wrap; -ms-flex-wrap: wrap; -moz-flex-wrap: wrap; -webkit-flex-wrap: wrap; justify-content: space-between; -webkit-justify-content: space-between; }
.align-ac { display: inline-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }

/*
 * background
 */
.bg-white { background:#fff; }
.bg-black { background:#000; }
.cover { -webkit-background-size: cover!important; background-size: cover!important;}

/*
 * 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; }


/*=================================================
    Mediaquery
=================================================== */
/*----------------------------------------------------------
    Mediaquery Mobile
----------------------------------------------------------*/
@media (min-width: 640px) and (max-width : 768px) {
	html { font-size: 20px; /*font-size: 125%; /* sets the base font to 20px for easier math */}
}

/*----------------------------------------------------------
    Mediaquary Tablet PC
----------------------------------------------------------*/
@media (min-width: 769px) {
	html { font-size: 20px; /*font-size: 125%; /* sets the base font to 20px for easier math */}
}