@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);

/* reset */
html{color:#484848;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}


    body{
      font-family:'Noto Sans JP', sans-serif;
      font-size:18px;
}

*{
    box-sizing:border-box;
}

img{
    display:block;
    max-width:100%;
}

.inner{
  width:90%;
    max-width:1300px;
    margin:0 auto;
}

.copyright{
	background-color:#444;
	text-align:center;
	
}

.copyright a{
	color:#fff;
	font-size:13px;
	text-decoration:none;
}

/* ==================================================
   Seminar contents
================================================== */

:root {
	--navy: #17355f;
	--text: #18212d;
	--sub-text: #4c5968;
	--white: #ffffff;
	--page-bg: #f2f7fb;

	--aizumi-main: #1167ac;
	--aizumi-dark: #074f8d;
	--aizumi-light: #edf7fd;
	--aizumi-border: #4394c7;

	--hanoura-main: #139f9b;
	--hanoura-dark: #087d7a;
	--hanoura-light: #ecf9f8;
	--hanoura-border: #48bbb6;

	--yoshinogawa-main: #51a33e;
	--yoshinogawa-dark: #367f29;
	--yoshinogawa-light: #f1f9ed;
	--yoshinogawa-border: #78bb68;

	--mima-main: #df4685;
	--mima-dark: #bc2e69;
	--mima-light: #fff1f7;
	--mima-border: #e977a5;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	color: var(--text);
	background: var(--page-bg);
	font-family:
		"Zen Kaku Gothic New",
		"Noto Sans JP",
		"Yu Gothic",
		YuGothic,
		"ヒラギノ角ゴ ProN W3",
		"Hiragino Kaku Gothic ProN",
		sans-serif;
	font-weight: 700;
	line-height: 1.7;
}

.seminar_content {
	padding: 70px 20px;
}

.seminar_content + .seminar_content {
	padding-top: 10px;
}

.seminar_content .inner {
	position: relative;
	width: min(1100px, 100%);
	margin: 0 auto;
	padding: 58px 50px 46px;
	background: var(--white);
	border: 3px solid;
	border-radius: 28px;
	box-shadow: 0 15px 35px rgba(23, 53, 95, 0.09);
}

/* ==================================================
   商工会情報
================================================== */

.seminar_content .info {
	margin-bottom: 38px;
}

.seminar_content .name {
	display: flex;
	align-items: center;
	justify-content: center;
	width: min(430px, calc(100% - 40px));
	min-height: 65px;
	margin: -94px auto 25px;
	padding: 10px 30px;
	color: var(--white);
	border-radius: 12px;
	font-size: clamp(24px, 3vw, 38px);
	font-weight: 900;
	letter-spacing: 0.08em;
	line-height: 1.3;
	box-shadow: 0 7px 0 rgba(0, 0, 0, 0.08);
}

.seminar_content .syusai,
.seminar_content .kaijou {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 6px 0;
	font-size: 15px;
	line-height: 1.6;
}

.seminar_content .syusai span,
.seminar_content .kaijou span {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 50px;
	padding: 2px 8px;
	color: var(--white);
	border-radius: 4px;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: 0.05em;
}

/* ==================================================
   講座ブロック
================================================== */

.seminar_content .cur {
	position: relative;
	padding: 8px 0 34px;
}

.seminar_content .cur + .cur {
	padding-top: 40px;
	border-top: 2px dashed;
}

.seminar_content .cur h2 {
	margin: 0 0 28px;
	font-size: clamp(32px, 5vw, 58px);
	font-weight: 900;
	letter-spacing: -0.04em;
	line-height: 1.2;
}

.seminar_content .cur h2 span {
	display: block;
	margin-bottom: 6px;
	color: var(--text);
	font-size: clamp(17px, 2.3vw, 26px);
	font-weight: 900;
	letter-spacing: 0;
	line-height: 1.5;
}

.seminar_content .cur dl {
	display: grid;
	grid-template-columns: minmax(230px, 0.9fr) minmax(0, 1.5fr);
	gap: 30px;
	align-items: start;
	margin: 0;
	padding: 20px 0;
	border-top: 1px solid rgba(23, 53, 95, 0.12);
}

.seminar_content .cur dl:first-of-type {
	border-top: 0;
}

.seminar_content .day_time {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: clamp(24px, 5vw, 40px);
	font-weight: 900;
	letter-spacing: -0.05em;
	line-height: 1;
	white-space: nowrap;
}

.seminar_content .youbi {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	color: var(--white);
	border-radius: 50%;
	font-size: 13px;
	font-weight: 900;
	letter-spacing: 0;
}

.seminar_content .jikan {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	margin-left: 6px;
	padding: 5px 13px;
	border: 2px solid;
	border-radius: 9px;
	background: var(--white);
	font-size: 13px;
	font-weight: 900;
	letter-spacing: 0;
	line-height: 1.3;
}

.seminar_content .desc {
	margin: 0;
	font-size: 16px;
	line-height: 1.8;
}

.seminar_content .desc:empty {
	display: none;
}

.seminar_content .desc h3 {
	margin: 0 0 12px;
	font-size: 19px;
	font-weight: 900;
	line-height: 1.5;
}

.seminar_content .desc ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.seminar_content .desc li {
	position: relative;
	padding-left: 25px;
}

.seminar_content .desc li::before {
	content: "✓";
	position: absolute;
	top: 0;
	left: 0;
	font-weight: 900;
}

/* CTA */

.seminar_content .cta{
	margin-top:40px;
	text-align:center;
}

.seminar_content .cta_btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:18px;

	width:min(620px,100%);
	min-height:78px;
	padding:18px 34px;

	border-radius:999px;

	color:#fff;
	text-decoration:none;

	font-size:clamp(18px,2vw,24px);
	font-weight:900;
	letter-spacing:.05em;

	box-shadow:0 8px 0 rgba(0,0,0,.15);

	transition:.25s;
}

