@charset "utf-8";
/* ===================================================================
CSS information

file name  :common.css
style info  :ベース設定
=================================================================== */
.pc{display:block;}
.sp{display:none;}

/*--------------------------------------------------------------------
基本設定
--------------------------------------------------------------------*/
html,body {
	width:100%;
	height:100%;
}

html {
	height:auto;
	overflow-y:scroll;
	background:
url("../images/bg_parts_2021_01.png") no-repeat right bottom,
url("../images/bg_parts_2021_02.png") no-repeat center top,
url("../images/bg_image_2021_02.jpg") repeat center top;
}

/*--Reset-----------------------------------------------------------*/
* {
	margin:0;
	padding:0;
}

a {
	text-decoration:none;
}

img {
	border:none;
	vertical-align:middle;
}

ul,ol {
	list-style:none;
}

/*--Text------------------------------------------------------------*/
body {
	font-size:88%;
	font-weight:normal;
	line-height:1.5;
	font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
}

* html body {/*IE6*/
	font-family:"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
}

*:first-child + html body {/*IE7*/
	font-family:"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
}

h2,h3,h4,h5,h6 {
	font-size:100%;
}

/*--Link------------------------------------------------------------*/
a,a:link {color:#333333;}
a:visited {color:#333333;}
a:hover,a:active {color:#777777;}
a:focus {outline:none;}

header a,header a:link {color:#9749D0;}
header a:visited {color:#9749D0;}
header a:hover,header a:active {color:#9749D0;}
header a:focus {outline:none;}

/*--HTML5-----------------------------------------------------------*/
article,aside,details,footer,header,hgroup,menu,nav,section,summary {
	display:block;
}


/*--------------------------------------------------------------------
共通パーツ
--------------------------------------------------------------------*/

h2 {
}

#column1 p {
}

#column2 p {
}

#wrap-btm p {
}

#wrapper {
	overflow:hidden;
	margin: 0 auto;
}

.st_gradation{
  background: -moz-linear-gradient(left, #6CA8E2, #9749D0);
  background: -webkit-linear-gradient(left, #6CA8E2, #9749D0);
  background: linear-gradient(to right, #6CA8E2, #9749D0);
	color: #ffffff;
	padding: 5px;
	text-align: center;
	font-size: 1.5em;
	margin: 0 0 30px 0;
}

.st_gradation span{
	font-size: 0.5em;
	display: block;
}

.js-animation {
  opacity: 0;
  visibility: hidden;
  transform: translateY(40px);
  transition: all 1s;
}
.js-animation.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}

/*--------------------------------------------------------------------
header（ヘッダー部分）
--------------------------------------------------------------------*/
header {
	margin: 0 auto;
	overflow:hidden;
	height: 210px;
	text-align: center;
	color: #9749D0;
}

header div {
	height: 100%;
}

header p.mini_logo{
	padding: 20px 0 10px;
}

header p.mini_logo img{
	height: 40px;
}

header p.catch{
	border-top: 1px solid #9749D0;
	border-bottom: 1px solid #9749D0;
	width: 10em;
	margin: 0 auto 10px;
	padding: 2px 0;
}

header h1{
	font-size: 1.7em;
	line-height: 1.4em;
	margin: 0 0 8px 0;
}

/*--------------------------------------------------------------------
content（コンテンツ部分）
--------------------------------------------------------------------*/
#content {
	clear:both;
	margin:0 auto;
}

#content #main_column{
	margin: 0 10px;
	padding: 30px 0 70px;
}

input[type="text"],
textarea {
	padding: 0.8em;
	outline: none;
	border: 1px solid #DDD;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	font-size: 16px;
	width: 80%;
}

input[type="text"]:focus,
texture:focus {
	box-shadow: 0 0 5px #8179D9;
	border: 1px solid #8179D9;
}

input.sysNextSubmit {
	font-weight: bold;
	border-radius: 0;
	background: -moz-linear-gradient(left, #6CA8E2, #9749D0),;
	background: -webkit-linear-gradient(left, #6CA8E2, #9749D0);
	background: linear-gradient(to right, #6CA8E2, #9749D0);
	color: #ffffff;
	padding: 10px 50px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	font-size:1.4em;
	border: 0;
}
input.sysNextSubmit:hover {
opacity: 0.6;
filter: alpha(opacity=40);
}

/*--------------------------------------------------------------------
footer部分
--------------------------------------------------------------------*/
#wrap-btm {
	clear:both;
	text-align:center;
}

#wrap-btm footer {
	text-align:center;
	margin:0 auto;
}

#wrap-btm footer .bn_hiroba{
	margin: 0 0 40px;
}

#wrap-btm footer .bn_hiroba img{
	width: 345px;
}

#wrap-btm footer .link_logo{
	margin: 0 0 20px;
}

