@charset "UTF-8";

/* 基本のCSS内容はココに入ってます */
html {
    scroll-behavior: smooth;
}
body{
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", Arial, sans-serif !important;
	margin: 0;
	background-image: url(../img/back.jpg);
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}
.all{
	background-color: #fffae0;
}
.wrapper{
	margin: 0 auto;
	width: 560px;

}
@media screen and (max-width:700px) {
	.wrapper{
		width: 100%;
	}
	br.sp{
		display: block ;
	}
}
p{
	font-size: 14px;
	color: #000000;
	line-height: 1.5;
	margin: 0;
}
b{
	font-weight: bold;
}
.mark {
	background: linear-gradient(to bottom, transparent 0%, transparent 70%, #ffffaf 70%, #ffffaf 100%);
	height: 80%;
	vertical-align: bottom;
}
.pc{
    display: block ;
}
.sp{
    display: none ;
}
.fwB{
    font-weight: bold;
}
.taC{
	text-align: center!important;
}
.taL{
	text-align: left!important;
}

.fsS{
	font-size: 13px;
    vertical-align: bottom;
}
.fsM{
	font-size: 21px;
}
.fsL{
	font-size: 25px;
}
.fcR{
	color: rgb(255, 0, 0);
}
.fcG{
	color: #218b2d;
}

.mt0{
	margin-top: -10px !important;
}
.mtb20{
	margin: 20px 0;
}
.mt20{
	margin-top: 20px !important;
}
.mt40{
	margin-top: 40px;
}
.mb20{
	margin-bottom: 20px;
}
.mb60{
	margin-bottom: 60px;
}
.mb0{
	margin-bottom: 0!important;
}
.small {
    /*文字サイズ*/
    font-size: 12px;
    color: #999;
    text-align: right;
    /*行間調整*/
    line-height: 1.2;
    /*下側の余白*/
    margin-bottom: 1em;
  }
img {
	width: 100%;
	margin: 0 auto;
	vertical-align: bottom;
}
video{
    width: 100%;
    height: auto;
	vertical-align: bottom;
}
footer {
    font-size: 13px;
    padding: 5%;
    background: #00350b;
    text-align: center;
}
footer a{
	color: #fff;
}



/* 各自で追加する場合は下記に記載 */
#start{
	background-color: #daf0df;
	padding-bottom: 10px;
}
h1,h2{
	margin: 0 auto 20px;
}
.screen{display:none;}
.active{display:block;}

.btn01{
	display:block;
	width:85%;
	margin: 5px auto 30px;
	border:none;
	background: none;
	cursor:pointer;
}
.btn01:hover{
	opacity:0.6;
}

.back-btn{
	background: none;
	border:none;
	color: #666666;
	margin: 0 20px 10px;
	font-size: 15px;
	cursor:pointer;
}
.box{
	background-color: #fff;
	border-radius: 20px;
	margin: 0 15px 30px;
	padding: 20px 15px 30px;
	text-align: center;
}
h3{
	font-size: 20px;
	font-weight: bold;
}
.btn02{
	width: 100%;
	margin: 0 0 10px;
	background-color: #d7e7d9;
	border: 3px solid #218b2d;
	color: #218b2d;
	padding: 20px;
	font-size: 19px;
	font-weight: bold;
	border-radius: 50px;
	cursor:pointer;
}
.btn02:hover{
	background-color: #218b2d;
	color: #fff;
}
@media screen and (max-width:700px) {
	.btn02{
		font-size: 18px;
		padding: 15px;
	}
	.box{
		padding: 10px 10px 30px;
		text-align: center;
	}
}

.box02{
	background-color: #fff;
	border-radius: 20px;
	margin: 0 15px 30px;
	padding: 20px 15px 30px;
}
h4{
	padding: 0.5em;/*文字周りの余白*/
	background: #d1e6d3;/*背景色*/
	border-left: solid 5px #218b2d;/*左線（実線 太さ 色）*/
	margin-top: 50px;
	font-size: 22px;
}
.result{
	margin: 20px 0;
	border: 2px solid #d30000;
	border-radius: 5px;
}
.result .ttl{
	font-size: 20px;
	text-align: center;
	font-weight: bold;
	color: #fff;
	background-color: #d30000;
	padding: 5px 0;
}
.result .txt{
	padding: 20px;
}
.rec{
		margin: 20px 0;
	border: 2px solid #218b2d;
	border-radius: 5px;
}
.rec .ttl{
	font-size: 20px;
	text-align: center;
	font-weight: bold;
	color: #fff;
	background-color: #218b2d;
	padding: 5px 0;
}
.rec .txt{
	font-weight: bold;
	font-size: 14px;
	padding: 15px;
}
.voice{
	border: 1px solid #969696;
	border-radius: 5px;
	padding: 20px;
	display: flex;
	margin-bottom: 10px;
}
.voice .ico{
	width: 20%;
}
.voice .txt{
	font-size: 14px;
	padding: 0 0 0 20px;
	font-weight: bold;
	width: 80%;
}