/* CSS Document */

/* ----------- PC or SP only ----------- */
@media screen and (max-width: 767px){
.pconly {display:none!important;}
.br-pc {display:none;}
}
@media screen and (min-width: 768px){
.sponly {display:none!important;}
.br-sp {display:none;}
}
/* -------------------------------------- */


/* For PC only ------------------------------------------------------------------ */
@media screen and (min-width: 768px){

#hdrlead{font-size:0.9em!important;}
#point .thumbnail .caption {height: 250px;}
#point .blank-1line-top {padding-top: 3rem;}/* 見出し1行を2行分に */
.btn {font-size: 0.8em!important;}
.btn-red{
    min-height:120px;
    font-size:0.8em!important;
}
.btn-blue{
    min-height:80px!important;
    font-size:0.8em!important;
}

.titleSub h3 {width:98%;}
.titleSub h3:after {
    left: 47%;
    width: 0;
}
.step1 li {min-height: 280px;}

}/* END of For PC only  */


/* 共通 ------------------------------------------------------------------------ */

/* p,link,etc */
body{line-height:180%;}

p{font-size:1.6rem;line-height:180%;}

a:link {color: #253c76;}
a:link,a:visited,a:active {text-decoration: none;}
a:visited {color: #253c76;}

.row{padding:0 10px;}
.outline {padding: 1.5rem 1rem;}
.img-rounded{margin:3% 0 0 0 ;margin-top:10%;}

/* Font Color Margin */
.f06{font-size:0.6em!important;}
.f08{font-size:0.8em!important;}
.f09{font-size:0.9em!important;}
.f10{font-size:1.0em!important;}
.f11{font-size:1.1em!important;}
.f12{font-size:1.2em!important;}
.f13{font-size:1.3em!important;}
.f14{font-size:1.4em!important;}
.f15{font-size:1.5em!important;}
.f16{font-size:1.6em!important;}
.f18{font-size:1.8em!important;}
.f19{font-size:1.9em!important;}

.red{color:#dc143c!important;}
.blue{color:#0a7cd9!important;}
.white{color:#ffffff!important;}
.pink{color:#dd1d73!important;}
.bold{font-weight: bold!important;}

.bgred{background-color:#dc143c!important;}
.bgblue{background-color:#0a7cd9!important;}

.spacing005{letter-spacing:0.05em;}
.marauto{margin:0 auto;}
.marTop10{margin-top:10px!important;}
.marBottom10{margin-bottom:10px!important;}
.marTop20{margin-top:20px!important;}
.marBottom20{margin-bottom:20px!important;}
.marTop30{margin-top:30px!important;}
.marBottom30{margin-bottom:30px!important;}
.margin3{margin:3%;}

.marker-pink{
    background: linear-gradient(transparent 65%, #FDE5E8 0%);
    font-weight: bold; 
    border-radius:6px;
}
/* PC固定メニュー---------------------- */

.position-sticky {
    position: -webkit-sticky !important;
    position: sticky !important;
}

.fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}
#pcnavi .list-inline {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
}
#pcnavi .list-inline>li {
    display: inline-block;
    text-align: center;
    font-size: 1.6rem!important;
    padding: 2rem 1rem;
    font-weight: bold;
}
#pcnavi ul.list-inline li{ transition: background-color 2s;}
#pcnavi ul.list-inline li:hover{ 
    background-color: #536fb5;
    transition: background-color 600ms;
}

#pcnavi .menu1{
    margin-top: 16px!important;
}
#pcnavi .menu2{
    text-align: left!important;
    margin-top: 13px!important;
    line-height:160%;
}

#pcnavi .bgred {
    color:#ffffff;
    background-color:#dc143c;
}
#pcnavi .bgblue {
    background-color: #0a7cd9;
    padding: 10px 24px;
    border-radius: 32px;
}
#pcnavi div.sptopcm{
    background-color: #f8f3e6;
    padding:2rem 2.5rem 3rem 1rem;
}
.balloon-r {
    float:left;
    position: relative;
    display: inline-block;
    margin: 0.3em 15px 0 0;
    padding:12px;
    min-width: 120px;
    max-width: 100%;
    font-size: 0.9em;
    background: #fefcf1;
}
.balloon-r:before{
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -20px;
    border: 20px solid transparent;
    border-left: 20px solid #fefcf1;
}
/*----------------------------------- */
.titleSub .h2,
.titleSub h2 {
    line-height: 1.4;
    margin: 5% auto 3%;
    font-size: 2.8rem!important;
    font-weight: bold;
    text-align: center;
    letter-spacing: 0.1em;
    padding: 0.5em;
    color: #e4de4b!important;
    background-color:#253c76; 

    /*
    border-bottom: solid 4px #253c76!important;
    background: -webkit-repeating-linear-gradient(-45deg, #e0edff, #e0edff 3px,#e9f4ff 3px, #e9f4ff 7px);
    background: repeating-linear-gradient(-45deg, #d9cba8, #d9cba8 3px,#fdf9ee 3px, #fdf9ee 7px);*/
}