.seminar_content .cta_btn:hover{
	transform:translateY(4px);
	box-shadow:0 4px 0 rgba(0,0,0,.15);
}

.seminar_content .cta_btn i{
	display:flex;
	align-items:center;
	justify-content:center;

	width:34px;
	height:34px;

	border:2px solid rgba(255,255,255,.9);
	border-radius:50%;

	font-size:18px;
	line-height:1;

	flex-shrink:0;

	transition:.25s;
}

.seminar_content .cta_btn:hover i{
	transform:translateX(4px);
}

@media (max-width:600px){

	.seminar_content .cta_btn{

		min-height:64px;
		padding:15px 20px;
		gap:12px;

		font-size:16px;

	}

	.seminar_content .cta_btn i{

		width:28px;
		height:28px;
		font-size:15px;

	}

}

/* ==================================================
   藍住町商工会
================================================== */

.seminar_content.aizumi .inner {
	border-color: var(--aizumi-main);
	background:
		linear-gradient(
			135deg,
			rgba(17, 103, 172, 0.025),
			rgba(255, 255, 255, 0) 45%
		),
		var(--white);
}

.seminar_content.aizumi .name,
.seminar_content.aizumi .syusai span,
.seminar_content.aizumi .kaijou span,
.seminar_content.aizumi .youbi,
.seminar_content.aizumi .cta_btn {
	background: var(--aizumi-main);
}

.seminar_content.aizumi .cur h2,
.seminar_content.aizumi .desc h3,
.seminar_content.aizumi .desc li::before {
	color: var(--aizumi-main);
}

.seminar_content.aizumi .cur + .cur {
	border-color: rgba(17, 103, 172, 0.35);
}

.seminar_content.aizumi .jikan {
	color: var(--aizumi-main);
	border-color: var(--aizumi-border);
}

/* ==================================================
   羽ノ浦町商工会
================================================== */

.seminar_content.hanoura .inner {
	border-color: var(--hanoura-main);
	background:
		linear-gradient(
			135deg,
			rgba(19, 159, 155, 0.03),
			rgba(255, 255, 255, 0) 45%
		),
		var(--white);
}

.seminar_content.hanoura .name,
.seminar_content.hanoura .syusai span,
.seminar_content.hanoura .kaijou span,
.seminar_content.hanoura .youbi,
.seminar_content.hanoura .cta_btn {
	background: var(--hanoura-main);
}

.seminar_content.hanoura .cur h2,
.seminar_content.hanoura .desc h3,
.seminar_content.hanoura .desc li::before {
	color: var(--hanoura-main);
}

.seminar_content.hanoura .cur + .cur {
	border-color: rgba(19, 159, 155, 0.35);
}

.seminar_content.hanoura .jikan {
	color: var(--hanoura-main);
	border-color: var(--hanoura-border);
}

/* ==================================================
   吉野川市商工会
================================================== */

.seminar_content.yoshinogawa .inner {
	border-color: var(--yoshinogawa-main);
	background:
		linear-gradient(
			135deg,
			rgba(81, 163, 62, 0.03),
			rgba(255, 255, 255, 0) 45%
		),
		var(--white);
}

