@charset "utf-8";
/* このファイルはUTF-8のBOMなし(UTF-8N)で保存しています */

/**
 * CSS Information
 * ===============================================================
 *
 * Site URL:  http://
 * File name: base.css
 * Summary:   ベーススタイル
 * Author:    CrEa Inc.
 *
 * -----------------------------------
 *
 * TOC:
 *     =1    html & body
 *     =2    box model styles
 *       =2-1     margin
 *       =2-2     padding
 *       =2-3     box-sizing
 *     =3    text styles
 *     =4    img/video styles
 *     =5    link styles
 *     =6    list styles
 *     =7    heading styles
 *     =8    table styles
 *     =9    other selectors
 *     =10   general styles
 *       =10-1    display
 *       =10-2    position
 *       =10-3    float/align
 *       =10-4    form
 *       =10-5    clearfix
 *
 * ===============================================================
*/

@import url('https://fonts.googleapis.com/earlyaccess/notosansjapanese.css');

/** =1
 * ========================================
 * html & body
 * ========================================
 */

html {
	height: 100%;
	font-size: 62.5%;  /* 基準10px=1em */
}

body {
	height: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	color: #333333;
	font-size: 14px;  /* CSS3未対応ブラウザ対策 */
	font-size: 1.4rem;  /* CSS3単位 実質14px */
	line-height: 1.8;
	font-family: "Noto Sans Japanese", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;  /* その他 font-family については、 =3 text styles セクションでクラス名で定義 */
	-webkit-tap-highlight-color: transparent;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 767px) {
		html {
			/*font-size: 50%; */  /* 基準8px=1em */
			font-size: 53.125%;  /* 基準8.5px=1em */
		}
	}

	/* -- >>> styles for medium & wide layout ----- */
	@media screen and (min-width: 768px) {
	}

	/* -- >>> styles for medium layout ----- */
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}

	/* -- >>> styles for wide layout ----- */
	@media screen and (min-width: 1025px) {
	}



/** =2
 * ========================================
 * box model styles
 * ========================================
 */

	/** =2-1
	 * margin
	 * ----------------------------------
	 */

	.mb5 { margin-bottom: 5px; }
	.mb10 { margin-bottom: 10px; }
	.mb15 { margin-bottom: 15px; }
	.mb20 { margin-bottom: 20px; }
	.mb30 { margin-bottom: 30px; }
	.mb40 { margin-bottom: 40px; }
	.mb50 { margin-bottom: 50px; }
	.mb60 { margin-bottom: 60px; }
	.mb70 { margin-bottom: 70px; }
	.mb80 { margin-bottom: 80px; }
	.mb100 { margin-bottom: 100px; }
	.mb120 { margin-bottom: 120px; }
	.mb150 { margin-bottom: 150px; }

	.mb05em { margin-bottom: .5em; }
	.mb10em { margin-bottom: 1.0em; }
	.mb15em { margin-bottom: 1.5em; }
	.mb20em { margin-bottom: 2.0em; }


	/** =2-2
	 * padding
	 * ----------------------------------
	 */

	.pt5 { padding-top: 5px; }
	.pt10 { padding-top: 10px; }
	.pt15 { padding-top: 15px; }
	.pt20 { padding-top: 20px; }
	.pt30 { padding-top: 30px; }
	.pt40 { padding-top: 40px; }
	.pt50 { padding-top: 50px; }
	.pt60 { padding-top: 60px; }
	.pt70 { padding-top: 70px; }
	.pt80 { padding-top: 80px; }
	.pt100 { padding-top: 100px; }
	.pt120 { padding-top: 120px; }
	.pt150 { padding-top: 150px; }

	.pt05em { padding-top: .5em; }
	.pt10em { padding-top: 1.0em; }
	.pt15em { padding-top: 1.5em; }
	.pt20em { padding-top: 2.0em; }


	/** =2-3
	 * box-sizing
	 * ----------------------------------
	 */

	.boderBox {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
	}



/** =3
 * ========================================
 * text styles
 * ========================================
 */

strong,
.strong,
.fwBold {
	font-weight: bold;
}
.fwNormal {
	font-weight: normal;
}

