@charset "UTF-8";
@import url("common.css");

/*  共通
-------------------------------------------------------------*/
.m__content-gr{background-color: var(--color-lightGray);}
.m__inner{margin: 0 auto; padding: 56px 24px; max-width: 1032px;}

/* 見出し */
.mttl__deco{position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0 0 56px; font-size: var(--fontSize-Noto-h1); text-align: center;}
.mttl__deco::after{content: ""; position: absolute; display: block; width: 40px; height: 6px; background-color: var(--color-lightBlue); border-radius: 3px; bottom: -24px; left: 48%;}
.mttl__sub{font-size: var(--fontSize-Noto-h2); font-weight: bold; color: var(--color-txt-lightGray);}


/* キャッチコピーエリア
-------------------------------------------------------------*/
.m__content01{background-image: url(../images/member/member_bg01.jpg); background-repeat: no-repeat; background-size: cover; width: 100%;}
.logo{display: block; margin: 0 auto; width: 405px;}
.main__box{display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 24px 0 0;}
.main__ttl{font-size: var(--fontSize-Yu-h2);}
.sub__color{color: var(--color-lightBlue);}
.main-txt{font-size: var(--fontSize-Yu-text1);}

/* 4メリット
-------------------------------------------------------------*/
.member__box{display: flex; gap: 24px; margin: 0 auto; width: 884px;}
.member__box-list{display: flex; flex-direction: column; align-items: center; width: calc(100% / 4);}
.member__box-img{display: block; width: 100%;}
.member__box-txt{margin: 16px 0 0; font-size: var(--fontSize-Yu-h2); font-weight: bold;}

/* 7メリット
-------------------------------------------------------------*/
.m__content02{background-image: url(../images/member/member_bg02.jpg); background-repeat: no-repeat; background-size: cover; width: 100%;}
.top__box-inner{display: flex; gap: 24px; align-items: center;}
.top__content-box{padding: 16px;}

.box__left{display: flex; flex-direction: column; align-items: center;}
.ttl__deco-s{font-size: var(--fontSize-Noto-other); font-weight: bold; color: var(--color-lightBlue);}
.ttl__no{font-size: 34px; font-weight: bold;}
.right__box-ttl{font-size: var(--fontSize-Yu-h3); font-weight: bold;}
.right__box-txt{margin: 4px 0 0; color: var(--color-txt-gray); font-size: var(--fontSize-Yu-text1);}

/* ボタンエリア
-------------------------------------------------------------*/
.other__ttl{font-size: 18px; font-weight: bold; text-align: center;}
.other__txt{margin: 12px 0 0; font-size: var(--fontSize-Yu-text1); text-align: center;}
.other__btn-box{display: flex; justify-content: center; gap: 16px; margin: 40px 0 0;}
.other__btn-box .btn{max-width: 314px;}