@charset "UTF-8";

:root {
    --color-blue: #0168b7;
    --color-grayblue: #d8e3f8;
    --color-on-grayblue: #111c2b;
    --color-lightgray: #e4e4e4;
    --color-red: #d90f0f;
    --color-border: #dee2e6;
    --color-bg-success: #eaffd6;
    --color-w-success: #008900;
    --color-bg-warn: #fbd7d7;
}

/*----------------------------
  おまじない
　----------------------------*/
body {
    font-family: "SF Pro JP", "SF Pro Text", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    -webkit-text-size-adjust: none;
    margin: 0;
}

.main-content {
    max-width: 1300px !important;
    left: auto;
    right: auto;
}

#containerResponsive {
    width: auto !important;
}

.row {
    margin-right: auto;
    margin-left: auto;
}

.responsiveContent a {
    color: var(--color-blue);
}

img {
    max-width: 100%;
}

/*----------------------------
  独自カラム定義
　----------------------------*/

/*----------------------------
 　見出し
　----------------------------*/
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700 !important;
}

h1 {
    font-size: 2rem !important;
    margin-bottom: 1rem!important;
}

h2 {
    font-size: 1.75rem !important;
    margin-bottom: 1rem!important;
}

h3 {
    font-size: 1.5rem !important;
}

.responsiveContent h3 {
    margin-bottom: 1rem!important;
}

h4 {
    font-size: 1.25rem !important;
    margin-bottom: 0.5rem;    
}

.responsiveContent h4 {
    margin-bottom: 0.5rem;    
}

h5 {
    font-size: 1.15rem !important;
    margin-bottom: 0.5rem;    
}

h6 {
    font-size: 1rem !important;
    margin-bottom: 0.5rem;    
}

.light-sep {
    max-width: 80px;
    border: 1px solid var(--color-blue) !important;
}

@media screen and (max-width: 768px) {
    h1 {
        font-size: 2rem !important;
    }

    h2 {
        font-size: 1.5rem !important;
    }

    h3 {
        font-size: 1.25rem !important;
    }

    h4 {
        font-size: 1.15rem !important;
    }

    h5 {
        font-size: 1rem !important;
    }

    h6 {
        font-size: 1rem !important;
    }
}

/*----------------------------
 　本文
　----------------------------*/
.w-x18 {
    font-size: 1.8em;
}

.w-x15 {
    font-size: 1.5em;
}

.w-x13 {
    font-size: 1.3em;
}

.w-large {
    font-size: 1.25em;
}

.w-x115 {
    font-size: 1.15em;
}

.w-x110 {
    font-size: 1.10em;
}

.w-small {
    font-size: 0.9em !important;
}

.w-exsmall {
    font-size: 0.71em;
}

.w-bold {
    font-weight: bold;
}

.w-underline {
    text-decoration: underline;
}

.break-keep {
    word-break: keep-all;
}

.overflow-hidden {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*----------------------------
  文字色
　----------------------------*/
.w-white {
    color: #ffffff !important;
}

.w-blue {
    color: var(--color-blue) !important;
}

.w-red {
    color: var(--color-red) !important;
}

.w-gray {
    color: #8b8b8b !important;
}

.w-black {
    color: #000000 !important;
}

/*----------------------------
  背景色
　----------------------------*/
.bg-orange {
    background: #f18e19 !important;
    color: #ffffff;
}

.bg-green {
    background: #78bc02 !important;
    color: #ffffff;
}

.bg-blue {
    background: var(--color-blue) !important;
    color: #ffffff;
}

.bg-skyblue {
    background: #1C8CF0 !important;
    color: #ffffff;
}

.bg-darkgray {
    background: #4d4d4d !important;
    color: #ffffff;
}

.bg-darkgray a {
    color: #ffffff;
}

.bg-gray {
    background: #4d4d4d !important;
    color: #ffffff;
}

.bg-lightgray {
    background: var(--color-lightgray) !important;
    color: #000000;
}

.bg-white {
    background: #ffffff !important;
    color: #000000;
}

.bg-purple {
    background: #6633cc !important;
}

.bg-lightblue {
    background: #e8f0fe !important;
    color: #000000;
}

.bg-grayblue {
    background: var(--color-grayblue);
    color: var(--color-on-grayblue);
}

/*----------------------------
  ボタン
　----------------------------*/
.btn {
    border-radius: 0.15em !important;
    height: fit-content;
}

.responsiveContent .btn {
    line-height: inherit;
}

#toggleSubmenu {
    box-shadow: none!important;
}

.btn-stretch {
    width: 100% !important;
}

.btn-primary {
    background-color: #f18e19 !important;
    border-color: #f18e19 !important;
    color: #ffffff !important;
}