.sans-serif {
	font-family: "Noto Sans Japanese", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "游ゴシック", YuGothic, "メイリオ", Meiryo, Arial, sans-serif;
}
.serif {
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HG明朝E", "Times New Roman", serif;
}

.fcRed { color: #d95555; }
.fcPink { color: #ff6a62; }
.fcGreen { color: #59a529; }
.fcBlue { color: #145096; }
.fcPaleBlue { color: #a5d8e4; }
.fcPaleBlueDeep { color: #7bc7d9; }
.fcWhite { color: #ffffff; }
.fcBlack { color: #000000; }
.fcDarkGray { color: #333; }
.fcGray { color: #555; }
.fcLightGray { color: #777; }

.fs10 { font-size: 10px; font-size: 1.0rem; }
.fs11 { font-size: 11px; font-size: 1.1rem; }
.fs12 { font-size: 12px; font-size: 1.2rem; }
.fs13 { font-size: 13px; font-size: 1.3rem; }
.fs14 { font-size: 14px; font-size: 1.4rem; }
.fs15 { font-size: 15px; font-size: 1.5rem; }
.fs16 { font-size: 16px; font-size: 1.6rem; }
.fs18 { font-size: 18px; font-size: 1.8rem; }
.fs20 { font-size: 20px; font-size: 2.0rem; }
.fs22 { font-size: 22px; font-size: 2.2rem; }
.fs24 { font-size: 24px; font-size: 2.4rem; }
.fs26 { font-size: 26px; font-size: 2.6rem; }
.fs28 { font-size: 28px; font-size: 2.8rem; }
.fs30 { font-size: 30px; font-size: 3.0rem; }
.fs40 { font-size: 40px; font-size: 4.0rem; }
.fs60 { font-size: 60px; font-size: 6.0rem; }

.fs50per { font-size: 50%; }
.fs60per { font-size: 60%; }
.fs70per { font-size: 70%; }
.fs80per { font-size: 80%; }
.fs90per { font-size: 90%; }
.fs110per { font-size: 110%; }
.fs120per { font-size: 120%; }
.fs130per { font-size: 130%; }
.fs140per { font-size: 140%; }
.fs150per { font-size: 150%; }

.lh10 { line-height: 1.0; }
.lh12 { line-height: 1.2; }
.lh14 { line-height: 1.4; }
.lh16 { line-height: 1.6; }
.lh18 { line-height: 1.8; }
.lh20 { line-height: 2.0; }

.ls05 { letter-spacing: .05em; }
.ls10 { letter-spacing: .1em; }
.ls15 { letter-spacing: .15em; }
.ls20 { letter-spacing: .2em; }
.ls-05 { letter-spacing: -.05em; }
.ls-10 { letter-spacing: -.1em; }
.ls-20 { letter-spacing: -.2em; }


[class*="kerning"] {
	display: inline-block;
	color: inherit;
	font-weight: inherit;
}
.kerningLeft-05 { margin-left: -.5em; }
.kerningRight-05 { margin-right: -.5em; }


sup, sub {
	display: inline-block;
	-webkit-transform: scale(.75);
	-moz-transform: scale(.75);
	-o-transform: scale(.75);
	-ms-transform: scale(.75);
	transform: scale(.75);
}
.no-csstransforms sup,
.no-csstransforms sub {
	font-size: 50%;
}


/** =4
 * ========================================
 * img/video styles
 * ========================================
 */

img,
video {
	height: auto;
	max-width: 100%;
	vertical-align: bottom;
}

img {
	/*image-rendering: -webkit-optimize-contrast;*/
	/*image-rendering: -moz-crisp-edges;*/
	/*image-rendering: -o-crisp-edges;*/
	image-rendering: auto;
	-ms-interpolation-mode: bicubic;
}

.imageReplace {
	/* スコットケラムメソッド */
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}



/** =5
 * ========================================
 * link styles
 * ========================================
 */

a, a:link, a:visited, a:hover, a:active {
	text-decoration: none;
	outline: none;
	font-weight: inherit;
}
a {
	color: #7bc7d9;
}
.no-touch a:hover {
	color: #a5d8e4;
}

a.transition {
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.no-touch a.alpha:hover {
	filter: alpha(opacity=40);
	-moz-opacity: 0.40;
	opacity: 0.40;
}
.no-touch a.fcBlack:hover,
.no-touch a.fcDarkGray:hover,
.no-touch a.fcGray:hover {
	color: #a5d8e4;
}
a.underline {
	text-decoration: underline;
}



/** =6
 * ========================================
 * list styles
 * ========================================
 */

ul > li {
	list-style-type: none;
}
ol > li {
	list-style-type: decimal;
}
ul.disc,
ol {
	padding-left: 1.2em;
}
ul.disc > li {
	list-style-type: disc;
}

ol.listDecimal,
ol.listCharacter {
	padding-left: 2.5em;
}
ol.listDecimal > li,
ol.listCharacter > li {
	list-style-type: none;
}
ol.listDecimal > li::before,
ol.listCharacter > li::before {
	display: inline-block;
	opacity: .5;
	width: 2.0em;
	margin-right: .5em;
	margin-left: -2.5em;
	text-align: right;
}

ol.listDecimal > li {
	counter-increment: listDecimal;
}
ol.listDecimal > li::before {
	content: counter(listDecimal) ' )';
}

ol.listCharacter > li {}
ol.listCharacter > li::before {
	content: attr(data-list-marker) ' )';
}


/** =7
 * ========================================
 * heading styles
 * ========================================
 */

h1, h2, h3, h4, h5, h6 {
	font-weight: 400;
}



/** =8
 * ========================================
 * table styles
 * ========================================
 */

table {
	border-collapse: collapse;
	width: 100%;
}

th {
	font-weight: bold;
}



/** =9
 * ========================================
 * other selectors
 * ========================================
 */

hr {
	clear: both;
}
hr.dot {
	border-top: 1px #999 dotted;
}



/** =10
 * ========================================
 * general styles
 * ========================================
 */

	/** =10-1
	 * display
	 * ----------------------------------
	 */

	.displayInlineBlock {
		display: inline-block;
	}
	.displayInline {
		display: inline;
	}
	.displayBlock {
		display: block;
	}
	.displayNone {
		display: none;
	}

		/* -- >>> styles for narrow layout ----- */
		@media screen and (max-width: 767px) {
			.displayPc {
				display: none;
			}
			.displaySp {
				display: inherit;
			}
		}

		/* -- >>> styles for medium & wide layout ----- */
		@media screen and (min-width: 768px) {
			.displayPc {
				display: inherit;
			}
			.displaySp {
				display: none;
			}
		}


	/** =10-2
	 * position
	 * ----------------------------------
	 */

	.posRelative {
		position: relative;
	}
	.posAbsolute {
		position: absolute;
	}
	.posFixed {
		position: fixed;
	}
	.posStatic {
		position: static;
	}


	/** =10-3
	 * float/align
	 * ----------------------------------
	 */

	.floatLeft {
		float: left;
	}
	.floatRight {
		float: right;
	}

	.clearLeft {
		clear: left;
	}
	.clearRight {
		clear: right;
	}
	.clearBoth {
		clear: both;
	}

	.txtLeft {
		text-align: left;
	}
	.txtCenter {
		text-align: center;
	}
	.txtRight {
		text-align: right;
	}

	.verticalTop {
		vertical-align: top;
	}
	.verticalMiddle {
		vertical-align: middle;
	}
	.verticalBottom {
		vertical-align: bottom;
	}


	/** =10-4
	 * form
	 * ----------------------------------
	 */

	.btn, .btn:link, .btn:visited, .btn:hover, .btn:active,
	input[type="submit"], input[type="reset"], input[type="button"], button{
		display: inline-block;
		padding: .5em 1.0em;
		border: 1px solid #ddd;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
		box-sizing: border-box;
		background: #fff;
		color: #000;
		text-align: center;
		cursor: pointer;
		outline: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		-webkit-transition: all 0.3s ease;
		-moz-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
		-webkit-transition-property: border, background-color, color;
		-moz-transition-property: border, background-color, color;
		-o-transition-property: border, background-color, color;
		transition-property: border, background-color, color;
	}
	.no-touch .btn:hover {
		border-color: #a5d8e4;
		color: #a5d8e4;
	}

	.btn.white {
		border: none;
		background-color: #fff;
	}
	.btn.blue {
		border: none;
		background-color: #a5d8e4;
		color: #fff;
	}
	.no-touch .btn.blue:hover {
		background-color: #cce6ec;
	}

	.btn.round {
		padding-right: 2.0em;
		padding-left: 2.0em;
		-webkit-border-radius: 9999px;
		-moz-border-radius: 9999px;
		border-radius: 9999px;
	}

	.btn.small {
		padding-top: .25em;
		padding-bottom: .25em;
		font-size: 12px;
		font-size: 1.2rem;
	}
	.btn.large {
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		font-size: 18px;
		font-size: 1.8rem;
	}

	.btn.hasArrow {
		position: relative;
		min-width: 250px;
		padding-top: .8em;
		padding-right: 2.0em;
		padding-bottom: .8em;
		text-align: left;
	}
	.btn.round.hasArrow {
		padding-right: 3.0em;
	}
	.btn.hasArrow::after {
		display: block;
		position: absolute;
		top: 50%;
		right: 1.5em;
		width: 6px;
		height: 6px;
		margin-top: -3px;
		-webkit-transform: rotate(225deg);
		-moz-transform: rotate(225deg);
		-o-transform: rotate(225deg);
		-ms-transform: rotate(225deg);
		transform: rotate(225deg);
		border-left: 1px solid #555;
		border-bottom: 1px solid #555;
		-webkit-transition: border 0.3s ease;
		-moz-transition: border 0.3s ease;
		-o-transition: border 0.3s ease;
		transition: border 0.3s ease;
		content: "";
	}
	.btn.round.hasArrow::after {
		right: 2.0em;
	}
	.no-touch .btn.hasArrow:hover::after {
		border-left-color: #a5d8e4;
		border-bottom-color: #a5d8e4;
	}

		/* -- >>> styles for narrow layout ----- */
		@media screen and (max-width: 767px) {
		}

		/* -- >>> styles for medium & wide layout ----- */
		@media screen and (min-width: 768px) {
		}


	input[type="text"],
	input[type="password"],
	input[type="email"],
	input[type="tel"],
	input[type="url"],
	input[type="search"],
	input.txt,
	textarea {
		display: inline-block;
		width: 100%;
		padding: .5em 1.0em;
		background: #fff;
		border: 1px solid #ddd;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
		color: #000;
		outline: none;
		box-sizing: border-box;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
	}
	input[type="text"].large,
	input[type="password"].large,
	input[type="email"].large,
	input[type="tel"].large,
	input[type="url"].large,
	input[type="search"].large,
	input.txt.large,
	textarea.large {
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
	}

	input::-webkit-input-placeholder {
		color: #ccc;
	}
	input:-moz-placeholder {
		color: #ccc;
		opacity: 1;
	}
	input::-moz-placeholder {
		color: #ccc;
		opacity: 1;
	}
	input:-ms-input-placeholder {
		color: #ccc;
	}
	input:placeholder-shown {
		color: #ccc;
	}
	input:-webkit-autofill {
		box-shadow: 0 0 0 1000px #fff inset; /* for Chrome オートコンプリート後の背景色 */
	}

		/* -- >>> styles for narrow layout ----- */
		@media screen and (max-width: 767px) {
			input[type="text"],
			input[type="password"],
			input[type="email"],
			input[type="tel"],
			input[type="url"],
			input[type="search"],
			input.txt,
			textarea {
				font-size: 16px;
			}
		}

		/* -- >>> styles for medium & wide layout ----- */
		@media screen and (min-width: 768px) {
			input[type="text"].large,
			input[type="password"].large,
			input[type="email"].large,
			input[type="tel"].large,
			input[type="url"].large,
			input[type="search"].large,
			input.txt.large,
			textarea.large {
				font-weight: 300;
				font-size: 1.8rem;
				font-size: 18px;
			}
		}



	/** =10-5
	 * clearfix
	 * ----------------------------------
	 */

	/* For modern browsers */
	.clearfix:before,
	.clearfix:after,
	.cf:before,
	.cf:after {
		display: table;
		content: "";
	}

	.clearfix:after,
	.cf:after {
		clear: both;
	}

	/* For IE 6/7 (trigger hasLayout) */
	.clearfix,
	.cf {
		zoom: 1;
	}