@charset "UTF-8";
/*
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 {
 margin: 0;
  word-break: normal;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: none;
}
* {
  box-sizing: border-box;
}


article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

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

del {
    text-decoration: line-through;
}

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

input, select {
    vertical-align:middle;
}
img {
	max-width: 100%;
	height: auto;
	border: 0;
	vertical-align: middle;
}

/*========================================
*	fonts.css
*---------------------------------------*/
:root {
	font-size: 62.5%;
	/*ベースカラー*/
	--white-color:#fff;

	/*イメージカラー*/
	--brown-color:#a79c8e;
	--green-color:#8FBC94;
	--gray-color:#ccc;

    /*テキスト*/
	--text-color:#333333;
	--text-link-color:#808080;
	--text-error-color:#912d2b;

	/*ボタン*/
	--btn-color:#a7a7a2;
	--btn-blue-color:#CAA4E1;
	--btn-red-color:#f9a11b;

	/*背景色*/
	--border-color:#ccc;
	--box-color:#fff;
	--bg-color:#E6F2E7;

	/*form*/
	--form-input-required-color:#fffeee;

	/*ページ幅*/
	--widthMax : 700px;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Roboto, sans-serif;
    font-size:1.7rem;
    line-height:1.6;
    letter-spacing: 0.04em;
    color: var(--text-color);
    background: var(--bg-color);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
a {
	color: var(--text-link-color);
}
/*========================================
*	header
*---------------------------------------*/
#header-inner {
	width:100%;
	max-width:var(--widthMax);
	padding: 10px 20px 0;
	margin:0 auto;
}
#header-inner .logo {
  width:30px;
}
#header-inner .logo a{
  display:block;
}
/*========================================
*	footer
*---------------------------------------*/
.footer {
	margin-top:40px;
}
#footer-inner {
	width:100%;
	max-width:var(--widthMax);
	padding: 10px 20px;
	margin:0 auto;
	text-align:center;
}
.copyright {
	font-size:1.4rem;
	margin-top:10px;
}
/*========================================
*	セクション
*---------------------------------------*/
.section-inner {
	width:100%;
	max-width:var(--widthMax);
	padding:0 10px;
	margin:0 auto;
}
/*========================================
*	レイアウト
*---------------------------------------*/
.box {
  padding: 30px;
	border-radius: 10px;
	background: var(--box-color);
  box-shadow: 0 15px 35px rgb(50 50 93 / 10%), 0 5px 15px rgb(0 0 0 / 7%);
}
.box img{
	max-width: 120px;
}
.main-content{
	width: 100%;
	max-width: 343px;
	margin: 0 auto;
}
/*========================================
*	パーツ
*---------------------------------------*/
.mt40{
	margin-top: 40px!important;
}
.mt20{
	margin-top: 20px!important;
}
.mr10{
	margin-right: 10px!important;
}
.ttl{
	font-size: 2.0rem;
	font-weight: bold;
	text-align: center;
}
.center{
	text-align: center;
}
.small{
	font-size: 1.4rem;
	color:#808080;
}
/*========================================
*	パスワードボックス
*---------------------------------------*/
.pwd-box{
	position: relative;
}
.pwd-box button {
    background: 0 0;
    border: 1px solid transparent;
    width: 2.5rem;
    height: 2.5rem;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 5px 9px;
    position: absolute;
    right: 0;
    top: 0;
}
.pwd-box svg {
    color: var(--btn-blue-color);
}
/*========================================
*	エラーボックス
*---------------------------------------*/
.error-box {
	padding: 10px 15px;
  background-color: #fff6f6;
	box-shadow: 0 0 0 1px #e0b4b4 inset, 0 0 0 0 transparent;
}
.error {
	color:var(--text-error-color);
}
/*========================================
*	ボタン
*---------------------------------------*/
.btn {
  font-size:1.7rem;
	font-weight: bold;
  padding:5px 18px;
  border-radius: 20px;
	color:var(--white-color);
	background: var(--btn-color);
	border: none;
	width: 100%;
	height:44px;
	cursor: pointer;
}
.btn.blue {
  background:var(--btn-blue-color);
}
.btn.red {
  background:var(--btn-red-color);
}
a.btn{
	text-decoration: none;
}
/*========================================
*	フォーム
*---------------------------------------*/
/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
  -webkit-box-sizing: content-box;
	box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  cursor: pointer;
	width: 100%;
	height:44px;
	font-family: inherit;
}
input[type="email"],
input[type="text"],
input[type="password"]{
	font-size:1.7rem;
	-webkit-appearance: none;
	appearance: none;
	border-radius: 3px;
	border: 1px solid var(--border-color);
	padding-left: 7px;
	width: 100%;
	height:44px;
	font-family: inherit;
}
input:required {
  background: var(--form-input-required-color);
}
select{
	font-size:1.7rem;
	border-radius: 3px;
	border: 1px solid var(--border-color);
	padding-left: 7px;
	width: 100%;
	height:44px;
}
textarea {
	border: 1px solid var(--border-color);
	font-size:1.8rem;
	width:100%;
	height:55px;
	overflow: scroll;
	padding:5px;
	font-family: inherit;
}
textarea::placeholder {
	color:var(--gray-color);
}
/* checkbox */
input[type="checkbox"] {
	opacity: 0;
}
.checkbox{
	position: relative;
}
.checkbox label{
  cursor: pointer;
	font-size: 1.5rem;
	position: relative;
	display: block;
	padding-left: 40px;
}
.checkbox label:before{
	position: absolute;
	top: 0;
  left: 0;
  width: 17px;
  height: 17px;
  content: '';
	border: 3px solid var(--btn-red-color);
}
.checkbox input:checked~label:after {
	position: absolute;
	font-family: "Font Awesome 5 Free";
	content: '\f00c';
	font-weight: 900;
	font-size: 1.6rem;
  color: var(--btn-red-color);
	top: 0;
	left: 4px;
}
/* ここまでcheckbox */
input::placeholder {
	font-size:1.7rem;
	color:var(--gray-color);
}