@charset "utf-8";

/*=============================================

	上部タイトル

==============================================*/
.top_title {
	padding: 0;
	position: relative;

}
.top_title .container {
	width: 100%;
	max-width: 100%;
}
.top_title .img {
	position: relative;
	width: 100%;
}
.top_title .img::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	background: rgba(0,0,0,0.4);
	width: 100%;
	height: 100%;
}
.top_title .title_en {
	position: absolute;
	left: 50%;
	top: 43%;
	transform: translate(-50%, -50%);
    font-size: max(10vw, 24px);
    color: #FFF;
    text-align: center;
    line-height: 1;
}
.top_title .title_jp {
	position: absolute;
	left: 50%;
	top: 58%;
	transform: translate(-50%, -50%);
    font-size: max(4vw, 16px);
    color: #FFF;
    text-align: center;
}
@media print, screen and (min-width: 769px) {

	.top_title {
		padding: 0;
	}
	.top_title .img img {
		width: 100%;
	}

	.top_title .title_en {
	    font-size: max(5vw, 32px);
		top: 43%;
	}
	.top_title .title_jp {
	    font-size: max(2vw, 18px);
		top: 63%;
	}

}
@media print, screen and (min-width: 1281px) {
}

/*=============================================

	共通 セクションタイトル

==============================================*/
.intro_wrap .title,
.issue_wrap .title,
.scene_wrap .title,
.step_wrap .title,
.partner_wrap .title,
.consult_wrap .title {
    font-size: max(6vw, 20px);
    color: #003461;
    text-align: center;
    line-height: 1.7;
    margin-bottom: 1.2em;
}
@media print, screen and (min-width: 769px) {

	.intro_wrap .title,
	.issue_wrap .title,
	.scene_wrap .title,
	.step_wrap .title,
	.partner_wrap .title,
	.consult_wrap .title {
	    font-size: max(3vw, 28px);
	    margin-bottom: 1.4em;
	}

}
@media print, screen and (min-width: 1281px) {
}

/*=============================================

	イントロ

==============================================*/
.intro_wrap {
	padding: 4em 0 4em;
}
.intro_wrap .title {
	margin-bottom: 0.8em;
}
.intro_wrap .body {
    font-size: max(3vw, 14px);
    line-height: 2.2;
}
@media print, screen and (min-width: 769px) {

	.intro_wrap {
		padding: 80px 0 100px;
	}
	.intro_wrap .title {
		margin-bottom: 1.2em;
	}
	.intro_wrap .body {
        font-size: max(1.0vw, 14px);
	    text-align: center;
	    line-height: 2;
	}

}
@media print, screen and (min-width: 1281px) {
}

/*=============================================

	課題

==============================================*/
.issue_wrap {
	padding: 0 0 3em;
}
.issue_wrap .bg {
	position: relative;
	padding: 3em 0 6em;
	background: url(/img/produce/issue_bg.webp) no-repeat 20% center / cover;
}
.issue_wrap .bg::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,52,97,0.5);
}
.issue_wrap .bg .container {
	z-index: 1;
}
.issue_wrap .title {
	color: #FFF;
	margin-bottom: 0.8em;
}
.issue_wrap .body {
    font-size: max(3vw, 14px);
    color: #FFF;
    line-height: 2.3;
    margin-bottom: 2.5em;
}
.issue_wrap .issue_list {
	width: 80%;
	margin: 0 auto;
}
.issue_wrap .issue_list li {
    font-size: max(3vw, 14px);
	color: #FFF;
	text-align: center;
	border: 1px solid #FFF;
	padding: 0.7em 0.5em;
	margin-bottom: 0.6em;
}
.issue_wrap .issue_list li:last-of-type {
	margin-bottom: 0;
}
.issue_wrap .message {
	position: relative;
	z-index: 1;
	width: 100%;
	margin: -2.5em auto 0;
	padding: 1.2em 0.5em 0;
	background-color: #FFF;
    font-size: max(4.8vw, 15px);
	text-align: center;
	line-height: 2;
}
@media print, screen and (min-width: 769px) {

	.issue_wrap {
		padding: 0 0 50px;
	}
	.issue_wrap .bg {
		padding: 90px 0 120px;
	}
	.issue_wrap .body {
        font-size: max(1.25vw, 16px);
	    text-align: center;
	    line-height: 2;
	    margin-bottom: 3em;
	}
	.issue_wrap .issue_list {
		display: flex;
		justify-content: center;
		width: 100%;
	}
	.issue_wrap .issue_list li {
		width: 350px;
        font-size: max(1.25vw, 15px);
		margin: 0 5px;
		padding: 0.6em 0.5em;
	}
	.issue_wrap .message {
		min-width: 1020px;
		max-width: 80%;
		margin-top: -60px;
		padding: 40px 1em 0;
	    font-size: max(2vw, 22px);
	    line-height: 1.6;
	}

}
@media print, screen and (min-width: 1281px) {
}

