@charset "UTF-8";

@media all and (max-width: 767px) {

.sec{
	max-width: initial;
    max-width: auto;
	min-width: initial;
    min-width: auto;
    padding: 0 20px;
}
.sec-inner {
	width: auto;
}
ul{
	overflow: hidden;
}
li{
	margin: 0;
}
.col-3 li{
    width: 100%;
}
.col-2 li{
	width: 100%;
}
.col-3 li{
	width: 100%;
}
.col-4 li{
	width: 100%;
}
img{
	max-width: 100%;
}
.ttl h2{
	padding: 0;
}
.txt-ttl h2 {
    font-size: 17px;
}
.txt h2 {
    margin: 10px 0 10px 18px;
}
.txt-ttl h1 span {
    padding: 0;
}
.res-appear{
	display: block;
}
.res-disappear {
	display: none !important;
}
.sec-ttl .left{
	width: 100%;
	padding-top: 5px;
    padding-bottom: 5px;
}
.sec-ttl .right{
    width: 100%;
}
/*///////// header ///////////*/
.header-inner{
    top: 0px;
}
#nav{
	display: none;
}
#header-navi .wrap {
    height: 48px;
}
.h-img{
	margin-left: 0;
	padding: 5px 10px 5px;
	width: 42px;
	height: auto;
}
.logo {
    width: 85px;
    height: auto;
    padding: 6px;
	margin-left: auto;
}
.tr-logo {
    width: 34px;
}
.cpc-logo,
.cpm-logo {
    width: 52px;
}
#crumb li {
	margin: 0 1%;    
}
#crumb {
    padding-top: 75px;
}
/*/////////// nav /////////////*/
#common-navi .right-nav,  .authentic, #footer-top{
	display: none;
}
.statement #header-navi{
	display: block;
}
.contact #header-navi{
	display: block;
}
.wd #common-navi{
	display: block;
}
.wd .jpac-logo::before {
    position: relative;
    left: 0;
}
/*#common-navi .wrap nav.left-nav {
    margin-top: 0;
}*/
/*modal nav
---------------------------------------*/
#modal-menu-button{
	display: block;
}
#modal-navi {
    display: block;
	z-index: 2;
	background: #2f353f;
	opacity: 0.97;
}
#modal-menu-button{
	width: 30px;
    height: 22px;
    margin: 0 auto;
    position: fixed;
    cursor: pointer;
    top: 10px;
    right: 9px;
    z-index: 2;
	background:url(../../img/modal-btn-g.png);
	background-repeat: no-repeat;
	background-size: 95%;
}
/*/////////// slidemenu ////////////*/
.btnClose {
    cursor: pointer;
}
.slide-menu{
    position: fixed;
    top: 0;
    right: -280px;
    z-index: 3;
    width: 280px;
    height: 100%;
    background-color: #2f353f;
    text-align: center;
    overflow: auto;
}
.slide-menu a:hover, a:hover p{
	color: #353b47;
	opacity:.8;
}
.slide-menu a.btnClose:hover{
	color: #fff;
}
.shade{
    position: fixed;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    cursor: pointer;
    background-color: #333;
    background-color: rgba(0,0,0,.7);
}
.slide-menu li{
    line-height: 50px;
    display: block;
    width: 100%;
	margin-left: 0;
	margin-right: 0;
    border-top: 1px solid #494e59;
	border-bottom: 1px solid #2a2f38;
}
.slide-menu li a{
	line-height: 50px;
	display: block;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}
