@charset "UTF-8";

/* CSS Document */
    
/*------------------------ list menu -------------------------------*/
#newsListContainer, #correnctListContainer, #informationListContainer {
    width: 1000px;
    margin: 0 auto;
}

#newsListContainer {
    margin-bottom: 100px;
}

.top #newsListContainer {
    margin-bottom: 152px !important;
}

#recruitListContainer, #foreignrightsContainer {
    width: 750px;
    margin: 0 auto;
}

#correnctListContaine r {
    margin-bottom: 162px !important;
}

#informationListContainer {
    margin-bottom: 162px !important;
}

#foreignrightsContainer {
    margin-bottom: 162px !important;
}

#newsListContainer h2, #correnctListContainer h2, #recruitListContainer h2, #foreignrightsContainer h2 {
    text-align: center;
    font-size: 30px;
    margin: 227px auto 67px auto;
}

#informationListContainer h2 { /*サブメニューあり*/
    text-align: center;
    font-size: 30px;
    margin: 265px auto 52px auto !important;
}

#informationListContainer h3 {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    margin: 52px auto 70px auto !important;
}


#correnctListContainer h3{
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    margin: 0 auto 70px 0;
}


#informationListContainer h3#page2, #informationListContainer h3#page3{
    margin: 67px auto 26px auto !important;
}

.top #newsListContainer h2, .top #correnctListContainer h2, .top #recruitListContainer h2, .top #informationListContainer h2{
    margin: 8px auto 67px auto !important;
}

#newsListContainer dl, #correnctListContainer dl, #informationListContainer dl{
    width:1000px;
    background: url(../img/news_dotted_line.gif) repeat-x;
    background-position: top;
}

#correnctListContainer dl{
    margin-bottom: 70px;
}

#informationListContainer ul{
    width:301px;
    background: url(../img/news_dotted_line.gif) repeat-x;
    background-position: top;
    float: left;
    margin-left: 32px;
}

#informationListContainer ul:first-child{
    margin-right: 0;
}

#newsListContainer dt, #correnctListContainer dt, #informationListContainer dt{
    font-size: 10px;
    height: 58px;
    line-height: 58px;
    float:left;
    clear:both;
    width:124px;
    background: url(../img/news_dotted_line.gif) repeat-x;
    background-position: bottom;
}

#newsListContainer dd, #correnctListContainer dd, #informationListContainer dd{
    position: relative;
    font-size: 13px;
    height: 58px;
    line-height: 58px;
    float:right;
    width:875px;
    background: url(../img/news_dotted_line.gif) repeat-x;
    background-position: bottom;
}

#informationListContainer li{
    font-size: 13px;
    height: 58px;
    line-height: 58px;
    width:313px;
    background: url(../img/news_dotted_line.gif) repeat-x;
    background-position: bottom;
}

#informationListContainer dd img ,#informationListContainer li img{
    width: 35px;
    height: auto;
    margin-top: 12px;
    margin-right: 10px;
}

#genreList img{
    margin-right: 15px !important;
}

#newsListContainer dd a, #correnctListContainer dd a, #recruitListContainer dd a, #informationListContainer dd a, #informationListContainer li a{
    display: block;
}

#newsListContainer dd a:hover, #correnctListContainer dd a:hover, #recruitListContainer dd a:hover, #informationListContainer dd a:hover{
    color: #7f7f7f;
    background: url(../img/news_list_arrow.svg) no-repeat;
    background-position:846px 26px ;
}

#informationListContainer li a:hover{
    color: #7f7f7f;
    background: url(../img/news_list_arrow.svg) no-repeat;
    background-position:264px 26px ;
}

#newsListContainer a.moreBtn, #newsListContainer a.listBtn, #recruitListContainer a.submitBtn, #recruitListContainer a.backBtn,#informationListContainer p.barBtn, #informationListContainer a.moreBtn, #correnctListContainer a.moreBtn{
    width: 100%;
    height: 58px;
    line-height: 58px;
    display: block;
    border: 1px solid #dcdcdc;
    text-align: center;
    margin: 58px auto 100px auto;
    font-weight: bold;
    font-size: 12px;
    user-select: none;
}


#informationListContainer a.moreBtn {
    margin-bottom: 100px !important;
}

#newsListContainer a.moreBtn {
    margin-bottom: 0 !important;
}

#informationListContainer p.barBtn{
    margin-top: 80px !important;
    margin-bottom: 58px !important;
}

