@charset "utf-8";
html,
body {
	  height: 100%;
	  width: 100%;
	  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	  word-break:normal;
	  line-height: 1.5;
	  overflow-wrap:break-word;
	  background:#745299;

}


/* ----------------------------------------------
ヘッダー
-------------------------------------------------*/
header{
    background:#745299;
	color:#fff;
    padding:30px 0;
	text-align:center;
}
header a{
    color:#fff;
}
header > h1 > small{
 	display:block;
	font-size:0.4em !important;
	font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight:700;
}


#sidebox{
 	background:#fff;
	padding:15px;
	margin-top:20px;
}

#mainbox{
	padding:15px;
	margin-top:-20px;
	color:#fff;
}

.sample{
	font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight:700;
	font-size:1.3em;
	text-align:center;
	margin-top:15px;
	margin-left:-20px;
}

#howto{
	padding-top:20px;
	background:#8760b3;
	padding-bottom:20px;
}


h2{
 	color:#fff;
}


/* ----------------------------------------------
Form
-------------------------------------------------*/

optgroup{
 	font-weight:700;
	font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	background:#e3dcea;
	color:#745299;
}

label{
 	font-weight:800;
	font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	padding:20px 0 10px;;
}

/* ----------------------------------------------
Button
-------------------------------------------------*/
.btn{
	font-weight:700;
	font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

}
/* 青いボタン */
.btn-primary {
    background: #58A9EF !important;
    color: #fff;
	font-weight:700;
	border:1px solid #b5d9f8;
}

.btn-primary:hover, .btn-primary:focus, 
.btn-primary:active, .btn-primary:active:focus, .btn-primary:active:hover, .btn-primary:active.focus,
.btn-primary.active, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary.active.focus,
.open > .dropdown-toggle.btn-primary, 
.open > .dropdown-toggle.btn-primary:hover,
.open > .dropdown-toggle.btn-primary:focus, 
.open > .dropdown-toggle.btn-primary.focus,
.btn-primary.disabled:hover, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus, .btn-primary[disabled]:focus, fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus, .btn-primary[disabled].focus, fieldset[disabled] .btn-primary.focus {
    background: #58A9EF;
    color: #fff;
	border:1px solid #b5d9f8;

}

.btn-primary.outline {
    border: 3px solid #58A9EF; //アウトラインのみのボタンの線の色
    color: #58A9EF; //アウトラインのみのボタンのテキストの色
}

/* 黒いボタン */
.btn-dark {
    background: #424242;
    color: #fff !important;
	font-weight:700;
}

.btn-dark:hover, .btn-dark:focus, 
.btn-dark:active, .btn-dark:active:focus, .btn-dark:active:hover, .btn-dark:active.focus,
.btn-dark.active, .btn-dark.active:focus, .btn-dark.active:hover, .btn-dark.active.focus,
.open > .dropdown-toggle.btn-dark, 
.open > .dropdown-toggle.btn-dark:hover,
.open > .dropdown-toggle.btn-dark:focus, 
.open > .dropdown-toggle.btn-dark.focus,
.btn-dark.disabled:hover, .btn-dark[disabled]:hover, fieldset[disabled] .btn-dark:hover,
.btn-dark.disabled:focus, .btn-dark[disabled]:focus, fieldset[disabled] .btn-dark:focus,
.btn-dark.disabled.focus, .btn-dark[disabled].focus, fieldset[disabled] .btn-dark.focus {
    background: #292929;
    color: #fff !important;
}

.btn-dark.outline {
    border: 3px solid #424242;
    color: #424242
}

/* 黒いボタン */
.btn-purple {
    background: #745299;
    color: #fff !important;
	font-weight:700;
	font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

}

.btn-purple:hover, .btn-dark:focus, 
.btn-purple:active, .btn-dark:active:focus, .btn-dark:active:hover, .btn-dark:active.focus,
.btn-purple.active, .btn-dark.active:focus, .btn-dark.active:hover, .btn-dark.active.focus,
.open > .dropdown-toggle.btn-dark, 
.open > .dropdown-toggle.btn-dark:hover,
.open > .dropdown-toggle.btn-dark:focus, 
.open > .dropdown-toggle.btn-dark.focus,
.btn-purple.disabled:hover, .btn-dark[disabled]:hover, fieldset[disabled] .btn-dark:hover,
.btn-purple.disabled:focus, .btn-dark[disabled]:focus, fieldset[disabled] .btn-dark:focus,
.btn-purple.disabled.focus, .btn-dark[disabled].focus, fieldset[disabled] .btn-dark.focus {
    background: #8163a3;
    color: #fff !important;
}

.btn-purple.outline {
    border: 3px solid #745299;
    color: #fff;
}


.ss-style-halfcircle::before,
.ss-style-halfcircle::after {
    left: 50%;
    z-index: 10;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: inherit;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
 
.ss-style-halfcircle::before {
    top: -50px;
}
 
.ss-style-halfcircle::after {
    bottom: -50px;
}



/* ----------------------------------------------
Footer
-------------------------------------------------*/


footer {
  margin-top:30px;
  padding-top:30px;
  bottom:0px
}
footer div {
  background-color:#e3dcea;
  margin: -5px 0px 0px 0px;
  padding:20px;
  color: #745299;
  text-align:center;
}

footer a{
  text-decoration:none;
  color:#745299 !important;
  font-size:0.8em;
}
footer a;hover{
  text-decoration:none;
}