@charset "UTF-8";

/* ---------------------------------------------------------------------------------------------
	import
---------------------------------------------------------------------------------------------*/

@import url(destyle.css) layer(reset);
@import url(fontawesome.css);
@import url(common.css);

/* ---------------------------------------------------------------------------------------------
	ボタン
---------------------------------------------------------------------------------------------*/

.btn { display: block; text-align: center; border-radius: 50px; padding: 12px 0; }
.btn.style1 { background: linear-gradient( to right, #187FC2, #0B308D); color: #fff; }
.btn.style2 { background: #fff; border: 1px solid #00125E; color: #00125E; }

.btn.style1::before { content: "→"; margin-right: 8px; }
.btn.style2::before { content: "→"; margin-right: 8px; }

.btn2 { width: 100%; max-width: 480px; background: var(--SubColor01); color: #fff; display: block; text-align: center; position: relative; padding: 2rem 1rem; }
.btn2::before { content: ""; position: relative; top: -1px; display: inline-block; vertical-align: middle; background: url(../img/logo-nagoya-cci.svg) no-repeat 50% 50%/contain; width: 2.5em; height: 2.5em; margin-right: .75rem; }
.btn2::after { content: url(../img/external.svg); position: absolute; top: 8px; right: 8px; }

/* ---------------------------------------------------------------------------------------------
	index
---------------------------------------------------------------------------------------------*/
 
#index .contents-list { background: url(../img/bg.png) repeat-y center / 100%, radial-gradient(ellipse 40% 60%, #fff 50%, #dff1fb 100%); padding: 2rem 0 2rem 0; }
#index .contents-list section { position: relative; }
#index .contents-list section + section { margin-top: 4rem; }
#index .contents-list .text { position: relative; z-index: 10; }
#index .contents-list .box { position: relative; background: #fff; box-shadow: 5px 5px 10px 0px #0000004d; padding: 1rem 1rem 60vw 1rem; z-index: 5; }

@media screen and ( width <= 767px ) {
	#index .contents-list .text { right: 5.5%; }
	#index .contents-list .text.case img { width: clamp(1rem, 54vw, 208px); }
	#index .contents-list .text.leaning img { width: clamp(1rem, 42.6vw, 164px); }
	#index .contents-list .text.vendor img { width: clamp(1rem, 88vw, 340px); }
	#index .contents-list .text.funding img { width: clamp(1rem, 100vw, 385px); }
}

#index .contents-list .box .ttl { color: var(--MainColor); font-size: 1.75rem; font-style: italic; display: flex; align-items: center; line-height: 1.25; }

@media screen and ( width <= 767px ) {
	#index .contents-list .box .ttl br { display: none; }
}

#index .contents-list .box .ttl::before { content: ""; display: inline-block; width: 2em; height: 2em; margin-right: .75rem; }

#index .contents-list .box .ttl.case::before { background: url(../img/icon-case.svg) no-repeat 50% 50%/contain; }
#index .contents-list .box .ttl.learning::before { background: url(../img/icon-learning.svg) no-repeat 50% 50%/contain; }
#index .contents-list .box .ttl.vendor::before { background: url(../img/icon-vendor.svg) no-repeat 50% 50%/contain; }
#index .contents-list .box .ttl.funding::before { background: url(../img/icon-funding.svg) no-repeat 50% 50%/contain; }

#index .contents-list .box p { margin: 12px 0; }

#index .contents-list .box .btn { display: block; text-align: center; border-radius: 50px; padding: 12px 0; }
#index .contents-list .box .btn + .btn { margin-top: 12px; }
#index .contents-list .box .btn.style1 { background: linear-gradient( to right, #187FC2, #0B308D); color: #fff; }
#index .contents-list .box .btn.style2 { border: 1px solid #00125E; color: #00125E; }
#index .contents-list figure { position: absolute; bottom: 0; z-index: 8; }

@media screen and ( width <= 767px ) {
	#index .contents-list figure { width: 100%; max-width: 600px; position: absolute; left: 50%; transform: translateX(-50%); padding: 16px; }
}

@media screen and ( 768px <= width ), print {
	#index .contents-list { padding: 100px 0 100px 0; }
	#index .contents-list section + section { margin-top: 200px; }
	#index .contents-list .text { position: relative; bottom: 50px; z-index: 10; }
	#index .contents-list .box { max-width: 520px; left: 32px; padding: 2.5rem 3rem; z-index: 5; }
	#index .contents-list .box .ttl { font-size: 2.125rem; font-weight: 300; }
	#index .contents-list figure { top: 0; right: 16px; z-index: 4; }
}

#index .contents-list .banner { width: fit-content; display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; text-align: center; margin: 2rem auto 4rem auto; }
#index .contents-list .banner > div { width: calc((100% - 1rem) / 2 ); }

@media screen and ( 768px <= width ), print {
	#index .contents-list .banner { margin: 50px auto 160px auto; }
}

/* 開催予定セミナー */
main#index .SeminarSchedule { margin: 2rem auto; }
main#index .SeminarSchedule h3 { width: 60vw; max-width: 240px; margin: 0 auto 16px auto; }
main#index .SeminarSchedule .list { display: grid; grid-template-columns: 1fr; gap: 1rem;  }
main#index .SeminarSchedule .list .item { position: relative; background: #42a5fa; color: #fff; border-radius: 8px; padding: 1rem 1.5rem 2rem 1.5rem; }
main#index .SeminarSchedule .list .item::after { content: url(../img/external.svg); position: absolute; bottom: 4px; right: 8px; }
main#index .SeminarSchedule .list .item .ttl { border-bottom: 4px solid #a1d2fd; margin-bottom: 8px; padding-bottom: 8px; }

main#index .SeminarSchedule .list .item ul li { text-indent: -4.25em; margin-left: 4.25em; }
main#index .SeminarSchedule .list .item ul li::before { font-size: .825rem; background: #fff; color: #42a5fa; border-radius: 50px; padding: 2px 8px; margin-right: 12px; }
main#index .SeminarSchedule .list .item ul li:nth-of-type(1)::before { content: "開催日"; }
main#index .SeminarSchedule .list .item ul li:nth-of-type(2)::before { content: "会　場"; }
main#index .SeminarSchedule .list .item ul li:nth-of-type(3)::before { content: "申　込"; }

@media screen and ( 768px <= width ), print {
	main#index .SeminarSchedule { display: flex; align-items: center; gap: 1.5rem; }
	main#index .SeminarSchedule h3 { flex-basis: 200px; }
	main#index .SeminarSchedule .list { grid-template-columns: repeat(2, 1fr); flex: 2; }
}


/* ブランディング */
#index .branding { background: linear-gradient(to right, #90C9EE 0%, #D7EAF7 25%, #D7EAF7 50%, #90C9EE 100%); padding: 2rem 0; }
#index .branding > div { display: flex; flex-direction: column; gap: 2rem; align-items: center; }

@media screen and ( 768px <= width ), print {
	#index .branding { padding: 4rem 0; }
	#index .branding > div { flex-direction: row; }
}


/* お知らせ */
#index .News { margin: 3rem 0; }
#index .News h3 { font: 500 1.5rem/1.7 var(--DefaultFont); color: var(--MainColor); border-bottom: 3px solid; border-image: linear-gradient(to right, #187FC2, #0B308D) 1; }
#index .News ul { margin: .75rem 0 2rem 0; }
#index .News ul li + li { margin-top: .75rem; }
#index .News span.date { display: block; color: var(--MainColor); }
#index .News .btn { max-width: 240px; margin: 0 auto; }

@media screen and ( 768px <= width ), print {
	#index .News h3 { font-size: 1.75rem; }
	#index .News ul { margin: .75rem 0 4rem 0; }
	#index .News span.date { display: initial; margin-right: 2rem; }
}


/* ---------------------------------------------------------------------------------------------
	under layer
---------------------------------------------------------------------------------------------*/

:not(main#index) div.contents section + section { margin-top: 3rem; }

@media screen and ( 768px <= width ), print {
	:not(main#index) div.contents section + section { margin-top: 6rem; }
}

/* div.contents { background:  url(../img/bg.png) repeat-y center / 100%, radial-gradient(ellipse 40% 60%, #fff 50%, #dff1fb 100%); padding: 3rem 0 3rem 0; } */

div.contents {
	background: linear-gradient(rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.25)),
	url(../img/bg.png) repeat-y center / 100% auto, radial-gradient(ellipse 40% 60%, #fff 50%, #dff1fb 100%);
	padding: 3rem 0 3rem 0;
}

div.contents .wrap { max-width: 1040px; }

@media screen and ( 768px <= width ), print {
	div.contents { padding: 6rem 0 6rem 0; }
}

.Ttl01 { color: var(--MainColor); font-size: 2rem; font-style: italic; display: flex; align-items: center; max-width: 1260px; width: 95%; margin: 0 auto; padding: 2rem 0; }

@media screen and ( 768px <= width ), print {
	.Ttl01 { font-size: 3rem; padding: 3rem 0; }
}

.Ttl01::before { content: ""; display: inline-block; flex-shrink: 0; width: 2em; height: 2em; margin-right: .75rem; }

.Ttl01.case::before { background: url(../img/icon-case.svg) no-repeat 50% 50%/contain; }
.Ttl01.learning::before { background: url(../img/icon-learning.svg) no-repeat 50% 50%/contain; }
.Ttl01.vendor::before { background: url(../img/icon-vendor.svg) no-repeat 50% 50%/contain; }
.Ttl01.funding::before { background: url(../img/icon-funding.svg) no-repeat 50% 50%/contain; }
.Ttl01.information::before { background: url(../img/icon-chara.svg) no-repeat 50% 50%/contain; }

/* ---------------------------------------------------------------------------------------------
	お知らせ一覧
---------------------------------------------------------------------------------------------*/

.NewsList { display: grid; grid-template-columns: 1fr; gap: 3rem 1rem; }
.NewsList .item { background: #fff; box-shadow: 5px 5px 10px 0px #0000004d; padding: 1.5rem 2rem; }
.NewsList ul { margin: .75rem 0 .75rem 0; }
.NewsList ul li + li { margin-top: .75rem; }
.NewsList span.date { display: block; color: var(--MainColor); }

@media screen and ( 768px <= width ), print {
	.NewsList { gap: 6rem 1rem; } 
	.NewsList ul { margin: .75rem 0 .75rem 0; }
	.NewsList span.date { display: initial; margin-right: 2rem; }
}

/* ---------------------------------------------------------------------------------------------
	事例を知る
---------------------------------------------------------------------------------------------*/

main.case-study .btn { max-width: 480px; margin: auto; }
main.case-study .banner { width: fit-content; display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; }
main.case-study .banner > div { width: calc((100% - 1rem) / 2 ); }

/* ---------------------------------------------------------------------------------------------
	セミナー情報
---------------------------------------------------------------------------------------------*/

/* 開催予定セミナー */
.SeminarScheduleList { display: grid; grid-template-columns: 1fr; gap: 3rem 1rem; }
.SeminarScheduleList h2 {  margin: 0 auto 1.5rem auto; }
.SeminarScheduleList h2 a::after { content: url(../img/external.svg); filter: brightness(0) saturate(100%) invert(25%) sepia(56%) saturate(1248%) hue-rotate(191deg) brightness(98%) contrast(84%); margin-left: 1rem; }
.SeminarScheduleList .item { background: #fff; box-shadow: 5px 5px 10px 0px #0000004d; padding: 1.5rem 2rem; }
.SeminarScheduleList .ttl { border-bottom: 4px solid #a1d2fd; margin-bottom: 8px; padding-bottom: 8px; }
.SeminarScheduleList .item .text { margin-bottom: 1.5rem; }
.SeminarScheduleList .item ul li { text-indent: -4.75em; margin-left: 4.75em; }
.SeminarScheduleList .item ul li::before { font-size: .825rem; background: var(--MainColor); color: #fff; border-radius: 50px; padding: 2px 12px; margin-right: 12px; }
.SeminarScheduleList .item ul li:nth-of-type(1)::before { content: "開催日"; }
.SeminarScheduleList .item ul li:nth-of-type(2)::before { content: "会　場"; }
.SeminarScheduleList .item ul li:nth-of-type(3)::before { content: "申　込"; }

@media screen and ( 768px <= width ), print {
	.SeminarScheduleList { gap: 6rem 1rem; } 
	/* .SeminarScheduleList { grid-template-columns: repeat(2, 1fr); flex: 2; } */
}

/* 過去のセミナー紹介 */
.PastSeminarsList ul li { display: flex; flex-direction: column; justify-content: space-between; border-bottom: 1px dotted #000000; padding: .75rem 0; }
.PastSeminarsList ul li:first-of-type { border-top: 1px dotted #000000; }
.PastSeminarsList ul li a { color: var(--MainColor); }
.PastSeminarsList ul li a::before { content: "→"; margin-right: .25rem; }
.PastSeminarsList ul li div { margin: 0 0 0 auto; }

@media screen and ( 768px <= width ), print {
	.PastSeminarsList ul li { flex-direction: row; }
}

.Ttl02 { color: var(--MainColor); font: 500 2rem/1.5 var(--DefaultFont); margin-bottom: .75rem; }
@media screen and ( 768px <= width ), print {
	.Ttl02 { font-size: 2rem; }
}

/* ---------------------------------------------------------------------------------------------
	支援事業者とつながる
---------------------------------------------------------------------------------------------*/

main.vendor-matching section { margin-top: 2rem; }
main.vendor-matching section + section { margin-top: 2rem; }
main.vendor-matching .flex { display: flex; flex-direction: column; gap: 2rem 4rem; }
main.vendor-matching .flex > div { width: auto; }
main.vendor-matching a:has(figure) { flex-shrink: 0; width: fit-content; }

@media screen and ( 768px <= width ), print {
	main.vendor-matching section { margin-top: 4rem; }
	main.vendor-matching section + section { margin-top: 4rem; }
	main.vendor-matching .flex { flex-direction: row; }
	main.vendor-matching .flex > div { width: 50%; }
}

div.contents .flex { display: flex; flex-direction: column; gap: 2rem 4rem; }
div.contents .flex > div { width: auto; }

@media screen and ( 768px <= width ), print {
	div.contents .flex { flex-direction: row; }
	div.contents .flex > div { width: 50%; }
}

/* ---------------------------------------------------------------------------------------------
	資金・専門家相談
---------------------------------------------------------------------------------------------*/