.btn-primary:hover {
    background-color: #ff9517 !important;
    border-color: #ff9517 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

.btn-primary:active,
.btn-primary:focus {
    background-color: #f18e19 !important;
    border-color: #f18e19 !important;
    color: #ffffff !important;
}

.btn-secondary {
    background-color: var(--color-blue) !important;
    border-color: var(--color-blue) !important;
    color: #ffffff !important;
}

.btn-secondary:hover {
    background-color: #007cdb !important;
    border-color: #007cdb !important;
    color: #ffffff !important;
}

.btn-secondary:active,
.btn-secondary:focus {
    background-color: #006fc4 !important;
    border-color: #006fc4 !important;
    color: #ffffff !important;
}

.btn-cancel {
    background-color: #ffffff !important;
    border-color: var(--color-blue) !important;
    color: var(--color-blue) !important;
}

.btn-cancel:hover {
    background-color: #d1f4ff !important;
    border-color: var(--color-blue) !important;
    color: var(--color-blue) !important;
}

.btn-cancel:active,
.btn-cancel:focus {
    background-color: #ffffff !important;
    border-color: var(--color-blue) !important;
    color: var(--color-blue) !important;
}

.btn-danger {
    background-color: var(--color-red) !important;
    border-color: var(--color-red) !important;
    color: #ffffff !important;
}

.btn-danger:hover {
    opacity: 0.8;
    color: #ffffff !important;
}

.btn-danger:active,
.btn-danger:focus {
    background-color: var(--color-red) !important;
    border-color: var(--color-red) !important;
    color: #ffffff !important;
}

.responsiveContent button.btn-danger:active, 
.responsiveContent button.btn-danger:focus {
    background-color: var(--color-red) !important;
    border-color: var(--color-red) !important;
    color: #ffffff !important;
}

.btn-solid {
    background-color: rgba(255, 255, 255, 0) !important;
    border-color: rgba(255, 255, 255, 0) !important;
    color: #4c4c4c !important;
}

.btn-solid:hover {
    background-color: #e8f0fe !important;
    border-color: #e8f0fe !important;
}

.btn-solid:active,
.btn-solid:focus {
    background-color: rgba(255, 255, 255, 0) !important;
    border-color: rgba(255, 255, 255, 0) !important;
}

.btn-link {
    color: var(--color-blue) !important;
}

.btn-link:active,
.btn-link:focus {
    background-color: rgba(255, 255, 255, 0) !important;
    border-color: rgba(255, 255, 255, 0) !important;
}

:focus,
*:focus {
    outline: none;
}

.btn-red {
    background-color: #f03 !important;
    border-color: #f03 !important;
    color: #ffffff !important;
}

.btn-red:hover {
    background-color: #fe2c56 !important;
    border-color: #fe2c56 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

.btn-red:active,
.btn-red:focus {
    background-color: #f03 !important;
    border-color: #f03 !important;
    color: #ffffff !important;
}

.btn-lightblue {
    background-color: #00a2e6 !important;
    border-color: #00a2e6 !important;
    color: #ffffff !important;
}

.btn-lightblue:hover {
    background-color: #3ab1e3 !important;
    border-color: #3ab1e3 !important;
    color: #ffffff !important;
    text-decoration: none;
}

.btn-lightblue:active,
.btn-lightblue:focus {
    background-color: #00a2e6 !important;
    border-color: #00a2e6 !important;
    color: #ffffff !important;
}

.btn.disabled,
.btn:disabled {
    background-color: var(--color-lightgray)!important;
    color: #777!important;
    opacity: 0.6!important;
    border-color: var(--color-lightgray)!important;
}

/*----------------------------
  影
　----------------------------*/
.shadow-l1 {
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.25));
}

.shadow-l2 {
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.35));
}

.shadow-l3 {
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.45));
}

/*----------------------------
  画像
　----------------------------*/
img.img-stretch {
    width: 100%;
}

/*----------------------------
  テーブル
　----------------------------*/
@media( max-width: 600px){
    .table-wrap {
        overflow-x: scroll;
    }
    .table-wrap::-webkit-scrollbar {
        height: 5px;
    }
    .table-wrap::-webkit-scrollbar-thumb {
        background-color: rgb(1 104 183 / .31);
        border-radius: 2rem;
    }
}

table {
    width: 100%;
    border: 1px solid var(--color-border);
}

tr {
    border-bottom: 1px solid var(--color-border);
}

th,td {
    padding: 5px;
}

th {
    background-color: var(--color-lightgray);
}

dt, dd {
    padding: 0.5rem;
}

dt {
    font-weight: 900;
    background-color: var(--color-lightgray);
}

/*----------------------------
  フォーム
　----------------------------*/
input {
    vertical-align: middle!important; /* iPhoneでフォームの文字が縦にずれるのを防ぐ */
}

