@charset "utf-8";
/*================================================
 CSS Ver.1.00
=================================================*/

body {
	color: #333333;
	font-family: 'MS UI Gothic','ＭＳ Ｐ明朝','MS PMincho',sans-serif"???C???I", Meiryo, "?l?r ?o?S?V?b?N", "MS P Gothic", "Lucida Grande", Helvetica, sans-serif;
	border: none;
	counter-reset: titleNum;
	background:#FFF5CF;
        background: url("../image/bg.png")#FFF5CF;
	background-image: url(../image/topup.png), url(../image/topdown.png);
	background-size: 50% , 50% ;
background-attachment: fixed;
background-repeat: repeat-x, repeat-x;
background-position:top left,bottom right;

}



@media screen and (min-width: 768px){
.br-sp {display: none; }
}

@media screen and (max-width:768px){
html{
	font-size:12px;
}
}

html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}


.clear{
	clear:both
}


.content{
	width:800px;
	margin:0 auto;
	background:#fff;
}

@media screen and (max-width:768px){
	.content{

	width:96%;
	margin:0 auto;
}
}

.space10{
	height:10px;
}

.space20{
	height:20px;
}

@media screen and (max-width:768px){

.space10{
	height:5px;
}

.space20{
	height:10px;
}

}


.red{
	color:red;
	font-weight:bold;
}

.h2_banner
{
	width:100%;
	margin:0 auto;

}

.smll-img{
	width:90%;
	margin:0 auto;

}

.smll-img2{
	width:60%;
	margin:0 auto;

}
.smll-img3{
	width:25%;
	margin:0 auto;

}

h2{

	font-size:2.1rem;
	text-align:center;
	padding-top:10px;
	padding-bottom:10px;
	font-weight:bold;
	color:red;
}

h2.next-h2
{
	background:#DE2329;
	font-size:1.8rem;
	text-align:center;
	padding-top:10px;
	padding-bottom:5px;
	font-weight:bold;
	color:#fff;
}


h3{
	background:#fff;
	font-size:1.7rem;
	width:90%;
	margin:0 auto;
	text-align:center;
	padding-top:15px;
	padding-bottom:8px;
	font-weight:bold;
}


h4{
	background:#fff;
	font-size:1.5rem;
	width:90%;
	margin:0 auto;
	padding-top:15px;
	padding-bottom:8px;
	font-weight:bold;
color:#214284;
    text-decoration:underline double #214284;
}

.preface{
	background:#fff;
}


.preface p{
	width:94%;
	font-size:1.2rem;
	line-height:2rem;	
	margin:0 auto;
}

.preface p.big{
	font-size:1.7rem;
	font-weight:bold;	
}

.preface p.middle{
	font-size:1.2rem;
	font-weight:bold;	
}

.preface a{

	color:#170BCD;
}


.overview{
       background: #FFFAE6;
	background-size:90%;

}
.overview2{
	background: #fff;

}


.overview h3{
	background:#DE2329;
	color:#fff;

}

.overview2 h3{
	background:#DE2329;
	color:#fff;

}
.bgbule{
	background:#FFFDD5;
}

.overview p,.overview2 p{
	width:90%;
	font-size:1.1rem;
	line-height:1.8rem;
	margin:0 auto;

}

.overview p.yaji,.overview2 p.yaji{
	font-size:2.3rem;
}


.overview p.muryou,.overview2 p.muryou{
 	font-size:2.3rem;
	color:red;
}


.overview p.ryoukin,.overview2 p.ryoukin{
	font-size:1.8rem;

}


.overview p.left-list,.overview2 p.left-list{
	text-align:left;
	font-size:1.2rem;
	font-weight: bold;
}

.overview p.left-list-nb,.overview2 p.left-list-nb{
	text-align:left;
	font-size:1.3rem;

}

.overview p.left-list-smallt,.overview2 p.left-list-small{
	text-align:left;
	font-size:1.2rem;

}

.overview p.left-list-hoki,.overview2 p.left-list-hoki{
	text-align:left;
	font-size:0.9rem;

}

.individual{
	background:#8CF7F4;
}

.individual p{
	width:96%;
	font-size:1.4rem;
	margin:0 auto;
}

.individual p.annotation{
	font-size:1rem;
}


