/* リセット */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/*    .noto-sans-jp-<uniquifier> {
    font-family: "Noto Sans JP", serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
}*/
body {
    font-family:"メイリオ", Meriyo,  "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", sans-serif;
    line-height: 1.75;
    color: #2e1e1a !important;
    background-color: #ffffff;
    /*background-color: #f9f9f9;*/
}
h1,h2,h3,h4,p,li,table {
    color: #2e1e1a;
    font-family:"メイリオ", Meriyo,  "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", sans-serif;
}
div#wrap {

}
div#contentsWrap, div.pageTopWrap {
    background: #ffffff;
}
p {
    width: 94%;
    margin: 0 auto;
}
#features p,#features ul li {
    font-size: 100% !important;
    line-height: 1.8em;
}

.img-box {
    width: 75%;
    text-align: center;
    /*margin-top: 2em;*/
}
.img-box img {
    max-width: 100%;
    height: 100%;

}
#features p.mitoblue {
    color: #003399;
    font-size: 1.6vw ! IMPORTANT;
}
.tar {
    text-align: right;
    margin-right: 5em;
}
.tac {
    text-align: center;
}
.lsno {
    list-style: none;
}
.idt02 {
    margin-left: 1.5em;
    text-indent: -1.9em;
}
#features .sml {
    font-size: 0.8em !important;
}
/* ヘッダーとナビゲーションバー */
header {
    background: #005bac;
    color: #fff;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky; /* スクロール時も上部に固定 */
    top: 0;
    z-index: 1000;
}
.header-logo a {
    color: #fff;
    text-decoration: none;
    font-size: 1.5em;
}
.navigation ul {
    list-style: none;
    display: flex;
    gap: 15px;
}
.navigation a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    padding: 5px 10px;
    transition: background 0.3s ease;
}
.navigation a:hover {
    background: #ff9900;
    border-radius: 5px;
}

/* サブナビゲーションセクション */
.sub-navigation {
    background: #f1f1f1;
    padding: 20px 0;
    text-align: center;
}
.sub-navigation02 {
    background: #f1f1f1;
    text-align: center;
}
.nav-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    font-family:"メイリオ", Meriyo,  "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", sans-serif;
    font-size: 1.3vw;
}
.sub-navigation02 .nav-buttons {
    font-size: 1.1vw;
}
.nav-btn {
    /*
    background: #0072e3;
    background: #003399;*/
    background-image: url(img/btnbg.png);
    color: #efeee7 !important;
    line-height: 1.5em;
    text-decoration: none !important;
    padding: 7px 13px;
    border-radius: 3px;
    border-bottom: 3px solid #bfb564;
    /*font-weight: bold;*/
    transition: background 0.3s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
}
.nav-btn:hover {
    background: #005bac;
    transform: scale(1.05);
}
.pdf-btn:hover {
    background: #ffffff;
    transform: scale(1.05);
}
.pdf-btn {
    color: #0f2d89 !important;
    text-decoration: none !important;
    padding: 3px 12px;
    border-radius: 5px;
    transition: background 0.3s ease, transform 0.2s ease;
    margin: 0 0 0 auto;
    /*
    background: #ffffff;
    border: 2px solid #0072e3;
    font-weight: bold;
    display: flex;
    align-items: center;
    margin-right: 8%;
    box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
    */
}
div#gnavWrap {
    height: 44px;
}

