@charset "utf-8";

/*----------------------------------------------------
  common
----------------------------------------------------*/

body {
font-family: "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
}

footer,
section{
    max-width: 1180px;
    margin: 0 auto;
}
.pc{
    display:block;
}
sup {
	font-size: 70%;
	vertical-align: top;
	position: relative;
	top: -0.1em;
}

@media screen and (min-width:768px) and ( max-width:1024px){
footer,
section{
    max-width: 1180px;
    max-width: 96%;
    margin: 0 auto;
}

}


.cf{
    max-width: 1180px;
    display:flex;
    padding:1em 0;
    align-items: flex-end;
}
.cf_left,
.cf_right{
    display:flex;
    align-items: flex-end;
    
}
.cf_right img,
.cf_right{
    display:flex;
    align-items: flex-end;
    justify-content: flex-end;
}

.subtitle{
    display:block;
    font-size:smaller;
}
h2{
    font-size:28px;
    color:#001a51;
    text-align: center;
}
section{
    margin-bottom:6em;
}
.photo img{
    width:100%;
}
.numbr{
    
}


/*----------------------------------------------------
  header
----------------------------------------------------*/



header{
    top:0;
    background-color: rgba(255,255,255,0.9);
    position: fixed;
    width:100%;
    z-index: 1000;
}


header div {
    width: 100%;
    margin: 0 auto;
}
header div #logo img,
header div #logo2 img {
   height: 75px;
   width: auto;
   -webkit-backface-visibility: hidden;
}

#logo2{
    text-align: right;
}
.t_right{
    text-align: right;
    font-size:16px
}

.cf_right #logo2 img{
    height: 52px;
}


.reason_jc h2{
    font-size:28px;
    font-weight: bold;
    padding-bottom: 0.2em;
}
.reason_jc{
    position: relative;
    text-align: center;
    margin:2em auto 4em;
    border-bottom:4px dotted #001a51;
    display: inline-block;
}

.reason_jc_area{
    text-align: center;
}
.reason_jc_title{
    max-width: 960px;
    margin: 0 auto;
    font-size:22px;
    color:#001a51;
    text-align: left;
    position:relative;
    padding-left:1.8em;
    font-weight: bold;
}
.reason_jc_title::before{
    position:absolute;
	content:"";
	display:inline-block;
	width:1.5em;
	height:1.5em;
	background:url(../img/reason_jc_title_icon1.png) no-repeat;
	background-size:contain;
    left:0;
    top:0.1em;
}
.reason_jc_title.t2::before{
    background:url(../img/reason_jc_title_icon2.png) no-repeat;
    background-size:contain;
}
.reason_jc_title.t3{
    /*padding-left:0;
    text-align: center;
    border-bottom:1px solid #001a51;
    display:inline-block;
    padding-bottom: 0.2em;
    padding-top:1em;
    font-size:26px;*/
}
.reason_jc_title.t3::before{
    background:url(../img/reason_jc_title_icon3.png) no-repeat;
    background-size:contain;
}



