@charset "UTF-8";

/* ==========================================================================
Phishing Notice (前半：ヘッダー・お知らせ・スクロールパーツ)
========================================================================== */
/* Header */
.phishing-notice__header {
text-align: center;
margin-bottom: 40px;
}

.phishing-notice__title {
font-size: 36px;
font-weight: bold;
color: #333333;
position: relative;
padding-bottom: 15px;
display: inline-block;
text-align: center;
}

.phishing-notice__title::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 4px;
background-color: #1578BB;
}

.phishing-notice__lead {
font-size: 14px;
color: #333333;
margin-top: 24px;
word-break: break-all;
text-align: left;
}

/* Content Area */
.phishing-notice__content {
margin-top: 40px;
}

.phishing-notice__sub-title {
font-size: 18px;
font-weight: bold;
text-align: center;
margin-bottom: 20px;
color: #333333;
}

/* お知らせコンテナ（外枠） */
.phishing-notice__box {
border: 1px solid #e3e3e3;
background-color: #ffffff;
}

/* ul要素（__list）に直接スクロールを設定 */
.phishing-notice__list {
list-style: none;
width: 95%;
height: 210px; /* 70px × 3行分 */
overflow-y: scroll;
padding-left: 30px;
padding-right: 30px;
-webkit-overflow-scrolling: touch;
}

/* --- カスタムスクロールバー（__listに適用） --- */
.phishing-notice__list::-webkit-scrollbar {
width: 4px;
}

/* スクロールバーの背景（グレーの線） */
.phishing-notice__list::-webkit-scrollbar-track {
background: #e0e0e0;
border-radius: 2px;
margin: 15px 0; 
}

/* スクロールバーのつまみ（黄色のバー） */
.phishing-notice__list::-webkit-scrollbar-thumb {
background: #fabf00;
border-radius: 2px;
padding-left: 30px;
}

.phishing-notice__item {
border-bottom: 1px solid #eeeded;
}

.phishing-notice__item:last-child {
border-bottom: none;
}

/* Block: notice-card */
.phishing-notice__title {
font-size: 22px;
}

.notice-card {
height: 70px; 
display: flex;
flex-direction: column;
justify-content: center;
}

.notice-card__date {
font-size: 13px;
color: #666666;
margin-bottom: 2px;
}

.notice-card__title {
font-size: 14px;
font-weight: normal;
white-space: nowrap;
display: block;
width: 100%;
overflow: hidden; 
text-align: left;
}

.notice-card__link {
color: #1578BB;
text-decoration: none;
transition: color 0.2s ease;
display: inline-block;    
max-width: 100%;          
vertical-align: bottom;   
white-space: nowrap;    
overflow: hidden;     
text-overflow: ellipsis; 
box-sizing: border-box; 
}

.c-link_blank{
display: inline-block;
padding-right: 24px;
background-image: url(/assets/images/icon_link_blank_blue.svg);
background-repeat: no-repeat;
background-position: right center;
background-size: 22px 22px;
}

.notice-card__link:hover {
text-decoration: underline;
}

/* Media Query (Desktop: 768px以上) */
@media (min-width: 768px) {
.phishing-notice {
padding: 60px 40px;
}

.phishing-notice__header {
text-align: center;
margin-bottom: 50px;
}

.phishing-notice__title {
font-size: 36px;
width: auto;
padding-bottom: 20px;
}

.phishing-notice__lead {
font-size: 15px;
text-align: center;
margin-top: 30px;
}

.phishing-notice__sub-title {
font-size: 22px;
margin-bottom: 30px;
}

/* PC版のサイズ調整 */
.phishing-notice__list {
height: 222px; /* 74px × 3行分 */
width: 98%;
}

.phishing-notice__list::-webkit-scrollbar-track {
margin: 20px 0;
}

.notice-card {
height: 74px;
flex-direction: row;
align-items: center;
justify-content: flex-start;
}

.notice-card__date {
width: 140px;
flex-shrink: 0;
margin-bottom: 0;
font-size: 14px;
}

.notice-card__title {
font-size: 16px;
flex: 1;
}
}

/* ==========================================================================
Nav Menu Component (固定メニューバー)
========================================================================== */
.nav-menu {
width: 100%;
margin: 0 auto;
}

.nav-menu__list {
display: flex;
flex-direction: column;
gap: 20px;
}

.nav-menu__item {
width: 100%;
border-bottom: 1px solid #DFDFDF;
}

