@charset "UTF-8";
:root {
  --r-blue: #0071bc;
  --d-blue:#2e3192;
  --pink:#bf0d56;
  --brown:#603813;
  --green:#00514f;
  --bgcolor1:#eaf3f4;
  --bgcolor2:#eae4e1;
  --bgcolor3:#baa8a2;
  --bgcolor4:#dfeae6;
  --l-pink:#fff1f1;
}
html {
  scroll-padding-top: 100px; /* ヘッダーの高さが80pxの場合 */
  scroll-behavior: smooth;  /* スムーススクロールを入れたい場合 */
}
body{
    margin: 0;
    font-family: "Helvetica Neue", "Helvetica", "Meiryo", "メイリオ", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", sans-serif;
}
.min{font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}

img {
	max-width:100%;
	height: auto;
}
a{
    color:var(--d-blue);
    text-decoration: none;
}
a:hover { 
    opacity: 0.8;
    text-decoration: underline;
}
.top-main-contents-3box a:hover,
.top-main-contents-4box a:hover{text-decoration: none;}
.top-main-contents-3box a:hover p,
.top-main-contents-4box a:hover p{text-decoration: underline;}
header a:hover,
footer a:hover
{text-decoration: none;}

.small{font-size:14px}
.center{text-align: center;}
.flex{display: flex;}
.grid {display: grid;}


/*==============================================
                                        header
===============================================*/
 header{
  position: fixed;
  width: 100vw;
  top: 0;
  z-index: 99;
}
@media print{
 header{position: relative;background: #fff}
}
.subpage #header{background: #fff;}
.header {
	display: flex;
    flex-direction: row;
    padding: 10px 0 5px;
    justify-content: space-between;
    position: relative;
}
header a:hover{text-decoration: none;}
.header-logo a{color: #000;}
.header-navi{
    flex-basis: 52px;
    display: flex;
    flex-wrap: wrap;
}
.button1{
    cursor: pointer;cursor: hand;
}
#header form .fas{font-family: FontAwesome;}

#header .phone img{
        width: 30px;
        padding-right: 5px;
}

@media print, screen and (min-width: 768px){
/*for PC*/
    .header {padding-bottom: 15px;padding-top: 20px;}
    .header-logo img{
        width: 80px;
        padding-right: 10px;
    }
    .header-logo {flex-basis: calc(100% - 125px);flex-shrink: 0;}
    .header-logo h1{font-size: 23px;}
    .header .toi-box {flex-basis: 125px;flex-shrink: 0;margin-top: 32px;}
    #header .toi-box a{
        display: block;
        padding: 6px 16px;
        background: var(--d-blue);
        color: #fff;
        font-weight: bold;
        margin-bottom: 4px;
        text-align: center;
        font-size: 14px;
    }
   #header .phone {
        font-size: 30px;
        position: absolute;
        top: 4px;
        right: max(calc(50vw - 600px), 0px);
        font-weight: bold;
    } 
    .header-navi{flex-direction: column;}
}
@media screen and (min-width:768px) and (max-width:1100px) {
    .header-logo h1{padding-left: 1vw;font-size: 2.5vw;}
    #header .phone {font-size: 3vw;right: 1vw}
    #header .phone img{width: 2vw}
    #header .toi-box a {font-size: 1.2vw;padding: .7vw 1vw}
    .header .toi-box {flex-basis: 10vw}
      .header-logo {flex-basis: 89vw;}
}
@media print{
    .header-logo h1{padding-left: 4mm}
    .header-logo img{
        width: 15mm;
        padding-right: 4mm;
    }
    .header-logo h1{font-size: 4mm;}
    #header .phone {font-size: 4mm;}
    #header .phone img{width: 4mm}
   .header-logo {flex-basis: 87%;}
    .header .toi-box {flex-basis: 13%}
    #header .toi-box a {font-size: 3mm;padding:1mm 2mm}
}