.reason_jc_contents{
    display: flex;
    /*max-width: 960px;*/
    max-width: 1030px;
    margin: 0 auto;
}
.reason_jc_contents div{
    border:8px solid #008fd4;
    padding:1em;
    margin:1em;
    width: 33%;
    font-size: 18px;
    min-height: 5em;
    /*background: linear-gradient(#fff,#e3effa);*/
    font-weight: bold;
    /*background-image: url(../img/triangle_blue.png) no-repeat;*/
    
    background:url(../img/triangle_blue.png) ,linear-gradient(#fff,#e3effa);
    background-repeat: no-repeat;
    flex-direction: column;
    justify-content: center;
    display: flex;
}



.reason_jc_contents.r2 div{
    border:8px solid #c1c3c3;
    background:url(../img/triangle_gray.png) ,linear-gradient(#fff,#f4f5f5);
    background-repeat: no-repeat;
    flex-direction: column;
    justify-content: center;
    display: flex;
}

.reason_jc_contents div.wide{
    width: auto;
    min-height: 0;
}
.reason_jc_contents div.simple {
    width: auto;
    border: 0;
    background: none;
    text-align: left;
    font-weight: normal;
    font-size: 0.9rem;
    vertical-align: bottom;
    justify-content: flex-end;
    min-height: 0;
}

div.vid_contents {
max-width: 1000px;
/*text-align: center;
margin: 30px auto;
padding: 0;
background: #fff;*/


text-align: center;
margin: 65px auto 0;
padding: 4px 4px 0px 4px;
background: #c1c3c3;
display: inline-block;


}
video.vid_main {
width: 100%;
max-width: 1000px;/*PC版での最大幅*/
}


.vid_contents {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.vid_contents iframe {
  width: 100%;
  height: 100%;
}





@media screen and (max-width: 767px){
.reason_jc_contents div.simple {
    min-height: 0;
}

div.vid_contents {
    width: auto;
    padding: 5px 5px 0px 5px;
    margin: 2px 0 0;
    display: block;
}


}



.circle{
    background: url(../img/fkds.png) 0 0 / contain no-repeat;
    width: 180px;
    height: 180px;
    position: absolute;
    top:-105px;
    left:-190px;
    -webkit-backface-visibility: hidden;
}


/*----------------------------------------------------
  main_visual
----------------------------------------------------*/

.main_visual_jc {
    margin: 0 auto;
    background: url(../img/bg_jc_01.jpg) no-repeat center top;
    width: 100%;
    height: 750px;
    /*max-width: 1180px;*/
    background-size: cover;
    background-position: 50%;
    margin-top:110px;
}
section.main_visual_jc{
    max-width:inherit;
}

.main_visual_jc .text{
    max-width: 1180px;
    margin:0 auto;
    padding: 3em;
}
.main_visual_jc .text h1{
    font-size: 42px;
}

.main_visual_jc div.title_txt{
    color: white;
    font-size: 20px;
    text-align: left;
    max-width:1180px;
    margin: 1em auto;
    line-height: 1.8em;
}
.main_visual_jc h1 {
    color: white;
    font-size: 36px;
    text-align: left;
}
/*
20230909
*/
@media screen and (min-width: 1025px){
.title_left{
    min-width: 22em;
}
}
/*----------------------------------------------------
  support_jc
----------------------------------------------------*/

.support_jc_p1{
    display: flex;
    background-image: url(../img/support_bg.jpg);
    background: url(../img/support_bg.jpg) no-repeat;
}
.support_jc_left{
    width:48%;
    padding: 3em;
}
.support_jc_left.p2{
    padding: 0 3em 3em 3em; 
}
.support_jc_left .text{
    margin:1em 0;
    color: #001a51;
    font-size:20px;
    font-weight: bold;
    padding: 3em;
}
.support_jc_left .text.zu{
    padding: 0;
}
.support_subtitle{
    background-color: #0096b2;
    color:white;
    font-weight: bold;
    padding:0.2em 0.8em;
    display:inline-block;
    font-size: 20px;
    min-width: 270px;
    text-align: center
}
.support_text{
    color: #001a51;
    font-size: 20px;
    font-weight: bold;
    padding:1em 0;
    position: relative;
    padding-left:1em;
}
.support_text:before{
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 15px;
  border-color: transparent transparent transparent #0096b2;
  position: absolute;
  top: 1.6em;
  left: 0;
  margin-top: -6px;
}
.support_text.t2:before{
  top: 2em;
}
.support_text .big{
    font-size:24px;
    font-weight: bold;
}
.support_text .notice{
    font-size:smaller;
    font-weight: bold;
}

.support_jc_right{
    width:52%;
    padding: 3em;
    text-align: center;
}
.sticky_title {
    border-left: solid 8px #001a51;
    padding: 0 0.5em 0.1em;
    margin:0 auto 1em;
    color:#001a51;
    font-size:18px;
    font-weight: bold;
    display: inline-block;
    text-align: left;
}
.support_jc_right .figure img{
    width: 100%;
    max-width: 513px;
}
.support_jc_p2{
    display: flex;
    align-items: flex-start;
}
.support_jc_left.p2{
    flex:7;
}
.support_jc_right.p2{
    flex:2.5;
    border: solid 8px #b01f24;
    border-radius: 20px;
    text-align: left;
    font-size:24px;
    padding:1em;
    color:#001a51;
    font-weight: bold;
    background-color: #f9efea;
}
.support_jc_left.p2 table{
    width: 100%;
    font-size:22px;
}

.support_jc_left.p2 table th{
    background-color: #b01f24;
    color: white;
    text-align: center;
    font-weight: bold;
}


.support_jc_left.p2 table tr,
.support_jc_left.p2 table td{
    /*border:solid 1px black;*/
    padding:0 0.5em;
    vertical-align: middle;
}
.support_jc_left.p2 table tr{
    border-bottom:solid 1px black;
}
.support_jc_left.p2 table tr:last-child{
    border-top:solid 1px black;
}
.support_jc_left.p2 table tr.noborder{
    border-bottom:0px none;
}

.support_jc_left.p2 table td:nth-child(2){
    text-align: center;
    border-left: solid 1px black;
    width: 40%;
    color:#b01f24;
    
    letter-spacing: 0.0em;
    font-size: 26px;
    font-weight: 600;
}
.support_jc_left.p2 table th:nth-child(2){
    border-left: solid 1px white;
}
.support_jc_left.p2 table td:nth-child(1){
    
}

/*
.support_jc_left.p2 table tr:nth-child(2n+1)
*/

.support_jc_left.p2 table tr:nth-child(even){
    background-color: #f4f5f5;
}

.support_jc_left.p2 table tr.noborder,
.support_jc_left.p2 table td.noborder{
    border: 0px none;
}

.underline{
    text-decoration: underline;
    font-weight: bold;
}
.underline.red{
    color:#b01f24;
    font-size:28px;
    font-weight: bold;
}
.underline.red.big{
    color:#b01f24;
    font-size:34px;
    font-weight: bold;
}

/*----------------------------------------------------
  jc_card_lineup
----------------------------------------------------*/

.card_detail_all{
    background-color: #f4f5f5;
}

.service_introduction h2,
.jc_card_lineup h2{
    font-size:36px;
    font-weight: bold;
}

.jc_card_lineup .subtitle{
    text-align: center;
}

.service_introduction .subtitle,
.jc_card_lineup .subtitle{
    font-weight: bold;
    font-size:24px;
    letter-spacing: -0.3px;
}


@media screen and (min-width: 1025px){
.jc_card_lineup h3::after {
  content: '';
  display: block;
  position: absolute;
  left:15em;
  top: 10px;
  height: 0;
  width: 1000px;
  /*border-bottom: 100px solid #f4f5f5;*/
  border-left: 50px solid transparent;
}

}

.heading,
.jc_card_lineup h3.first{
    margin:1.5em 0 ;
}
.heading.sec{
    margin:4em 0 ;
}
.jc_card_lineup h3{
    font-size:22px;
    text-align: left;
    color:white;
    background-color: #001a51;
    margin:2.5em 0 1.5em;
    padding:0.25em;
    letter-spacing: 0.2em;
    position: relative;
    overflow: hidden;
    text-align: center;
}
.jc_card_lineup .c2 h3{
    background-color: #0096b2;
}
.jc_card_lineup .c3 h3{
    background-color: #0090d5;
    padding: 0.5em;
}
.jc_card_lineup h3 .numbr{
    font-size:24px;
}


/* 20250312 */
.heading h2 {
  position: relative;
  height: 50px;
  margin-right: 100px;
  /*padding: 1.5rem 2rem 0 2rem;*/
  padding: 0;
  word-break: break-all;
  color: #fff;
  background: #001d4e;
  width: 50%;
  font-size: 1.4rem;
  font-weight: normal;
  line-height: 2em;
  text-align: left;
  padding-left: 0.5em;
}




.heading h2:after {
  position: absolute;
  top: 0;
  right: -50px;
  width: 0;
  height: 0;
  content: '';
  border-width: 50px 50px 0 0;
  border-style: solid;
  border-color: #001d4e transparent transparent transparent;
}

.heading h2 span {
  font-size: 40px;
  font-size: 1rem;
  position: absolute;
  top: 0;
  /*right: -100px;*/
  /*right: -55%;*/
  left: 107%;
  display: block;
  padding-top: 3px;
  padding-left: 16px;
  color: #000;
  line-height: 2.9em;
  width: 80%;
}


.heading{
    background-color: #eceeee;
    border-top: solid 6px #001d4e;
    border-bottom: solid 6px #eceeee;
}


.heading.sec h2{
    background: #0096b2;
    /*margin: 2.5em 0 1.5em;*/
}
.heading.sec h2:after {
  border-color: #0096b2 transparent transparent transparent;
  
}
.heading.sec{
    background-color: #eceeee;
    border-top: solid 6px #0096b2;
    border-bottom: solid 6px #eceeee;
}
.heading.sec h2 {
    width: 33%;
    }
.heading.sec h2 span {
    right: -80%;
    }





@media screen and (max-width: 767px){
.heading h2 {
    height: auto;
    line-height: 1.5em;
}
.heading h2 span {
        width: 95%;
        line-height: 1.5em;
        top: 2em;
        font-size: 0.7em;
}
    
.heading h2:after {
    right: -2em;
    top: 0;
    border-width: 4.5em 2em 0 0;
    
}
.heading.sec h2:after {
    border-width: 3em 2em 0 0;
}


.heading.sec h2 {
    width: 36%;
}
.heading.sec h2 span {
        width: 100%;
        line-height: 1.5em;
        top: 0.5em;
        left: 115%;
        font-size: 0.7em;
}




}





.card_detail_container,
.card_description,
.card_detail{
    display: flex;
}
.card_detail{
    min-height: 17em;
}
.last .card_detail{
    min-height: inherit;
}
.cardarea{
    display: flex;
}


.card_description{
    width: 100%;
}
.card_description .notice{
    font-size:smaller;
    /*margin-top:.2em;*/
	padding-left:1em;
	text-indent:-1em;
}
.card_description table{
    width: 100%;
    font-size:16px;
    background-color: white;
    margin-top:1em;

}

.card_description .table_area{
    flex-direction: column;
    justify-content: center;
    display: flex;
    width: 100%;
}

.card_description table th{
    background-color: #b01f24;
    color: white;
    text-align: center;
    font-weight: bold;
}
.card_description table tr,
.card_description table td{
    /*border:solid 1px black;*/
    padding:0 0.5em;
    
}
.card_description table tr{
    border-top:solid 1px black;
    border-bottom:solid 1px black;
}
.card_description table tr:last-child{
    border-top:solid 1px black;
}
.card_description table td:nth-child(1){
    white-space: nowrap;
    border-right:solid 1px black;
}

.last .card_face{
    /*flex:2;*/
}
.last .card_text{
   /* flex:2.5;*/
}
.last .card_description{
    flex:4;
}
.last .card_description table{
   margin-top:0;
}



.card_face,
.card_text{
    
}
.card_text{
    margin:0 1em;
}
.card_face img{
    max-width:280px;
}


/*.card_face img{
    max-width:280px;
    width: 100%;
}*/

.card_text .title{
    font-size:24px;
    font-weight: bold;
    /*border-bottom: 1px solid;*/
    width: 100%;
}
.card_text .title img{
    max-width: 233px;
    width: 100%;
}
.last .card_text .title img{
    max-width: 373px;
}


.card_text .title2{
    font-size:19px;
    font-weight: bold;
    margin:1em 0
}
.contact_us{
    font-size:16px;
    margin-bottom:1em;
    padding-left:1em;
    text-indent:-1em;
    font-weight: bold;
}


h3{
    text-align: center;
    font-size:28px;
}
.card_container{
    width: 47%;
    margin:2% 2%;
}
.card_container:nth-child(2){
    margin:2% 2% 2% 0;
}
.card_container:first-child{
    border-right: 4px dotted #c1c3c3;
    padding-right: 2%;
}


.card_container.last{
    width: 100%;
    border-right: 0 none;
    padding-right: 0;
}


a.application_button{
    color:white;
    padding:1em 1.5em;
    border-radius: 10px;
    text-decoration: none;
    font-size:18px;
    margin: 0 0 0 0;
    display: inline-block;
    background: linear-gradient(#164cc0,#001a51);
}


.description_bottom_part{
    text-align: center;
    border:black solid 1px;
    width: 99%;
    padding:0.2em 0;
    font-size:18px;
    margin: 1.5em auto;
    letter-spacing: 0.2em;
}


.contact_in_call{
    text-align: center;
    /*border:black solid 1px;*/
    width: calc(100%-2em);
    color: white;
    background-color: #0090d5;
    padding: 1.8em 1em;
    font-size:26px;
    text-align: center;
    
    outline : 1px solid #fff;
    outline-offset : -10px;
}
.contact_in_call h4{
    font-size:28px;
    margin-bottom:0.2em;
}

/*----------------------------------------------------
  joy_voice
----------------------------------------------------*/
.joy_voice{
    background-color: #f4f5f5;
    padding:1.5em 0;
}
.joy_voice_content{
    padding:2em;
}
.joy_voice h3{
    text-align: left;
    color:#005aa1;
    /*border-left: 16px solid #005aa1;*/
    /*padding-left:1em;*/
    font-weight: bold;
    font-size:32px;
    /*margin:1em 0;
    display: block;*/
    margin:0 1.5em;
}

.joy_voice_content{
    display: flex;
}
.joy_voice_left,
.joy_voice_right{
    width:50%;
    font-size:18px;
    padding:0 1.5em;
}
.joy_voice_left{
    border-right: 1px dotted;
}
.joy_voice_content img{
    float:right;
    padding: 0 1em;
}
.joy_voice_content .case{
    background-color: #005aa1;
    padding:0.2em 0.5em;
    display: inline-block;
    color: white;
    font-size:22px;
}
.joy_voice_content .subtitle{
    display: flex;
}
.joy_voice_content .name{
    font-size:22px;
    padding:0.2em 0;
    border-bottom:1px solid;
    margin-left:1em;
    font-weight: bold;
}
.joy_voice_content .text{
    margin-top:1em;
    line-height: 1.8em;
    font-size:18px;
}


/*----------------------------------------------------
  service_introduction
----------------------------------------------------*/

.service_introduction h3.top{
margin:1em 0 0;
padding:0 5em;
display: flex;
align-items: center;
color:#001a51;
font-weight: bold;
}
.service_introduction h3.top:before,
.service_introduction h3.top:after {
border-top: 2px solid #001a51;
content: "";
flex-grow: 1;
}
.service_introduction h3.top:before {
margin-right: 1rem;
}
.service_introduction h3.top:after {
margin-left: 1rem;
}
.service_introduction .subtitle{
    text-align: center;
    margin: 0.5em 0 2em;
    font-size:20px;
    font-weight: bold;
}

.service_introduction .title2{
    background-color: #001a51;
    color: white;
    font-size:22px;
    border-left:solid 8px #c1c3c3;
    padding:0.3em 0.8em;
}

.title3{
    padding-top: 2em;
}
.title3 .square{
    background-color: #001a51;
    color: white;
    font-size: 22px;
    padding: 0.3em 0.4em;
    margin-right: 0.3em;
}



.service_introduction_content{
    margin-bottom:2em;
}

.service_introduction_content,
.service_introduction_inner{
    display: flex;
}
.service_introduction_inner{
    margin-top:2em;
    width:50%;
}
.service_introduction_text{
    width:60%;
    margin:1em;
    font-size:16px;
    position: relative;
}
.service_introduction_text .notice{
    font-size:15px;
    padding-left:1em;
    text-indent:-1em;
    margin-top:0.5em;
}

.service_introduction_text .title{
    margin:0 0 0.5em;
    font-size:22px;
    color:#001a51;
    font-weight: bold;
    display: inline-block;
}


.premium::after{
    position:absolute;
	content:"";
	display: inline-block;
	width:4em;
	height:2em;
	background:url(../img/premium.png) no-repeat;
	background-size: contain;
    margin-left:0.3em;
    top:0.2em;
}


.service_introduction_photo{
    width:40%;
    margin:1em;
}
.service_introduction_photo img{
    width:100%;
}
.service_introduction_adding_card{
    padding-top:2em;
    display: flex;
}
.three_point{
    padding-top:0.2em;
    display: flex;
}
.service_introduction_adding_card .title{
    font-size:22px;
    font-weight: bold;
    border-bottom:solid 1px;
    display: inline-block;
}
.service_introduction_adding_card .title.premium{
    padding-right: 4.5em;
    padding-bottom: 0.1em;
}

.service_introduction_adding_card .text{
    flex: 4;
    position: relative;
    padding-right: 2em;
}
.service_introduction_adding_card .text_body{
    padding-top:0.5em;
    font-size:18px;
}

.service_introduction_adding_card .text_body .notice{
    font-size:15px;
    padding-left:1em;
    text-indent:-1em;
    margin-top:0.5em;
}


.service_introduction_adding_card .photo{
    flex: 1.5;
}
.three_point .title{
    flex: 1.67;
    margin:1em 0;
    padding-right:0.5em;
}
.three_point .text{
    flex: 4;
    margin:1em 1em 1em 1.5em;
}

.service_introduction_adding_card .three_point .title{
    border:0px none;
    border-right:solid 1px;
}
.three_point ul li{
    font-size:18px;
    font-weight: bold;
    padding-left:1em;
    text-indent:-1em;
}
.service_introduction_adding_card .notice{
    font-size:15px;
    padding-left:1em;
    text-indent:-1em;
    margin-top:0.5em;
}

/*----------------------------------------------------
  earning_points_sample
----------------------------------------------------*/

.earning_points_sample{
    margin-top: 4.5em;
    background-color: #f4f5f5;
    text-align: center;
    padding: 2em;
}
.earning_points_content{
    display: flex;
}
.earning_points_content_sample{
    width: 33%;
    padding:1em;
    font-size:18px;
}
.earning_points_content_sample.points{
    text-align: left;
     font-size:17px;
     padding-bottom:2em;
 }

.earning_points_content_sample.points p{
margin-left:1em;
text-indent:-1em;
padding: 0.2em 0;
 }
.earning_points_content_sample.points p .notice{
    font-size:smaller;
}


.earning_points_content_sample.points .explain{
    border-right: solid 1px;
    padding-right: 1em;
 }

.earning_points_content_sample h4{
    color: #001a51;
    text-align: left;
}

.earning_points_content_sample1{
    margin-top:0.5em;
    position: relative;
}
.earning_points_content_sample1.red::after{
    position:absolute;
	content:"";
	display: inline-block;
	width:100px;
	height:66px;
	background:url(../img/fkds2.png) no-repeat;
	background-size: contain;
    right: -1em;
    top:-2.4em;
}



.earning_points_content_sample1,
.earning_points_content_sample2{
    background-color: white;
    padding:0.5em;
    font-size:18px;
}
.earning_points_content_sample2{
    background-color: #c1c3c3;
    color: #001a51;
    font-weight: bold;
}

.obtain{
    background-color: #001a51;
    color: white;
    text-align: center;
    padding:1em 0;
    margin:0.8em;
    font-size:26px;
    font-weight: bold;
}
.last_triangle{
  width: 0;
  height: 0;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-top: 18px solid black;
  margin:0.5em auto;
}


.earning_points_sample h3 {
  position: relative;
  display: inline-block;
  padding: 0 45px;
  text-align: center;
  margin:1em auto;
  font-weight: bold;
  font-size: 30px;
  letter-spacing: -1px;
}
.earning_points_sample h3:before, .earning_points_sample h3:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 36px;
  height: 2px;
  background-color: black;
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg);
}
.earning_points_sample h3:before {
  left:0;
  -webkit-transform: rotate(-120deg);
  transform: rotate(-120deg);
}
.earning_points_sample h3:after {
  right: 0;
}
.earning_points_sample h4 .square{
    border: solid 1px;
    padding: 0.3em 0.5em;
    display: inline-block;
    margin:0 1em 0 0;
}
.earning_points_sample h4{
    font-size:20px;
    font-weight: bold;
}
.earning_points_sample .example{
    text-align: left;
    margin:0 1.2em;
}

/*----------------------------------------------------
  footer
----------------------------------------------------*/

/*footerBlock*/

.footerBlock{
	padding: 0;
	text-align:center;
	font-size: 12px;
}
.footerBlock a{
	text-decoration: none;
	color: #090909;
}
.footerBlock a:hover{
	text-decoration: underline;
	color: #090909;
}
.footerBlock ul li {
	display:inline;
	list-style-type:none;
	margin-right:6px;
	padding-left:10px;
}
.footerBlock ul li+li {
	border-left:1px solid #000000;
}


@media screen and (max-width: 767px){
.footerBlock {
    padding: 0 0 45px;
    text-align: center;
}

.footerBlock a {
    text-decoration: none;
    color: #090909;
}

.footerBlock ul li {
    display: inline;
    list-style-type: none;
    margin-right: 6px;
    padding-left: 10px;
}

}

/*----------------------------------------------------
  
----------------------------------------------------*/
.sp{
    display:none;
}

@media screen and (max-width: 767px) {
.pc{
    display:none;
}
}

@media screen and (min-width:768px) and ( max-width:1024px){
.sp{
    display:block;
}

.pc{
    display:none;
}

.circle{
    width: 155px;
    height: 180px;
    top:-180px;
    left:-20px;
    background: url(../img/fkds3.png) 0 0 / contain no-repeat;
}
.support_jc_p2,
.support_jc_p1 {
    display: block;
}
.support_jc_left {
    width: 90%;
    text-align: center;
}
.support_text {
    display: inline-block;
}
.support_jc_right {
    width: 90%;
}
.sticky_title {
    font-size: 24px;
}
.support_jc_left.p2 table {
    font-size: 20px;
    text-align: left;
}
.support_jc_right.p2.red{
    width: 70%;
    margin:0 auto;
}
.service_introduction h2, .jc_card_lineup h2 {
    font-size: 32px;
}
.card_detail_container, .card_description {
    display:block;
}
.card_container{
    width:auto;
    padding-bottom: 2em;
}
.card_container:first-child {
    border-right: 0px none;
    padding-right: 0;
}
.card_container.last{
    width: auto;
}
.last .card_detail{
    display:block;
}
.card_container:nth-child(2){
    margin:2%;
}
.card_detail {
    min-height: 10em;
}
.joy_voice h3 {
    margin: 0 0.5em;
    font-size: 28px;
}
.joy_voice_content {
    padding: 2em 0;
}
.joy_voice_content .subtitle{
    display: block;
}
.joy_voice_content .name {
    margin-left: 0;
}
.joy_voice h3 img,
.subtitle img{
    width: 96%;
}


.card_text {
    width: 100%;
}
.service_introduction_content{
    display: block;
}
.service_introduction_inner {
    width: 100%;
}
.service_introduction_adding_card{
   display: block;
}
.service_introduction_adding_card .photo {
    text-align: center;
}
.photo img {
    width: 100%;
    max-width: 360px;
}
.service_introduction_adding_card {
    padding-top: 3em;
}

.service_introduction_adding_card .three_point .title {
    flex-direction: column;
    justify-content: center;
    display: flex;

}
.three_point .text {
    flex: 3;
    text-align: center;
}
.three_point ul li{
    text-align: left;
}
.three_point ul li:not(:first-child){
    margin-top:0.5em;
}
.service_introduction_adding_card .notice{
    margin:1em auto;
    width: 100%;
}
.earning_points_content{
    display: block;
}
.earning_points_content_sample{
    width: auto;
}
.earning_points_content_sample1.red::after {
    right: 0em;
}
.earning_points_content_sample.points .explain {
    border:none;
    padding:0;
    border-bottom: solid 1px;
    padding-bottom: 1em;
    font-size:20px;
}
.earning_points_content_sample.points {
    padding-bottom: 1em;
    font-size: 20px;
}
.main_visual_jc {
    background-position: 75%;
}

.premium::after {
    position: relative;
    top: 1em;
}
.sp{
    /*display: none;*/
}



}



@media screen and (min-width: 1025px) {
.jc_card_lineup h3{
    text-align: left;
}
.card_container.last .card_detail .cardarea{
    /*background-color: red;*/
    width:60%;
}










}

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

.reason_jc h2 {
    font-size: 20px;
}
.reason_jc_title {
    font-size: 18px;
}
.reason_jc_contents{
    display: block;
}
.reason_jc_contents div {
   width: auto;
}
    
.reason_jc {
    margin: 2em auto 2em;
}
.reason_jc_title.t3 {
    font-size: 20px;
}


footer,
section{
    max-width: 96%;
    margin: 2em auto;
}

header div #logo img, header div #logo2 img {
    height: 40px;
}
.cf_right #logo2 img {
    height: 30px;
}
.cf {
    padding: 0.5em;
    width: auto;
}
.main_visual_jc {
    margin-top: 60px;
}
.cf_right #logo2 img {
    margin-bottom: 5px;
}
.main_visual_jc .text {
    max-width: 100%;
    margin: 0 auto;
    padding: 1em;
}
.main_visual_jc .text h1 {
    font-size: 24px;
}
.main_visual_jc div.title_txt {
    color: white;
    font-size: 13px;
    text-shadow: 1px 1px 5px rgba(0,0,0,0.5);

}
.main_visual_jc{
    height: auto;
    padding-bottom: 3em;
}