.seminar_content.yoshinogawa .name,
.seminar_content.yoshinogawa .syusai span,
.seminar_content.yoshinogawa .kaijou span,
.seminar_content.yoshinogawa .youbi,
.seminar_content.yoshinogawa .cta_btn {
	background: var(--yoshinogawa-main);
}

.seminar_content.yoshinogawa .cur h2,
.seminar_content.yoshinogawa .desc h3,
.seminar_content.yoshinogawa .desc li::before {
	color: var(--yoshinogawa-main);
}

.seminar_content.yoshinogawa .cur + .cur {
	border-color: rgba(81, 163, 62, 0.35);
}

.seminar_content.yoshinogawa .jikan {
	color: var(--yoshinogawa-main);
	border-color: var(--yoshinogawa-border);
}

/* ==================================================
   美馬市商工会
================================================== */

.seminar_content.mima .inner {
	border-color: var(--mima-main);
	background:
		linear-gradient(
			135deg,
			rgba(223, 70, 133, 0.035),
			rgba(255, 255, 255, 0) 45%
		),
		var(--white);
}

.seminar_content.mima .name,
.seminar_content.mima .syusai span,
.seminar_content.mima .kaijou span,
.seminar_content.mima .youbi,
.seminar_content.mima .cta_btn {
	background: var(--mima-main);
}

.seminar_content.mima .cur h2,
.seminar_content.mima .desc h3,
.seminar_content.mima .desc li::before {
	color: var(--mima-main);
}

.seminar_content.mima .cur + .cur {
	border-color: rgba(223, 70, 133, 0.35);
}

.seminar_content.mima .jikan {
	color: var(--mima-main);
	border-color: var(--mima-border);
}

/* ==================================================
   タブレット
================================================== */

@media screen and (max-width: 900px) {
	.seminar_content {
		padding-right: 30px;
		padding-left: 30px;
	}

	.seminar_content .inner {
		padding-right: 35px;
		padding-left: 35px;
	}

	.seminar_content .cur dl {
		grid-template-columns: 1fr;
		gap: 14px;
	}
}

/* ==================================================
   スマートフォン
================================================== */

@media screen and (max-width: 600px) {
	.seminar_content {
		padding: 55px 15px;
	}

	.seminar_content + .seminar_content {
		padding-top: 15px;
	}

	.seminar_content .inner {
		padding: 42px 20px 28px;
		border-width: 2px;
		border-radius: 18px;
		box-shadow: 0 10px 25px rgba(23, 53, 95, 0.08);
	}

	.seminar_content .name {
		width: calc(100% - 20px);
		min-height: 54px;
		margin-top: -72px;
		margin-bottom: 22px;
		padding: 8px 15px;
		border-radius: 9px;
		font-size: 23px;
	}

	.seminar_content .info {
		margin-bottom: 25px;
	}

	.seminar_content .syusai,
	.seminar_content .kaijou {
		display: block;
		margin: 9px 0;
		font-size: 13px;
		line-height: 1.7;
	}

	.seminar_content .syusai span,
	.seminar_content .kaijou span {
		margin-right: 7px;
		vertical-align: 1px;
	}

	.seminar_content .cur {
		padding-bottom: 26px;
	}

	.seminar_content .cur + .cur {
		padding-top: 28px;
	}

	.seminar_content .cur h2 {
		margin-bottom: 20px;
		font-size: clamp(27px, 9vw, 40px);
		line-height: 1.18;
	}

	.seminar_content .cur h2 span {
		font-size: 15px;
		line-height: 1.5;
	}

	.seminar_content .cur dl {
		display: block;
		padding: 14px 0;
	}

	.seminar_content .day_time {
		gap: 6px;
		font-size: clamp(33px, 12vw, 47px);
	}

	.seminar_content .youbi {
		width: 30px;
		height: 30px;
		font-size: 14px;
	}

	.seminar_content .jikan {
		flex-basis: auto;
		min-height: 32px;
		margin: 8px 0 0;
		padding: 4px 10px;
		font-size: 13px;
	}

	.seminar_content .desc {
		margin-top: 13px;
		font-size: 14px;
	}

	.seminar_content .cta {
		margin-top: 20px;
	}

	.seminar_content .cta_btn {
		min-height: 65px;
		padding: 13px 20px 13px 20px;
		font-size: 16px;
	}

	.seminar_content .cta_btn::after {
		right: 18px;
		width: 30px;
		height: 30px;
		font-size: 23px;
	}
}

