@charset "UTF-8";

*{
	word-wrap: break-word;
	overflow-wrap: break-word;
}

html{
	font-size: 62.5%; /*font-size: 10px*/
}

body{
	font-size: 1.6rem; /*font-size: 16px*/
/*	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;*/
/*	font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', "游ゴシック", 'Meiryo', 'メイリオ', 'MS PGothic', 'ＭＳ Ｐゴシック', Helvetica, Arial, sans-serif;*/
/*	font-weight: 500;*/
	text-align: justify;
	-webkit-text-size-adjust: 100%;
	line-height: 1.5;
}

/*見出し*/
h1, h2, h3, h4, h5, h6{
	font-weight: normal;
}

/*テーブル*/
table{
	border-collapse: collapse;
	border-spacing: 0;
}

/*リスト*/
ol, ul{list-style: none;}

/*リンク*/
a{
	outline: none;
	text-decoration: none;
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color:rgba(0,0,0,.15);
}

img{
	width: 100%;
	max-width: 100%;
	height: auto;
	border-style: none;
	vertical-align: bottom;
}

.container{
	width: 100%;
	padding: 0 8px;
	margin-right:auto;
	margin-left:auto;
}

.row{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-right: -8px;
	margin-left: -8px;
}

[class^="col-"]{
	padding: 8px;
}

.col-1{
	-ms-flex: 0 0 8.333333%;
	flex: 0 0 8.333333%;
	max-width: 8.333333%;
}

.col-2{
	-ms-flex: 0 0 16.666667%;
	flex: 0 0 16.666667%;
	max-width: 16.666667%;
}

.col-3{
	-ms-flex: 0 0 25%;
	flex: 0 0 25%;
	max-width: 25%;
}

.col-4{
	-ms-flex: 0 0 33.333333%;
	flex: 0 0 33.333333%;
	max-width: 33.333333%;
}

.col-5{
	-ms-flex: 0 0 41.666667%;
	flex: 0 0 41.666667%;
	max-width: 41.666667%;
}

.col-6{
	-ms-flex: 0 0 50%;
	flex: 0 0 50%;
	max-width: 50%;
}

.col-7{
	-ms-flex: 0 0 58.333333%;
	flex: 0 0 58.333333%;
	max-width: 58.333333%;
}

.col-8{
	-ms-flex: 0 0 66.666667%;
	flex: 0 0 66.666667%;
	max-width: 66.666667%;
}

.col-9{
	-ms-flex: 0 0 75%;
	flex: 0 0 75%;
	max-width: 75%;
}

.col-10{
	-ms-flex: 0 0 83.333333%;
	flex: 0 0 83.333333%;
	max-width: 83.333333%;
}

.col-11{
	-ms-flex: 0 0 91.666667%;
	flex: 0 0 91.666667%;
	max-width: 91.666667%;
}

.col-12{
	-ms-flex: 0 0 100%;
	flex: 0 0 100%;
	max-width: 100%;
}

/*-----------------------------------------------
フレックスボックス
-----------------------------------------------*/
/*左端配置（初期値）*/
.flexWrap{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}

/*右端配置*/
.flexWrap-end{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
}

