@charset "UTF-8";

/**************************************************************
*************************************************************

join

*************************************************************
****************************************************************/
.join {}

/* ===== カスタムプロパティ ===== */ 
:root {
 --em: #D32C26; /* 赤い強調 */
 --main-red: #D32C26;
}

/************************************************************
*************************************************************

main

*************************************************************
**************************************************************/

#main {
 margin: 4rem 0 0;
}

/*
------------------------------------
 TSUBASAちばぎんVisaデビットカードセクション
------------------------------------
*/

.join-unit {
 margin-bottom: 6rem;
}
@media (max-width: 700px) {
 .join-unit {
  margin-bottom: 4rem;
 }
}
/* カード画像 */
.join-unit .card-group {
 text-align: center;
 margin-bottom: 1rem;
}
.join-unit .card-group img {
 width: 100%;
 height: auto;
}
.join-unit .note-img {
 font-size: 0.85rem;
 text-align: right;
 margin-top: 0.7rem;
}
/* 箇条書き */
.join-unit .join-notes {
 list-style: none;
 margin: 1.5rem 0 .7rem;
 padding: 0;
}
.join-unit .join-notes li {
 position: relative;
 padding-left: 1.4em;
 margin-bottom: 0.1rem;
 line-height: 1.7;
}
.join-unit .join-notes li::before {
 content: "●";
 position: absolute;
 left: 0;
 top: 0;
}
.join-unit .join-notes li.asterisk {
}
.join-unit .join-notes li.asterisk::before {
 content: "※";
}

/* 注意書き */
.join-unit .join-caution {
 position: relative;
 /*font-size: 0.95rem;*/
 line-height: 1.7;
 margin: 0 auto 2.5rem;
 padding-left: 1.4em;
 text-indent: -1.4em;
}
.join-unit .join-caution::before {
 content: "※";
 display: inline-block;
 width: .95em;
 font-weight: 700;
 text-indent: 0;
}
/* ボタン配置 */
.join-unit .btn-wrap {
 text-align: center;
 margin: 2rem 0;
}
/* フッターノート */
.join-unit .join-footnote-outer {
 text-align: center;
}
.join-unit .join-footnote {
	position: relative;
	padding-left: 1.2em;
	display: inline-block;
	line-height: 1.7;
}
@media (min-width: 701px) {
 .join-unit .join-footnote {
  /*font-size: 0.9rem;*/
 }
}

@media (max-width: 700px) {
 .join-unit .join-footnote {
		/*font-size: 0.9rem;*/
 }
}

@media (max-width: 480px) {
 .join-unit .join-footnote {
  text-align: left;
 }
}

.join-unit .join-footnote::before {
  content: "※";
  position: absolute;
  left: 0;
  top: 0;
}

/*
------------------------------------
 共通タイトルスタイル
------------------------------------
*/

.section-ttl {
 font-size: clamp(1.6rem, 2.5vw, 2rem);
 font-weight: 700;
 color: #000;
 text-align: center;
 line-height: 1.4;
 letter-spacing: 0.02em;
 border-bottom: 2px solid var(--main-red);
 padding: 0 0 2.5rem;
 margin-bottom: 3rem;
}
@media (min-width: 481px) and (max-width: 700px) {
 .section-ttl {
  font-size: clamp(1.45rem, 2.5vw, 2rem);
  text-align: center;
 }
}
@media (max-width: 480px) {
 .section-ttl {
  font-size: clamp(1.15rem, 2.5vw, 2rem);
  text-align: center;
  white-space: nowrap;
 }
}