.titleSub h3 {
    color:#253c76;
    background-color:#e6f4ff;
    border-radius:6px;
    position: relative;
    font-size:2.2rem;
    font-weight: bold;
    text-align: center;
    margin: 4% auto 5%;
    padding: 0.7em 0;
    letter-spacing: 0.05em;
}
.titleSub h3:after {
    position: absolute;
    content: "";
    top: 100%;
    border: 30px solid transparent;
    border-top: 15px solid #e6f4ff;
    height: 0;
}
.titleSub h4 {
    font-weight: bold;
    font-size: 1.5em;
    letter-spacing: 0.1em;
    line-height: 150%;
    margin: 10% 2% 0 2%;
    padding-bottom:10px;
}

.titleSub h4:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 7px;
    background: -webkit-repeating-linear-gradient(-45deg, #7dbbec, #7dbbec 2px, #fff 2px, #fff 4px);
    background: repeating-linear-gradient(-45deg, #7dbbec, #7dbbec 2px, #fff 2px, #fff 4px);
}
.course{	margin: 0 0 5%;}
.step{
    list-style-type: none;
    padding:0;
    margin:0;
}
.step li{
    font-size:1.2em;
    font-weight: bold;
    position: relative;
    width:200px;
    background: #f7cdcd;
    padding: 1em;
    margin:0.5em auto 1.5em;
    text-align:center;
    color: #333;
    border-radius: 6px;
}
.step li:after{
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    bottom: -19px;
    left: 0;
    border-style: solid;
    border-color: #f7cdcd transparent transparent transparent;
    border-width: 20px 100px 0 100px;
    z-index: 1;
    border-radius: 16px;
}

[type=reset], [type=submit], button, html [type=button] {
    -webkit-appearance: button;
}

.btn-just-icon i {
    font-size: 16px;
    padding: 2px 0px;
}

/* ナビゲーションメニュー */
#navimenu {
    width: 980px;
    padding:15px auto;
    font-size:1.1em;
}
#navimenu li a{  color: #ffffff;}
.header_area_inner {	background-color: #253c76;}
.header_area_inner a:hover {color: #efe3bb;}

.btn-bluehead {
    background-color: #0363b1;
    border-color: #0a7edd;
    color: #FFFFFF;
    opacity: 1;
    filter: alpha(opacity=100);
    display: inline-block;
    padding: 6px 12px;
}
.btn-bluehead a:visited {  color: #FFFFFF!important;}
/* リード文 */
.leadarea,
.leadarea-sub {
    padding: 0 3rem;
}
.leadarea {	
    background-image: url("/service/shoplesson/images/bg_question.png") ;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: contain;
}
.leadarea h1 {
    font-size: 2.4rem;
    line-height: 2;
    border-bottom:none;
}
.leadarea-sub p {
    font-size: 1.6rem;
    line-height: 2;
}

/* おすすめ #point*/
div#point {
    background-color:#f8f3e6; 
    padding: 1rem 0.5rem ; 
    margin-bottom: 4rem;
}
h2.point {
    font-size: 2.8rem;
    font-weight: bold;
    line-height: 2;
    text-align: center;
    color:#253c76;
}
#point .thumbnail {
    text-align: center;
    padding: 3rem 0.5rem 1rem;
    border: 4px solid #253c76;
    border-radius: 6px;
    margin-top: 2rem;
}
#point .thumbnail h3{
    font-size: 2.2rem;
    line-height: 1.4;
    font-weight: 600;
    border-bottom:4px solid #e4de4b;
    color:#253c76;
    margin-top: 0.5rem;
}
#point p{ font-size: 1.6rem; margin-bottom: 2rem;}

.trim-img-circle1,
.trim-img-circle2,
.trim-img-circle3 {
    width:  220px;
    height: 220px;
    border-radius: 50%;
    background-position: center center;  /* 横長画像の左上を基準に表示 */
    display: inline-block;
}
.trim-img-circle1{
    background-image: url("../images/img_point_beginner.jpg");
    background-position-y: -240px;
}
.trim-img-circle2{
    background-image: url("../images/img_point_mantoman.jpg");
    background-position-y: -50px;
    background-size: 250%;
}
.trim-img-circle3 {
    background-image: url("../images/img_point_course.jpg");
    background-size: contain;
}