.sp{
    display:block;
}

.pc{
    display:none;
}

.circle{
    width: 78px;
    height: 90px;
    top:-90px;
    left:0px;
    background: url(../img/fkds3.png) 0 0 / contain no-repeat;
}
.support_jc_p1 {
    background-size: 125%;
}
.support_jc_p2,
.support_jc_p1 {
    display: block;
}
.support_jc_left {
    width: auto;
    text-align: center;
    padding: 2em 1em 1em 1em;
    margin-top:1em;
}
.support_subtitle{
    display: block;
}

.support_jc_left img{
    width:90%;
}
.support_jc_right {
    padding: 1em;
    width: auto;
}

    
.support_text {
    display: inline-block;
}

.sticky_title {
    font-size: 20px;
}
.support_jc_left.p2 table {
    font-size: 16px;
    text-align: left;
}
.support_jc_left.p2 table td:nth-child(2) {
    font-size: 16px;
}
.support_jc_left.p2{
   padding: 1em 0 2em;
}   
.support_jc_right.p2 {
    border: solid 6px #b01f24;
    padding: 0.5em;
    font-size: 20px;
}

.support_jc_right.p2.red{
    width:auto;
    margin:0 auto;
}
.service_introduction h2, .jc_card_lineup h2 {
    font-size: 24px;
}
.card_detail_container, .card_description {
    display:block;
}
.service_introduction .subtitle {
   font-size: 16px;
}

