@media (max-width: 576px) {

body {
	    min-width:inherit;
	}


	.common-ttl3 {

	   font-size:20px;
	}

    #main-footer{
        margin-bottom: 87px;
    }
    #main-footer .login .login-btn {
        width: 50%;
    }
    #main-footer .login .register-btn {
    width: 50%;
    }

/* ----------------------------------------

コンテンツ幅

---------------------------------------- */
#outer {
    display: block;
}

#main {
    width: 100%;
    padding-right: 0rem;
}

#aside {
    width: 100%;
		margin-top:4rem;
}

#main-header .top-info {

    line-height: 1.3rem;
		text-align:left;
		margin-right:40px;
}

#main-header .menu-wrap {
    display: block;
}

#main-header .menu-wrap .logo {
	text-align:center;
}
#main-header .menu-wrap .logo img{
	width:27vw;
}

#main-header .menu-wrap nav {
    display: none;
		flex-wrap:wrap;
}
#main-header .menu-wrap nav .item{
	width:50%;
	    margin: 0 0rem;
}

#main-footer .logo-area .content-wrap {
    display: block;
    justify-content: space-between;
		padding:0;
}

#main-footer .logo-area .content-wrap .logo{
    text-align:center;
}
#main-footer .logo-area .content-wrap .logo img{
    width:30vw;
}

#main-header .menu-wrap .login {
    display:none;

}

#question .item .parent .img-wrap, #question .item .child .img-wrap {
	width: 40px;
	height: 40px;
}

#question .item .parent .comment, #question .item .child .comment {
	font-size:13px;
	line-height:1.3rem;
	width: calc(100% - 50px);
}
#question .item .parent .img,
#question .item .child .img
{
width:50px;
}
    #question .item .parent .txt,
    #question .item .child .txt
    {
        width:40px;

    }
    #question .item .answers{

        width: 40px;

    }


#question .item .child {
	margin-left: 33px;
}
#question .item .child::before {
	content: "";
	height: 32px;
	width: 9px;
	left: -17px;
	top: 0;
}

#question .item .info {
    display: block;
}
#question .item .info .tag .tag1,
#question .item .info .tag .tag2 {
    font-size: 10px;
		padding: .3rem;
    line-height: 1rem;
}

#question .item .info .time {
  text-align:right;
	margin-top:.5rem;
}


#aside #ranking h2 {
    font-size: 29px;
    padding: 1rem;
}

#aside #ranking h2 img {
    width: 40px;
}

#aside #ranking .list .item .txt {
    padding: 1rem .5rem;
    font-size: 13px;
    line-height: 1.5em;
    margin-bottom: 1rem;
}

#aside #register .item {

    font-size: 12px;
}

#main-footer .link {

    padding: 1rem;
		font-size:13px;
}
#main-footer .link a {
    margin: 0 .5rem;

}

#main-footer .login {
	display:flex;
    font-size: 12px;
		margin-top:1rem;
}
#main-footer .copyright{
	font-size:10px;
    margin-bottom: 120px;
}

/*

nav

*/

#nav-drawer {
  position: fixed;
	right:10px;
	top:10px;
	background-color:#fff;
	    padding: 5px;
	z-index:99;
	display:block;

}
#nav-open{
	margin-bottom:0;
}

.nav-unshown {
  display:none;
}

#nav-open {
  display: inline-block;
  width: 25px;
  height: 22px;
  vertical-align: middle;
}

#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background: #555;
  display: block;
  content: '';
  cursor: pointer;
}
#nav-open span:before {
  bottom: -8px;
}
#nav-open span:after {
  bottom: -16px;
}


#nav-close {
  display: none;
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