/* 料金とコース */
.page_course .table{
    /*margin:4% auto 6%;*/
    width: auto;
    max-width: 550px!important;
}
.page_course .panel-default { border-color: #0563ae!important;}
.page_course .panel{
    border-radius: 8px!important;
    max-width: 550px!important;
    margin: 0 auto;
}

.page_course .table td.title{
    background-color: #0d7ed9;
    font-size: 1.2em;
    color:#fff;
    text-align: center;
    min-width: 85px;
}
.page_course .table>tbody>tr>td, .table>tbody>tr>th{
    padding: 24px 10px!important;
    border: 1px solid #0d7ed9;
}

#c01,#c02,#c03,#c04,#c05.titleSub{
    margin: 6% auto 2%;
    color: #0c7ed9;
    padding-bottom: 1%;
}

.titleC{
    font-size: 2.2rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 6% auto 2%;
    border-bottom: 4px solid #e4de4b;
}
.titleC img{margin:15px auto!important;}
#shoplesson .detail {
    background-color: #f9f5ea;
    border: dashed 1px #e4de4b;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    line-height: 1.8;
    font-size: 1.5rem!important;
    color: #696622;
}
.top-q {
    position: relative;
    margin: -1rem auto 2.5rem;
    padding: 2rem 2rem 1.4rem;
    border: dotted 6px #253c76;
    border-radius: 8px;
    width: 80%;
}
.top-q .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1.4;
    font-size: 19px;
    background: #f8f3e6;
    color: #253c76;
    font-weight: bold;
}
.top-q .text {
    width:60%;
    float:left;
}
.top-q .img {
    display: inline-block;
    width: 40%;
}
.top-q p {
    margin: 0; 
    padding: 0;
}
/* マイナンバー申請サポート関連 */
div#mynumsup,div#mynapointcp {
    border: 2px solid #3a5f7f;
    border-radius: 15px;
    padding: 3rem;
}
div#mynumsup lead { padding-left: 1.5rem;}
div#mynumsup .btn,div#mynapointcp .btn { padding: 1rem 2rem; font-size: 1.6rem!important;}

/* CMとイベント #cmevent*/
#cmevent h3{ line-height: 1.4; color: #253c76;font-size: 2.2rem;}
#cmevent .marker_yellow {
    background:rgba(0, 0, 0, 0) linear-gradient(transparent 50%, #e4de4b 0%) repeat scroll 0 0;}
#cmevent .box-event{
    border-radius: 12px;
    background-color:#e9c54a;
    background-image: url(../images/bg_event.png);
    background-repeat: repeat;
    padding:25px 40px;
    margin:40px 5px 0;
    position: relative;
}
#cmevent .box-event.cm:after{
    content: url(../images/icon_tv.png);
    top: -30px;
    left: 45%;
    text-align: center;
    padding: 15px;
    border: 4px solid #ffffff;
    border-radius: 50%;
    background-color: #e9c54a;
    position: absolute;
}
#cmevent .box-event.event:after{
    content: url(../images/icon_microphone.png);
    top: -30px;
    left: 45%;
    text-align: center;
    padding: 15px;
    border: 4px solid #ffffff;
    border-radius: 50%;
    background-color: #e9c54a;
    position: absolute;
}
#cmevent .box-event .row {
    border-radius: 6px;
    background-color:#ffffff;
    padding: 4% 2%;
    line-height: 200%
}
#cmevent .box-event .row .col-12 {margin: 1% 2% 3%;}