.joy_voice h3 img,
.service_introduction .subtitle, .jc_card_lineup .subtitle img,
.service_introduction .subtitle img {
   width:96%;
   margin: 0.2em auto;
}   



.card_container{
    width:auto;
    padding-bottom: 2em;
}
.card_container:first-child {
    border-right: 0px none;
    padding-right: 0;
}
.card_container.last{
    width: auto;
}
.last .card_detail{
    display:block;
}
.card_container:nth-child(2){
    margin:2%;
}
.card_detail {
    min-height: 10em;
    display: block;
}

.card_text .title2,
.card_text .title,
.card_face{
    text-align: center;
}
.card_text .title2 {
    font-size: 19px;
}
.card_face img {
    margin:0 auto;
    max-width: 240px;
}
a.application_button{
    margin:0 1em;
    display: block;
    text-align: center;
}
.cardarea {
    display: block;
}

.contact_in_call h4,
.contact_in_call {
    font-size: 22px;
}
.joy_voice_content{
    display: block;
}
.joy_voice_left, .joy_voice_right {
    width: auto;
    border-right: none;
    padding: 0 0.5em;
}
.joy_voice_right {
    padding: 1em 0.5em;
}

.joy_voice_content .case {
        display: block;
    text-align: center;
}
.joy_voice_content .text{
    font-size: 16px;
}
.joy_voice {
    padding: 1.5em 0 0;
}