@media screen and (max-width: 767px){
/*for mobile*/
    .header{
        align-items: center;
    }
    #header .phone{display: none;}
    .header-logo a{display: flex;}
    .header-logo h1{font-size: 14px;line-height: 1.2;}
    .header-logo img{
        width: 38px;
        padding-right: 6px;
    }
    .header .toi-box{
        position: absolute;
        right: 0;
        top: 65px;
        display: flex;
    }
    .header .toi-box a{
        background: var(--d-blue);
        color: #fff;
        font-weight: bold;
        font-size: 12px;
        border-radius: 10px;
        padding: 2px 10px;
        margin-right: 4px;
    }
    .header-navi{justify-content: space-around;}
    .header-navi:hover{cursor: pointer;}
    #open
    {
        width: 43px;height: 43px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #open img{width: 41px;height: 41px;border: solid 1px #ddd;border-radius: 2px;}
}
/*スクロール時*/
#header.is-scrolled{background: #fff;transition : all 0.5s ease 0s;}
/*
#header.is-scrolled .phone{display: none;}
#header.is-scrolled .header{padding: 0;}
#header.is-scrolled .toi-box{margin-top: 10px;}
*/
@media screen and (max-width: 767px){
/*for mobile*/
    #header.is-scrolled .toi-box{display: none;}
}
/*
@media screen and (min-width: 768px){
    /* for PC * /
    #header.is-scrolled .gmenu{margin-top: -15px}
    #header.is-scrolled .gmenu li{font-size: 16px;}
    #header.is-scrolled .usermenu li{font-size: 17px;}
    #header.is-scrolled .usermenu a{padding-top: 5px;padding-bottom: 5px;}
}
*/

/*==============================================
                             header [global navi]
===============================================*/
.gmenu{z-index: 99;}
.gmenu ul{z-index: 99;}
.gmenu ul:first-child,
.gmenu ul:first-child > a:link{
    color: var(--d-blue);
}
.gmenu li{
  font-size: 17px;
  font-weight: bold;
  position: relative;
}
.gmenu li a{text-decoration: none;}
.gmenu li a{
  display: block;
  margin: 0;
}
.mainmenu a{color: var(--d-blue)}
.usermenu a{color: #fff}
.usermenu {margin-top: -28px;position: relative;}
/*#header.is-scrolled .usermenu::before{font-size: 2.4vw;top: -37px;left:0;}*/
.usermenu .seikyu::before{
    color: var(--pink);
    font-size: 14px;
    content: '組合員専用';
    position: absolute;
    top: -23px;
    left: 47px;
}
.usermenu li{
    display: inline-block;
    font-weight: bold;
  font-size: 19px;
  border-style: none !important;
}
.usermenu .seikyu{
    background: var(--pink);
    position: relative;
}
.usermenu .todoke{
    background: var(--brown);
}
.usermenu a{color: #fff;}

@media print, screen and (min-width: 768px){
    /* for PC */
    #open,#close {display: none !important;}
    #navi {display: flex !important;justify-content: space-between;margin-right: 150px;}
    .gmenu{margin-top: -40px;}
    .mainmenu li a{  line-height: 1;  padding: 6px 10px;font-size: 12pt;}
    .mainmenu li{float: left;}
    .usermenu .seikyu{padding: 10px 13px;}
    .usermenu .todoke{padding: 10px 25px;margin-left: 6px;}
    .usermenu::before{
        font-size: 39px;
        color: var(--pink);
        font-family: 'Material Icons';
        content: 'perm_identity';
        position: absolute;
        top: -49px;
    }
}
@media screen and (min-width:768px) and (max-width:1100px) {
    .mainmenu li a{font-size: 1.5vw;}
    .mainmenu{width: 70%}
    .usermenu{width: 30%}
    .usermenu .seikyu::before {font-size: 8pt;left: 2.5vw;}
     .gmenu {margin-top: -50px;}
    #navi{margin-right: 0;}
    .usermenu{display: flex;}
    .usermenu::before{font-size: 2vw;top:-33px}
    .usermenu li{font-size: 1.3vw}
    /*#header.is-scrolled .usermenu li{font-size: 1.3vw}*/
    .usermenu .seikyu,.usermenu .todoke{padding: 3pt}
}
@media screen and (min-width:1120px) and (max-width:1235px) {
        .header-logo {flex-basis: calc(100% - 145px);}
}
@media print{
    .mainmenu li a{padding: 1mm 2mm;font-size: 2.6mm;}
    .usermenu .seikyu::before {font-size: 3mm;}
    .usermenu::before{content: none}
    .usermenu .seikyu::before{left: 0mm}
    .usermenu li{font-size: 3mm;}
    .usermenu .seikyu, .usermenu .todoke{padding: 1mm;}
    .usermenu .todoke{margin-left: 0mm}
    .mainmenu {width: 75%;}
    .usermenu{width: 25%;margin-top: -3mm;}
}
@media screen and (max-width: 767px){
    /*for mobile*/
    #open  {display: block;}
    #navi {display: none;}
    #close  {
        position: absolute;
        top: 0;
        left: 0;
        width: 60px;
        height: 100%;
        font-size: 40px;
        text-align: center;
        color:#fff;
        background: #000090;
        display:flex;
        align-items:center;
        justify-content:center;
    }
    #close  i{top: 50%;}
    .nav ul {
        display: flex;
        justify-content: space-around;
        list-style: none;
        flex-direction: column;
        padding: 15px 10px;
        margin-left: 60px;
    }
    .gmenu{
        position: absolute;
        top:0;
        right: 0;
        background: #0071bc;
        width: 100%;
    }
    .gmenu #navi{height: 100vh} #close_area{height: 100%;}
    .gmenu ul{margin-left: 60px;}
    .gmenu li a{line-height: 1.2}
    .gmenu li {padding: 10px;border-bottom: solid 1px #fff;}
    .mainmenu a{color: #fff;}
    .usermenu a{padding: 10px 0;text-align: center;}
    .usermenu{margin-top: 20px;}
    .usermenu::before{content: none;}
    .usermenu .seikyu::before{color: #fff;left: 0;}
}


/*==============================================
                                Hero Section
===============================================*/
.hero {
    background: url('../img/main-image.jpg') center/cover no-repeat;
    background-position: top -1vw center;
    height: 100vh;
    display: flex;
    align-items: center;
}

.hero-content {
    margin-left: max(calc(50vw - 600px), 0px)
}

.hero-text {
    font-size: 24px;
  font-weight: bold;
  line-height: 1.8;
  text-shadow: 0 0 10px #037, 0 0 10px #037, 0 0 10px #037, 0 0 10px #037, 0 0 10px #037;
  color: #fff;
  width: 100%;
  padding-left: 10%;
}
@media screen and (max-width: 767px){
    /*for mobile*/
.hero-text {font-size: 4.5vw}
}
@media screen (min-width:768px) and (max-width:1100px) {
    .hero{height: 50vh}
    .hero-text{padding-top: 17vh}
}
@media print {
    .hero{height: 120mm}
    .hero-text{padding-top: 20mm}
}

/*==============================================
                                        TOPPAGE
===============================================*/
.bg-main {background-color: var(--bgcolor1)}
.info, .members, .about{
    padding-top: 60px;
    padding-bottom: 60px;
}
.info .ttl,
.members .ttl,
.about .ttl{
  padding: 15px 30px;
}
.info h2,
.members h2,
.about h2{text-align: center;}
.info h2 .en,
.members h2 .en,
.about h2 .en{
    display: block;
  font-weight: normal;
  font-size: 14px;
  padding-bottom: 4px;
}
.info h2 .headline,
.members h2 .headline,
.about h2 .headline{
    display: block;
    margin-top: 12px;
}

/*INFORMATION*/
.info{box-shadow: 0px 2px 3px #a68c84;margin-bottom: 3px;}
.info h2 .en{border-bottom: 1px solid #000;}
.info .date{display: inline-block;padding-right: 10px;}
.info a:link{text-decoration: none;}
.info li{
    margin-bottom: 15px;
    background: #fff;
    box-shadow: 2px 2px 2px #bbb;
}
.info li a{
    line-height: 1.1;
    padding: 10px;
    display: block;
}
/*MEMBERS*/
.members{background: var(--bgcolor2);} 
.members h2 .en{border-bottom: 1px solid var(--pink);}
.members h2 {color: var(--pink);}
.members .shoukai, .members .shoukai a, .members .shoukai a p {color: var(--pink);}
.members .todoke, .members .todoke a, .members .todoke a p{color: var(--brown);}
.members .content img{height: 80px;padding-right: 20px;}
.members .tmc-3box .flex{align-items: center;font-weight: bold;}
.members .content .tmc-3box{background: #fff;box-shadow: 2px 2px 2px #bbb;}

/*OUTLINE*/
.outline{background: var(--bgcolor3);color: #fff;padding: 40px 0;}
.outline h2 .en{border-bottom: 1px solid #fff;}
.outline table{width: 100%;}
.outline table th{text-align: left;}
.outline table th, .outline table td{
    border-bottom: 1px dashed #fff;
    padding: 5px;
    font-size: 16px;
}


@media print, screen and (min-width: 768px){
    /* for PC */
    .info .ttl,
    .members .ttl,
    .about .ttl{width: 20%;}
    .info ul, .members .content, .about .content{width: 70%;}
    .info ul, .about ul{font-size: 17px;}
    .info ul{margin-top: 1.2em;}
    .members .content{font-size: 19px;}
    .members .content{justify-content: space-between;}
    .members .content .tmc-3box{width: 37%; padding: 30px 40px;}
}
@media screen and (min-width:768px) and (max-width:1100px) {
    .members .content .tmc-3box{padding: 15px}
    .tmc-4box a{padding: 15px}
    .tmc-4box .titlebox{flex-direction: column;height: auto}
}
@media print{
    .info {box-shadow: 0px 2px 3px #fff;}
    .info, .members, .about{padding-top: 10mm;padding-bottom: 10mm;}
    .members, .jigyou{break-after: page;}
    .members .content img {height: 15mm;padding-right: 4mm;}
    .members .content{font-size: 3.5mm}
    .members .content .tmc-3box{padding: 6mm;width: 37%;}
}
@media screen and (max-width: 767px){
    /*for mobile*/
    .info .flex,
    .members .container.flex,
    .members .container .content.flex,
    .outline.flex{flex-direction: column;}
    .info ul{margin: 0 20px;}
    .members .content .tmc-3box{width: 90%;margin: 10px auto;}
    .members .tmc-3box .flex{padding: 20px;}
    .members .content img {height: 65px;}
    .members .content .todoke img {padding-left: 20px;padding-right: 30px;}

}

/*JIGYOU*/ /*LINKS*/
.jigyou h3{color: var(--brown);}
.links h3{color: var(--green);}
.jigyou h3,
.links h3{
    text-align: center;
    font-size: 21px;
    position: relative;
}
.jigyou h3 span{background-color: #fff;}
.links h3 span{background-color:var(--bgcolor4);}
.jigyou h3 span,
.links h3 span{
    position: relative;
    z-index: 2;
    display: inline-block;
    padding: 0 .5em;
}
.jigyou h3::after{border-top: 1px solid var(--brown);}
.links h3::after{border-top: 1px solid var(--green);}
.jigyou h3::after,
.links h3::after{
    content: "";
    position: absolute;
    top: .7em;
    width: 100%;
    left: 0;
}
.jigyou{margin-bottom: 60px;}
.links{
    padding: 60px 0;
    background: var(--bgcolor4);
}
.links .banners{
    margin-top: 30px;
    flex-wrap: wrap;
  justify-content: space-around;
  row-gap: 28px;
}
.links .banners div{background: #fff;}
.links .banners img{height:48px;padding-right: 15px;}
.banners .etc img{height: 38px;}
.banners .jartic img{height: 59px;margin-top: -10px;}
.links .banners a{
    display: flex;
    align-items: center;
    height: 80px;
    padding-left: 60px;
    color: #000;
    font-size: 16px;
}

/*main contents box*/
.top-main-contents-3box .row{justify-content: space-between;}
.top-main-contents-4box .flex{justify-content: space-between;flex-wrap: wrap;margin-top: 30px;}
.top-main-contents-3box a:link,
.top-main-contents-4box a:link{text-decoration: none;}
.tmc-3box p a:hover{text-decoration: underline;}
.tmc-4box p a:hover{text-decoration: underline;}
.tmc-3box{
    flex-shrink: 0;
    margin: 5px 3px;
    line-height: 1.1;
}
.tmc-3box .flex div{flex-shrink: 0;}
.tmc-4box{
    flex-shrink: 0;
    border: 1px solid var(--brown);
    color: var(--brown);
}
.tmc-4box a{
    color: var(--brown);
    display: block;
  padding:15px 30px;
}
.tmc-4box img{width: 60px;padding-right: 20px;}
.tmc-4box .book{padding-top:35px;padding-bottom: 30px;}
.tmc-4box .kenko img{height: 55px;}
.tmc-4box .wallet img{height: 52px;}
.tmc-4box .titlebox{display: flex;align-items: center;height: 70px;}
.tmc-4box .titlebox h4{font-size: 17px;}
.tmc-4box p.text{font-size: 12px;line-height: 1.2;margin: 10px 0 5px;}

@media print,screen and (min-width:768px) and (max-width:1100px) {
    .tmc-4box{text-align: center}
    .tmc-4box a{padding: 15px 8px}    
    .tmc-4box .titlebox{flex-direction: column;height: auto}
}
@media print{
    .tmc-4box a{padding: 8mm 4mm}    
}
@media print, screen and (min-width: 768px){
    /* for PC */
    .tmc-4box{flex-basis: 23%;}
    .tmc-4box p.text {font-size: 13px;line-height: 1.3;}
    .links .banners div{width: 38%;}
    .banners .nexco1{order: 1;}
    .banners .nexco2{order: 3;}
    .banners .etc{order: 2;}
    .banners .jartic{order: 4;}
}
@media screen and (max-width: 767px){
    /*for mobile*/
    .tmc-4box{width: 80%;margin: 0 auto 20px;}
    .tmc-4box a{padding-top: 10px;padding-bottom: 10px;}
    .tmc-4box .book{padding-top: 27px;padding-bottom: 22px;}
    .tmc-3box h3{font-size: 20px;}
    .links .banners div{width: 45%;}
}


/*LINKS*/
.top-links{margin: 20px auto;}
.top-links h2{
    background: linear-gradient(290deg, #1b84aa, #000090);
    color:#fff;
    text-align: center;
    font-size: 15px;
    font-weight: normal;
    margin-bottom: 20px;
}
.top-links .banners{
    display: flex;
}
.top-links .banners.gaimu a{
    display: flex;
    margin: 0 auto 8px;
    border:solid 1px #333;
}
.top-links .banners.gaimu a:link span{text-decoration: none;
}
.top-links .banners.gaimu a img{
    height: 45px;
    padding: 6px;
}
.top-links .banners.gaimu span{
    justify-content: center;
    display: flex;
    margin: auto auto auto 0;
    align-items: center;
}
.top-links .banners.ref{
    flex-wrap: wrap;
    justify-content: space-around;
}
.top-links .banners.ref div{
    flex-shrink: 0;
    flex-basis: 46%;
    margin-bottom: 10px;
}
.top-links .banners.ref img{
    width: 100%;
}

@media print, screen and (min-width: 768px){
    /* for PC */
    .top-links h2{padding: 1px;}
    .top-links .banners.gaimu{justify-content: space-around}
    .top-links .banners.gaimu div{flex-basis: 24%;}
    .top-links .banners.gaimu span{font-size: 13px;}
    .top-links .banners.gaimu a img{padding: 4px;}
    .top-links .banners.ref div{flex: 1;}
    .top-links .banners.ref a{display: block;margin: 0 3px;}
}

@media screen and (max-width: 767px){
    /*for mobile*/
    .top-links h2{padding: 8px;}
    .top-links .banners.gaimu{flex-direction: column;}
    .top-links .banners.gaimu a{width: 280px;}
    .top-links .banners.ref{margin: 0 3%;}
    .links .banners img {height: 26px;padding-right: 5px;}
    .links .banners a{padding-left: 5px;color: #000;font-size: 13px;}
    .links .banners div {width: 48%;line-height: 1.2;}
    .links .banners {row-gap: 8px;}
    .banners .etc img {height: 18px;}
    .banners .jartic img {height: 36px;}
}
@media screen and (min-width:768px) and (max-width:1100px) {
    .links .banners a{padding-left: 14px}
}
@media print{
    .links .banners div {width: 45%;}
    .links .banners a{padding-left: 6mm;font-size: 2.6mm}
}
/*==============================================
                                        SUB PAGE
===============================================*/
.marker {
  background: linear-gradient(transparent 60%, #ffeb3b 0%);
  display: inline;
  border-bottom: double 3px var(--d-blue);
}
.subpage h2{font-size: 27px}
.subpage .pagetitle{
    background: var(--bgcolor1);
    box-shadow: 0px 2px 3px #aeb9c0;
  padding: 40px 0 30px;
  margin-bottom: 20px;
}

.subpage .main h3 {
    border-bottom: 3px double var(--d-blue);
    color: var(--d-blue);
    font-size: 21px;
  margin-bottom: 20px;
  margin-top: 62px;
  padding-left: 10px;
    padding-bottom: 10px;
}

.subpage .main h3::before {
  font-size: 18px;
  padding-right: 10px;
  font-family: 'Material Icons';
  content: 'keyboard_double_arrow_down';
  display: inline-block;
}
.subpage .main h4 {
line-height: 1.3;
  margin-top: 1.5em;
  margin-bottom: 1em;
  color: var(--brown);
  font-size: 19px;
  background: var(--bgcolor2);
  padding: 5px 5px 5px 10px;
}
.subpage .main h5 {font-size: 16px;}
.subpage .main p {padding-right: 5px;padding-left: 5px;}

.catch{
    color: var(--d-blue);
  font-size: 18px;
  margin-top: 15px;
  margin-bottom: 20px;
}
.jigyou-page .card {gap: 15px;justify-content: center;}
.jigyou-page .card div{
    border: 1px solid #ccc;
    padding: 10px;
}
.jigyou-page .card h5{text-align: center;background: var(--bgcolor1);}
.jigyou-page .card img{
    display: block;
    margin: auto;
}
.fukuri table{
    border-collapse: collapse;
    width: 100%;
    height: 100%;
}
.fukuri table td,.fukuri table th{
    border: 1px solid #ccc;
    text-align: center;
    white-space: nowrap;
}
.fukuri .row1 th{background: var(--bgcolor4);}
.fukuri .row2 th{background: var(--bgcolor1);}
.fukuri .row3 td{color: var(--pink);background: #f7fefe;}

.etc-page h3 .card-cat{font-size: 17px;}
.etc-page .main-block.flex{justify-content: center;gap:4%}
.etc-page .c-img {text-align: center;}
.etc-page .box-left .c-img img{height: 180px;}
.etc-page .box-right .c-img {padding-bottom: 16px;}
.etc-page .feature {color: var(--d-blue);}
.etc-page .feature h4{
    background: var(--bgcolor1);
    color: var(--d-blue);
    font-size: 18px;
}
.etc-page .feature-box{
    margin: 10px 15px;
    border: 1px solid var(--d-blue);
    padding: 10px 20px;
}
.etc-page .feature-box p{
    padding-left: 20px
}
.etc-page .feature .highlight{
    font-size: 20px;
    font-weight: bold;
    border-bottom: 1px solid var(--d-blue);
    margin-bottom: 4px;;
}
.etc-page .discount h4{
    background: var(--l-pink);
    color: var(--pink);
    font-size: 18px;
}
.etc-page .discount h5{
    margin: 10px 0 4px;
    padding: 3px 5px;
}
.etc-page .discount .highlight{
    font-size: 18px;
    color: var(--pink);
    margin-bottom: 4px;
}
.etc-page .discount-box{
    margin: 10px 15px;
    border: 1px solid var(--pink);
    padding: 10px 20px;
}
.etc-page .discount table{
    border-collapse: collapse;
    width: 100%;
    height: 100%;
    margin: 10px 0;
}
.etc-page .discount td,.etc-page .discount th{
    border: 1px solid #ccc;
    text-align: center;
    white-space: nowrap;
    padding: 8px 0;
}
.etc-page .discount .bgc{background: var(--l-pink);}
.etc-page .box-right .discount-box ul{margin: 0 0 5px 10px;}
.etc-page .box-right .discount-box p{margin-top: 0;}
.etc-page .notice1,
.format-page .notice1{
    background: var(--bgcolor1);
    color: var(--d-blue);
    font-size: 18px;
    padding: 15px;
    margin-top: 40px
}
.etc-page .notice2{
    margin-top: 30px;
  padding: 5px 15px 15px 20px;
  border: double 3px dodgerblue;
}
.etc-page .notice2 ul{
    margin-left: 10px;
}
.etc-page .notice2 ul li::before{
    color: dodgerblue;
}
.etc-page .notice2 .ttl{
    font-weight: bold;
  border-bottom: 1px solid dodgerblue;
  margin-bottom: 5px;
  color: dodgerblue;
  font-size: 20px;
}

.format-page table.document{
    margin-top: 40px;
    border-collapse: collapse;
    width: 100%;
}
.format-page table.document thead{background: var(--bgcolor4);}
.format-page table.document td a::before{
  font-family: 'Material Icons';
  content: 'keyboard_double_arrow_right';
}
.format-page table.document td a::after{
  font-family: 'Material Icons';
  content: '\e415';
}
.format-page .search{
    border: 1px solid #ccc; 
    padding: 3px 3px 3px 10px;
    display: inline-block;
    margin: 0 4px;
}
.format-dl{
    border: 1px solid var(--r-blue);
  margin-top: 15px;
  padding:0 15px 15px;
}
.format-page .notice1{font-weight: bold}
.format-dl ul{
    border: 1px dotted #666;
  border-style: dotted none;
  padding: 15px 0;
  margin-bottom: 15px;
}
.format-dl .mc{font-size: 9px;vertical-align: middle;}
.format-page .search-txt{display: inline-block;padding-top: 2px}
.format-page .search-icon{
    display: inline-block;
  background: var(--d-blue);
  color: #fff;
  vertical-align: middle;
  padding: 3px;
  margin-left: 10px;
  border-radius: 2px;
}

.faq-page .sub-toi-box{
    background: var(--bgcolor2);
    font-size: 18px;
    width: 94%;
    padding: 20px 4%;
}
.faq-page .sub-toi-box span{font-size: 22px;font-weight: bold;}
.faq-page .sub-toi-box a:hover{text-decoration: none;}
.faq-page .sub-toi-box .material-icons{
    font-size: 30px;
    vertical-align: center;
    padding-right: 4px;
}
/*faq*/
.Qa-Box {
  width: 94%;
  margin: 0 auto;
}
.Qa-Box .Qa {
  padding: 20px 0;
  border-bottom: 1px solid #c8c8c8;
}
.Qa-Box .Qa dt,
.Qa-Box .Qa dd {
  display: flex;
  align-items: baseline;
  margin: 15px 0;
}
.Qa-Box .Qa dt p {
  margin: 0;
  padding-left: 15px;
  font-weight: bold;
  width: 100%;
}
.Qa-Box .Qa dd p {
  margin: 0;
  padding-left: 15px;
  width: 100%;
}
.Qa-Box .Qa:last-of-type {
  border-bottom: none;
}
.Qa-Box .Qa dt::before {
  content: "Q";
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background: #6699b7;
  width: 2em;
  height: 2em;
}
.Qa-Box .Qa dd::before {
  content: "A";
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background: #d65556;
  width: 2em;
  height: 2em;
}


@media print, screen and (min-width: 768px){
    /* for PC */
    .jigyou-page .card div{width: 35%;}
    .jigyou-page .card img{height: 185px;width: auto;}
    .fukuri.grid {grid-template-columns: 24% 75%;column-gap: 1%;}
    .fukuri .photo{grid-column: 1 / 2;grid-row: 1 / 2;}
    .fukuri .table{grid-column: 2 / 3;grid-row: 1 / 2;}
    .etc-page .notice1{text-align: center}
    .format-page table.document td,.format-page table.document th{padding: 10px;}
}
@media print,screen and (min-width:768px) and (max-width:1100px) {
    .subpage .main{padding: 0 15px;}
    .subpage h2{padding-left: 25px}
}
@media print, screen and (min-width: 768px){
    .etc-page .main-block > div{width: 46%;}
}
/****
 *
 * ETCカード事業の印刷時にスマホパターンにしない場合にはここをコメントアウト
 * ただし、各項目の開始位置はずれる
 *
 */
@media print{
    .etc-page .main-block > div{width: 98%;}
    .etc-page .main-block.flex{flex-direction: column;}
    .feature-box,.box-bottom{break-after: page;}
    .subpage .main h3 {margin-top: 0mm}
}
/* ここまで */

@media screen and (max-width: 767px){
    /*for mobile*/
    .subpage  .main{margin-top: 59px;}
    .jigyou-page .card {flex-direction: column;}
    .jigyou-page .card img{width: 80%;height: auto;}
    .fukuri.grid {grid-template-rows:  auto auto;}
    .fukuri table td,.fukuri table th{font-size: 88%}
    .format-page .document a{display: block;}
    .format-page table.document td,.format-page table.document th{padding: 6px;font-size: 14px;}
    .etc-page .main-block.flex{flex-direction: column;}
    .Qa-Box {width: 95%;}
    .sub-toi-box{
        display: flex;
        flex-direction: column;
        align-items: anchor-center;
    }
}

/*==============================================
                                          footer
===============================================*/
footer{padding-top: 20px;background: var(--bgcolor1);margin-top: 70px}
.footername p{margin: 5px;}
address{font-style: normal;}
.c-name{
  font-size: 17px;
  font-weight: bold;
}
.box-l,.box-m,.box-r{font-size: 13px;line-height: 1.8;}

/*copyright*/
.copyright{background: var(--bgcolor1);padding-bottom: 70px;}
.copyright .container {
    text-align: right;
    font-size: 11px;
    padding: 10px 1px 15px 0;
    line-height: 1;
}
.copyright a {color: #000;text-decoration: none;}

/*mobile-footer-menu*/
@media print, screen and (min-width: 768px){
    /* for PC */
    .f-fix-navi{display: none;}
}

.f-fix-navi {
    position: fixed;
    bottom: 0;
}
/* 親の横並び設定に「display: flex」が抜けていたため追加 */
.f-fix-navi .flex {
    display: flex; 
    width: 100vw;
    color: #fff;
    font-size: 13px;
    justify-content: space-between;
    align-items: center;
    height: 62px;
}

/* 【重要】aタグ自体をFlexboxにして上下中央に配置 */
.f-fix-navi .flex a {
    color: #fff;
    text-decoration: none;
    text-align: center;
    
    /* display: block; から以下に変更 */
    display: flex;
    align-items: center;     /* 上下中央寄せ */
    justify-content: center;  /* 左右中央寄せ */
    
    height: 100%;
}

.f-fix-navi .f-member { background: var(--pink); width: 41%; }
.f-fix-navi .f-document { background: var(--brown); width: 26%; }

/* 横並びボタンの画像に少し右余白（隙間）をあける */
.f-fix-navi .f-member img { width: 11vw; margin-right: 5px; }
.f-fix-navi .f-document img { width: 6vw; margin-right: 5px; }

/* 【重要】「お問合せ」と「電話」は縦並びにする */
.f-fix-navi .f-toi,
.f-fix-navi .f-tel {
    background: var(--d-blue);
    width: 15.6%;
    flex-direction: column; /* 上下（縦）に並べる設定を追加 */
}

.f-fix-navi .f-toi { font-size: 10px; }
.f-fix-navi .f-tel { font-size: min(10px, 2.2vw); }
.f-fix-navi .f-toi img { height: 6vw; }
.f-fix-navi .f-tel img { height: 7vw; }

/* 不要になった margin: auto と display: block を削除し、画像の下に少し隙間をあける */
.f-fix-navi .f-toi img,
.f-fix-navi .f-tel img {
    margin-bottom: 2px; 
}

@media print, screen and (min-width: 768px){
    /* for PC */
    footer .grid{grid-template-columns:  55% 15% 15% 15%;}
    address {grid-column: 1 / 2;} 
    .box-l {grid-column: 2 / 3;} 
    .box-m {grid-column: 3 / 4;} 
    .box-r {grid-column: 4 / 5;} 
}


@media screen and (max-width: 767px){
    /*for mobile*/
    footer .grid{grid-template-columns:  40% 40% 20%;grid-template-rows: auto auto;margin: 10px 0 0;}
    address {grid-column: 1 / 4;grid-row: 2 / 3;padding-top: 20px;} 
    .box-l, .box-m, .box-r{line-height: 2.5;}
    .box-l {grid-column: 1 / 2;grid-row: 1 / 2;} 
    .box-m {grid-column: 2 / 3;grid-row: 1 / 2;} 
    .box-r {grid-column: 3 / 4;grid-row: 1 / 2;} 
}


/*ページトップへ戻るボタン
-------------------------------------*/
#pagetop {
    position: fixed;
    bottom: 0;
    right: 15px;
    font-size: 10px;
}
#pagetop a {
    display: block;
    padding: 8px 8px 1px;
    text-align: center;
}
#pagetop a i{
    padding: 3px 0 5px;
}

#pagetop a:link,
#pagetop a:visited,
#pagetop a:active{
    background: #000090;
    color: #fff;
    opacity: 0.6;
    text-decoration: none;
}
#pagetop a:hover {
    background: #000;
    text-decoration: none;
    opacity: 0.3;
}
#pagetop a:hover i{
    padding: 0 0 2px;
}
@media print {
  /* 印刷時に不要な要素（ヘッダーメニューやフッター等）を非表示にする */
  #pagetop {
    display: none !important;
  }
}

/* responsive 
-------------------------------------*/
@media print,screen and (min-width: 768px){
/*PC*/
    .pc-disp{display: inline-block;}
    .mp-disp{display: none;}
}

@media screen and (max-width: 767px){
/*mobile*/
    .pc-disp{display: none;}
    .mp-disp{display: inline-block;}
    .gmenu .mp-disp{display: block;}
    #pagetop{bottom: 70px;}

}
@media print,screen and (min-width:768px) and (max-width:1100px) {
    .c-address br.mp-disp{display: inline-block}
}