.nav-menu__link {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between; 
min-height: 86px;
padding: 16px 12px;
color: #333;
font-size: 16px;
text-decoration: none;
text-align: center;
line-height: 1.5;
transition: color 0.2s ease;
}

.nav-menu__link::after {
content: "";
display: block;
width: 22px;
height: 22px;
margin-top: auto; 
padding-top: 12px; 
background-image: url(/assets/images/icon_link_arrow_down_blue.svg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}

.nav-menu__link:hover {
text-decoration: underline;
}

@media screen and (min-width: 768px) {
.nav-menu {
max-width: 1200px;
padding: 0;
}

.nav-menu__list {
display: flex;
flex-direction: row;
gap: 0;
}

.nav-menu__item {
flex: 1;
display: flex;
border-bottom: none;
border-right: 1px solid #DFDFDF;
}

.nav-menu__item:last-child {
border-right: none;
}

.nav-menu__link {
width: 100%;
position: relative;
justify-content: flex-start;
min-height: 110px;
padding: 20px 12px 40px 12px;
font-size: 16px;
}

.nav-menu__link::after {
content: "";
display: block;
width: 22px;
height: 22px;
position: absolute;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
margin-top: 0;
background-image: url(/assets/images/icon_link_arrow_down_blue.svg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
}

/* ==========================================================================
【ここから新規】背景を一面に広げる全幅トリック用の共通定義と後半コンポーネント
========================================================================== */
.info-section__inner,
.service-section__inner {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
background-color: #F2F8FF;
}

.u-desktop-only {
display: none;
}

/* --- Info Section Component (フィッシング詐欺とは) --- */
.info-section__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px; 
padding: 40px 20px;
margin-top: 60px;
margin-bottom: 60px;
}

.info-section__title {
margin: 0;
color: #333;
font-size: 20px;
font-weight: bold;
text-align: center;
line-height: 1.3;
}

.info-section__text {
margin: 0;
color: #333;
font-size: 14px;
text-align: justify;
line-height: 1.7;
max-width: 600px;
}

.info-section__image-wrapper {
width: 100%;
max-width: 400px;
}

.info-section__image {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
}

@media screen and (min-width: 768px) {
.info-section__inner {
padding: 40px; 
gap: 20px; 
margin-top: 100px;
margin-bottom: 100px;
}

.info-section__title {
font-size: 28px; 
}

.info-section__text {
font-size: 16px;
text-align: center;
max-width: 1000px;
}

.info-section__image {
max-width: 500px;
}
}

/* --- Measures Section Component (被害に遭わないための対策) --- */
.measures-section {
width: 100%;
max-width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}

.measures-section__title {
margin: 0 0 16px 0;
color: #333;
font-size: 20px;
font-weight: bold;
text-align: center;
line-height: 1.4;
}

.measures-section__lead {
margin: 0 0 40px 0;
color: #333;
font-size: 14px;
text-align: left;
line-height: 1.6;
}

.measures-section__cards {
width: 100%;
display: flex;
flex-direction: column;
gap: 30px; 
margin-bottom: 30px;
}

.measure-card {
width: 100%;
background-color: #F2F8FF;
padding: 24px; 
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}

.measure-card__icon-wrapper {
margin-bottom: 20px;
display: flex;
justify-content: center;
align-items: center;
}

.measure-card__icon {
width: auto;
height: 110px;
display: block;
}

.measure-card__title {
margin: 0 0 16px 0;
color: #00387D;
font-size: 16px;
font-weight: bold;
line-height: 1.4;
}

.measure-card__text {
margin: 0;
color: #333;
font-size: 14px;
line-height: 1.6;
text-align: left;
}

.measures-section__contact {
width: 100%;
text-align: center;
margin-bottom: 30px;
}

.measures-section__contact-title {
margin: 0 0 16px 0;
color: #333;
font-size: 18px;
font-weight: bold;
display: inline-block;
border-bottom: 2px solid #BE1833; 
padding-bottom: 4px;
}

.measures-section__contact-text {
margin: 0;
color: #333;
font-size: 14px;
line-height: 1.6;
text-align: left;
}

.measures-section__alert {
width: 100%;
background-color: #fff;
}

.measures-section__alert-inner {
border: 5px solid #E6F2FF; 
padding: 20px;
text-align: center;
}

.measures-section__alert-title {
margin: 0 0 12px 0;
color: #BE1833;
font-size: 16px;
font-weight: bold;
line-height: 1.5;
}

.measures-section__alert-text {
margin: 0;
color: #333;
font-size: 13px;
line-height: 1.6;
text-align: left;
}

@media screen and (min-width: 768px) {

.measures-section__title {
font-size: 28px;
margin-bottom: 20px;
}

.measures-section__lead {
font-size: 16px;
margin-bottom: 40px;
text-align: center;
}

.measures-section__cards {
max-width: 1200px;
flex-direction: row;
gap: 30px; 
align-items: stretch; 
margin-bottom: 40px;
}

.measure-card {
flex: 1; 
min-height: 352px; 
padding: 32px 24px;
}

.measure-card__title {
font-size: 18px;
}

.measures-section__contact {
max-width: 800px;
margin-bottom: 40px;
}

.measures-section__contact-title {
font-size: 22px;
}

.measures-section__contact-text {
    text-align: center;
}

.measures-section__alert {
max-width: 1200px;
}

.measures-section__alert-inner {
padding: 30px 40px;
}

.measures-section__alert-title {
font-size: 18px;
}

.measures-section__alert-text {
font-size: 14px;
text-align: center;
}
}

/* --- Service Section Component (しんきんカードのあんしんサービス) --- */
.service-section__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 30px; 
padding: 20px 20px 0px 20px;
}

.service-section__title {
margin: 0;
color: #333;
font-size: 20px;
font-weight: bold;
text-align: center;
line-height: 1.4;
max-width: 340px;
}

.service-section__lead {
margin: -10px 0 0 0;
color: #333;
font-size: 14px;
text-align: center;
line-height: 1.5;
text-align: left;
}

.service-section__body {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 20px; 
}

.service-section__icon-wrapper {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 4px;
}

.service-section__icon {
width: auto;
height: 120px;
display: block;
}

.service-section__subtitle {
margin: 0;
color: #00387D;
font-size: 20px;
font-weight: bold;
line-height: 1.3;
}

.service-section__text {
margin: 0 0 10px 0;
color: #333;
font-size: 14px;
line-height: 1.6;
text-align: left;
}

.service-section .c-button {
width: 100%;
max-width: 315px;
margin: 0 auto;
}

.c-button {
margin: 0;
}

@media screen and (min-width: 768px) {
.u-desktop-only {
display: inline;
}

.service-section__inner {
padding: 40px calc(50vw - 430px); 
gap: 40px; 
}

.service-section__title {
font-size: 28px;
max-width: 100%;
}

.service-section__lead {
margin: -20px 0 0 0;
font-size: 16px;
text-align: center;
}

.service-section__body {
gap: 24px;
}

.service-section__subtitle {
font-size: 24px;
}

.service-section__text {
font-size: 16px;
max-width: 760px;
}
}

/* --- Security Section Component (セキュリティ対策) --- */
.security-section {
width: 100%;
}

.security-section__inner {
width: 100%;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
}

.security-section__title {
margin: 0;
color: #333;
font-size: 20px;
font-weight: bold;
text-align: center;
line-height: 1.4;
}

.security-section__lead {
margin: -10px 0 0 0;
color: #333;
font-size: 14px;
text-align: center;
line-height: 1.6;
text-align: left;
}

.security-section__cards {
width: 100%;
display: flex;
flex-direction: column;
gap: 30px;
}

.security-card {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 20px; 
}

.security-card__icon-wrapper {
display: flex;
justify-content: center;
align-items: center;
min-height: 120px;
}

.security-card__icon {
width: auto;
height: 110px;
display: block;
}

.security-card__title {
margin: 0;
color: #00387D;
font-size: 18px;
font-weight: bold;
line-height: 1.4;
}

.security-card__text {
margin: 0;
color: #333;
font-size: 14px;
line-height: 1.6;
text-align: left;
}

.security-card .c-button {
width: 100%;
margin: 0 auto;
}

@media screen and (min-width: 768px) {

.security-section__inner {
max-width: 1200px;
gap: 40px;
}

.security-section__title {
font-size: 28px;
}

.security-section__lead {
margin: -20px 0 0 0;
font-size: 16px;
text-align: center;
}

.security-section__cards {
max-width: 1000px;
flex-direction: row;
gap: 40px;
align-items: stretch;
}

.security-card {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
}

.security-card__title {
font-size: 22px;
}

.security-card__text {
font-size: 16px;
margin-bottom: auto;
}
}