@charset "UTF-8";


/* ================================
	Typography
================================ */
/*
html {
	font-size: 62.5%;  1em = 10px
}
body {
}
.page {
	font-size: 14px;
	font-size: 1.4rem;
	font-family: Meiryo, "Lucida Grande","Hiragino Kaku Gothic ProN", sans-serif;
	line-height: 1.5;
	color: #333;
}
small,
figcaption {
	font-size: 80%;
	line-height: 1.3;
}

*/


/* ================================
Typography
================================ */
html { font-size: 3vw; }
@media (min-width:481px){ html { font-size: 2vw; } }
@media (min-width:681px){ html { font-size: 1.6vw; } }
@media (min-width:768px){ html { font-size: 1.2vw; } }
@media (min-width:922px){ html { font-size: 62.5%; /* 1em = 10px */ } }

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.page {
    font-size: 14px;
    font-size: 1.4rem;
    font-family: "Noto Sans Japanese", "Lucida Grande", "Hiragino Kaku Gothic ProN", sans-serif;
    line-height: 1.6;
    color: #333333;
}
small{
    font-size: 80%;
    line-height: 1.3;
}
em{ font-style: normal;}



/* ================================
	Link
================================ */
a,a:link { text-decoration: none; }
a:visited {
}
a:hover {
}
a:active {
}
a:focus {
}



/* ================================
	Img
================================ */
img { vertical-align: bottom; }



/* ================================
	List
================================ */
ul,ol { list-style-type: none; }



/* ================================
	Utility
================================ */

/* clerfix -micro clearfix
-------------------------------- */
.cf:after {
	content: "";
	display: block;
	clear: both;
}


/*	img レスポンシブ
---------------------- */
.liquid img,
img.liquid {
    max-width: 100%;
    height: auto;
}
img.full {
    width: 100%;
    height: auto;
}


/* 画像回り込み
-------------------------------- */
.imgL {
	float: left;
	margin: 0 1em 1em 0;
}
.imgR {
	float: right;
	margin: 0 0 1em 1em;
}

/* 回り込み解除 */
.imgTXT {	overflow: hidden;}


/* テキスト行位置
-------------------------------- */
.tC {	text-align: center;}
.tR {	text-align: right;}


/* float
---------------------- */
.sm-flR{float: right !important;}
.sm-flL{float: left !important;}
@media ( min-width : 481px ) {
    .md-flR{float: right !important;}
    .md-flL{float: left !important;}
}
@media ( min-width : 786px ) {
    .lg-flR{float: right !important;}
    .lg-flL{float: left !important;}
}


/*	非表示
---------------------- */
@media ( min-width : 768px ) {	.is-spOnly {   display: none !important;}}
@media ( max-width : 767px ) {	.is-pcOnly {   display: none !important;}}

/* 非表示 チェック用 */
.hide {	display: none !important;}



/*	type serif
---------------------- */
.serif{
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}



/* ================================
	Utility
	margin,padding,funt-size調整用
	※長期運用時は
	あると便利？
	テスト的に採用

	memo:
	レスポンシブの場合、
	かえって邪魔かも
================================ */

/*	margin
---------------------- */
.mt-0  {    margin-top:    0;}
.mt-10 {    margin-top: 10px;}
.mt-20 {    margin-top: 20px;}
.mt-30 {    margin-top: 30px;}
.mt-40 {    margin-top: 40px;}
.mt-50 {    margin-top: 50px;}
.mt-60 {    margin-top: 60px;}
.mb-0  {    margin-bottom:    0;}
.mb-10 {    margin-bottom: 10px;}
.mb-20 {    margin-bottom: 20px;}
.mb-30 {    margin-bottom: 30px;}
.mb-40 {    margin-bottom: 40px;}
.mb-50 {    margin-bottom: 50px;}
.mb-60 {    margin-bottom: 60px;}


/*	padding
---------------------- */
.pt-0  {    padding-top:    0 !important; }
.pt-10 {    padding-top: 10px;}
.pt-20 {    padding-top: 20px;}
.pt-30 {    padding-top: 30px;}
.pt-40 {    padding-top: 40px;}
.pt-50 {    padding-top: 50px;}
.pt-60 {    padding-top: 60px;}
.pb-0  {    padding-bottom:    0;}
.pb-10 {    padding-bottom: 10px;}
.pb-20 {    padding-bottom: 20px;}
.pb-30 {    padding-bottom: 30px;}
.pb-40 {    padding-bottom: 40px;}
.pb-50 {    padding-bottom: 50px;}
.pb-60 {    padding-bottom: 60px;}


/*	font-size
---------------------- */
.fs-s  { font-size:  80%;}
.fs-l  { font-size: 120%;}
.fs-xl { font-size: 140%;}
.fs-10 {    font-size: 10px; font-size: 1.0rem;}
.fs-11 {    font-size: 11px; font-size: 1.1rem;}
.fs-12 {    font-size: 12px; font-size: 1.2rem;}