#otoiwase{
	padding:90px 20px;
	background:#dfeefb;
}

#otoiwase .inner{
	max-width:1100px;
	margin:auto;
}

#otoiwase h2{
	text-align:center;
	font-size:42px;
	font-weight:900;
	margin-bottom:20px;
	color:#17355f;
}

#otoiwase .contact_lead{
	text-align:center;
	font-size:22px;
	font-weight:700;
	line-height:1.8;
	margin-bottom:50px;
}

.contact_list{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:20px;
	margin-bottom:45px;
}

.contact_card{
	display:block;
	background:#fff;
	border-radius:12px;
	text-decoration:none;
	color:#17355f;
	overflow:hidden;
	border:2px solid #ddd;
	transition:.25s;
}

.contact_card:hover{
	transform:translateY(-5px);
	box-shadow:0 12px 30px rgba(0,0,0,.15);
}

.contact_card .shop{
	color:#fff;
	font-weight:700;
	text-align:center;
	padding:10px;
	font-size:18px;
}

.contact_card .tel{
	padding:18px;
	text-align:center;
	font-size:26px;
	font-weight:900;
}

.contact_card .tel i{
	margin-right:8px;
}

/* チラシカラー */

.contact_card.blue .shop{
	background:#0b67b2;
}

.contact_card.green .shop{
	background:#00a79d;
}

.contact_card.lime .shop{
	background:#5ea638;
}

.contact_card.pink .shop{
	background:#dd4c8d;
}


/* 下段 */

.contact_main{

	background:#fff;

	border-radius:20px;

	padding:35px;

	display:flex;

	align-items:center;

	gap:35px;

	box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.contact_main .label{

	background:#17355f;

	color:#fff;

	padding:15px 25px;

	border-radius:10px;

	font-size:22px;

	font-weight:700;

}

.contact_main .office{

	font-size:46px;

	font-weight:900;

	color:#17355f;

	flex:1;

}

.contact_main .main_tel{

	text-decoration:none;

	font-size:56px;

	font-weight:900;

	color:#17355f;

	white-space:nowrap;

}

.contact_main .main_tel i{

	margin-right:15px;

}

/* スマホ */

@media(max-width:900px){

	.contact_list{

		grid-template-columns:repeat(2,1fr);

	}

	.contact_main{

		flex-direction:column;

		text-align:center;

	}

	.contact_main .office{

		font-size:34px;

	}

	.contact_main .main_tel{

		font-size:38px;

	}

}

@media(max-width:600px){

	.contact_list{

		grid-template-columns:1fr;

	}

	#otoiwase{

		padding:70px 15px;

	}

	#otoiwase h2{

		font-size:34px;

	}

	#otoiwase .contact_lead{

		font-size:18px;

	}

	.contact_card .tel{

		font-size:24px;

	}

	.contact_main .office{

		font-size:28px;

	}

	.contact_main .main_tel{

		font-size:30px;

	}

}

/* ==================================================
   HERO
================================================== */

#hero_container {
	position: relative;
	overflow: hidden;
	padding: 35px 20px 55px;
	background: none;
}

#hero_container::before,
#hero_container::after {
	display: none;
}

#hero_container .hero_inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.65fr);
	gap: 30px;
	align-items: end;
	width: min(1200px, 100%);
	margin: 0 auto;
}

#hero_container .hero_copy {
	position: relative;
	z-index: 2;
}

#hero_container .hero_project {
	margin: 0 0 24px;
	color: #27384d;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.03em;
	line-height: 1.6;
}

#hero_container .hero_catch {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 5px;
	color: #17355f;
	font-size: clamp(18px, 2vw, 26px);
	font-weight: 900;
	letter-spacing: 0.04em;
	line-height: 1.5;
}

#hero_container .hero_catch::before,
#hero_container .hero_catch::after {
	content: "";
	display: block;
	width: 2px;
	height: 28px;
	background: #17355f;
}

#hero_container .hero_catch::before {
	transform: rotate(-38deg);
}

#hero_container .hero_catch::after {
	transform: rotate(38deg);
}

#hero_container .hero_title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px 18px;
	margin: 0;
	font-weight: 900;
	letter-spacing: -0.055em;
	line-height: 1.12;
}

#hero_container .hero_title_small {
	color: #17355f;
	font-size: clamp(28px, 4vw, 50px);
}

