body{
margin:0;
padding:0;
margin-top:23vw;

}


/* ���j���[�J�����烁�C���R���e���c�Œ� */
.fixed {
    position: fixed;
    width: 100%;
    height: 100%;
}


/* ���i�E�J�e�S���y�[�W�p */
#main-content {
margin-top: 23vw;
}




/* ���Ђ�style��������Ă��� */

html {
	font-size: 62.5%; /* 10px */
}
@media screen and (min-width: 320px) and (max-width: 413px){
html {
	font-size: 62.5%; /* 10px */
}
}
@media screen and (min-width: 414px) and (max-width: 599px){
html {
	font-size: 81.5%; /* 12px */
}
}
@media screen and (min-width: 600px) and (max-width: 960px){
html {
	font-size: 106.5%; /* 17px */
}
}
@media screen and (min-width: 961px) {
html {
	font-size: 112.5%; /* 18px */
}
}

/* ���Ђ�style��������Ă��� */




/* ���X�N���[���ŏ������X�N���[���ŏo�� */
@media screen and (max-width: 960px){

#header {
  background: #fff;
  box-shadow: 0 4px 8px -3px rgba(17, 17, 17, .06);
  position: fixed;
  top: 0;
  transition: .3s cubic-bezier(.4, 0, .2, 1);
  width: 100%;
  z-index: 199999;
margin:0;
padding:0;

}

.head-animation {
  /*transform: translateY(-100%);*/
}

}





/* �������� */
.nav-free {
    height: auto;
    text-align: center;
    font-size: 1.0rem;
    color: #e34235;
    font-weight: bold;
padding: 1%;
margin:0;
    border: 1px solid #e34235;
    background-color: #fff;
}




/* �w�b�_�[�S�� */
header a {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
text-decoration: none !important;
}

.header-container{
padding: 0 5%;
display: flex;
/*-- border-bottom: 1px solid #eee; --*/
justify-content: space-between;
align-items: center;
height: 60px;
width: 90%;
margin:0;
}


.header-site a img,
.header-nav ul li a img,
.sp-nav-sns img{
width:100%;
margin:0;
padding:0;
display:block;
}




/* �T�C�g�� */

.header-site{
margin: 3px auto 0 0;
max-width: 175px;
}

.header-site a img{
width: 175px;
vertical-align: middle;
}

@media screen and (max-width:320px){
.header-site a img{
width: 130px;
}
}

/* �A�C�R�� */

.header-nav{
margin-bottom:0 !important;
}

.header-nav ul {
list-style: none;
display:flex;
}

.header-nav ul li{
list-style: none;
margin-right:20px;
padding:0;
}

.header-nav ul li:last-child{
list-style: none;
margin-right:0px;
}

.header-nav ul li a{
display:flex;
width:20px;
height:20px;

}




/* �n���o�[�K�[���j���[ */

#nav-drawer {
  position: relative;
margin-right:6%;
}

/*�`�F�b�N�{�b�N�X���͔�\����*/
.nav-unshown {
  display:none;
}

/*�A�C�R���̃X�y�[�X*/
#nav-open {
  display: inline-block;
  width: 20px;
  height: 18px;
  vertical-align: middle;
}

/*�n���o�[�K�[�A�C�R����CSS�����ŕ\��*/
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 3px;/*���̑���*/
  width: 18px;/*����*/
  border-radius: 3px;
  background: #555;
  display: block;
  content: '';
  cursor: pointer;
}
#nav-open span:before {
  bottom: -7px;
}
#nav-open span:after {
  bottom: -14px;
}

/*���j���[��‚���J�o�[�G���A*/
#nav-close {
  display: none;/*�͂��߂͉B���Ă���*/
  position: fixed;
  z-index: 9998;/*�őO�ʂ̂������ɕ\��*/
  top: 0;/*�S�̂ɍL����悤��*/
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}



/*���j���[�̓��e*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;/*�őO�ʂɕ\��*/
  width: 85%;/*�E���Ɍ��Ԃ����i�‚���J�o�[��\���j*/
  max-width: 400px; /* �ő啝�i�������Ă��������j*/
  height: 100%;
  background: #fff;/*�w�i�F*/
  transition: .3s ease-in-out;/*���炩�ɕ\��*/
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);/*���ɉB���Ă���*/

}

/*�`�F�b�N����������������\��*/
#nav-input:checked ~ #nav-close {
  display: block;/*���j���[��‚���J�o�[��\��*/
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);/*���g��\���i�E�փX���C�h�j*/
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}


















/* �R���e���c�^�C�g�� */
.sp-nav-ttl{
font-size:1.0rem;
font-weight:bold;
margin:0;
padding:2% 0 2% 5%;
display:block;
background-color: #e7e7e7;
}



/* ���O�C���̂Ƃ��� */
.sp-nav-box{
display:flex;
padding:5%;
}

.sp-nav-login,
.sp-nav-new{
width:100%;
}

.sp-nav-login{
margin-right:3%;
}


.sp-nav-login a,
.sp-nav-new a{
width: 80%;
background-color: #383838;
font-size: 1.0rem;
color: #fff !important;
font-weight:bold;
padding: 10%;
margin: 0;
display: inline-block;
text-align: center;
}







/* ������ */

.head-clearfix .searchbox,
.head-clearfix #search-btn {
    border: 1px solid #ccc;
    border-radius: 0rem;
    -moz-appearance: none;
    -webkit-appearance: none;
    -o-appearance: none;
    -ms-appearance: none;
    appearance: none;
}

.head-clearfix{
padding: 0 5%;
margin:0 0 12% 0;
}

.head-clearfix .searchbox{
margin: 0;
padding: 3%;
width: 73%;
}


.head-clearfix #search-btn {
width: 25%;
border: none;
margin: 0;
padding: 2.3%;
background-color:#666;
color:#fff;
font-weight:bold;
    border: 1px solid #666;
}





/* ���X�g */

.sp-nav-itemnav,
.sp-nav-guidenav{
margin: 0 0 10% 0;
padding: 0;
}

.sp-nav-itemnav a,
.sp-nav-guidenav a{
-webkit-tap-highlight-color: rgba(204,204,204,0.5) !important;
color: #666  !important;
border-bottom: solid 1px #666;
margin: 0;
padding: 4% 5%;
display: flex; /* block����邩�炱���� */
align-items: center;
position: relative; /* ���̃^�O����ɖ����쐬 */
font-size: 1.2rem;
font-weight: normal !important;
}


.sp-nav-itemnav li a:after,
.sp-nav-guidenav a:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 25px;
    display: block;
    width: 6px;
    height: 6px;
    margin-top: -4px;
    border-top: 1px solid #959595; /* ���̑��� */
    border-right: 1px solid #959595; /* ���̑��� */
    transform: rotate(45deg); /* �E������� */
}




/* SNS */
.sp-nav-sns{
padding: 0 5%;
}

.sp-nav-sns ul {
list-style: none;
}

.sp-nav-sns li{
list-style: none;
margin-bottom:2%;
}





/* �‚���{�^�� */
.sp-nav-close-btn{
  display: inline-block;
  vertical-align: middle;
  color: #fff;
  line-height: 1;
  width: 2.0rem;
  height: 0.2rem;
  background: currentColor;
  border-radius: 0.1rem;
  position: relative;
  transform: rotate(45deg);
top: 3%;
    right: -90%;
}

.sp-nav-close-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
  transform: rotate(90deg);
}