@charset "utf-8";

/* =========================
   h1
========================= */
/*
.h1_bg.three-minutes {
    background: rgba(0, 132, 221, 0.90);
    background: linear-gradient(107deg, rgba(123, 228, 238, 0.90) 5%, rgba(0, 132, 221, 0.90) 98.32%);
    height: 397px;
}

.h1_bg.three-minutes::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 158px;
    background: url(../images/h1_line.svg.) no-repeat center;
    background-size: cover;
    bottom: 59px;
}*/



/* =========================
   共通レイアウト
========================= */

.content_area {
    max-width: 1920px;
    padding: 0 0 100px;
}

/* =========================
   3分でわかるコネクシオ（キャッチ）
========================= */

.three-minutes_catch {
    padding-top: 100px;
}

.three-minutes_catch_txt {
    text-align: center;
}

.three-minutes_catch_txt h2 {
    margin-bottom: 24px;
    font-size: 2.8rem;
}

.three-minutes_catch_txt p {
    font-size: 2.0rem;
}

/* ページ内ナビ */
.three-minutes_page_navi {
    flex: 1;
    display: flex;
    gap: 30px;
    margin-top: 100px;
    justify-content: space-between;
    flex-direction: row;
}

/*
.three-minutes_page_navi .link_btn {
    width: 100%;
    max-width: 360px;
}
*/

.three-minutes_page_navi .link_btn {
    width: 33.333%;
}


.three-minutes_page_navi .link_btn a {
    font-size: 2rem;
    letter-spacing: .12em;
    width: 100%;
	max-width: none;
    border: 1px solid #0084DD;
}

.three-minutes_page_navi .link_btn a::before {
    transform: translateY(-50%) rotate(90deg);
}

.three-minutes_ttl {
	position: relative;
}

.three-minutes_ttl::before {
    content: attr(data-label-en);
    position: absolute;
    top: -24px;
    left: 0;
    font-family: 'Caveat', cursive;
    font-size: 2.4rem;
    font-weight: 400;
    color: #FA6060;
    line-height: 1;
    letter-spacing: 0;
}

/* 見出し＋1minアイコン共通 */
.three-minutes_ttl span {
    position: relative;
    padding-right: 90px;
}

.three-minutes_ttl_icon {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 59px;
    height: 52px;
	background: url(../images/three-minutes_icon_01.svg) no-repeat center / contain;
/* 	-webkit-mask: url(../images/three-minutes_icon_01.svg) no-repeat center / contain; */
/*     mask: url(../images/three-minutes_icon_01.svg) no-repeat center / contain; */
/*     background-color: #FA6060;  */
    pointer-events: none;
}

.three-minutes_txt p {
    font-size: 2.0rem;
}

/* =========================
   コネクシオの事業
   #tm_business, .tm_business_cards, .tm_business_model
========================= */

section#tm_business {
    margin: 100px 0 80px;
}

/* 事業カード：2カラム */
.tm_business_cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
    margin: 40px 0 0;
}

/* 各カード本体 */
.tm_business_card {
    background: #FFFFFF;
    border-radius: 24px;
    padding: 25px 30px;
    box-shadow: 0 4px 25px 0 rgba(0, 132, 221, 0.25);
    box-sizing: border-box;
}

/* B to C / B to B ラベル */
.tm_business_card__label {
    font-size: 1.6rem;
    font-weight: 600;
    text-align: center;
    margin: 0;
    background: var(--pink-gradiant, linear-gradient(94deg, #FF008C 1.65%, #FFDC92 100%));
    -webkit-background-clip: text;
    background-clip: text;
	opacity: .5;
    color: transparent;
}

/* 見出し（コンシューマ事業 / 法人事業） */
.tm_business_card__title {
    font-size: 3.2rem;
    font-weight: 700;
    color: #006FBC;
    text-align: center;
    margin: 0 0 40px;
}

/* ブロック間の余白 */
.tm_business_card__block + .tm_business_card__block {
    margin-top: 20px;
}

/* 小見出し */
.tm_business_card__heading {
    font-size: 2.0rem;
    font-weight: 600;
    margin: 0 0 8px;
    color: #333;
}

/* テキスト */
.tm_business_card__text {
    font-size: 1.6rem;
    margin: 0;
}

/* ビジネスモデル全体図 */
section.tm_business_model {
    margin: 80px 0 125px;
}

h5.tm_business_model__heading {
    color: #006FBC;
    font-size: 2.0rem;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 35px;
    padding-bottom: 6px;
    border-bottom: 3px solid rgba(250, 96, 96, 0.20);

色
色の形式
RGB
ボーダーの色

rgba(250, 96, 96, 0.2)

}

/* =========================
   コネクシオの強み
   #tm_strength, .tm_strength_cards
========================= */

section#tm_strength {
    margin: 100px 0 80px;
}

.tm_strength_cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 60px 68px;
    margin: 40px 0 80px;
}

.tm_strength_card {
    display: flex;
    flex-direction: column;
}

.tm_strength_card__thumb {
    margin: 0;
}

.tm_strength_card__thumb img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 24px;
    object-fit: cover;
}

.tm_strength_card__body {
    padding: 20px 0 0;
}

.tm_strength_card__title {
    margin: 0 0 12px;
    font-size: 2.4rem;
    line-height: 1.6;
    color: #006FBC;
    font-weight: 500;
	border-bottom: 3px solid rgba(250, 96, 96, 0.20);
}

