@charset "UTF-8";

*{
  box-sizing: border-box;
}

.text__center {
    text-align: center;
}

.section-padding {
    padding: 2.5rem 0;
}

.sp-ib {
	display: inline-block;
}

.pc-ib {
	display: block;
}

.d-b {
	display: block;
}

h3 {
    font-size: 2rem;
}

.fz-18 {
	font-size: 18px;
}

.fz-21 {
	font-size: 21px;
}

.fz-24 {
	font-size: 1.5rem;
}

@media screen and (max-width: 768px) {
    .fz-24 {
        font-size: 1.25rem;
    }        
}

.context__boxA {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    padding: 1rem;
    border-radius: 16px;
    margin-bottom: 1rem;
}

.context__boxA div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--color-white);
    min-width: 80px;
    height: 90px;
    text-align: center;
    border-radius: 21px;
	line-height: 1.3;
}

.bgc-main > .context__boxA {
    background-color: #F6F2FC;
}

.bgc-palemain {
    background-color: #F6F2FC;
}

.bgc-main {
    background-color: var(--color-main);
    font-size: 21px;
}

.bgc-paleblue {
    background-color: #F2F6FC;
}

.bgc-blue {
    background-color: var(--color-blue);
    font-size: 21px;
}

.context__subtytle {
    border-bottom: dotted 1px var(--color-black);
    padding: 2rem 0;
	margin-bottom: 2rem;
}

.context__box {
    display: flex;
	flex-direction: row;
    gap: 3rem;
    margin: 2rem 0 4rem 0;
}

.context__boxL {
    width: 40%;
}

.context__boxR {
    width: 60%;
}

.context__boxR img {
    border-radius: 10px;
}

/* sec01 */
.box__4columns {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    box-sizing: border-box;
}

/* 最初の見出し */
.box__4columns > div:first-child {
    flex: 0 0 calc(50% - 6px);
    background-color: var(--color-blue);
    color: var(--color-white);
    padding: 10px;
    box-sizing: border-box;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 画像を4カラムに並べる（基本） */
.box__4columns > div:nth-child(n+2):nth-child(-n+11) {
    flex: 0 0 calc(25% - 6px);
    box-sizing: border-box;
}

.box__4columns > div:nth-child(n+4):nth-child(-n+11) {
    flex: 0 0 calc(25% - 6px);
    box-sizing: border-box;
}

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

/* 最後の3枚の画像（12～14番目）を3カラムに */
.box__4columns > div:nth-child(n+12) {
    flex: 0 0 calc(33.3333% - 6px);
    box-sizing: border-box;
}

.context__boxL, .context__boxR {
	flex: 1; 
}


/* sec02 */
.box__2columns {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.box__2columns > div {
    flex: 0 0 calc(50% - 3px);
    box-sizing: border-box;
}

.box__2columns img {
    width: 100%;
    display: block;
}

/* sec03 */
.box__2columnsB {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.box__2columnsB  > div {
    flex: 0 0 calc(67% - 3px);
    box-sizing: border-box;
    height: 186px;
    overflow: hidden;
}

.box__2columnsB > div:first-of-type,
.box__2columnsB > div:nth-of-type(4) {
    flex: 0 0 calc(33% - 3px);
}

.box__2columnsB > div:nth-of-type(5),
.box__2columnsB > div:nth-of-type(6) {
    flex: 0 0 calc(50% - 3px);
}

.box__2columnsB  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* sec04 */
.box__3columns {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.box__3columns > div {
    flex: 0 0 calc(33.3% - 6px);
    box-sizing: border-box;
}

.box__3columns img {
    width: 100%;
    display: block;
}

/* sec05 */
.box__2columnsC {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.box__2columnsC  > div {
    flex: 0 0 calc(74% - 3px);
    box-sizing: border-box;
    height: 246px;
    overflow: hidden;
}

.box__2columnsC > div:first-of-type,
.box__2columnsC > div:nth-of-type(3) {
    flex: 0 0 calc(26% - 3px);
}

.box__2columnsC  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}




/* SP */
@media screen and (max-width: 768px) {
	html{
		
		
	}
	h2 {
		font-size: clamp(26px, 2.2vw, 30px);
		line-height: 1.6;
	}
	
	h3 {
		font-size: clamp(24px, 1.8vw, 28px);
		line-height: 1.6;
	}

	.sp-ib {
		display: block;
	}
	
	.pc-ib {
		display: inline-block;
	}
	
	.section-padding {
		padding: .6rem 0;
	}

    section .container .context:first-of-type {
        margin-bottom: 0;
    }

    .context__boxA {
        display: block;
    }

    .context__boxA div {
        flex-direction: row;
        height: 52px;
		margin-bottom: .5rem;
    }

    .context__box {
        flex-direction: column;
		margin: 1.5rem 0 3rem 0;
		gap: 1.2rem;
    }

    .context__boxL {
        width: 100%;
    }
	
	.context__subtytle {
		padding: 0 0 1rem 0;
		margin-bottom: 0;
	}
	
	.context__boxL p {
	  }
	
	.context__boxR {
        width: 100%;
    }
	
	.context__boxL {
		display: contents;
	}
	
	.context__subtytle {
		order: 1; 
	}
    .context__box p { 
		order: 2;
	}
    .context__boxR {
		order: 3;
	}
    .context__boxL .context {
		order: 4;
		text-align: center;
		margin-block: 20px;
	}
	
	.btn {
		width: 343px;
		display: block;
		margin: 0 auto;
	}
	
	#sec01 .box__4columns > div:first-child {
    	flex: 100%;
	}
	
	#sec01 .box__4columns > div:nth-child(n+2):nth-child(-n+11) {
		flex: 0 0 calc(50% - 3px);
		box-sizing: border-box;
	}
	
	#sec01 .box__4columns > div:nth-child(n+12) {
		flex: 0 0 calc(50% - 3px);
		box-sizing: border-box;
	}
	
	#sec03 .box__2columnsB > div,
	#sec03 .box__2columnsB > div:first-of-type,
	#sec03 .box__2columnsB > div:nth-of-type(4) {
		flex: 0 0 calc(50% - 6px);
		height: 133px;
	}
	
	#sec04 .box__3columns > div {
		flex: 0 0 calc(50% - 6px);
	}
	
	#sec05 .box__2columnsC > div,
	#sec05 .box__2columnsC > div:first-of-type,
	#sec05 .box__2columnsC > div:nth-of-type(3) {
		flex: 0 0 calc(50% - 6px);
		height: 135px;
	}
}