/* イベント仕様の構成変更用 .page_course */
.page_course h3.blue {
    position: relative;
    padding-bottom: 1.0rem;
    line-height: 1.4;
    margin-top:50px;
    font-weight: 600;
    font-size: 30px;
    text-align: center;
}
.page_course .col-md-4 h3.blue { font-size: 26px;} /*PCで3カラム用*/
.page_course .col-md-8 h3.blue { font-size: 26px;} /*PCで3分の2カラム用*/
.page_course h3.blue:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 7px;
    background: -webkit-repeating-linear-gradient(-45deg, #7dbbec, #7dbbec 2px, #fff 2px, #fff 4px);
    background: repeating-linear-gradient(-45deg, #7dbbec, #7dbbec 2px, #fff 2px, #fff 4px);
}
.page_course p.text {margin:4%;}
.page_course img{ margin:7% auto 10%;}
.page_course ul.sub{
    list-style-type: disc;
    color: #555;
    padding: 0 0 0 4rem;
    line-height: 1.6;
}

.page_course .col-md-4 { margin-top: 2%;} /*PCで3カラム用*/
.page_course .col-md-8 { margin-top: 2%;} /*PCで3カラム用*/
.page_course .col-xs-12 {
    padding-left: 5px;
    padding-right: 5px;
}
.page_course .titleC { margin: 0 2% 2%;}
.page_course .voice img {
    display: inline-block;
    margin: 5px 0 0 20px;
    float: left;
    width: 60px;
}
.page_course .balloon-l {
    position: relative;
    display: inline-block;
    padding: 1.5rem;
    color: #c11915;
    background: #f2eee2;
    border-radius: 16px;
    top: -5px;
    width:80%;
    float:right;
}
.page_course .balloon-l:before {/* beforeで三角を表現 */
    content: '';
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    left: -20px;
    top: 28px;
    border-right: 30px solid #f2eee2;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
}
.page_course .rep{display: flex;}


/* お客様の声 */
.titleV{  color: #253c76;}
.titleV p{padding: 0 2rem;}
blockquote.comment{
    font-size: 1.8rem;
    color:#333;
    padding: 0 7rem;
}
.titleV i{
    font-size: 5rem;
    padding: 1rem 3rem 0 0;
    display: inline-block;
    margin: 1rem 0 0 0;
}
.balloon-l {
    position: relative;
    display: inline-block;
    padding: 1.5rem 3rem;
    color: #253c76;
    background: #f2eee2;
    border-radius: 24px;
    top: -15px;
}
.balloon-l:before {/* beforeで三角を表現 */
    content: '';
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    left: -25px;
    top: 15px;
    border-right: 30px solid #f2eee2;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
}

.allcourse{
    width: 330px;
    font-size: 1.2em;
    margin:0 auto;
}
.nav-justified {position: relative;}

.nav-justified > li {float: none;}

.nav-justified > li > a {
    vertical-align: middle;
    display: block;
    width: 100%;
    height: 100%;
}
/* ２ボタン誘導エリア */
.btn-red{
    color: #fff!important;
    background-color: #dc143c!important;
    background: -moz-linear-gradient(top, #dc143c, #c50936); 
    background: -webkit-linear-gradient(top, #dc143c, #c50936); 
    background: linear-gradient(to bottom, #dc143c, #c50936)!important; 
    background: -moz-linear-gradient(~);
    background: -webkit-linear-gradient(~);
    background: linear-gradient(~); 
}

.btn-blue{
    padding-top:22px!important;
    color: #fff!important;
    background-color: #0a7edd!important;
    border: none!important;
}
a.btn-blue:hover {filter:brightness(1.2);}

.btn-lightblue{
    width: 330px!important;
    font-weight: 600!important;
    padding: 1.4rem 0!important;
    background: radial-gradient(#e5f0f9);
    background-color: #e5f0f9!important;
    color: #4b98d4;
    border: 1px solid #e5f0f9;
    margin:0 auto;
    background: -moz-linear-gradient(top, #e5f0f9, #c1dcf3); 
    background: -webkit-linear-gradient(top, #e5f0f9, #c1dcf3); 
    background: linear-gradient(to bottom, #e5f0f9, #c1dcf3)!important; 
    background: -moz-linear-gradient(~);
    background: -webkit-linear-gradient(~);
    background: linear-gradient(~); 
}

a.btn-lightblue:hover {filter:saturate(40%);}

.btn {
    box-sizing: border-box;
    border-width: 2px;
    font-weight: 600;
    padding: 0.5rem 18px;
    line-height: 1.75;
    cursor: pointer;
    text-transform: uppercase;
    text-decoration: none;
    background-color: #66615B;
    border-color: #66615B;
    border-radius: 20px!important;
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transition: all 150ms linear;
    -moz-transition: all 150ms linear;
    -o-transition: all 150ms linear;
    -ms-transition: all 150ms linear;
    transition: all 150ms linear;
}
.btn-danger {
    background-color: #f5593d;
    border-color: #f5593d;
    color: #FFFFFF;
    opacity: 1;
    filter: alpha(opacity=100);
}
#contact {margin:5% auto;}
#contact .contact_inner{
    background:url(../images/bg_contact.png);
    font-size: 1.2em;
    line-height: 200%;
    padding: 2%;
    border-radius: 16px;
    border:8px solid #ece8db;
    margin:0 auto!important;
}

.flow1 {
    font-size:1.2em;
    text-align:center;
    vertical-align: middle;
    margin: 3% auto;
    padding: 2% 0;
    background-color: #f8f3e6;
    border-radius: 16px;
}

/* 日本地図 店舗検索 */
#shopmapping {
    max-width: 100%;
    width: auto;
}
#shopmapping div.mapbase{
    background-image: url(/service/shoplesson/images/shopmap.png);
    background-repeat: no-repeat;
    margin: 5% auto;
    position:relative;
}
#shopmapping div.maptext{
    top: 4%;
    left: 15%;
    width: 300px;
    height: 280px;
    background-color: #ece8db;
    border-radius:50%;
    border: dotted 6px #253c76;
    font-size: 1.8rem;
    padding: 3.5rem 2rem 2rem;
    text-align: center;
    color: #253c76;
    position:absolute;
}
#shopmapping div.maptext p{
    font-weight: 600;
    text-align: center;
    margin-bottom: 0;
}
/* 右側だけリボン */
span.ribbon {
    position: relative;
    margin: 0 auto 1rem;
}
span.ribbon:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent #fff transparent transparent;
    border-width: 1.4rem 1rem 1.4rem 0;
}
/* 10%OFF CP用 #cp202101 */

#cp202101 {border: solid 30px#d89191;padding: 2rem;margin: 2rem auto;}
#cp202101 h2 {margin-top:0;border-top: 4px dotted #99afcf; border-radius: 3px; padding-top: 2rem;background:none;}
#cp202101 ul {line-height:1.6;}
#cp202101 ul.cpdetail {
    text-align: left;
    margin: 0 auto;
    width: 95%;
    padding: 1rem 1rem 1rem 3rem;
    background-color: #efebeb;
}
#cp202101 ul.cpdetail li:before{
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f0c8";
    margin-right: .3em;
    color: #d89191;
}
#cp202101 .text {
    padding: 1.5rem;
    border: 2px dotted #d89191;
    margin: 2rem 2rem 1rem;
}
#cp202101 .text ul li { 
    list-style: disc;
    margin-left: 3rem;
    text-indent: 0rem;
}