.tm_strength_card__text {
    margin: 0;
    font-size: 1.6rem;
    line-height: 1.9;
    color: #333;
}

/* =========================
   コネクシオが目指す未来
   #tm_future, .tm_future_cols
========================= */

section#tm_future {
    margin: 100px 0 80px;
}

/*
.tm_future_cols {
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin: 40px 0 120px;
    max-width: 1510px;
}

.tm_future_cols__img {
    max-width: 940px;
}

.tm_future_cols__img img {
    display: block;
    width: 100%;
    height: auto;
}

.tm_future_cols__body {
    flex: 1;
    max-width: 530px;
    margin-left: auto;
}*/

.tm_future_block + .tm_future_block {
    margin-top: 40px;
}

.tm_future_title {
    position: relative;
    margin: 0 0 16px;
    padding-bottom: 10px;
    font-size: 3.2rem;
    font-weight: 500;
    color: #006FBC;
}

.tm_future_title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    border-radius: 999px;
    background: rgba(250, 96, 96, 0.20);
}

.tm_future_text {
    margin: 0;
    font-size: 1.6rem;
    line-height: 1.9;
    color: #333;
}

.inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 20px;
    /* overflow: visible;  ←デフォルトなので書かなくてOK */
}

.tm_future_cols {
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin: 40px 0 120px;
    max-width: 1510px;
}

/* 左カラム：画像を左にはみ出させる */
.tm_future_cols__img {
    width: calc(50% + 250px); /* 20px（innerのpadding分）＋さらに20px分はみ出させる */
    margin-left: -250px;      /* はみ出し量。お好みで調整してOK */
}

.tm_future_cols__img img {
    display: block;
    width: 100%;
    height: auto;
}

/* 右カラム：テキスト */
.tm_future_cols__body {
    width: 50%;
}

.bg-blue::before, .bg-pink::before {
    top: -47px;
    left: -83px;
}

/* =====================================================
   Responsive
===================================================== */

/* 1500px 以下：未来セクション縦並び */
@media screen and (max-width: 1500px) {
/*
    .tm_future_cols {
        flex-direction: column;
        gap: 20px;
        margin: 24px 0 80px;
    }

    .tm_future_cols__body {
        padding: 0 20px;
    }
*/
}

/* 1024px 以下：タブレット */
@media screen and (max-width: 1024px) {

    .three-minutes_catch {
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
    }

    .three-minutes_page_navi {
        width: 100%;
        justify-content: flex-start;
    }
}

/* 767px 以下：スマホ */
@media screen and (max-width: 767px) {
	.section-band__inner {
		padding: 20px 30px;
	}
	
    /* h3の1minアイコン余白 */
    .three-minutes_ttl span {
        padding-right: 50px;
    }

    /* キャッチ */
    .three-minutes_catch {
        padding-top: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        margin-top: 40px;
    }

    .three-minutes_catch_txt h2 {
        font-size: 2.4rem;
		line-height: 1.6;
    }

    .three-minutes_catch_txt p {
        font-size: 1.4rem;
    }

    /* ページ内ナビ */
    .three-minutes_page_navi .link_btn a {
        font-size: 1.4rem;
        letter-spacing: .12em;
        width: 100%;
        height: 100%;
    }

    .three-minutes_page_navi {
        width: 100%;
        align-items: stretch;
		flex-direction: column;
        gap: 20px;
        margin-top: 30px;
    }

    .three-minutes_page_navi .link_btn {
        max-width: none;
		width: 100%;
    }

    .three-minutes_txt p {
        font-size: 1.6rem;
    }

    /* 事業セクション */
    section#tm_business {
        margin: 50px 0 40px;
    }

    .tm_business_cards {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-top: 24px;
    }

    .tm_business_card {
        padding: 24px 20px;
    }

    .tm_business_card__title {
        font-size: 2.0rem;
        margin-bottom: 16px;
    }

    .tm_business_card__heading {
        font-size: 1.6rem;
    }

    h5.tm_business_model__heading {
        font-size: 1.6rem;
    }

    section.tm_business_model {
        margin: 30px 0 0;
    }

    /* 強みセクション */
    section#tm_strength {
        margin: 50px 0 40px;
    }

    .tm_strength_cards {
        grid-template-columns: 1fr;
        gap: 30px;
        margin: 24px 0 60px;
    }

    .tm_strength_card__body {
        padding: 10px 0 0;
    }

    .tm_strength_card__title {
        font-size: 1.8rem;
        margin: 0 0 8px;
    }

    .tm_strength_card__text {
        font-size: 1.6rem;
    }

    /* 未来セクション */
    section#tm_future {
        margin: 50px 0 40px;
    }

    .tm_future_cols__body {
        max-width: none;
    }

    .tm_future_title {
        font-size: 1.8rem;
        margin: 0 0 10px;
        padding-bottom: 7px;
    }

    .tm_future_text {
        font-size: 1.6rem;
    }
	
	    .tm_future_cols {
        flex-direction: column;
    }

    .tm_future_cols__img {
        width: 100%;
        margin-left: 0;
    }

    .tm_future_cols__body {
        width: 100%;
    }
	
	.tm_future_cols {
		margin: 40px 0 0;
	}
	
	.three-minutes_ttl::before {
		font-size: 2rem;
	    top: -18px;
	}
}