/*中央配置*/
.flexWrap-center{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

/*アイテム均等配置 最初と最後を両端寄せ*/
.flexWrap-between{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

/*アイテム均等配置 アイテムの両側に半分の大きさの間隔を置く*/
.flexWrap-around{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

.flexWrap-evenly{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
}

/*-----------------------------------------------
フレックスボックス 折り返しナシ
-----------------------------------------------*/
/*左端配置（初期値）*/
.flexNoWrap{
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
}

/*右端配置*/
.flexNoWrap-end{
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-end;
}

/*中央配置*/
.flexNoWrap-center{
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
}

/*アイテム均等配置 最初と最後を両端寄せ*/
.flexNoWrap-between{
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
}

/*アイテム均等配置 最初と最後の両端にも間隔空ける*/
.flexNoWrap-around{
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-around;
}

.flexNoWrap-evenly{
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-evenly;
}

/*-----------------------------------------------
フレックスボックスの子要素
-----------------------------------------------*/
/*子要素の垂直方向の位置(rowの場合、vertical-align的な動き、columnの場合、text-align的な動き)*/
.alignItems-center{
	align-items: center;
}

.alignItems-end{
	align-items: flex-end;
}

/*縦並び*/
.column{
	flex-direction: column;
}

/*-----------------------------------------------
マージン
-----------------------------------------------*/
.m-0a{margin: 0 auto;}

.m-8a{margin: 8px auto;}

.m-16a{margin: 16px auto;}

.m-24a{margin: 24px auto;}

.m-32a{margin: 32px auto;}

.m-t8{margin-top: 8px;}

.m-t16{margin-top: 16px;}

.m-t24{margin-top: 24px;}

.m-t32{margin-top: 32px;}

.m-t48{margin-top: 48px;}

.m-b8{margin-bottom: 8px;}

.m-b16{margin-bottom: 16px;}

.m-b24{margin-bottom: 24px;}

.m-b32{margin-bottom: 32px;}

.m-b48{margin-bottom: 48px;}

/*-----------------------------------------------
パディング
-----------------------------------------------*/
.p-8{padding: 8px;}

.p-16{padding: 16px;}

.p-24{padding: 24px;}

.p-tb8{padding: 8px 0;}

.p-tb16{padding: 16px 0;}

.p-tb24{padding: 24px 0;}

.p-lr8{padding: 0 8px;}

.p-lr16{padding: 0 16px;}

.p-lr24{padding: 0 24px;}

/*-----------------------------------------------
リスト
-----------------------------------------------*/
.list_item{
	padding: .5em;
	border-bottom:1px solid #e5e5e5;
}

/*-----------------------------------------------
矢印付きリンク
-----------------------------------------------*/
.link-leftArrow,.link-rightArrow{
	display: block;
	position: relative;
}

.link-leftArrow{
	padding-left: 24px;
}

.link-leftArrow:after,.link-rightArrow:after{
	content: "";
	display: block;
	position: absolute;
	top: calc(50% - 4px);
	width: 8px;
	height: 8px;
	border-top: 1px solid #7f8499;
	border-right: 1px solid #7f8499;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.link-leftArrow:after{
	left: 0px;
}

.link-rightArrow:after{
	right: 12px;
}

/*-----------------------------------------------
テキストリンク
-----------------------------------------------*/
.textLink{
	text-decoration: underline;
}

/*-----------------------------------------------
ボタン
-----------------------------------------------*/
.btn{
	display: block;
	width: 60%;
	margin: 32px auto 16px;
	padding: 1em .5em;
	text-align: center;
	font-weight: bold;
	border-radius: 4px;
}

#scrollToTop{
	position: fixed;
	right: 8px;
	bottom: 120px;
	font-size: 4rem;
	cursor: pointer;
}

/*---------------------------------------------------
フォーム入力関連
---------------------------------------------------*/
/*input系*/
input::placeholder,
textarea::placeholder{
	color: #b1b1b1;
}

/* IE */
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
	color: #b1b1b1;
}

button, input, select, textarea {
	font-family: inherit;
	font-size: 100%;
}

input[type="text"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="email"],
input[type="password"],
select,
textarea{
	display: inline-block;
	width: 100%;
	padding: .5em;
	font-size: 1.6rem;
	background: #fafafa;
	border: 1px solid #ddd;
	border-radius: 3px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/*ie用セレクト右矢印非表示*/
select::-ms-expand {
	display: none;
}

select{
	cursor: pointer;
}

/* サブミット&ボタン */
input[type="submit"],
input[type="button"],
button{
	border: none;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	outline:0;
}

/*-----------------------------------------------
入力フォーム　ベース
-----------------------------------------------*/
.formBox{
	padding: 0 24px
}

.formBox_item{
	padding: 8px 0;
}

/* テキストエリア */
.formBox_item textarea{
	height: 128px;
	overflow-y: scroll;
}

/*ラジオ・チェックボックス・フィアル 不可視化*/
.formBox_item input[type="radio"],
.formBox_item input[type="checkbox"],
.formBox_item input[type="file"]{
	display: none;
}

/*ラジオボタンの代替要素*/
.altRadioBtn{
	padding: 8px 0;
	font-size: 1.5rem;
	text-align: center;
	background: #fafafa;
	border: 1px solid #ddd;
	border-radius: 3px;
	cursor: pointer;
}

/*性別ボタン*/
.altRadioBtn.male,.altRadioBtn.female{
	width: 48%;
}

/*チェックボックスの代替要素*/
.altCheckBox{
	display: inline-block;
	width: 32%;
    margin: 16px auto;
    padding: 0 0 0 32px;
	font-size: 18px;
	font-weight: bold;
    color: #7b7b7b;
    vertical-align: middle;
    cursor: pointer;
    -webkit-transition: background-color 0.2s linear;
    transition: background-color 0.2s linear;
	user-select: none;
    position: relative;
}

/*チェックボックス枠*/
.altCheckBox:after{
	position: absolute;
	top: 50%;
	left: 0;
	display: block;
	content: '';
	width: 16px;
	height: 16px;
	margin-top: -10px;
	border: 2px solid #7b7b7b;
	border-radius: 4px;
}

/*チェックマーク*/
.altCheckBox:before{
	position: absolute;
	top: 50%;
	left: 6px;
	display: block;
	content: '';
	margin-top: -7px;
	width: 5px;
	height: 9px;
	border-right: 3px solid #00b98e;
	border-bottom: 3px solid #00b98e;
	opacity: 0;
	-webkit-transition: opacity 0.2s linear;
	transition: opacity 0.2s linear;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

/*女性選択色*/
input[type="radio"]#female:checked + .altRadioBtn{
	color:#fff;
	background-color: #ff4f89;
}

/*男性選択色*/
input[type="radio"]#male:checked + .altRadioBtn{
	color:#fff;
	background-color: #4a80ff;
}

/*両方選択色*/
input[type="radio"]#both:checked + .altRadioBtn{
	color:#fff;
	background-color: #ff6e4a;
}