/* cp2019.html 敬老の日CP用 #cp2019 */

#cp2019 {
    font-family:'dnp-shuei-mgothic-std','fot-tsukubrdgothic-std','corporate-s', 'こぶりなゴシック W6 JIS2004', 'Koburina Gothic W6 JIS2004', 'YuGothic', 'Yu Gothic','游ゴシック','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ','Meiryo',sans-serif,Roboto;font-weight: 500;
}
#cp2019 h1 {
    font-size:16px;
}
#cp2019 h2 {
    font-size: 30px;
    letter-spacing: 0.05em;color: #fff;
}
#cp2019 .container {width:950px;}
/*@media (min-width: 1200px)*/
#cp2019 .container {   width: 950px;}
#cp2019 .bg_sec {
    border-radius: 8px;
    background-color: #fef6ee;
    line-height: 1.8;
    margin: 8% auto;
    font-size: 1.8rem;
}
#cp2019 .title {
    background: #18b1c8;	
    padding:1rem 0 1.4rem;
    text-align: center;
    margin: -10px -10px 30px;
    border-radius: 8px 8px 0 0;
}
#cp2019 .article {margin: 0 3rem 3.5rem;}
#cp2019 .bg_inarticle {
    border-radius: 8px;
    background-color: #fff;
    padding: 1.4rem 1rem 2rem;
    margin: -0.5rem;
}
#cp2019 .cp_lead {
    text-align: center;
    background-image: url(../images/cp/bg_lead.png);
    background-repeat: no-repeat;
    background-position: right;
    padding: 60px;
    margin-bottom: -70px;
    color: #0ca5bd;
    letter-spacing: 0.05em;
}
#cp2019 .cp_lead p{font-size:1.8rem;}
#cp2019 .cp_detail p{
    font-weight: 600;
    font-size: 1.8rem;
}
#cp2019 .line_d {border-top:4px double #18b1c8;}
#cp2019 .cp_detail ul{list-style:none;font-weight: 600; margin: 5% 0;}
#cp2019 .cp_detail ul li{display: table;}