#newsListContainer a.moreBtn:hover, #newsListContainer a.listBtn:hover,#recruitListContainer a.submitBtn:hover, #recruitListContainer a.backBtn:hover, #informationListContainer a.barBtn:hover, #informationListContainer a.moreBtn:hover, #correnctListContainer a.moreBtn:hover{
    width: 100%;
    height: 58px;
    line-height: 58px;
    display: block;
    border: 1px solid #dcdcdc;
    background-color: #dcdcdc;
    text-align: center;
    margin: 58px auto 100px auto;
    font-weight: bold;
    font-size: 12px;
    cursor: pointer;
}

/*----------------------------------- recruit -------------------------------------*/

#recruitListContainer .caption{
    margin-bottom: 90px;
}

#recruitListContainer .caption h3{
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 35px;
}

#recruitListContainer .caption p{
    font-size: 14px;
    line-height: 28px;
}

#recruitListContainer .caption p.result{
	text-align:center;
}

#recruitListContainer h4{
    font-size: 14px;
    font-weight: bold;
}

#recruitListContainer .detail{
    margin-bottom: 140px;
}

#recruitListContainer .detail p{
    font-size: 14px;
    line-height: 28px;
    margin-bottom: 25px;
}

#recruitList {
    background: url(../img/news_dotted_line.gif) repeat-x;
    background-position: top;
}

#recruitList dl {
    display: flex;
    width: 100%;
    padding: 18px 0;
    background: url(../img/news_dotted_line.gif) repeat-x;
    background-position: bottom;
}

#recruitList dt {
    width: 25%;
    font-size: 13px;
}

#recruitList dd {
    width: 75%;
}

#recruitList .name input {
    width: 30%;
}

#recruitList .mailaddress input {
    width: 97.5%;
}

#recruitList input[type="text"] {
    padding: 5px;
    border: 1px solid #a4a4a4;
    box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.05) inset;
}

#recruitList textarea {
    padding: 5px;
    line-height: 14px;
    border: 1px solid #a4a4a4;
    box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.1) inset;
    width: 97.5%;
}


/*----------------------------------- foreignrights -------------------------------------*/

#foreignrightsContainer .caption {
    margin-bottom: 85px;
}

#foreignrightsContainer .caption p {
    font-size: 14px;
    line-height: 28px;
}

#foreignrightsContainer .detail {
    width: 100%;
}

#foreignrightsContainer .detail h4 {
    font-weight: bold;
    font-size: 14px;
    line-height: 28px;
    margin-bottom: 10px;
}

#foreignrightsContainer .detail p {
    font-size: 14px;
    line-height: 28px;
    margin-bottom: 20px;
}

#foreignrightsContainer .catalog { 
    display:inline-block;
    margin-bottom: 120px;
}

#foreignrightsContainer .catalog a {
    display: block;
}

#foreignrightsContainer .catalog a:hover {
    opacity: 0.7;
}

#foreignrightsContainer .catalog img {
    width: 200px;
    margin-bottom: 30px;
}

#foreignrightsContainer .catalog .text {
    vertical-align: middle;
    font-weight: bold;
    font-size: 14px;
    line-height: 34px;
}

#foreignrightsContainer .catalog .icon {
    width: 35px;
    height: auto;
    margin-right: 6px;
    margin-bottom: 0;
}

#foreignrightsContainer .inquiry {
}

#foreignrightsContainer .inquiry h4 {
    font-weight: bold;
    width: 100%;
    font-size: 12px;
    margin-bottom: 10px;    
}

#foreignrightsContainer .inquiry p {
    font-size: 12px;
    line-height: 24px;
}

#foreignrightsContainer .inquiry p a {
    text-decoration: underline;
}

#foreignrightsContainer .inquiry p a:hover {
    color: #7f7f7f;
    text-decoration: none;
}

/*--------------------------------- form関連 ----------------------------------*/
#formWrap{
	width: 700px;
	margin: 227px auto 100px;
}

#formWrap h3 {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    margin: 52px auto 70px auto !important;
}

#formWrap #caption {
    font-size: 12px;
    line-height: 24px;
    margin: 0 auto 30px;
}

#formWrap .formTable {
    font-size: 12px;
	width: 100%;
	margin: 0 auto 30px;
	border-collapse: collapse;
}

table.formTable td,table.formTable th {
	border: 1px solid #ccc;
	padding: 10px;
}