/* 付帯サービスナビゲーションセクション */
.inside-navigation {
    width: 80%;
    display: flex;
    margin: 0em auto;
}
.inside-navigation>div{
    width: 50%;
    padding: 10px;
}
.insidenav-btn {
    background: #ffffff;
    color: #fff !important;
    text-decoration: none !important;
    padding: 7px 20px;
    border-radius: 3px;
    font-weight: bold;
    transition: background 0.3s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
    display: block;
    border: 1px solid #8fa9c3;
    border-bottom: 3px solid #0072e3;
}
.insidenav-btn:hover {
    background: #ffffff;
    border: 1px solid #0072e3;
    border-bottom: 3px solid #0072e3;
    transform: scale(1.05);
}
.insidenav-btn img,.insidenav-btn h3 {
    display: block;
}
.insidenav-btn h3 {
    margin-bottom: 0.5em ! IMPORTANT;
}
.insidenav-btn p {
    height:100%;
    line-height: 1.5em ! IMPORTANT;
}
.insidenav-btn2 {
    background: #ffffff;
    color: #fff !important;
    text-decoration: none !important;
    padding: 7px 20px;
    border-radius: 3px;
    font-weight: bold;
    transition: background 0.3s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
    display: block;
    border: 1px solid #8fa9c3;
    border-bottom: 3px solid #0072e3;
}
.insidenav-btn2:hover {
    background: #ffffff;
    border: 1px solid #0072e3;
    border-bottom: 3px solid #0072e3;
    transform: scale(1.05);
}
.insidenav-btn2 img,.insidenav-btn h3 {
    display: block;
}
.insidenav-btn2 h3 {
    margin-top: 0em ! IMPORTANT;
    margin-bottom: 0.0em ! IMPORTANT;
    text-align: center;
    padding-left: 0 !IMPORTANT;
    font-size: 2.1vw;
    border: none;
    margin-left: 0em;
}
.insidenav-btn2 p {
    text-align: center;
    font-weight: bold;
    font-size: 1.6vw ! IMPORTANT;
}

.insidenav-btn3 {
    background: #ffffff;
    color: #fff !important;
    text-decoration: none !important;
    padding: 7px 20px;
    border-radius: 3px;
    font-weight: bold;
    transition: background 0.3s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
    display: block;
    border: 1px solid #8fa9c3;
    border-bottom: 3px solid #0072e3;
}
.insidenav-btn3:hover {
    background: #ffffff;
    border: 1px solid #0072e3;
    border-bottom: 3px solid #0072e3;
    transform: scale(1.05);
}
.insidenav-btn h3 {
    display: block;
    /*text-align: center;*/
    padding-left: 1em ! IMPORTANT;
    margin-left: 0em;
}
.insidenav-btn3 h3 {
    margin-top: 0em ! IMPORTANT;
    margin-bottom: 0.0em ! IMPORTANT;
    text-align: center;
    padding-left: 0 !IMPORTANT;
    font-size: 1.8vw;
}
.insidenav-btn3 p {
    text-align: center;
    font-weight: bold;
    font-size: 1.6vw ! IMPORTANT;
}
.linkimg {
    padding-left: 0 !IMPORTANT;
    /*background-color: #e1e2e5;*/
    overflow: hidden;
}
.linkimg img {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
}

h2#features1 span,#features2 span,#features3 span {
    /*font-size: 1.8vw;*/
    font-size: 1.8vw;
    margin-left: 1em;
    vertical-align: middle;
}
/*　画面サイズが1024pxからはここを読み込む　*/
@media screen and (min-width:1024px) {
 h2#features1 span {
    font-size: 24px;
 }
}
/*　画面サイズが768pxから1024pxまではここを読み込む　*/
@media screen and (min-width:790px) and ( max-width:1024px) {

}

/*　画面サイズが480pxからはここを読み込む　*/
@media screen and (max-width:744px) { 
 h2#features1 span {
    font-size: 1.5vw;
 }
}