.other01 p{
	width:96%;
	font-size:1.2rem;
	line-height:1.5rem;
	margin:0 auto;
	
}





.app_btn1 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 auto;
	padding: 0.8em 2em;
	width: 60%;
	color: #fff;
	font-size: 1.7rem;
	font-weight: bold;
	background-color: #3300FF;
	border-radius: 50vh;
	margin-bottom:15px;
 	position:relative;
	justify-content: right;
	height:30px;
}

.app_btn1 a{
	position:absolute;
	left:0;
	width:100%;
	height:90px;
	text-align:center;
	vertical-align: middle;
	justify-content: center;
	line-height:90px;
	color: #fff;
	text-decoration:none;
}

.app_btn1::after {
	content: '';
	width: 5px;
	height: 5px;
	border-top: 3px solid #fff;
	border-right: 3px solid #fff;
	transform: rotate(45deg);
}

.app_btn1:hover {
	text-decoration: none;
	background-color: #000066;
}

.app_btn2 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 auto;
	padding: 0.8em 2em;
	width: 50%;
	color: #fff;
	font-size: 1.7rem;
	font-weight: bold;
	background-color: #FF6E00;
	border-radius: 50vh;
	margin-bottom:15px;
 	position:relative;
	justify-content: right;
	height:30px;
}

.app_btn2 a{
	position:absolute;
	left:0;
	width:100%;
	height:90px;
	text-align:center;
	vertical-align: middle;
	justify-content: center;
	line-height:90px;
	color: #fff;
	text-decoration:none;
}

.app_btn2::after {
	content: '';
	width: 5px;
	height: 5px;
	border-top: 3px solid #fff;
	border-right: 3px solid #fff;
	transform: rotate(45deg);
}

.app_btn2:hover {
	text-decoration: none;
	background-color: #cf680c;
}

.app_btn3 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 auto;
	padding: 0.8em 2em;
	width: 65%;
	color: #fff;
	font-size: 1.7rem;
	font-weight: bold;
	background-color: #FF6E00;
	border-radius: 50vh;
	margin-bottom:15px;
 	position:relative;
	justify-content: right;
	height:50px;
}

.app_btn3 a{
	position:absolute;
	left:0;
	width:100%;
	height:90px;
	text-align:center;
	vertical-align: middle;
	justify-content: center;
	line-height:90px;
	color: #fff;
	text-decoration:none;
}

.app_btn3::after {
	content: '';
	width: 5px;
	height: 5px;
	border-top: 3px solid #fff;
	border-right: 3px solid #fff;
	transform: rotate(45deg);
}

.app_btn3:hover {
	text-decoration: none;
	background-color: #cf680c;
}

.app_btn {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 auto;
	padding: 0.8em 2em;
	width: 65%;
	color: #fff;
	font-size: 1.7rem;
	font-weight: bold;
	background-color: #FF6E00;
	border-radius: 50vh;
	margin-bottom:15px;
 	position:relative;
	justify-content: right;
	height:50px;
}

.app_btn3 a{
	position:absolute;
	left:0;
	width:100%;
	height:90px;
	text-align:center;
	vertical-align: middle;
	justify-content: center;
	line-height:90px;
	color: #fff;
	text-decoration:none;
}

.app_btn3::after {
	content: '';
	width: 5px;
	height: 5px;
	border-top: 3px solid #fff;
	border-right: 3px solid #fff;
	transform: rotate(45deg);
}

.app_btn3:hover {
	text-decoration: none;
	background-color: #cf680c;
}


.app_btn4 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 auto;
	padding: 0.8em 2em;
	width: 50%;
	color: #fff;
	font-size: 1.7rem;
	font-weight: bold;
	background-color: #00C700;
	border-radius: 50vh;
	margin-bottom:15px;
 	position:relative;
	justify-content: right;
	height:30px;
}

.app_btn4 a{
	position:absolute;
	left:0;
	width:100%;
	height:90px;
	text-align:center;
	vertical-align: middle;
	justify-content: center;
	line-height:90px;
	color: #fff;
	text-decoration:none;
}

.app_btn4::after {
	content: '';
	width: 5px;
	height: 5px;
	border-top: 3px solid #fff;
	border-right: 3px solid #fff;
	transform: rotate(45deg);
}