#cp2019 .cp_detail table { 
    border-collapse: collapse;
    margin: 3% 0;
}
#cp2019 .cp_detail table th {  width:11%;vertical-align: top;}
#cp2019 .cp_detail table td{  width:88%;}
#cp2019 table td, table th {
    display: inline-block;
    padding: 0 1rem;
    margin-top: 1rem;
}
#cp2019 .cp_detail th.item {
    background-color: #18b1c8;
    border-radius: 6px;
    color: #ffffff;
    padding: 0 1rem;
    text-align: center;
}
#cp2019 .cp_howto {}
#cp2019 .cp_goentry {margin:0 auto 10%;}
#cp2019 p {text-align: center;line-height: 2.4;}
#cp2019 a.btn_entry {
    border-radius:50px;
    background-color:#184392;
    color:#feefa7;
    font-size:3rem;
    padding:2rem;
    max-width:400px;
    width:95%;
    display: block;
    text-align: center;
    margin: 0 auto;
}
#cp2019 a.btn_entry:hover {
    text-decoration: none;
    background-color: #1bb0c8;
}
#cp2019 span.btn_entry_end {
    border-radius: 50px;
    background-color: #cfd7e4;
    color: #1f0101;
    font-size: 2.6rem;
    padding: 2rem;
    max-width: 400px;
    width: 95%;
    display: block;
    text-align: center;
    margin: 0 auto;
}
#cp2019 .cp_flow div.pconly {position: relative;}
#cp2019 a.btn_shop {
    border-radius: 50px;
    background-color: #dc1f74;
    color: #ffffff;
    font-size: 1.8rem;
    padding: 0.6rem;
    min-width: 140px;
    max-width: 230px;
    width: 85%;
    display: block;
    text-align: center;
    margin: 0 auto;
    position: absolute;
    bottom: 10px;
    left: 37%;
}
#cp2019 a.btn_shop:hover{
    text-decoration: none;
    background-color: #1bb0c8;
}
#cp2019 a.btn_shop:visited {background-color: #dc1f74;}
#cp2019 .cp_warn h3 {text-align: center;}
#cp2019 .cp_warn ul li {
    font-size:1.4rem;
    text-indent: -1em;
    margin-left: 1em;
}
#cp2019 .cp_warn ul.list_s li {
    list-style: disc;
    padding-left: 1em;
}
#cp2019 .cp_contact {
    border-radius: 8px;
    background-color: #e3f6f9;
    width: 95%;
    max-width: 500px;
    margin: 0 auto 50px;
    font-size: 2.4rem;
}
#cp2019 .cp_contact .main {
    background-color: #fff;
    padding: 1rem 2rem;
    border-radius: 4px;
    text-align: left;
    font-size: 2.6rem;
    font-weight: 600;
}
#cp2019 .faqarea h3{
    text-align: center;
    margin: 4% auto -1%;
    position: relative;
    display: table;
    padding: 0 55px;
}
#cp2019 .faqarea h3:before, #cp2019 .faqarea h3:after {
    content: '';
    position: absolute;
    top: 40%;
    display: inline-block;
    width: 45px;
    height: 4px;
    border-top: double 1px #18b1c8;
    border-bottom: double 1px #18b1c8;
}
#cp2019 .faqarea h3:before {  left:0;}
#cp2019 .faqarea h3:after {  right: 0;}

#cp2019 .eachfaq {
    margin-top: 4%;
    font-size: 1.6rem;
    background-color: #ffffff;
    padding: 1.4rem 2rem 0.4rem;
    border-radius: 8px;
}
#cp2019 .eachfaq hr {margin: 10px 0;}
#cp2019 .eachfaq label{
    font-size: 2.0rem!important;
    margin-bottom: 0;
    color: #082a69;
}
#cp2019 .eachfaq .bg_q{
    font-size: 1.6rem;
    padding:8px 8px;
    background-color: #6fcad6;
    color: #fff;
    margin-right: 10px;
    border-radius: 50%;
}
#cp2019 .eachfaq .bg_a{
    font-size: 1.6rem;
    padding:6px 16px;
    border: 2px solid #6fcad6;
    color: #6fcad6;
    margin-right: 10px;
    border-radius: 50%;
}
#cp2019 .eachfaq ul li{
    padding-left: 3.5em;
    text-indent: -3.5em;
}
#cp2019 .eachfaq ul.faq_s li{
    font-size:1.4rem;
    margin-left:2rem;
}

#cp2019 #top-faq h2{ color:#18b1c8;}