#wrap-btm footer .link_logo img{
	width: 231px;
}

#wrap-btm footer .copyright{
	font-size: 0.8em;
	color: #626262;
	margin: 0 0 10px 0;
}


/*--------------------------------------------------------------------
センター固定 or リキッドレイアウトの変更
（リキッドレイアウトにする場合はwidthを100%に変更）
--------------------------------------------------------------------*/
header,
#wrapper,
#content,
footer {
	max-width:800px;
}


/*----------------------------------------------------
	リンク画像ロールオーバー設定
----------------------------------------------------*/

a img{
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}

a:hover img{
opacity: 0.6;
filter: alpha(opacity=40);
}

a:hover img.nonfade{
filter:alpha(opacity=100);
-moz-opacity:1;
-khtml-opacity: 1;
opacity:1;
-webkit-transition: 0s ease-in-out;  
-moz-transition: 0s ease-in-out;  
-o-transition: 0s ease-in-out;  
transition: 0s ease-in-out;
}

/*--追加css 20210615 mk---------*/
div#count{
text-align: center;
background: #ffffff;
border: 1px solid #5F5F5F;
margin: 0 auto 50px!important;
max-width: 300px;
padding: 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

}

div#count #number{
line-height: 1em;
margin: 5px 0 15px;
font-weight: bold;
color: #5F5F5F;
}

div#count #number span{
font-size: 2.5em;
position: relative;
top: 8px;
color: #6CA8E2;
}


/*----------------------------------------------------
	ラジオボタン装飾
----------------------------------------------------*/
input[type=checkbox],input[type=radio] {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    position: relative;
    right: 0;
    bottom: 0;
    left: 0;
    height: 20px;
    width: 20px;
    vertical-align: -0.8rem;
    transition:all .15s ease-out 0s;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    margin: .4rem;
    outline: none;
    border-radius: 10%;
}
/* Checkbox */
input[type=checkbox]:before,input[type=checkbox]:after {
    position: absolute;
    content: "";
    background: #fff;
    transition: all .2s ease-in-out;
}
input[type=checkbox]:before {
    left: 2px;
    top: 6px;
    width: 0;
    height: 2px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}
input[type=checkbox]:after {
    right: 9px;
    bottom: 3px;
    width: 2px;
    height: 0;
    transform: rotate(40deg);
    -webkit-transform: rotate(40deg);
    -moz-transform: rotate(40deg);
    -ms-transform: rotate(40deg);
    -o-transform: rotate(40deg);
    transition-delay: .2s;
}
input[type=checkbox]:checked:before {
    left: 1px;
    top: 10px;
    width: 6px;
    height: 2px;
}
input[type=checkbox]:checked:after {
    right: 5px;
    bottom: 1px;
    width: 2px;
    height: 14px;
}
input[type=checkbox]:indeterminate:before,input[type=checkbox]:indeterminate:after {
    width: 7px;
    height: 2px;
    transform: rotate(0);
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
}
input[type=checkbox]:indeterminate:before {
    left: 1px;
    top: 7px;
}
input[type=checkbox]:indeterminate:after {
    right: 1px;
    bottom: 7px;
}
/* Radio */
input[type=radio] {
    border-radius: 50%;
}
input[type=radio]:checked:before {
    transform: scale(1);
}
input[type=radio]:before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 3px;
    transform: scale(0);
    transition: all ease-out 250ms;
}
/* 色は青色のみ */
input[type=checkbox].blue,input[type=radio].blue {
    border: 2px solid #8179D9;
}
input[type=checkbox].blue:checked,input[type=checkbox].blue:indeterminate,input[type=radio].blue:checked:before {
    background: #8179D9;
}


/*--------------------------------------------------------------------
▼画面サイズ（横幅）が640px以上の場合に適用
--------------------------------------------------------------------*/
@media screen and (min-width: 640px) {

header p.mini_logo{
	padding: 30px 0 20px;
}

header p.catch{
	width: 20em;
}

br.non_br{
	display: none;
}






}