input[type="checkbox"]:checked + .altCheckBox:before{
	opacity: 1;
	border-right: 3px solid #2548f1;
	border-bottom: 3px solid #2548f1;
}

input[type="checkbox"]:checked + .altCheckBox:after{
	border: 2px solid #2548f1;
}

input[type="checkbox"]:checked + .altCheckBox{
	color: #2548f1;
	font-weight: bold;
}

.fileUploadArea{
	padding: 16px;
	border: 1px solid #e5e5e5;
}

.preview{
	width: 100%;
	height: 240px;
	border: 1px solid #e5e5e5;
	border-radius: 5px;
	background-image: url(../img/img_fileUpload.png);
	background-size: cover;
	background-position: center;
	user-select: none;
	-webkit-user-select: none;
	position: relative;
}

.btn-upload{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
}

.fileUploadArea .btn.delete{
	width: 60%;
	margin: 8px 0 8px 40%;
	padding: 4px;
}

/*-----------------------------------------------
その他
-----------------------------------------------*/
/*AOS利用時*/
.forAos{
	overflow: hidden;
}

/*-----------------------------------------------
テキスト関連
-----------------------------------------------*/
.textHide{
	text-indent: 150%;
	white-space: nowrap;
	overflow: hidden;
}

.textCenter{
	text-align: center;
}

.textLeft{
	text-align: left;
}

.textRight{
	text-align: right;
}

.textBold{
	font-weight: bold;
}

.fontSize-10{
	font-size: 1rem;
}

.fontSize-11{
	font-size: 1.1rem;
}

.fontSize-12{
	font-size: 1.2rem;
}

.fontSize-13{
	font-size: 1.3rem;
}

.fontSize-14{
	font-size: 1.4rem;
}

.fontSize-15{
	font-size: 1.5rem;
}

.fontSize-17{
	font-size: 1.7rem;
}

.fontSize-18{
	font-size: 1.8rem;
}

.fontSize-19{
	font-size: 1.9rem;
}

.fontSize-20{
	font-size: 2.0rem;
}

.fontSize-21{
	font-size: 2.1rem;
}

.fontSize-22{
	font-size: 2.2rem;
}

.fontSize-23{
	font-size: 2.3rem;
}

.fontSize-24{
	font-size: 2.4rem;
}

/*コピーライト*/
.copyright{
	width: 100%;
	font-size: 1.2rem;
	text-align: center;
	padding: 1em 0;
}

/*注釈系*/
.memo{
	margin: 8px auto;
	padding: .4em;
	font-size: 1.2rem;
	font-weight: normal;
	background: #fafafa;
	border: 1px solid #e5e5e5;
	border-radius: 4px;
}

.textCaution{
	color:#f00;
}