.app_btn4:hover {
	text-decoration: none;
	background-color: #00552e;
}



.app_btn5 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 auto;
	padding: 0.8em 2em;
	width: 50%;
	color: #fff;
	font-size: 1.3rem;
	font-weight: bold;
	background-color: #FF0005;
	border-radius: 50vh;
	margin-bottom:15px;
 	position:relative;
	justify-content: right;
	height:15px;
}

.app_btn5 a{
	position:absolute;
	left:0;
	width:100%;
	height:45px;
	text-align:center;
	vertical-align: middle;
	justify-content: center;
	line-height:45px;
	color: #fff;
	text-decoration:none;
}

.app_btn5::after {
	content: '';
	width: 5px;
	height: 5px;
	border-top: 3px solid #fff;
	border-right: 3px solid #fff;
	transform: rotate(45deg);
}

.app_btn5:hover {
	text-decoration: none;
	background-color: #FF8F91;
}





.app_btnp {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 30px auto 0;
	padding: 0.8em 2em;
	width: 60%;
	color: #fff;
	font-size: 1.1rem;
	font-weight: bold;
	background-color: #da0004;
	border-radius: 50vh;
	margin-bottom:15px;
 	position:relative;
	justify-content: right;
	height:30px;
}

.app_btnp a{
	position:absolute;
	left:0;
	width:100%;
	height:70px;
	text-align:center;
	vertical-align: middle;
	justify-content: center;
	line-height:70px;
	color: #fff;
	text-decoration:none;
}

.app_btnp::after {
	content: '';
	width: 5px;
	height: 5px;
	border-top: 3px solid #fff;
	border-right: 3px solid #fff;
	transform: rotate(45deg);
}

.app_btnp:hover {
	text-decoration: none;
	background-color: #910002;
}


@media screen and (max-width:768px){

.app_btn1 {
	font-size: 1.4rem;
	height:40px;
}

.app_btn1 a{
	height:80px;
	line-height:80px;

}

.app_btn2 {
	font-size: 1.5rem;
	height:40px;
	width: 75%;
}

.app_btn2 a{
	height:80px;
	line-height:80px;

}

.app_btn3 {
	font-size: 1.2rem;
	height:40px;
}

.app_btn3 a{
	height:80px;
	line-height:80px;


.app_btn4 {
	font-size: 1.2rem;
	height:40px;
	width: 80%;
}

.app_btn4 a{
	height:80px;
	line-height:80px;

}

}
.app_btnp {
	font-size: 1.4rem;
	height:30px;
	width: 80%;
	margin: 10px 9%;
}

.app_btnp a{
	height:60px;
	line-height:60px;


}

}





.foot{
	background:#D30B0B;
	padding-top:5px;
	height:100px;
	position: relative;

}

.foot p{
	text-align:center;
	color:#fff;
	margin-top:5px;
}

.foot p a{
	text-decoration:none;
	color:#fff;
}

.foot .copy{
	position: absolute;
	bottom: 10px;
	left: 0;
	right: 0;
	margin: auto;
}


.pon{
	width:42%;
	margin-left: 3%;
	float:left;
	margin-right: 2%;
}	

.pon-pro{

	font-size:1.4rem;

}

.pon-pro p{
	padding-top:10px;
	font-size:1.2rem;
	line-height:1.8rem;
}

.pon-pro .left-list2{
	font-size:1.1rem;
	}

@media screen and (max-width:768px){

.pon{
	width:60%;
	margin:0 auto;
	float:none;
}	

.pon-pro{
	width:100%;
	float:none;
	margin-bottom:10px;
}

.pon-pro p{
	font-size:1.2rem;
	line-height:1.6rem;

}

}

.mile{
	width:90%;
	margin:0 auto;
}

.sem_box a{
	width:41%;
	float:left;
	margin-left:6%;
	text-decoration:none;
}

.sem_box .matter{
	margin: 0 auto;
	width: 65%;
	color: #fff;
	font-size: 1.2rem;
	font-weight: bold;
	background-color: #FF6E00;
	border-radius: 50vh;
	margin-bottom:15px;
	height:50px;
	text-align:center;
	line-height:50px;
}

.sem_box .matter:hover {
	text-decoration: none;
	background-color: #cf680c;
}