/*中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 90%;
  max-width: 330px;
  height: 100%;
  background: #fff;
  transition: .3s ease-in-out;
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);
}

#nav-input:checked ~ #nav-close {
  display: block;
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}


.nav-sp li a{
	display:block;
	color: #ff6b88;
    padding: 1rem;
		border-bottom:1px solid #ccc;
		font-family: 'Amatic SC', cursive;
		font-size:25px;
}

.nav-sp li a span{
	font-size:12px;
	color:#999;
	margin-left:1rem;
	font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

}

#reply .item-wrap {
    display: block;
}

#reply .item-wrap .question {
    width: 100%;
}
#reply .item {
    width: 100%;
    padding-left: 0px;
}

#category .list a{
	width:49%;
	margin-bottom:.5rem;
}
#category .pickup-bnr a span{
	display:block;
}

    .common-sec {
        padding: 80px 0;
    }
    .center-ttl-eng {

        font-size: 60px;

    }
    .center-ttl{
        font-size:21px;
    }
    .text-box {
margin-top: 40px;
        padding: 20px;
    }
    h1.top-info {
        text-align: center;
    }


    .btn01 {
        padding: 20px 20px;
        border-radius: 40px;
        font-size: 18px;
        font-weight: bold;
        line-heigt: 1.2em;
        width: 100%;
    }

    .inline-list.voice .item .info{
        width: calc(100% - 30px);
        padding-left: 10px;
        font-size: 14px;
    }

    .inline-list.voice .item .img{
        width: 30px;
        height: 30px;
    }
    .btn01.small{

        width: 100%;
    }
    .inline-list .item .info .level {
        font-size: 13px;
    }


    #foot-nav{
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 99;
    }

    #foot-nav .icon-img{
        height: 40px;
        width: 40px;
        margin: 0 auto;
position: relative;
    }
    #foot-nav .icon-img img.plus{
        position: absolute;
        right: -15px;
        top: -17px;
    }
    #foot-nav .icon-img img{
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    #foot-nav .item:nth-child(3) .icon-img img{
        width: 80%;
        height: 80%;
        margin-top: 4px;
    }

    .archive-list{
        justify-content: space-between;
    }
    .archive-list .item {
        flex-basis: 49%;
        margin-left: 0%;
        margin-right: 0%;
        margin-bottom: 20px;
        position: relative;
    }

    .form-check.form-check-inline label{
width: 100%;
    }

    .pay-wrap-register {
        width: 100%;
        padding: 0 15px;
        text-align: center;
    }
    .media-ttl{
        font-size: 20px;
    }

    .media-area h2  {
       font-size: 20px;
    }

    .media-area h3 {
        font-size: 16px;
    }

    .media-area h4 {
        font-size: 15px;
    }

    .media-area h5 {
        font-size: 15px;
    }

    #offer
    .offer-box{
        padding: 20px 0px;
    }


    .prof-bg{
        margin-left: -16px;
        margin-right: -16px;
    }

    .photo-box .item>.img{
        height: 30vw;
        cursor: pointer;
    }

    .froom-message.top{
        margin-top: -36px;
        position: relative;
        z-index: 2;
    }

    .prof-box .img{
        width: 60px;
        height: 60px;
    }

    .prof-box .text{
        width: calc(100% - 60px);
    }


    .price-table th {
        width: 97px;
        font-size: 14px
    }
    .price-table td {
        font-size: 28px;
    }
    .price-table td span{
        font-size: 14px;
        margin-left: 10px;
    }

    .btn01 {
        padding: 20px 40px;
        font-size: 22px;
        line-height: 1.5em;
        width: 100%;
        text-align: center;
    }
    .year-pay{
        font-size: 13px;

    }
#offer .btn01 {
    font-size: 18px;
}

    .article-list .item a .img{
        width: 100%;
    }
    .article-list .item a .info{
        width:100%;
    }

    .article-list .item a .ttl{

        font-size: 16px;
    }
    .article-list .item {
        flex-basis: 100%;
        margin-left: 0%;
        margin-right: 0%;
        margin-bottom: 20px;
        position: relative;
    }

    .article-list .item .level {
        text-align: center;
    }

    .pro-menu .item{
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
    }
    .pro-menu .item .ttl{
        text-align: left;
        margin-top: 0;
    }

    .pro-menu .item .img{
        width: 100px;
    }
    .pro-menu .item .info{
        width: calc(100% - 120px);
    }

    .personal-list .item{
        flex-basis: 100%;
    }
    .manual-txt img{
        width: 100%;
    }

}