@charset "utf-8";
body{
	font-size: 17px;
    line-height: 1.5em;
    font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500;
    overflow-wrap: break-word;
	word-break: normal;
	color: #333;
	font-feature-settings: "palt";
}
:root {
	--maincolor: #313f8d;
	--subcolor: #1d95aa;
	--bgcolor: #ededed;
	--redcolor: #e77373;
	--yecolor: #FFEB2E;

	--serif: 'Shippori Mincho B1', serif;
	--italic: "Lugrasimo", cursive;

	--shadow: drop-shadow(2px 2px 10px #2b3663);

	--_radius-base: 13px;
	--_padding: 8px;
	--_radius-inner: calc(var(--_radius-base) - var(--_padding));
}
::selection {
	background: #333;
	color: #FFF;
}
::-webkit-scrollbar {width: 12px;}
::-webkit-scrollbar-track {background: #eee;}
::-webkit-scrollbar-thumb {background: var(--maincolor);}

/******共通******/
.sp{display: none!important;}
img{width:auto; height: auto;max-width:100%;}
p{line-height: 1.7em; margin-bottom: 1.7em;}

.right{
  width: 300px;
  display: block;
  float: right;
  padding: 0 1%;
}
.img_b{
	text-align: center;
	margin: 0 auto 1.7em auto;
	display: block;
	display: block;
}

.refl{
	-webkit-box-reflect: below 2px -webkit-gradient(linear, left bottom, left 90%, from(rgba(255, 255, 255, 0.3)), to(transparent));
	margin-bottom: 2em;
}

p:last-child,.img_b:last-child,.btn:last-child{margin-bottom: 0;}

/***テキスト***/
.big{font-size: 1.3em;}
.small{font-size: .8em;}
.b{font-weight: 800;}
.u{text-decoration:underline;}
.red{color: var(--redcolor);}
.ita{font-family: var(--italic);}


/*追従*/
.cont{
  width: 170px;
  height: auto;
  position:fixed;
  bottom :5px;
  right: 5px;
  z-index: 1000;
}

/*********
header
*********/
header{
	padding: 5%;
	background: url(../img/head_bg.png)center/cover;
	text-align: center;
	font-family: var(--serif);
}
header h1{
	color: #fff;
	font-size: 2.2em;
	letter-spacing: .1em;
	filter: var(--shadow);
}

/*main*/
.bg{background: var(--bgcolor);}
.wrap{
	max-width: 900px;
	margin: 0 auto;
	padding: 3% 2%;
}

/********
index
********/
h2{
	text-align: center;
	font-family: var(--serif);
	font-weight: 800;
	font-size: 1.5em;
	line-height: 1.4em;
	margin-bottom: 1.2em;
	font-size: 1.8em;
}
h3{
	font-family: var(--serif);
	font-weight: 800;
	font-size: 1.5em;
	line-height: 1.4em;
	margin: 1.2em 0 1em 0;
	border-left: #313f8d solid 8px;
	padding-left: 10px;
}

/*******/
.notes{
	background: var(--bgcolor);
	border-radius: 5px;
	padding: 1.7em 2em;
	margin-bottom: 2em;
	font-size: .8em;
}

/*******/
ul:not([class]){margin-bottom: 1em;}
ul:not([class]) li{
    position: relative;
    padding-left: 1.3em;
	margin-bottom: .3em;
}
ul:not([class]) li:before{
    border-radius: 50%;
    width: 7px;
    height: 7px;
    display: block;
    position: absolute;
    left: 5px;
    top: 10px;
    content: "";
	background: var(--maincolor);
}

ul.notes li {
    text-indent: -1em;
    padding-left: 1em;
    margin-bottom: .2em;
	line-height: 1.5em;
	font-size: .9em;
}
ul.notes li::before {content: "※";}

/********/
ol:not([class]){margin-bottom: 1em;}
ol:not([class]) li {
	font-weight: 600;
    position: relative;
    padding-left: 30px;
    line-height: 1.5em;
    padding: 0.5em 0.5em 0em 30px;
    counter-increment: my-counter; /* li要素ごとにカウンターをインクリメント */
}
ol:not([class]) li:before {
    position: absolute;
    content: counter(my-counter);
    display:inline-block;
    background: var(--maincolor);
    color: white;
    font-family: 'Avenir','Arial Black','Arial',sans-serif;
    font-weight:bold;
    font-size: 14px;
    border-radius: 50%;
    left: 0;
    width: 23px;
    height: 23px;
    line-height: 23px;
    text-align: center;
    top: 23px;
    transform: translateY(-50%);
}

/*******/
.btn{margin: 5% auto;}
.btn a{
	text-align: center;
    margin-bottom: 3%;
    width: 100%;
    padding: 13px 2em;
    text-decoration: none;
    letter-spacing: .1em;
    border-radius: 5px;
	background: var(--maincolor);
	color: #fff;
	box-sizing: border-box;
	font-weight: 600;
	font-family: var(--serif);
	position: relative;
	transition: all .5s;
}
.btn a::after {
	position: absolute;
	top: 50%;
	right: .7em;
	width:  .3em;
	height: .3em;
	transform: translateY(-50%) rotate(45deg);
	border-right: 2px solid currentColor;
	border-top: 2px solid currentColor;
	content: "";
}
.btn a:hover{transform: translateY(-10px);}

.tag{margin-bottom: 0;}
.tag span{
	background: #dcdcdc;
	padding: .1em .3em;
	font-size: .8em;
}

/*footer*/
footer{
	background: var(--maincolor);
	padding: 30px 2%;
	text-align:center;
	font-size:14px;
}
footer p{
    line-height: 1em;
	color:#fff;
}
footer a{
	font-size:13px;
	color:#fff;
	margin: 0 .5%;
}

@media screen and (max-width: 768px) {
   /*--- 表示領域が768px以下の場合に適用するスタイル ---*/

}/*///media*/

@media screen and (max-width: 640px) {
   /*--- 表示領域が640px以下の場合に適用するスタイル ---*/
	.sp{display: block!important;}
	.pc{display: none!important;}

	.text p br{display: none;}
	.text p.br br{display: block;}

	.right{
		float: none;
		width: 90%;
		margin: 0 auto 5%;
	}

	/*追従*/
	.cont{width: 130px;}

	/*header*/
	header{padding: 10% 2%;}
	header h1{font-size: 1.8em;}

	/*main*/

	/*form*/

}/*///media*/