.joy_voice h3 {
    margin: 0 0.5em;
    font-size: 20px;
}
.joy_voice_content {
    padding: 2em 0;
}
.joy_voice_content .subtitle{
    display: block;
}
.joy_voice_content .name {
    margin-left: 0;
    text-align: center;
}
.card_text {
    width: auto;
    margin: 0 0.5em;
}
.service_introduction_content{
    display: block;
}
.service_introduction_inner {
    width: 100%;
}
.service_introduction_adding_card{
   display: block;
}
.service_introduction_adding_card .photo {
    text-align: center;
}
.photo img {
    width: 90%;
    max-width: 360px;
}
.service_introduction_adding_card {
    padding-top: 3em;
}

.service_introduction_adding_card .three_point .title {
    flex-direction: column;
    justify-content: center;
    display: flex;
    border: 0px none;
    border-bottom: solid 1px;

}

.service_introduction_inner{
    display: block;
}
.service_introduction_text,
.service_introduction_photo{
    width: auto;
}

.service_introduction_adding_card .text {
    padding-right: 0;
}

.premium::after {
    position: relative;
    top: 1em;
}
.service_introduction_adding_card .title.premium {
    padding-right: 0;
    line-height: 0;
    padding-bottom: 1em;
}
.service_introduction_adding_card .title {
    display: block;
    font-size: 20px;
    text-align: center;
}
.title3 {
    text-align: center;
}