/* ヒーローセクション */
#hero {
    text-align: left; /* 左寄せに変更（必要に応じて中央寄せも対応） */
    /*padding: 50px 20px;*/
    background: linear-gradient(to right, #005bac, #0072e3);
    color: #fff;
    padding: 1% 5%;
    /* position: relative; ボタンの位置調整に必要 */
    background-image: url(img/bg02.png);
    background-repeat: repeat;
}
#hero h1 {
    font-size: 2.5em;
    margin-top: 15px;
}
#hero p {
    font-size: 1.2em;
}
.title {
    display: inline-block;
    vertical-align: top;
    width: 74%;
    margin-top: 1em;
}
.title h1,.title p {
    color: white;
}
#features .emphasis01 {
    font-weight: bold;
    font-size: 1.5em !important;
    color: #f76387 !important;
}
#features .emphasis02 {
    font-weight: bold;
    font-size: 1.2em !important;
    color: #0072e3 !important;
}
.qaouter{
    width: 88% !important;
    margin: 1em auto;
}
.features_inner {
    width: 90%;
    margin: 0 auto;
}
.features_inner img {
    max-width: 100%;
    height: auto;
    /*width: 100%;
    height: 100%;*/
}
.annotation {
    margin-left: 4.5em;
    text-indent: -2em;
    width: 88%;
}
/* 画像テキスト 横並び */
.flex {
  display: flex; /*横並び*/
  width: 90%;
  margin: 0 auto;
}
.flex .image {
  width: 30%; /*画像サイズ指定*/
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
}
.flex .text {
    width: 70%;
  margin: 0 0 0 20px;
  padding: 0;
}


/* ログインエリア */
.btn-primary {
    width: 85%;
    margin: 0 auto;
    margin: 0.6em auto;
    padding: 6px 20px;
    border-radius: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: radial-gradient(circle, rgba(129, 110, 44, 1) 0%, rgba(200, 185, 130, 1) 0%, rgba(129, 110, 44, 1) 0%, rgba(223, 209, 157, 1));
    border: 1px solid #c1b586;
     /* 
    background: #ff9900;
    background: -webkit-gradient(45deg, #dfd19d 35%, #816e2c);
    background: linear-gradient(45deg, #dfd19d 35%, #816e2c);
    position: absolute;
    right: 20%;
    left: 20%;
    bottom: 10%; */
}
.btn-primary:hover {
    transition: background 0.3s ease, transform 0.2s ease;
    transform: scale(1.05);
}
.btn-primary a {
    color: #fff !important;
    text-align: center;
    text-decoration: none !important;
    font-weight: bold;
    font-size: 1.5vw;
}
.login {
    padding: 15px 10px;
    background-color: #efeee7;
    display: inline-block;
    
    width: 24%;
    border-radius: 5px 5px 5px 5px;
    box-shadow: inset 0px 0px 10px rgba(0, 0, 0, .5);
}
.login-heading {
    color: #FFFFFF;
    text-align: center;
}
.login-heading p.logintitle{
    border-bottom: 2px dotted #6c6d32;;
    margin-bottom: 0.5em;
    padding-bottom: 0.2em;
}
.login-heading .aa {
    font-size: 1.4vw;
}
.login-heading p.bb {
    font-size: 1.0vw ! IMPORTANT;
    line-height: 1.5em;
}
.loginbtn {
    max-width: 70%;
    margin: 0.5em auto;
}
.only {
    font-size: 2.0vw;
    font-weight: bold;
    color: #0f2d89;
}
@media (max-width: 820px) {
   /* 横幅が820px以下の場合に適用するスタイル */
   #splogin {
    padding: 0.4em;
    }
   .login {
    display: none;
    }
    .title {
    width: 100%;
    }
    .title div.img {
    width: 100%;
    }
    .logintitle .only {
    font-size: 0.9rem ! IMPORTANT;
    }
    .sub-navigation02 {
    background-color: #ffffff;
    }
    .btn-primary {
    width: 70%;
    padding: 10px 20px;
    }
    .btn-primary a {
        font-size: 16px;
    }
    .sub-navigation02 .nav-buttons a{
        margin: 0 auto;
    }
    .login-heading p.bb,.nav-buttons a {
        font-size: 0.9rem ! IMPORTANT;
    }
}
@media (min-width: 821px) {
   /* 横幅が820px以上の場合に適用するスタイル */
   #splogin {
    display: none;
   }
}
    
/* セクション */
#service, #features{
    padding: 30px 20px;
    background: #fff;
    /*margin: 20px 0;*/
    max-width: 1078px;
    margin: 0 auto;
    font-size: 1.1em;
}
#service h2, #features h2 {
    margin-bottom: 1em;
}
#features ul {
    list-style: disc;
    padding-left: 2em;
    width: 96%;
    margin: 0 auto;
}
#features ul li {
    font-size: 0.9em !important;
    /*margin-bottom: 0.5em;*/
}
#features ul li:last-child {
    margin-bottom: 0em !important;
}
#note {
    padding: 40px 20px 1px 20px;
    background: #faf9f3 !important;
    margin: 0 auto;
    font-size: 1.1em;
    margin-bottom: 1em;
}
div.pageTopWrap {
    background: #fff !important;
}