input[type="text"],
input[type="password"],
input[type="number"],
select {
	border: 2px solid var(--color-lightgray);
	/* width: 100%; */
	padding: 0.5rem;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
select:focus {
	outline: none;
	border: 2px solid var(--color-blue);
}

input[type="text"].form-error,
input[type="password"].form-error,
input[type="number"].form-error,
select.form-error {
	outline: none;
	background-color: #f4eeee;
	border: 2px solid #FF0000;
}

input[type="text"].form-error:focus,
input[type="password"].form-error:focus,
input[type="number"].form-error:focus,
select.form-error:focus {
	outline: none;
	background-color: #ffffff;
	border: 2px solid var(--color-blue);
}

/*----------------------------
  枠
　----------------------------*/
.responsiveContent .border {
    border: 1px solid var(--color-border) !important;
    padding: 1rem;
}

.responsiveContent .border.comp,
.responsiveContent .border.success {
    border: none !important;
    background-color: var(--color-bg-success);
    color: var(--color-w-success)!important;
}

.responsiveContent .border.warn {
    border: none !important;
    background-color: var(--color-bg-warn);
    color: var(--color-red)!important;
}

.success_msg {
    border: none !important;
    padding: 1rem;
    background-color: var(--color-bg-success);
    color: var(--color-w-success)!important;
}
.success_msg a {
    font-weight: 700;
    color: var(--color-w-success)!important;
}
.error_msg {
    border: none !important;
    padding: 1rem;
    background-color: var(--color-bg-warn);
    color: var(--color-red)!important;
}
.error_msg a {
    font-weight: 700;
    color: var(--color-red)!important;
}

/*----------------------------
  テンプレート部の固定箇所
　----------------------------*/
#topContent {
    display: flex;
    flex-wrap: wrap;
}

#topContent .summary-block {
    transition: 0.3s;
}

#topContent a.activity-link .summary-block:hover {
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.25));
}

@media (max-width:600px) {
    #submenu {
        transition: .4s;
    }
    #topContent .summary-block {
        font-size: 10px;
    }
}

/*----------------------------
  メインメニュー
　----------------------------*/
.main-menu__wrap {
    border-radius: 5px;
    overflow: hidden;
}

.main-menu__link {
    background-color: var(--color-grayblue)!important;
    color: var(--color-blue)!important;
    text-align: center;
    font-size: 1.25em;
    font-weight: 700;
    padding: 1rem;
    transition: 0.3s;
}

.main-menu__link:hover {
    text-decoration: none!important;
    opacity: 0.8!important;
}

.main-menu__link.sec1 {
    border-bottom: 2px solid #fff;
}

.main-menu__link.sec2 {
    border-right: 2px solid #fff;
}

@media (max-width: 768px){
    .main-menu__link.sec2 {
        border-bottom: 2px solid #fff;
        border-right: none;
    }        
}

/*----------------------------
  アクティビティ
　----------------------------*/
#activityNav {
    max-width: 500px;
    margin: 0 auto;
    display: flex;
}

#activityNav a.nav-button {
    display: block;
    width: 50%;
    padding: 0.5rem;
    color: var(--color-blue);
    background-color: #fff;
    text-align: center;
    font-weight: 700;
    border: 1px solid var(--color-blue);
    transition: 0.3s;
}

#activityNav a.nav-button:hover {
    text-decoration: none;
    color: var(--color-blue);
    background-color: #d1f4ff;
}

#activityNav a.nav-button.active {
    color: #fff;
    background-color: var(--color-blue);
}

/*----------------------------
  アクティビティ
　----------------------------*/
.activity-tile {
    padding: 1rem;
    height: 100%;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    transition: 0.3s;
}

a > .activity-tile:hover {
    opacity: 0.9;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.25));
    /* text-decoration: underline; */
}

a.activity-link {
    display: contents;
    color: inherit;
}

a.activity-link:hover {
    color: inherit;
}

.activity-tile.fund_news,
.activity-tile.ms_news {
    background-color: #ffd6ea;
}

.activity-tile.fund_purcahe {
    background-color: #d6eaff;
}

.activity-tile.fund_contract {
    background-color: #d6eaff;
}

.activity-tile.store_purchase {
    background-color: #ffffd6;
}

.activity-tile.deposit_income {
    background-color: #ffead6;
}

.activity-tile.deposit_withdraw {
    background-color: #eaffd6;
}

.activity-tile.important {
    background-color: #fbd7d7;
}

.activity-tile .w-accent {
    font-size: 1.20em;
    font-weight: 700;
}

@media (max-width: 768px){
    .activity-tile {
        font-size: 0.75em;
    }
    .activity-tile .w-accent {
        font-size: 0.9rem;
    }
}

/*----------------------------
  ニュース一覧
　----------------------------*/
.news-block {
    max-height: 300px;
    overflow-y: scroll;
    background-color: var(--color-grayblue);
    color: var(--color-on-grayblue);
}

.news-block::-webkit-scrollbar {
    width: 10px;
}

.news-block::-webkit-scrollbar-track {
    background-color: var(--color-grayblue);
}

.news-block::-webkit-scrollbar-thumb {
    background-color: rgb(1 104 183 / .31);
    border-radius: 2rem;
}