@charset "utf-8";

/* =======================
section--mian
========================== */
.ours_main {
    background-color: #fdfdfd;
    padding: 25px var(--contentPadding);
    margin: 0 auto;
    max-width: 1160px;
}

.our_title {
    color: #CC947F;
    text-align: left;
    font-size: 26px;
    font-style: normal;
    font-weight: 500;
    line-height: 35px; /* 87.5% */
    padding: 25px;
}

.content-pairs-wrapper {
    display: flex;
    flex-direction: column; 
    align-items: center; 
    width: 100%;
    margin: 0 auto;
}

.content-pair {
    display: flex;
    flex-direction: column; 
    align-items: center; 
    width: 100%; 
    margin-bottom: 30px; 
}

.text-block {
    width: calc(100% - 50px); 
    max-width: 600px; 
    padding: 25px;
    box-sizing: border-box;
    text-align: left;
    margin: 0 auto; 
}

.image-block {
    width: 100%; 
    display: flex; 
    justify-content: center;
    align-items: center;
    padding: 25px 0; 
    box-sizing: border-box;
}

/* 画像そのもの */
.image {
    max-width: 100%; 
    height: auto;
    display: block; 
    margin: 0 auto; 
}

/* 最後のテキストブロック（単独で全幅を使用） */
.full-width-text {
    width: calc(100% - 50px); 
    max-width: 660px; 
    padding: 25px;
    box-sizing: border-box;
    margin: 25px auto; 
    text-align: left;
}

/* その他の既存スタイル */
.text_end {
    text-align: left;
}

.representativesvg {
    display: block;
    margin: 0 auto;
    width: 100%; 
    height: auto;
    
}

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

    .ours_main {
        padding: 25px var(--contentPadding); /* PC用のパディング */
    }

    /* PCレイアウト用 */
    .content-pairs-wrapper {
        display: flex;
        flex-direction: column; 
        align-items: center; 
        max-width: 1160px; 
        margin: 0 auto;
    }

    /* 各「テキスト＋画像」ペアのPCレイアウト */
    .content-pair {
        flex-direction: row; 
        justify-content: center; 
        align-items: center; 
        width: 100%; 
        max-width: 1160px; 
        margin-bottom: 0px; 
    }

    /* テキストブロックのPCレイアウト */
    .text-block {
        flex-basis: 45%; 
        max-width: 663px; 
        padding: 0px; 
        text-align: left;
        margin: 0; 
    }

    /* 画像ブロックのPCレイアウト */
    .image-block {
        flex-basis: 50%; 
        max-width: 497px; 
        padding: 0px; 
        margin: 0; 
    }

    /* 最初のペアの順序（テキストが左、画像が右） */
    .content-pair:nth-of-type(1) .text-block {
        order: 1;
    }
    .content-pair:nth-of-type(1) .image-block {
        order: 2;
    }

    /* 2番目のペアの順序（テキストが左、画像が右） */
    .content-pair:nth-of-type(2) .text-block {
        order: 1;
    }
    .content-pair:nth-of-type(2) .image-block {
        order: 2;
    }
    /* 左右を逆転は order を入れ替える (例: text order:2, image order:1) */


    /* 最後のテキストブロック */
    .full-width-text {
        max-width: 1160px; 
        text-align: left; 
    }

   
    .representativesvg {
        width: 70%; /
    }

}




/*ここから*/
.dr_subtitle{
    margin: 0 auto;
}

.dr_subtitle{
    font-size: 1.6rem;
    color: #CC947F;
    margin: 50px 0 0 0;
    text-align: left;
    margin: 0 auto;
}

.dr_maintitle{
    font-size: 2.3rem;
    color: #CC947F;
    text-align: left;
    margin: 0 auto;
}

.dr_title {
    text-align: center; /* コンテンツ全体を中央寄せ */
}

.dr_title p {
    text-align: left; /* 中のテキストを左寄せに戻す */
    display: inline-block; /* インラインブロック要素として扱い、テキストの幅に合わせて中央に配置 */
}


.position_main,
.position_main2,
.flex_main,
.flex_main2 {
	display: flex;
	flex-wrap: wrap;
}

	.position_main h4,
	.position_main2 h4,
	.flex_main h4,
	.flex_main2 h4 {
		width: 100%;
		text-align: center !important;
		color: #CC947F;
		text-align: left;
		font-size: 2.3rem;
		font-style: normal;
		font-weight: 500;
		line-height: 35px; /* 87.5% */
		padding: 20px 0 0 0;
        margin-top: 20px;
	}

	.position_main p,
	.position_main2 p,
	.flex_main p,
	.flex_main2 p {
		width: 100%;
		margin-bottom: 25px;
	}

	.position_main .image,
	.position_main2 .image,
	.flex_main .image,
	.flex_main2 .image {
		width: 100%;
		margin-bottom: 25px;
	}

		.position_main .image img,
		.position_main2 .image img,
		.flex_main .image img,
		.flex_main2 .image img {
			width: 100%;
		}

	.position_main .image_pc,
	.position_main2 .image_pc {
		display: none;
        max-width: 100;
	}

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

	.position_main,
	.position_main2 {
		position: relative;
		display: block;
	}

		.position_main h4 {
			text-align: left !important;
		}

		.position_main2 h4 {
			text-align: left !important;
			width: 65%;
			margin-left: 35%;
		}

		.position_main p {
			width: 65%;
		}

		.position_main2 p {
			width: 65%;
			margin-left: 35%;
		}

		.position_main .image,
		.position_main2 .image {
			display: none;
		}

		.position_main .image_pc {
			display: block;
			position: absolute;
			width: 30%;
			height: 350px;
			top: 35px;
			right: 0;
		}
	
		.position_main2 .image_pc {
			display: block;
			position: absolute;
			width: 30%;
			height: 350px;
			top: 35px;
			left: 0;
		}

		.position_main .image_pc img,
		.position_main2 .image_pc img {
			margin-bottom: 20px;
		}

        .image_dr{
            max-width: 80%;
        }


        .dr_title {
    text-align: left; /* コンテンツ全体を中央寄せ */
}

.dr_title p {
    text-align: left; /* 中のテキストを左寄せに戻す */
    display: inline-block; /* インラインブロック要素として扱い、テキストの幅に合わせて中央に配置 */
}

}