#hero_container .hero_title_main {
	color: #ed681b;
	font-size: clamp(52px, 7.6vw, 96px);
	white-space: nowrap;
}

#hero_container .hero_subtitle {
	display: inline-block;
	margin: 18px 0 0;
	padding: 7px 30px 8px;
	color: #17355f;
	background: #ffe265;
	border-radius: 999px;
	box-shadow: 0 5px 0 rgba(231, 184, 35, 0.18);
	font-size: clamp(15px, 1.8vw, 20px);
	font-weight: 900;
	letter-spacing: 0.04em;
	line-height: 1.5;
}

#hero_container .hero_visual {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	min-height: 235px;
}

#hero_container .hero_visual img {
	display: block;
	width: min(100%, 360px);
	height: auto;
	object-fit: contain;
}

#hero_container .hero_free {
	position: absolute;
	top: 6px;
	right: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 126px;
	height: 126px;
	padding: 12px;
	color: #ffe36a;
	background: #17355f;
	border: 5px solid #f4de83;
	border-radius: 50%;
	text-align: center;
	box-shadow: 0 10px 24px rgba(23, 53, 95, 0.2);
	line-height: 1.1;
}

#hero_container .hero_free_small {
	margin-bottom: 2px;
	font-size: 13px;
	font-weight: 900;
}

#hero_container .hero_free strong {
	font-size: 22px;
	font-weight: 900;
}

#hero_container .hero_free_large {
	font-size: 30px;
	font-weight: 900;
}


/* ==================================================
   OSUSUME
================================================== */

#osusume {
	padding: 95px 20px;
	background: #fff;
}

#osusume .inner {
	width: min(1100px, 100%);
	margin: 0 auto;
}

#osusume .osusume_box {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
	gap: 40px;
	align-items: end;
	overflow: hidden;
	padding: 68px 55px 0;
	background: #fff9df;
	border: 3px solid #f4d64d;
	border-radius: 30px;
	box-shadow: 0 16px 40px rgba(95, 76, 10, 0.1);
	max-width:830px;
	margin:0 auto;
}

#osusume .osusume_heading {
	position: absolute;
	top: 0;
	left: 50%;
	width: min(560px, calc(100% - 60px));
	transform: translate(-50%, -50%);
}

#osusume .osusume_heading p {
	margin: 0;
	padding: 12px 25px;
	color: #17355f;
	background: #ffe163;
	border-radius: 999px;
	box-shadow: 0 6px 0 rgba(219, 177, 24, 0.15);
	text-align: center;
	font-size: clamp(21px, 3vw, 32px);
	font-weight: 900;
	letter-spacing: 0.08em;
	line-height: 1.4;
}

#osusume .osusume_content {
	padding-bottom: 52px;
}

#osusume h2 {
	margin: 0 0 28px;
	color: #17355f;
	font-size: clamp(21px, 2.8vw, 32px);
	font-weight: 900;
	letter-spacing: 0.05em;
	line-height: 1.5;
}

#osusume .osusume_list {
	display: grid;
	gap: 13px;
	margin: 0;
	padding: 0;
	list-style: none;
}

#osusume .osusume_list li {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	color: #17355f;
	font-size: clamp(16px, 1.8vw, 20px);
	font-weight: 900;
	line-height: 1.6;
}

#osusume .osusume_list li i {
	flex: 0 0 auto;
	margin-top: 6px;
	color: #4fa744;
	font-size: 18px;
}

#osusume .osusume_target {
	position: relative;
	margin: 24px 0 0;
	padding: 18px 20px 18px 55px;
	color: #17355f;
	background: rgba(255, 255, 255, 0.82);
	border-radius: 12px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.7;
}

#osusume .osusume_target::before {
	content: "✓";
	position: absolute;
	top: 50%;
	left: 20px;
	color: #4fa744;
	font-size: 25px;
	font-weight: 900;
	transform: translateY(-50%);
}

#osusume .osusume_target strong {
	font-size: 20px;
	font-weight: 900;
}

#osusume .osusume_cta {
	margin-top: 28px;
}

#osusume .osusume_btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
	width: min(470px, 100%);
	min-height: 66px;
	padding: 14px 28px;
	color: #fff;
	background: #17355f;
	border-radius: 999px;
	box-shadow: 0 7px 0 rgba(7, 29, 57, 0.2);
	text-decoration: none;
	font-size: 18px;
	font-weight: 900;
	letter-spacing: 0.05em;
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease,
		opacity 0.2s ease;
}