.three_point {
    display: block;
}


.three_point .text {
    flex: 3;
    text-align: center;
}
.three_point ul li{
    text-align: left;
}
.three_point ul li:not(:first-child){
    margin-top:0.5em;
}
.service_introduction_adding_card .notice{
    margin:1em;
    width: auto;
}



.earning_points_sample h3 {
    font-size: 22px;
    padding: 0 32px;
}

.earning_points_sample {
    margin-top: 3em;
    padding: 0.5em;
}
.earning_points_sample h4 .square {
    padding: 0.3em 0.5em;
    display: block;
    margin: 0 0 0.5em;
    text-align: center;
}
.earning_points_sample .example {
    text-align: left;
    margin: 0 0.5em;
}
.obtain {
    padding: 1em 0.5em;
    margin: 0.8em 0.2em;
    font-size:23px;
}

.earning_points_content{
    display: block;
}
.earning_points_content_sample{
    width: auto;
    padding: 1em 0.5em;
}
.earning_points_content_sample1.red::after {
    right: 0em;
}
.earning_points_content_sample.points .explain {
    border:none;
    padding:0;
    border-bottom: solid 1px;
    padding-bottom: 1em;
    font-size:18px;
}
.earning_points_content_sample.points {
    font-size: 16px;
    padding: 0 0.5em;
}


    .earning_points_content_sample.points:first-child {
        margin-bottom: 1.5em;
}