.sem_box .matter2{
	margin: 15px auto 0;
	width: 75%;
	color: #fff;
	font-size: 1.2rem;
	font-weight: bold;
	background-color: #00B521;
	border-radius: 50vh;
	margin-bottom:15px;
	height:50px;
	text-align:center;
	line-height:50px;
}

.sem_box .matter2:hover {
	text-decoration: none;
	background-color: #008318;
}

.sem_box h3{
	background:#FFCC40;
	text-align:center;
	margin-bottom:20px;
	width:100%;
	padding-top:15px;
	padding-bottom:8px;
	font-size:1.5rem;
	font-weight:bold;

}

.sem_box p{

	width:96%;
	font-size:1.2rem;
	margin:0 auto;
	line-height:1.5rem;
}

.sem_box p.data{
color:#000;
	margin:10px 0;
	text-align:center;
}

.sem_box p b{
text-decoration: underline; /* 下線 */
  text-decoration-thickness: 0.5em; /* 線の太さ */
  text-decoration-color: #5AFF19; /* 線の色 */
  text-underline-offset: -0.2em; /* 線の位置。テキストに重なるようにやや上部にする */
  text-decoration-skip-ink: none; /* 下線と文字列が重なる部分でも下線が省略されない（線が途切れない） */
}


@media screen and (max-width:768px){

.sem_box .matter{
	width: 100%;
	height:40px;
	line-height:40px;
}
}

.advise{
	width: 85%;
	margin:0 auto;
	background:#EDF8E9;
}


.advise h4{
	width: 100%;
	margin:0 auto;
	text-align:center;
	background:#4E8274;
	font-size:1.5rem;
	font-weight:bold;
	line-height:2.3rem;
	padding-top:8px;
	color:#fff;
}


.advise2{
	width: 85%;
	margin:0 auto;
	background:#E8FFD7;
}


.advise2 h4{
	width: 100%;
	margin:0 auto;
	text-align:center;
	background:#9FD977;
	font-size:1.5rem;
	font-weight:bold;
	line-height:2.3rem;
	padding-top:8px;
	color:#fff;
}




.masasemi{
	width: 60%;
	margin:0 auto;
}

.marker-bold {
  background: linear-gradient(transparent 50%, #ffff00 50%);
	font-weight:bold;
}

.sisan-img{
	width: 60%;
	margin:0 auto;
}

.itudemo-img{
	width: 80%;
	margin:0 auto;	}






.bp{
	width: 95%;
	margin:0 auto;
}

.bpl{
	width:67%;
	float:left;
}

.bpr{
	width:30%;
	font-size:1.4rem;
	float:left;
}



@media screen and (max-width:768px){

.bp{
	width: 100%;
	margin:0 auto;
}

.bpl{
	width:100%;
	margin:0 auto 10px; 
	float:none;
}	

.bpr{
	width:60%;
	float:none;
	margin:0 auto 10px;
}
}



.cp-movie-box{
	width:90%;
	margin:0px auto;
	padding:10px 0 15px;  
	}

.cp-movie {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
.cp-movie iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}


.sem_box .kategori{
	width: 100%;
	text-align:center;
padding:10px 0;
	color:#fff;
	border-radius: 8px;
	line-height:15px;
	height:15px;
	font-weight:bold;
	margin-bottom:10px;
	}




.formbox{
	width:90%;
	margin:0px auto;
	padding:10px 0 15px;  
}

.formtext input{
	width:100%;
	height:40px;
	text-indent:5px;
  font-size     : 1.3rem; 
}

.formsubmit input{
	margin-top:10px;
	width:100%;
	height:45px;
font-weight:bold;
  transition    : .3s;         /* なめらか変化 */

  border        : 2px solid #990000;    /* 枠の指定 */
 border-radius : 20px;          /* 角丸       */
  font-size     : 1.3rem;        /* 文字サイズ */
  line-height   : 1rem;         /*
  text-align    : center;      /* 文字位置   */
  cursor        : pointer;     /* カーソル   */
  padding       : 12px 63px;   /* 余白       */
  background    : #990000;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
}


.formsubmit input:hover {
  box-shadow    : none;        /* カーソル時の影消去 */
  color         : #990000;     /* 背景色     */
  background    : #ffffff;     /* 文字色     */
}