#osusume .osusume_btn i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 29px;
	height: 29px;
	border: 2px solid currentColor;
	border-radius: 50%;
	font-size: 16px;
	transition: transform 0.2s ease;
}

#osusume .osusume_btn:hover {
	opacity: 0.92;
	box-shadow: 0 3px 0 rgba(7, 29, 57, 0.2);
	transform: translateY(4px);
}

#osusume .osusume_btn:hover i {
	transform: translateX(3px);
}

#osusume .osusume_visual {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: 100%;
}

#osusume .osusume_visual img {
	display: block;
	width: min(100%, 340px);
	height: auto;
	object-fit: contain;
}


/* ==================================================
   RESPONSIVE
================================================== */

@media screen and (max-width: 900px) {

	#hero_container {
		padding-top: 25px;
	}

	#hero_container .hero_inner {
		grid-template-columns: minmax(0, 1fr) 250px;
	}

	#hero_container .hero_free {
		width: 105px;
		height: 105px;
	}

	#hero_container .hero_title_main {
		white-space: normal;
	}

	#osusume .osusume_box {
		grid-template-columns: minmax(0, 1fr) 260px;
		padding-right: 35px;
		padding-left: 35px;
	}

}


@media screen and (max-width: 700px) {

	.sp_only {
		display: block;
	}

	#hero_container {
		padding: 20px 15px 45px;
	}

	#hero_container::before {
		top: -90px;
		right: -110px;
		width: 300px;
		height: 300px;
	}

	#hero_container .hero_inner {
		display: block;
	}

	#hero_container .hero_project {
		margin-bottom: 16px;
		font-size: 11px;
	}

	#hero_container .hero_catch {
		gap: 8px;
		margin-bottom: 8px;
		font-size: 15px;
	}

	#hero_container .hero_catch::before,
	#hero_container .hero_catch::after {
		height: 20px;
	}

	#hero_container .hero_title {
		display: block;
	}

	#hero_container .hero_title_small,
	#hero_container .hero_title_main {
		display: block;
	}

	#hero_container .hero_title_small {
		font-size: clamp(25px, 8vw, 34px);
	}

	#hero_container .hero_title_main {
		margin-top: 3px;
		font-size: clamp(42px, 13.5vw, 62px);
		line-height: 1.05;
	}

	#hero_container .hero_subtitle {
		width: 100%;
		margin-top: 15px;
		padding: 8px 15px;
		border-radius: 14px;
		text-align: center;
		font-size: 13px;
	}

	#hero_container .hero_visual {
		min-height: 0;
		margin-top: 23px;
		padding-right: 65px;
	}

	#hero_container .hero_visual img {
		width: min(100%, 280px);
	}

	#hero_container .hero_free {
		top: auto;
		right: 0;
		bottom: 5px;
		width: 92px;
		height: 92px;
		border-width: 4px;
	}

	#hero_container .hero_free_small {
		font-size: 10px;
	}

	#hero_container .hero_free strong {
		font-size: 17px;
	}

	#hero_container .hero_free-large {
		font-size: 23px;
	}

	#osusume {
		padding: 80px 15px 65px;
	}

	#osusume .osusume_box {
		display: flex;
		flex-direction: column;
		gap: 20px;
		align-items: stretch;
		padding: 60px 22px 0;
		border-width: 2px;
		border-radius: 20px;
	}

	#osusume .osusume_heading {
		width: calc(100% - 30px);
	}

	#osusume .osusume_heading p {
		padding: 10px 15px;
		font-size: 20px;
		letter-spacing: 0.03em;
	}

	#osusume .osusume_content {
		padding-bottom: 0;
	}

	#osusume h2 {
		margin-bottom: 22px;
		font-size: 20px;
		text-align: center;
	}

	#osusume .osusume_list {
		gap: 10px;
	}

	#osusume .osusume_list li {
		font-size: 15px;
	}

	#osusume .osusume_target {
		padding: 15px 15px 15px 45px;
		font-size: 14px;
	}

	#osusume .osusume_target::before {
		left: 15px;
		font-size: 21px;
	}

	#osusume .osusume_target strong {
		font-size: 17px;
	}

	#osusume .osusume_btn {
		min-height: 60px;
		padding: 13px 18px;
		font-size: 15px;
	}

	#osusume .osusume_visual {
		margin-top: 5px;
	}

	#osusume .osusume_visual img {
		width: min(100%, 275px);
	}

}

/*====================================
受講方法
====================================*/