#modal-navi-01 li{
    background: #f5f5f5;
    border-top: 1px solid #d6d7da;
	border-bottom: 1px solid #fff;
}
#modal-navi-01 li.navtop, #modal-navi-02 li.navtop {
    background: #353b47;
    border-top: none;
    border-bottom: none;
    opacity: 1.0;
}
#modal-navi-02 li.navtop {
    background: #9bc551;
}
#modal-navi-01 li.navtop p, #modal-navi-02 li.navtop p{
	text-align: center;
	color: #fff;
	line-height: 180% !important;
}
#modal-navi .nav-border{
	width: 80%;
	margin: 0 auto;
}
.modal-menu li{
    line-height: 50px;
    display: block;
    width: 100%;
	margin-left: 0;
	margin-right: 0;
    border-top: 1px solid #494e59;
	border-bottom: 1px solid #2a2f38;
}
#modal-navi-02 li  {
	background: #353b47;
}
#modal-navi-02 li.ptl  {
	background:#2f353f;
}
#modal-navi-02{
	margin-bottom: 10px;
	text-align: center;
}
#modal-navi-02 p{
	color: #353b47;
}
.cp #modal-navi-02 .arrow-lr::before,
.cpm #modal-navi-02 .arrow-lr::before {
    border-color: #0064b4;
}
#modal-navi-02 .cpacppcpo p{
	background: #ee847e;
}
#modal-navi-02 .cpc p{
	background: #81cef1;
}
#modal-navi-02 .jpac p{
	background: #353b47;
}
#modal-navi-02 li p{
	line-height: 50px;
}

#modal-navi-02 li p{
	color: #fff;
}
#modal-navi-02 li a{
	padding-bottom: 0;
}
#page-navi{
	display: none !important;
}
#modal-navi-01 li.mo {
    text-align: center;
    color: #fff;
    background: #F99615;
}
.cpm #modal-navi-02 li.navtop{
	background: #77b1d8;
}
/*//////////////////// main  ////////////////////*/
#mv {
    height: auto;
}
#mv .sec-ttl {
    margin: 0px auto;
}
#mv .mv-left, #mv .mv-right{
	float: none;
	text-align: center;
	margin: 20px 0;
}
#mv img {
	margin-top: 30px;
	margin-bottom: 30px;
}
#mv h2{
	font-size: 20px;
}
#mv p{
	font-size: 16px;
}
#mv .wrap {
	padding: 30px 0;
}
/*/////////////// txt-ttl ///////////////////*/
.txt-ttl h1 span {
    display: inline-block;
}
/*////////////////// box ////////////////////*/
.box p {
	padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 10px;
}
.jp #solutions .box p{
	margin-bottom: 0;
}
/*/////////////// page-top //////////////////*/
#page-top .sec-ttl .left{
	width: 100%;
	padding-top: 5px;
    padding-bottom: 5px;
}
#page-top .sec-ttl .right{
    width: 100%;
}
/*//////////// page-top button //////////////*/
.page-top a {
    width: 60px;
    height: 35px;
}
/*//////////// blog //////////////*/
#mv img{
	width: 80%;
	height: 80%;
}
#mv h2{
	font-size: 18px;
}
.info img{
	width: 50%;
}
#blog .col-2 li{
	width: 98%;
}

}
@media all and (min-width: 768px) {
#schedule table tbody th.res-appear{
	display: none;
}
#faq table.tb-under th.res-appear{
	display: none;
}
}

@media screen and (min-width:480px) and (max-width:768px) {
.learnmore .reason .col-4 li{
	width: 48%;
	margin:0 1%;
}
.learnmore .reason .col-4 li:nth-child(1) p,
.learnmore .reason .col-4 li:nth-child(2) p{
	height: 120px;
}
li {
    margin: 0 1%;
    float: left;
}

}
@media screen and (min-width:769px) and (max-width:980px) {
	#about-jcpc ul.col-3 li .txt p{
		height: 65px;
	}
}
@media all and (max-width: 980px) {
img{
	max-width: 100%;
}	
#download textarea {
	max-width: 100%;
}
}
@media all and (max-width: 480px) {
.c3 #mv .sub-ttl h1 {
    font-size: 25px; 
}
.cp #mv .sub-ttl h1,
.cpm #mv .sub-ttl h1 {
    font-size: 21px;
}
}