.main_visual_jc {
    background-position: 75%;
}
.earning_points_sample h4 {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}
.earning_points_sample h4.sub {
    text-align: left;
}
.support_jc_left.p2 table th,
.support_jc_left.p2 table tr, .support_jc_left.p2 table td {
    padding: 0.3em;
    vertical-align: middle;
    line-height: 1.3em;
}
.card_text .title img{
    max-width: 320px;
}



}





@media screen and (max-width: 767px) {
    .heading h2 {
        font-size: 20px;
    }
.heading h2 {
    width: 44%;
}
}


@media screen and (min-width:768px) and ( max-width:1024px){
.heading.sec h2 {
    width: 47%;
}
.heading h2 {
    line-height: 1.54em;
    height: auto;
}

.heading h2 span {
    top: 50%;
}
.heading.sec h2 span {
    /*top: 0;*/
}
.heading h2:after {
        right: -2em;
        top: 0;
        border-width: 3.1em 2em 0 0;
}
.heading.sec h2:after {
        /*border-width: 1.5em 2em 0 0;*/
        border-width: 3.1em 2em 0 0;
}
.heading h2 span {
    width: 80%;
}
.earning_points_content_sample.points {
        font-size: 16px;
        padding: 0 0.5em;
    }
.earning_points_content_sample.points:first-child {
        margin-bottom: 1.5em;
    }





}


.pcls {
    font-size: 15px;
    margin-left: 4em;
    /*text-indent: -1em;*/
    margin-top: 0.5em;
    position: relative
}
.pcls::before {
    position: absolute;
    content: "";
    display: inline-block;
    width: 4em;
    height: 2em;
    background: url(../img/premium.png) no-repeat;
    background-size: contain;
    margin-left: -4em;
    top: 0.0em;
}