.jukou_info{
	margin-top:24px;
	margin-bottom:32px;   /* ←追加 */

	padding-top:20px;
	border-top:1px solid rgba(23,53,95,.12);

	display:flex;
	flex-direction:column;
	gap:14px;
}

.jukou_item{
	display:flex;
	align-items:flex-start;
	gap:12px;
}

.jukou_item i{
	width:auto;
	height:auto;
	background:none;
	border-radius:0;

	color:var(--aizumi-main);

	font-size:18px;
	margin-top:2px;
}

.jukou_item .txt{
	flex:1;
}

.jukou_item strong{
	display:block;
	margin-bottom:2px;

	font-size:15px;
	font-weight:900;
	color:#17355f;
	line-height:1.4;
}

.jukou_item p{
	margin:0;

	font-size:13px;
	line-height:1.6;
	color:#555;
}

@media (max-width:600px){

	.jukou_info{
		margin-top:18px;
		margin-bottom:24px;
		padding-top:18px;
		gap:10px;
	}

	.jukou_item{
		gap:10px;
	}

	.jukou_item i{
		width:28px;
		height:28px;
		font-size:13px;
	}

	.jukou_item strong{
		font-size:14px;
	}

	.jukou_item p{
		font-size:12px;
	}

}

.seminar_content .curriculum_detail {
	list-style: none;
	padding-left: 18px;
}

.seminar_content .curriculum_detail li {
	position: relative;
	padding-left: 18px;
}

.seminar_content .curriculum_detail li::before {
	content: "";
	position: absolute;
	top: 0.72em;
	left: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #17355f;
	transform: translateY(-50%);
}

.seminar_content.aizumi .curriculum_detail li::before {
	background: #1167ac;
}

.seminar_content.hanoura .curriculum_detail li::before {
	background: #139f9b;
}

.seminar_content.yoshinogawa .curriculum_detail li::before {
	background: #51a33e;
}

.seminar_content.mima .curriculum_detail li::before {
	background: #df4685;
}

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

講師紹介

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

#instructor {
	padding: 100px 20px;
	background: #f8fafc;
}

#instructor .inner {
	width: min(1200px, 100%);
	margin: 0 auto;
}

#instructor > .inner > h2 {
	margin: 0 0 15px;
	color: #17355f;
	font-size: clamp(32px, 4vw, 44px);
	font-weight: 900;
	line-height: 1.4;
	text-align: center;
}

#instructor > .inner > .lead {
	max-width: 760px;
	margin: 0 auto 55px;
	color: #5b6572;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.9;
	text-align: center;
}

#instructor .instructor_list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px;
}

#instructor .instructor_card {
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr);
	gap: 0;
	align-items: stretch;
	overflow: hidden;
	min-width: 0;
	background: #fff;
	border: 1px solid rgba(23, 53, 95, 0.1);
	border-radius: 20px;
	box-shadow: 0 14px 35px rgba(23, 53, 95, 0.08);
}

#instructor .instructor_card .photo {
	position: relative;
	overflow: hidden;
	width: 100%;
	min-height: 288px;
	background: #e9edf1;
}

#instructor .instructor_card .photo img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 5 / 8;
	object-fit: cover;
	object-position: center top;
}

#instructor .instructor_card .body {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 28px 26px;
}

#instructor .instructor_card .position {
	align-self: flex-start;
	margin: 0 0 14px;
	padding: 6px 11px;
	color: #fff;
	background: #17355f;
	border-radius: 5px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.55;
}

#instructor .instructor_card h3 {
	margin: 0 0 11px;
	color: #17355f;
	font-size: clamp(25px, 2.5vw, 32px);
	font-weight: 900;
	letter-spacing: 0.04em;
	line-height: 1.35;
}

#instructor .instructor_card .specialty {
	align-self: flex-start;
	margin: 0 0 18px;
	padding: 5px 12px;
	color: #1167ac;
	background: #edf6fd;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.5;
}

#instructor .instructor_card .body > p {
	margin: 0;
	color: #4f5965;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.85;
}


/*====================================
Tablet
====================================*/

@media screen and (max-width: 1050px) {
	#instructor .instructor_card {
		grid-template-columns: 150px minmax(0, 1fr);
	}

	#instructor .instructor_card .photo {
		min-height: 240px;
	}

	#instructor .instructor_card .body {
		padding: 23px 21px;
	}

	#instructor .instructor_card h3 {
		font-size: 25px;
	}

	#instructor .instructor_card .body > p {
		font-size: 13px;
	}
}


/*====================================
Narrow tablet
====================================*/