table.formTable th {
	width: 30%;
	font-weight: normal;
	background :#efefef;
	text-align: left;
}

#formWrap h4 {
    width: 100%;
    font-weight: bold;
    font-size: 18px;
    line-height: 36px;
    margin-bottom: 30px;
}

p.error_messe {
    margin: 5px 0;
    font-size: 14px;
    line-height: 28px;
	color: #ff0000;
}

#formWrap #btns #sendBtn{
	margin-right: 20px;
}

#formWrap #sendBtn, #formWrap #backBtn{
	width: 115px;
    height: 40px;
    border-radius: 0 !important;
    border: 1px solid #dcdcdc;
    background-color: #dcdcdc;
    text-align: center;
    font-weight: bold;
    font-size: 12px;
    outline: none;
}

#formWrap #sendBtn:hover, #formWrap #backBtn:hover {
    border: 1px solid #666;
    background-color: #fff;
}

#informationListContainer .caption{
    text-align: center;
    font-size: 13px;
    line-height: 26px;
    font-weight: bold;
    margin-bottom: 75px;
}

#informationListContainer .newListImage{
    text-align: center;
    margin-bottom: 80px;
}

@media screen and (max-width: 1024px) {
	#formWrap {
		width: 100%;
		margin: 195px auto 70px auto !important;
	}

	#formWrap h3{
        font-size: 20px;
        margin: 25px auto 50px auto !important;
	}
	
	#formWrap .formTable{
		width: 90% !important;
		margin: 0 auto 30px;
    }
    
    #formWrap #caption {
        width: 90%;
    }

    #formWrap #btns #sendBtn{
        margin-right: 10px;
    }

    #formWrap h4 {
        width: 90%;
        font-size: 14px;
        line-height: 28px;
        margin-bottom: 30px;
    }

    #newsListContainer, #informationListContainer, #correnctListContainer, #recruitListContainer, #foreignrightsContainer {
        width: 100%;
        margin: 100px auto 70px auto !important;
    }

    .top #newsListContainer {
        margin-bottom: 70px !important;
    }

    #informationListContainer, #correnctListContainer {
        margin-bottom: 70px !important;
    }

    .top #newsListContainer h2, .top #correnctListContainer h2, .top #recruitListContainer h2, .top #informationListContainer h2 {
        margin: 25px auto 50px auto !important;
    }

    #newsListContainer h2, #correnctListContainer h2, #recruitListContainer h2, #foreignrightsContainer h2 {
        font-size: 20px;
        margin: 200px auto 40px auto !important;
    }

    #informationListContainer h2 { /*サブメニューあり*/
        font-size: 20px;
        margin: 230px auto 40px auto !important;
    }

    #informationListContainer h3 {
        font-size: 15px;
        margin: 0px auto 50px auto !important;
    }


    /*----------------------------------- recruit -------------------------------------*/
    #recruitListContainer .caption {
        width: 90%;
        margin: 0 auto 45px auto;
    }

    #recruitListContainer .detail {
        width: 90%;
        margin: 0 auto 45px auto;
    }

    #recruitList {
        width: 90%;
        margin: 0 auto;
    }

    #recruitList dl {
        display: flex;
        flex-wrap:wrap;
        padding: 18px 0;
    }
    
    #recruitList dt {
        width: 100%;
        font-size: 13px;
        margin-bottom: 10px;
    }
    
    #recruitList dd {
        width: 100%;
    }

    #recruitList .name input {
        width: 50%;
    }


    /*----------------------------------- foreignrightsContainer -------------------------------------*/
    #foreignrightsContainer .caption {
        width: 90%;
        margin: 0 auto 45px auto;
    }

    #foreignrightsContainer .caption p {
        font-size: 12px;
        line-height: 24px;
    }

    #foreignrightsContainer .detail {
        width: 90%;
        margin: 0 auto 45px auto;
    }

    #foreignrightsContainer .detail h4 {
        font-size: 12px;
        line-height: 24px;
        margin-bottom: 10px;
    }

    #foreignrightsContainer .detail p {
        font-size: 12px;
        line-height: 24px;
        margin-bottom: 20px;
    }

    #foreignrightsContainer .catalog { 
        margin-bottom: 60px;
    }

    #foreignrightsContainer .catalog img {
        width: 100px;
        margin-bottom: 15px;
    }

    #foreignrightsContainer .catalog .text {
        font-size: 10px;
        line-height: 24px;
    }

    #foreignrightsContainer .catalog .icon {
        width: 30px;
        margin-right: 4px;
    }

    #foreignrightsContainer .inquiry h4 {
        margin-bottom: 0px;
    }

    #foreignrightsContainer .inquiry p {
        line-height: 20px;
    }

    #correnctListContainer h2 {
        font-size: 20px;
        margin: 200px auto 40px auto !important;        
    }
    
    #informationListContainer h3#page2, #informationListContainer h3#page3 {
        margin: 45px auto 15px auto !important;
    }

    #informationListContainer .caption {
        font-size: 10px;
        line-height: 20px;
        margin-bottom: 45px;
    }

    #genreList {
        width: 90%;
        margin: 0 auto;
    }

    .genreListContainer {
        float:left;
        box-sizing: border-box;
        width: 50%;
        padding-right: 25px;
    }
    
    .genreListContainer .itemWrap dd {
        display: flex;
        width: 100% !important;
    }

    .genreListContainer .itemWrap dd a {
        display: block;
        width: 100%;
    }

    .genreListContainer .itemWrap dd img {

    }

    .genreListContainer .itemWrap dd .text {
        width: 67% !important;
    }

    #informationListContainer .newListImage{
        text-align: center;
        margin-bottom: 50px;
    }

    #informationListContainer .newListImage img {
        height: 50vw;
    }

    #informationListContainer dd{
        width: 100%;
    }

    #informationListContainer dd img ,#informationListContainer li img{
        display: inline-block;
        margin-top: 0;
        margin-right: 5px;
        vertical-align: middle;
        width: 4vw;
    }

    #informationListContainer .text {
        display: inline-block;
        font-size: 12px;
        vertical-align: middle;
        width: 78%;
    }

    #genreList img{
        margin-right: 10px !important;
    }

    #informationListContainer p.barBtn{
        margin-top: 25px !important;
        margin-bottom: 25px !important;
    }

    #newsListContainer dl, #correnctListContainer dl, #informationListContainer dl {
        width: 90%;
        margin: 0 auto;
    }

    #newsListContainer .itemWrap, #correnctListContainer .itemWrap, #recruitListContainer .itemWrap, #informationListContainer .itemWrap {
        display: flex;
        width: 100% !important;
        height: 100% !important;
        margin-top: -1px;
    }

    #newsListContainer dt, #correnctListContainer dt, #informationListContainer dt{
        font-size: 10px;
        line-height: 20px;
        width: 15%;
        height: auto;
        padding-top: 14px;
    }

    #newsListContainer dd, #correnctListContainer dd, #informationListContainer dd{
        font-size: 13px;
        line-height: 20px;
        width: 90%;
        height: 100%;
        padding: 14px 0;
    }

    #informationListContainer a.moreBtn {
        margin-bottom: 75px !important;
    }

    #newsListContainer a.moreBtn, #newsListContainer a.listBtn, #recruitListContainer a.submitBtn, #recruitListContainer a.backBtn,#informationListContainer p.barBtn, #informationListContainer a.moreBtn, #correnctListContainer a.moreBtn{
        width: 90%;
        height: 45px;
        margin: 30px auto 50px auto;
        line-height: 45px;
    }

    #newsListContainer a.moreBtn:hover, #newsListContainer a.listBtn:hover,#recruitListContainer a.submitBtn:hover, #recruitListContainer a.backBtn:hover,#informationListContainer a.barBtn:hover, #informationListContainer a.moreBtn:hover, #correnctListContainer a.moreBtn:hover{
        width: 90%;
        height: 45px;
        margin: 30px auto 50px auto;
        line-height: 45px;
    }
}

@media screen and (max-width: 767.98px) {
    #informationListContainer dd img ,#informationListContainer li img{
        display: inline-block;
        margin-top: 0;
        margin-right: 5px;
        vertical-align: middle;
        width: 8vw;
    }

    #informationListContainer .newListImage img {
        height: 50vw;
        border: 1px solid #ff0000;  
    }

    #newsListContainer dt, #correnctListContainer dt, #informationListContainer dt{
        font-size: 10px;
        line-height: 20px;
        width: 20%;
        height: auto;
        padding-top: 14px;
    }

    #newsListContainer dd, #correnctListContainer dd, #informationListContainer dd{
        font-size: 13px;
        line-height: 20px;
        width: 80%;
        height: 100%;
        padding: 14px 0;
    }
}