/* ドットボックス */
.dotbox {
    width:90% !important;
    margin: 1em auto; 
    padding: 1rem 2rem;
    border: 3px dotted #c9c2c2;
    background-color: #faf9f3;
}
/* カラーボックス */
.colorbox {
    width:90% !important;
    margin: 0.3em auto; 
    padding: 1rem 2rem;
    border: 6px dotted #54c4ea;
    background-color: #faf9f3;
}

.source {
    text-align: center;
    font-size: 0.8em !important;
    margin-top: 0.5em;
}

/* フッター */
footer {
    text-align: center;
    padding: 20px;
    background: #333;
    color: #fff;
    font-size: 0.9em;
}

/* ページ上部へ戻るボタン */
#back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: #005bac;
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 18px;
    display: none; /* 初期状態では非表示 */
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    transition: background 0.3s ease;
}
#back-to-top:hover {
    background-color: #0072e3;
}

/*****************************************
=table
**************************************** */
table.nor {
    margin:0 auto;
    width:93%;
}

table.nor th {
    padding:5px 7px;
    background:#EFEBDC;
    border:1px solid #D4D4D4;
}

table.nor td {
    padding:7px 7px;
    border:1px solid #D4D4D4;
}

table.nor2 {
    margin:0 0 10px;
    width:690px;
}

table.nor2 th {
    padding:5px 7px;
    border:1px solid #dcdcdc;
}

table.nor2 td {
    padding:7px 7px;
    border:1px solid #dcdcdc;
}

table.type01 th {
    text-align:center;
}

table.type02 th {
    text-align:left;
}

.cCell {
    background:#faf9f3!important;
}

p.tableBottom {
    margin-bottom:20px;
    padding-left:10px;
}

table.list {
    clear:both;
    margin:0 10px 30px 10px;
    width:690px;
    border-top:1px dotted #cfcfcf;
}

table.list th {
    padding:7px 0px 7px 10px;
    width:120px;
    border-bottom:1px dotted #cfcfcf;
}

table.list td {
    padding:7px 10px 7px 0px;
    border-bottom:1px dotted #cfcfcf;
}

table.pdf td a{
    padding-left:20px;
    background:url(../img/common/ico_list_04.png) no-repeat left 3px;
}

table.arrow td a {
    padding-left:20px;
    background:url(../img/common/ico_list_02.png) no-repeat 5px 5px;
}

.top table.arrow2 td {
    padding-left:20px;
    background:url(../img/common/ico_list_02.png) no-repeat 7px 15px;
}
.top table.arrow2 .icon_pdf {
    padding-left:20px;
    background:url(../img/common/ico_list_04.png) no-repeat 5px 11px;
}

.listIcon {
    padding-bottom:5px;
}

.tdIco {
    padding:0 10px 0 0!important;
    width:62px!important;
    text-align:center;
}

table.icon2 td a.pdf {
    padding-left:20px;
    background:url(../img/common/ico_list_04.png) no-repeat left 3px;
}

table.icon2 td a.ar {
    padding-left:20px;
    background:url(../img/common/ico_list_02.png) no-repeat 5px 5px;
}

table.table_dividend {
    margin: 0 0 10px 10px;
width: 690px;
    border-top:1px dotted #cfcfcf;
}

table.table_dividend td {
    width:50%;
    padding:7px 7px;
    background-color:#ebf4ff;
    border: 4px solid #fff;
}