@media screen and (max-width: 850px) {
	#instructor .instructor_list {
		grid-template-columns: 1fr;
	}

	#instructor .instructor_card {
		grid-template-columns: 190px minmax(0, 1fr);
	}

	#instructor .instructor_card .photo {
		min-height: 304px;
	}
}


/*====================================
Smartphone
====================================*/

@media screen and (max-width: 600px) {
	#instructor {
		padding: 70px 15px;
	}

	#instructor > .inner > h2 {
		margin-bottom: 12px;
		font-size: 32px;
	}

	#instructor > .inner > .lead {
		margin-bottom: 35px;
		font-size: 15px;
		line-height: 1.8;
	}

	#instructor .instructor_list {
		gap: 22px;
	}

	#instructor .instructor_card {
		display: block;
		border-radius: 16px;
	}

	#instructor .instructor_card .photo {
		width: min(62%, 230px);
		min-height: 0;
		margin: 24px auto 0;
		background: transparent;
	}

	#instructor .instructor_card .photo img {
		width: 100%;
		height: auto;
		aspect-ratio: 5 / 8;
		border-radius: 10px;
		object-fit: cover;
		object-position: center top;
		box-shadow: 0 8px 22px rgba(23, 53, 95, 0.12);
	}

	#instructor .instructor_card .body {
		padding: 22px 20px 25px;
		text-align: left;
	}

	#instructor .instructor_card .position {
		margin-bottom: 12px;
		font-size: 10px;
	}

	#instructor .instructor_card h3 {
		margin-bottom: 9px;
		font-size: 25px;
	}

	#instructor .instructor_card .specialty {
		margin-bottom: 15px;
		font-size: 11px;
	}

	#instructor .instructor_card .body > p {
		font-size: 13px;
		line-height: 1.8;
	}
}

/*====================================
Course instructor
====================================*/

.seminar_content .course_instructor {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 20px;
	padding: 8px 14px 8px 9px;
	background: #f3f6f8;
	border: 1px solid rgba(23, 53, 95, 0.1);
	border-radius: 8px;
}

.seminar_content .course_instructor > i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	color: #fff;
	background: #17355f;
	border-radius: 50%;
	font-size: 13px;
	line-height: 1;
}

.seminar_content .course_instructor_text {
	display: flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
	line-height: 1.4;
}

.seminar_content .course_instructor_text span {
	flex: 0 0 auto;
	color: #697482;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.seminar_content .course_instructor_text strong {
	color: #17355f;
	font-size: 15px;
	font-weight: 900;
	letter-spacing: 0.03em;
}


/* Aizumi */

.seminar_content.aizumi .course_instructor {
	background: #edf7fd;
	border-color: rgba(17, 103, 172, 0.14);
}

.seminar_content.aizumi .course_instructor > i {
	background: #1167ac;
}

.seminar_content.aizumi .course_instructor_text strong {
	color: #1167ac;
}


/* Hanoura */

.seminar_content.hanoura .course_instructor {
	background: #ecf9f8;
	border-color: rgba(19, 159, 155, 0.14);
}

.seminar_content.hanoura .course_instructor > i {
	background: #139f9b;
}

.seminar_content.hanoura .course_instructor_text strong {
	color: #087d7a;
}


/* Yoshinogawa */

.seminar_content.yoshinogawa .course_instructor {
	background: #f1f9ed;
	border-color: rgba(81, 163, 62, 0.16);
}

.seminar_content.yoshinogawa .course_instructor > i {
	background: #51a33e;
}

.seminar_content.yoshinogawa .course_instructor_text strong {
	color: #367f29;
}


/* Mima */

.seminar_content.mima .course_instructor {
	background: #fff1f7;
	border-color: rgba(223, 70, 133, 0.15);
}

.seminar_content.mima .course_instructor > i {
	background: #df4685;
}

.seminar_content.mima .course_instructor_text strong {
	color: #bc2e69;
}


/*====================================
Smartphone
====================================*/

@media screen and (max-width: 600px) {
	.seminar_content .course_instructor {
		gap: 8px;
		margin-bottom: 16px;
		padding: 7px 11px 7px 8px;
	}

	.seminar_content .course_instructor > i {
		width: 23px;
		height: 23px;
		font-size: 11px;
	}

	.seminar_content .course_instructor_text {
		gap: 7px;
	}

	.seminar_content .course_instructor_text span {
		font-size: 10px;
	}

	.seminar_content .course_instructor_text strong {
		font-size: 13px;
	}
}