/*コースページ 対象キャンペーン枠 */
.campaign {
    border: 5px solid #ce6262;
    border-radius: 1rem;
    padding: 0 2rem 3rem;
    margin: 8rem 0;
    position: relative;
}
.campaign span.box-title,
.campaign span.box-title-end{
    position: absolute;
    display: inline-block;
    padding: 1rem 2rem;
    height: 40px;
    line-height: 25px;
    font-size: 17px;
    z-index: -1;
}
.campaign span.box-title {
    top: -42px;
    left: 10px;
    background: #ce6262;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.campaign span.box-title-end {
    bottom: -42px;
    right: 10px;
    background: #ce6262;
    color: #ffffff;
    border-radius: 0 0 5px 5px;
}
.campaign span.label-cp {
    display: table;
    font-size: 1.2rem;
    padding: 0.7rem 2rem 0.5rem 1rem;
    color: #fff;
    background-color: #ce6262;
    margin-bottom: 1rem;
    font-weight: normal;
}


/* For Smartphone only -------------------------------------------------------  */
@media screen and (max-width: 767px){

p{font-size:1.6rem!important;line-height:180%!important;}
a:link {text-decoration: none;}

.btn {
    font-size: 1.0em!important;
    border-radius: 48px!important;
}
.footer_area {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 10000;
}
#spnavi .footer_area_inner a:link { color: #ffffff;}
#spnavi .footer_area_inner a:visited { color: #ffffff;}
#spnavi .list-inline {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    background-color: #253c76;
}
#spnavi .list-inline>li {
    display: inline-block;
    width: 21%;
    text-align: center;
    font-size: 0.95em!important;
    font-weight: 600;
    padding: 10px 2px 8px;		
}
#spnavi .bgred{background-color:#dc143c;}
#spnavi .bgblue{background-color:#0a7cd9;}

.section>.titleSub h2,
#reserve .titleSub h1.h2 {
    margin: 10% auto 5%;
    padding: 2.5rem 0.6rem;
}
.titleSub .h2,
.titleSub h2 {font-size: 2.4rem!important;}
.titleSub h3 {	color: #333!important;}
.titleSub h3:after {	left: 42%;}
.titleSub h4 {
    font-size: 2.0rem;
    letter-spacing:0.05em;
    text-align: center;
    padding: 2rem 1rem 1rem;
}
.titleC{ font-size: 2.0rem!important; line-height: 1.6;}

/* お客様の声 */
.titleV{ color: #253c76;}
.titleV p{padding: 0 2rem;}
blockquote { border-left: none;}
blockquote .comment{
    font-size: 1.6rem!important;
    padding:0 0 0 0.5rem;
    display: inline-block;
}
.titleV i{
    font-size: 4rem;
    padding: 1rem 1rem 0 0;
    margin: 0;
    vertical-align: top;
}
.balloon-l {
    float: right;
    position: relative;
    display: inline-block;
    padding: 1.5rem;
    top: 0;
    width: 86%;
    font-size:2.0rem;
    margin-bottom: 10px!important;
}
.balloon-l:before {/* beforeで三角を表現 */
    content: '';
    position: absolute;
    display: block;
    left: -15px;
    top: 5%;
    border-right: 15px solid #f2eee2;
    border: 15px solid transparent;
    border-bottom: 15px solid #f2eee2;
}
/*****************/
.step li {
    font-size: 1.4em;
    width:300px;
    margin: 1em auto 2em;
}
.step li:after {  border-width: 20px 150px 0 150px;}

.flow1 {
    font-size:1.3em;
    text-align:center;
    margin: 3% auto;
    padding: 3% 0;
}
.acq {  display:none;	}
#contact .contact_inner{
    font-size: 1.1em;
    line-height: 200%;
    padding: 5% 2%;
    text-align: left;
}
#contactbtn .btn-red {
    min-height: 100px;
    text-decoration: none;
    color: #fff!important;
    padding-top: 15px;
    border-radius: 40px!important;
}
#contactbtn .btn-blue {
    line-height: 200%;
    min-height: 80px;
    padding-top: 25px!important;
    border-radius: 20px!important;
}
#contact.contact_inner{
    font-size: 1.1em;
    padding: 4%;
}
/* リード文 */