/*=============================================

	シーン

==============================================*/
.scene_wrap {
	padding: 3em 0 0;
}
.scene_wrap .scene_bg {
	padding: 0 0 4em;
	background: linear-gradient(to bottom, #FFF 0, #FFF 4em, #f3f7fa 4em, #f3f7fa 100%);
}
.scene_wrap .scene_flex {
	margin-bottom: 4em;
}
.scene_wrap .scene_flex .img {
	width: 90%;
	margin: 0 auto 3em;
}
.scene_wrap .scene_flex .list li {
	text-align: center;
	margin-bottom: 2.2em;
}
.scene_wrap .scene_flex .list li:last-of-type {
	margin-bottom: 0;
}
.scene_wrap .scene_flex .list .tag {
	display: inline-block;
	min-width: 60%;
	background-color: #003461;
	color: #FFF;
    font-size: max(3vw, 13px);
	padding: 0.4em 1em;
	margin-bottom: 0.8em;
}
.scene_wrap .scene_flex .list .name {
    font-size: max(4vw, 16px);
    line-height: 1.6;
}

/* 事例 */
.scene_wrap .case_box {
	position: relative;
	background-color: #FFF;
	border: 1px solid #003461;
	padding: 3.5em 5% 2em;
}
.scene_wrap .case_box .label {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translate(-50%, -50%);
	min-width: 33%;
	background-color: #003461;
	color: #FFF;
    font-size: max(3vw, 13px);
	text-align: center;
	padding: 0.4em 1em;
}
.scene_wrap .case_box .img {
	margin-bottom: 1.5em;
}
.scene_wrap .case_box .case_title {
    font-size: max(5.3vw, 20px);
    margin-bottom: 0.8em;
}
.scene_wrap .case_box dl {
	margin-bottom: 1.5em;
}
.scene_wrap .case_box dl:last-of-type {
	margin-bottom: 0;
}
.scene_wrap .case_box dt {
	display: inline-block;
	background-color: #b5b5b5;
	color: #FFF;
    font-size: max(2.7vw, 12px);
	padding: 0.2em 1.6em;
	margin-bottom: 0.6em;
}
.scene_wrap .case_box dd {
    font-size: max(3vw, 14px);
    line-height: 1.8;
}
@media print, screen and (min-width: 769px) {

	.scene_wrap {
		padding: 70px 0 0;
	}
	.scene_wrap .title {
		margin-bottom: 1.2em;
	}
	.scene_wrap .scene_bg {
		padding: 0 0 56px;
		background: linear-gradient(to bottom, #FFF 0, #FFF 15%, #f3f7fa 54px, #f3f7fa 100%);
	}
	.scene_wrap .scene_flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 82%;
		margin: 0 auto 80px;
	}
	.scene_wrap .scene_flex .img {
		width: 58%;
		margin: 0;
	}
	.scene_wrap .scene_flex .list {
		width: 36%;
	}
	.scene_wrap .scene_flex .list li {
		margin-bottom: 2.4em;
	}
	.scene_wrap .scene_flex .list .tag {
		min-width: 186px;
	    font-size: 14px;
		padding: 0.3em 1em;
		margin-bottom: 0.4em;
	}
	.scene_wrap .scene_flex .list .name {
	    font-size: max(1.5vw, 18px);
	}

	/* 事例 */
	.scene_wrap .case_box {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		padding: 42px 2.5% 34px 3%;
	}
	.scene_wrap .case_box .label {
		min-width: 255px;
	    font-size: 14px;
	}
	.scene_wrap .case_box .img {
		width: 28%;
		margin: 0;
	}
	.scene_wrap .case_box .text_wrap {
		width: 69%;
	}
	.scene_wrap .case_box .case_title {
	    font-size: max(1.8vw, 22px);
	    margin-bottom: 0.6em;
	}
	.scene_wrap .case_box dl {
		display: flex;
		align-items: flex-start;
		margin-bottom: 10px;
	}
	.scene_wrap .case_box dt {
		flex-shrink: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 53px;
		min-height: 52px;
		padding: 0;
		margin: 0 14px 0 0;
	    font-size: 12px;
	}
	.scene_wrap .case_box dl:last-of-type dt {
		min-height: 30px;
	}
	.scene_wrap .case_box dd {
        font-size: max(1.0vw, 13px);
	    line-height: 1.75;
	    padding-top: 0.2em;
	}

}
@media print, screen and (min-width: 1281px) {
}

/*=============================================

	ステップ

==============================================*/
.step_wrap {
	padding: 4em 0 3em;
}
.step_wrap .step_list li {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 2em;
}
.step_wrap .step_list li:last-of-type {
	margin-bottom: 0;
}
.step_wrap .step_list .num {
	flex-shrink: 0;
	width: 29%;
	aspect-ratio: 1 / 1;
	background-color: #f7f4e1;
	color: #846424;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	line-height: 1;
}
.step_wrap .step_list .num .step {
    font-size: max(3.9vw, 14px);
}
.step_wrap .step_list .num .no {
    font-size: max(10.6vw, 38px);
}
.step_wrap .step_list .text_wrap {
	width: 64%;
	padding-top: 0.6em;
}
.step_wrap .step_list .step_title {
    font-size: max(4.7vw, 15px);
    margin-bottom: 0.8em;
}
.step_wrap .step_list .body {
    font-size: max(2.8vw, 12px);
    line-height: 2;
}
@media print, screen and (min-width: 769px) {

	.step_wrap {
		padding: 110px 0 80px;
	}
	.step_wrap .title {
		margin-bottom: 1.6em;
	}
	.step_wrap .step_list {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		width: 82%;
		margin: 0 auto;
	}
	.step_wrap .step_list li {
		width: 48%;
		margin-bottom: 40px;
	}
	.step_wrap .step_list li:nth-last-of-type(2) {
		margin-bottom: 0;
	}
	.step_wrap .step_list .num {
		width: 136px;
	}
	.step_wrap .step_list .num .step {
	    font-size: 20px;
	}
	.step_wrap .step_list .num .no {
	    font-size: 54px;
	}
	.step_wrap .step_list .text_wrap {
		width: calc(100% - 136px - 30px);
	}
	.step_wrap .step_list .step_title {
	    font-size: max(1.8vw, 20px);
	    margin-bottom: 0.5em;
	    line-height: 1.2;
	}
	.step_wrap .step_list .body {
        font-size: max(1.0vw, 13px);
        line-height: 1.6;
	}

}
@media print, screen and (min-width: 1281px) {
}

/*=============================================

	クリエイティブパートナー

==============================================*/
.partner_wrap {
	padding: 3em 0 4em;
}
.partner_wrap .main_img {
	margin-bottom: 2.5em;
}
.partner_wrap .main_img img {
	width: 100%;
}
.partner_wrap .partner_flex {
	margin-bottom: 4em;
}
.partner_wrap .partner_flex .body {
    font-size: max(3vw, 14px);
    line-height: 2.5;
    margin-bottom: 3em;
}

/* 連携体制 */
.partner_wrap .relation .label {
	display: table;
	margin: 0 auto 2em;
	background-color: #000;
	color: #FFF;
    font-size: max(3.2vw, 13px);
	padding: 0.4em 1.5em;
}
.partner_wrap .relation .circles {
	position: relative;
	display: flex;
	justify-content: space-between;
}
.partner_wrap .relation .circles::before {
	content: "";
	position: absolute;
	left: 30%;
	right: 30%;
	top: 23.5%;
	height: 40%;
	background: linear-gradient(to right, #a8927a 0%, #d6c5ad 50%, #a8927a 100%);
}
.partner_wrap .relation .circle_box {
	position: relative;
	width: 48.5%;
	text-align: center;
}
.partner_wrap .relation .circle {
	aspect-ratio: 1 / 1;
	border: 1px solid;
	border-radius: 50%;
	padding: 4%;
	background-color: #FFF;
	margin-bottom: 1em;
}
.partner_wrap .relation .circle .in {
	height: 100%;
	border: 1px solid;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
    font-size: max(3.9vw, 14px);
    line-height: 1.5;
}
.partner_wrap .relation .name {
    font-size: max(3.2vw, 13px);
}
.partner_wrap .relation .cdr .circle,
.partner_wrap .relation .cdr .circle .in {
	border-color: #003461;
	color: #003461;
}
.partner_wrap .relation .ash .circle,
.partner_wrap .relation .ash .circle .in,
.partner_wrap .relation .ash .name {
	border-color: #aa7300;
	color: #aa7300;
}

/* パートナー紹介 */
.partner_wrap .partner_box {
	position: relative;
	background-color: #f5f5f5;
	padding: 3.5em 6% 2em;
}
.partner_wrap .partner_box .label {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translate(-50%, -50%);
	min-width: 45%;
	background-color: #aa7300;
	color: #FFF;
    font-size: max(3vw, 13px);
	text-align: center;
	padding: 0.4em 1em;
}
.partner_wrap .partner_box .logo {
	width: 45%;
	margin: 0 auto 2em;
}
.partner_wrap .partner_box .name {
    font-size: max(4vw, 16px);
    margin-bottom: 0.4em;
}
.partner_wrap .partner_box .body {
    font-size: max(3vw, 13px);
    line-height: 2;
}
.partner_wrap .partner_box .body a {
	text-decoration: underline;
	color: #aa7300;
}
@media print, screen and (min-width: 769px) {

	.partner_wrap {
		padding: 80px 0 60px;
	}
	.partner_wrap .title {
		margin-bottom: 1em;
	}
	.partner_wrap .main_img {
		width: 92%;
		margin: 0 auto 50px;
	}
	.partner_wrap .partner_flex {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		width: 92%;
		margin: 0 auto 70px;
	}
	.partner_wrap .partner_flex .body {
		width: 46%;
        font-size: max(1.25vw, 15px);
	    line-height: 2.25;
	    margin: 50px 0 0;
	}
	.partner_wrap .relation {
		width: 47%;
	}
	.partner_wrap .relation .label {
	    font-size: max(1.25vw, 14px);
		padding: 0.3em 1.8em;
		margin-bottom: 36px;
	}
	.partner_wrap .relation .circle .in {
	    font-size: max(1.5vw, 16px);
	}
	.partner_wrap .relation .name {
	    font-size: max(1.25vw, 14px);
	}

	.partner_wrap .partner_box {
		display: flex;
		align-items: center;
		width: 728px;
		max-width: 100%;
		margin: 0 auto;
		padding: 36px 40px 30px 60px;
	}
	.partner_wrap .partner_box .label {
		min-width: 255px;
	    font-size: 14px;
	}
	.partner_wrap .partner_box .logo {
		width: 110px;
		margin: 0 62px 0 0;
	}
	.partner_wrap .partner_box .name {
	    font-size: 18px;
	}
	.partner_wrap .partner_box .body {
	    font-size: 14px;
	}

}
@media print, screen and (min-width: 1281px) {
}

/*=============================================

	ご相談

==============================================*/
.consult_wrap {
	padding: 3.5em 0 3em;
	background-color: #003461;
}
.consult_wrap .title {
	color: #FFF;
	margin-bottom: 1em;
}
.consult_wrap .consult_flex .img {
	margin-bottom: 2em;
}
.consult_wrap .consult_flex .body {
    font-size: max(4.4vw, 16px);
    color: #FFF;
    line-height: 2.2;
    margin-bottom: 1.5em;
}
.consult_wrap .btn01.white a::after {
	background-color: #FFF;
}
@media print, screen and (min-width: 769px) {

	.consult_wrap {
		padding: 50px 0 60px;
	}
	.consult_wrap .title {
		margin-bottom: 1.1em;
	}
	.consult_wrap .consult_flex {
		display: flex;
		flex-direction: row-reverse;
		justify-content: space-between;
		align-items: flex-start;
		width: 92%;
		margin: 0 auto;
	}
	.consult_wrap .consult_flex .img {
		width: 34.5%;
		margin: 0;
	}
	.consult_wrap .consult_flex .text_wrap {
		width: 60%;
		padding-top: 10px;
	}
	.consult_wrap .consult_flex .body {
	    font-size: max(1.5vw, 18px);
	    line-height: 2;
	    margin-bottom: 1.6em;
	}
	.consult_wrap .btn01 {
		margin: 0;
		min-width: 326px;
		max-width: 326px;
		padding: 0;
	}
	.consult_wrap .btn01 a {
		padding: 1.2em 1em;
	}

}
@media print, screen and (min-width: 1281px) {
}