@media all and (max-width: 414px) {
.cp #mv .sub-ttl h1,
.cpm #mv .sub-ttl h1 {
    font-size: 20px;
	text-align: left;    
}
.jp #mv .main-ttl {
    padding-top: 10px;
    padding-bottom: 10px;
}
.jp #mv .sub-ttl {
    padding-top: 10px;
    padding-bottom: 10px;
}
.jp #mv .sub-ttl h1 {
    font-size: 25px;
}
.jp #mv .catch-cp {
    padding-top: 11px;
    padding-bottom: 11px;
}
.jp #mv .sub-ttl p span {
    letter-spacing: 2px;
    display: inline;
}
.c3 #mv .sub-ttl h1 {
    font-size: 21px;  
}
.c3 #mv .sub-ttl span{
	font-size: 30px;
	font-weight: 700;
	line-height: 140%;
}
.c3 #mv .catch-cp p {
    font-size: 16px;
    line-height: 160%;
}
.cp #mv .sub-ttl,
.cpm #mv .sub-ttl {
    padding-top: 20px;
    padding-bottom: 25px;
}
.cp #mv .main-ttl,
.cpm #mv .main-ttl {
    padding-top: 35px;
    padding-bottom: 35px;
}
.cp #mv .catch-cp,
.cpm #mv .catch-cp {
    color: #fff;
    padding-top: 25px;
    padding-bottom: 25px;
}
.c3 #mv .sub-ttl {
    padding-top: 21px;
    padding-bottom: 21px;
}
}
@media screen and (min-width:376px) and (max-width:414px) {
/*///////// contact /////////*/
#contact .answer input {
    width: 91%;
}
#contact td.qualification textarea,
#contact td.answer textarea {
    width: 85.5%;
}
}
@media all and (max-width: 375px) {
.jp #mv .catch-cp h2 {
    font-size: 14px;
}
.jp #mv .catch-cp {
    padding-top: 14px;
    padding-bottom: 14px;
}
.cp #mv .sub-ttl h1,
.cpm #mv .sub-ttl h1 {
    font-size: 16px;   
}
.cp #mv .main-ttl,
.cpm #mv .main-ttl {
    padding-top: 35px;
    padding-bottom: 35px;
}
.cp #mv .sub-ttl,
.cpm #mv .sub-ttl {
    padding-top: 40px;
    padding-bottom: 30px;
}
.c3 #mv .sub-ttl h1 {
    font-size: 19px;  
}
.c3 #mv .catch-cp p {
    font-size: 14px;
}
.c3 #mv .sub-ttl {
    padding-top: 18px;
    padding-bottom: 25px;
}
.c3 #mv .catch-cp {
    padding-top: 25px;
    padding-bottom: 15px;
}
.c3 #mv .main-ttl {
    padding-top: 32px;
    padding-bottom: 30px;
}
.tr #mv .main-ttl h1 {
    font-size: 60px;
}
.tr #mv .catch-cp p {
    font-size: 14px;
}
.tr #mv .sub-ttl h1 {
    font-size: 18px;
}
.tr #mv .main-ttl p span {
    letter-spacing: 30px;
}
.tr #mv .col-2 .inner {
    height: 155px;
    width: 155px;
}
}
@media screen and (min-width:350px) and (max-width:375px) {
/*///////// contact /////////*/
#contact .answer input {
    width: 90%;
}
#contact td.qualification textarea,
#contact td.answer textarea {
   width: 83.5%;
}
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
::i-block-chrome, .active #bar01 {
	-webkit-transform:translate(0px, 10px) rotate(45deg);
}
::i-block-chrome, .active #bar03{
	-webkit-transform:translate(0px, -10px) rotate(-45deg);
}
}

@media all and (max-width:1280px) {
.page-top {
    position:fixed;
}

.page-top a {
    margin-left: 0 !important;
    right: 30px;
	left: auto;
}
}
@media all and (min-width:768px) {
.slide-menu{
	display: none;
}
}