table.table_dividend td a{
    padding-left:16px;
    background: url(../img/common/ico_arrow_off.png) no-repeat 1px 50% #ebf4ff;
}
.tablenotice {
    width: 90% ! IMPORTANT;
    margin: 1em auto ! IMPORTANT;
    padding: 0 !IMPORTANT;
}
#features .tablenotice li {
    list-style: none;
    line-height: 1.5em;
    padding-left: 1em;
    text-indent: -1em;
    font-size: 0.8em !important;
}
/*****************************************
=注意文言など
**************************************** */
div.nor{
    width: 70%;
    margin: 0 auto;
    background-color: #fff;
}
div.nor02{
    width: 80%;
    margin: 0 auto;
    border:1px solid #dcdcdc;
    padding: 1em;
}
div.nor02 p {
    margin-left: 1.4em;
    text-indent: -1.4em;
    margin-bottom:1em;
    /*font-size: 1em !IMPORTANT;*/
}
div.nor02 p span {
    color: orange;
}
div.boxBnr2 {
    width: 710px;
    margin: 2em auto;
}
.indent{
  padding-left: 1em;
  text-indent: -1em;
}
.toiawase {
    width: 94%;
    margin-top: 1em;
    text-align: right;
}
.toiawase a {
    text-underline-offset: 6px;
    font-size: 0.9em !important;
}
.yellow {
    color: #d1a733;
}

/*****************************************
=h1~
**************************************** */
h1 {
    font-size: 2.6em;
    margin-bottom: 1em;
    position: relative;
    padding: 0.5rem 0.5rem;
    font-family:"メイリオ", Meriyo,  "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", sans-serif;
    /*font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif !important;*/
}
h1:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 8px;
  content: '';
  border-radius: 3px;
  background-image: -webkit-gradient(linear, right top, left top, from(#cd3e1d), to(#003399));
  background-image: -webkit-linear-gradient(right, #cd3e1d 0%, #003399 100%);
  background-image: linear-gradient(to left, #cd3e1d 0%, #003399 100%);
  /*background-image: -webkit-gradient(linear, right top, left top, from(#003399), to(#cd3e1d));
  background-image: -webkit-linear-gradient(right, #003399 0%, #cd3e1d 100%);
  background-image: linear-gradient(to left, #003399 0%, #cd3e1d 100%);*/
}
h2 {
  position: relative;
  padding: 0.2rem 2rem;
  border-bottom: 4px solid #003399;
  font-size: 1.8em;
  width: 98%;
  margin: 0 auto;
  font-family:"メイリオ", Meriyo,  "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", sans-serif;
}

h2:before {
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 20%;
  height: 4px;
  content: '';
  border-radius: 3px;
  background: #0072e3;
}
/*h3 {
    padding: 0.1rem 0.4rem;
    border-left: 6px double #0072e3;
    font-weight: bold;
    margin-bottom: 1em;
}*/
h3 {
    /*position: relative;*/
    padding-left: 0.6em;
    font-size: 1.2em;
    margin-top: 1em;
    font-family:"メイリオ", Meriyo,  "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", sans-serif;
    border-left: 5px solid #2589d0;
    margin-left: 2em;
}
}
h3:before {
    position: absolute;
    top: 25%;
    left: 20px;
    width: 6px;
    height: 50%;
    content: '';
    -ms-filter: "alpha(opacity=20)";
    border-radius: 3px;
    background: #0072e3;
}
h4 {
    font-weight: bold;
    margin-left: 1em;
    margin-bottom: 0.5em;
}
/*****************************************
画面幅対応
**************************************** */
@media (max-width: 820px) {
   /* 横幅が820px以下の場合に適用するスタイル */
   h1 {
    font-size: 2.1em;
    padding: 0.2rem 0.5rem;
    }
   #features p,#features ul li {
    font-size: 1.2rem !important;
    line-height: 1.6em;
    }
   .boxBnr2 {
    display: none;
   }
   .tenpotoiawase {
    text-align: center;
    margin: 0.9em;
   }
   .tenpotoiawase .tobranch {
    margin-top: 0.6em;
   }
   div.nor {
    width: 90%;
   }
}
@media (min-width: 821px) {
   /* 横幅が820px以上の場合に適用するスタイル */
   .tenpotoiawase {
    display: none;
   }
}