.leadarea {	
    padding: 0.5rem 3rem 0;
    margin-bottom: 4rem!important;
}
.leadarea h1 {
    font-size: 2.0rem;
    line-height: 1.6;
}
#point .section { margin-bottom: 4rem;}
.leadarea-sub {
    padding:1rem 0 0;
    margin-bottom: 4rem!important;
}
/* おすすめ #point*/
h2.point {
    font-size: 2.6rem;
    line-height: 1.6;
    background-color:#f8f3e6;
}
.top-q {
    margin: 2rem auto;
    padding: 2rem 1.4rem;
    width: 94%;
}
.top-q .text {
    width:100%;
    float:none;
    margin-top: 3rem;
}
.top-q .img {
    width: 100%;
    margin: 1rem auto 0;
}
.top-q p {
    margin: 0; 
    padding: 0;
}
/* 日本地図 #shopmapping*/
#shopmapping div.maptext{
    top: 5%;
    left: 1%;
    width: 56%;
    height: 220px;
    font-size: 1.4rem;
    padding: 2rem 2rem 2rem;
}
/* マイナンバー申請サポート関連 */
div#mynumsup,div#mynapointcp { padding: 2rem 1rem;}
div#mynumsup lead { 
    padding: 1rem;
    display: block;
    text-align: center;
}
div#mynumsup .btn,div#mynapointcp .btn {
    display: inline-block;
    width: 100%;
    margin: 0 auto 2rem;
    font-size: 1.6rem!important;
}

/* CMとイベント #cmevent*/
#cmevent .box-event { padding:10px 25px;}
#cmevent .box-event.row{padding: 7% 2%;}
#cmevent iframe{ width:100%;}
#cmevent .box-event.cm{margin: 60px 5px 0;}
#cmevent .box-event.cm:after{
    top: -40px;
    left: 40%;
    padding: 15px;
}
#cmevent .box-event.event:after{
    top: -40px;
    left: 40%;
    padding: 12px 13px 10px;
}
#cmevent .box-event.event.col-12{margin: 10% 2%;}

/* コースページ  */
/*レスポンシブで順入替*/
.page_course h3.blue { font-size: 26px;}
.page_course img{ margin:8% auto 2%;}
.page_course ul.sub {
    font-size: 1.6rem;
    line-height: 1.6;
}
.page_course .voice img {
    display: inline-block;
    margin: 10px 10px 0 15px;
    float: left;
}
.page_course .balloon-l {
    width: 70%;
    font-size: 1.4rem;
    line-height: 1.8;
    margin-right: 15px;
}
.page_course .balloon-l:before {/* beforeで三角を表現 */
    left: -35px;
    top: 35px;
}

/* 10%OFF CP用 #cp202101 */

#cp202101 {border: solid 15px;padding: 0;margin: 2rem 1rem;}
#cp2021016 h2 {padding-top: 1rem; margin-top: 0;}
#cp202101 ul.cpdetail {
    width: 94%;
    padding: 1rem;
}
#cp202101 .text {padding:1rem;}
#cp202101 .text ul li { margin-left: 1.4rem;}


/* cp2019.html 敬老の日CP用 #cp2019 */

#cp2019 {}
#cp2019 h1 {line-height: 1.6;}
#cp2019 h2 {
    font-size:26px;background: none;
}
#cp2019 .container {width:98%;}
#cp2019 .bg_sec {
    border-radius: 16px;
    margin: 8% auto 20%;
    font-size:16px;
}
#cp2019 .article {margin: 0 0.6rem 3.5rem;}
#cp2019 .cp_lead {
    padding: 40px 30px;
    margin-bottom: -50px;
    margin-top: -20px;
}
#cp2019 .cp_detail table { border-collapse: collapse;}
#cp2019 .cp_detail th.item {padding: 1rem;}
#cp2019 table td, table th {
    display: block!important;
    width: 100%!important;
}
#cp2019 table td{ padding: 1rem 1rem 1.6rem;}
#cp2019 .cp_flow div.article{ position: relative;}
#cp2019 .cp_goentry {margin:0 auto 30%;}
#cp2019 a.btn_shop {
    padding: 0.5rem 0;
    margin: 1rem auto;
    width: 50%;
    position: unset;
}
#cp2019 .eachfaq {
    font-size: 1.6rem;
    padding: 1.4rem 1.2rem 0.4rem;
}
#cp2019 .faqarea h3{    margin: 10% auto 1%;
}
#cp2019 .eachfaq label{
    font-size: 2.0rem!important;
    line-height: 1.4;
    margin-left: 0.4rem;
}
#cp2019 .eachfaq ul.faq_s li{
    line-height: 1.6;
    margin-left:1rem;
}
#cp2019 .eachfaq .bg_q {display: table; margin-bottom: 5px;}
#cp2019 .eachfaq .bg_a {
    padding: 2px 16px;
    display: table;
    margin-bottom: 5px;
}
    
#cp2019 .eachfaq ul li	{
    padding-left: 0;
    text-indent: 0;}

}