@charset "utf-8";

/* -----------------------------------------------

	Type: top styles

----------------------------------------------- */



/* Slider 
----------------------------------------------- */

#Slider img {
	width: 100%;
	
}
.slick-dotted.slick-slider {
    margin-bottom: 0!important;
}
.slick-dots {
	bottom: 15px!important;
}
.slick-dots li.slick-active button:before { /* アクティブなスライドのドット色 */
	color: var(--color-skyblue)!important;
}


/* 重要なお知らせ
----------------------------------------------- */
.top_importantnews_h2_bg {
	background: var(--color-orange);
}
.top_importantnews h2 {
	font-size: var(--fz20_sp14);
	font-weight: var(--fw600);
	color: var(--color-white);
	padding-top: 20px;
	padding-bottom: 20px;
}

.top_importantnews_item {
	background: var(--color-bg_lightgray);
	padding-top: 14px;
	padding-bottom: 14px;
}
.top_importantnews_item li:not(.top_importantnews_item li:last-child) {
    margin-bottom: 14px;
}
.top_importantnews_item dl {
	font-size: var(--fz16);
	display: flex;
}
.top_importantnews_item dt {
	display: inline-block;
    margin-right: 15px;
}


/* 共通
----------------------------------------------- */
/* タイトル */
.top_title {
	margin-bottom: var(--space80);
}
.top_title h2 {
	font-size: 4.8rem;
	font-weight: var(--fw700);
	color: var(--color-bluish-black);
	margin-bottom: 12px;
}
.top_title p {
	font-size: 2rem;
	font-weight: var(--fw300);
	font-family: var(--poppins);
	color: var(--color-bluish-black);
}


/* 影背景 */
.box-shadow {
	background: var(--color-white);
	box-shadow: 8px 8px 0 0 var(--color-opacity-skyblue30);
	padding: 40px;
}


/* ボタン */
/* 枠線 */
.border_btn a {
	position: relative;

	display: flex;
	align-items: center;
    justify-content: center;
	margin: auto;

	border: 1px solid var(--color-skyblue);
	max-width: 341px;
	width: 100%;	
	height: 71px;
	font-size: 2rem;
	font-weight: var(--fw600);
	font-family: var(--poppins);
	color: var(--color-skyblue);
}
.border_btn a::after {
	position: absolute;
	content: '>';
	display: block;
	color: var(--color-skyblue);
	right: 18px;
	line-height: 71px;
}

.border_btn a:hover {
	background: var(--color-skyblue);
	transition: ease .3s;
}
.border_btn a:hover, .border_btn a:hover:after {
	opacity: 1;
	color: var(--color-white);
}

/* 背景色 */
.gray_bg {
	background: var(--color-bg_lightgray);
}

/* 共通　ここまで
----------------------------------------------- */


/* バナー
----------------------------------------------- */
.top_banner {
	display: flex;
}
.top_banner a:not(.top_banner a:last-child) {
    margin-right: 60px;
}
.top_banner img {
	width: 100%;
	max-width: 560px;
}


/* News
----------------------------------------------- */
.m-w1360 {
	max-width: 1360px;
}

/* 方眼紙　背景 */
.top_graph-paper_bg {
	background: url(/shodaifu2024/wp-content/themes/shodaifu/assets/images/top_graph-paper.jpg) repeat-y;
	background-size: cover;
	padding-top: 80px;
	padding-bottom:80px;
}

.top_news_title {
	font-size: 5.6rem;
	font-weight: var(--fw600);
	font-family: var(--poppins);
	color: var(--color-bluish-black);
}

.top_news_item {
	margin-top: 40px;
	margin-bottom: 34px;
}
.top_news_item li {
	display: flex;
	margin-bottom: 34px;
}

 /* カテゴリーのタグ */
.top_news_item p.NewsT {
	display: block;
	font-size: var(--fz16);
	font-weight: var(--fw600);
	color: var(--color-white);
	width: 160px;
	height: 32px;
	line-height: 32px;
	text-align: center;
	margin-right: 20px;
}

.top_news_item a {
	flex: 1;
}
.top_news_item dt, .top_news_item dd {
	font-size: var(--fz16);
}


/* 学校の様子 Topics
----------------------------------------------- */
#sort {
	display: flex;
	justify-content: center;
	margin-bottom: 40px;
}

#sort li:not(:last-child) {
	margin-right: 20px;
}

/* 未選択のタブ */
#sort li {
	width: 201px;
	height: 43px;
	line-height: 43px;
	text-align: center;

	font-size: var(--fz16);
	color: var(--color-gray);
	background: var(--color-white);
	border: 1px solid var(--color-gray);
	cursor: pointer;
}
/* 選択中のタブ */
#sort li.is-active {
	font-weight: var(--fw600);
	color: var(--color-white);
	background: var(--color-orange);
	border: 1px solid var(--color-orange);
}

/* トップのTopics独自の最大横幅とlaw */
.w1384 {
	max-width: 1438px; /* 1384px + top_topics_lawのp-lの14pxとp-rの40px */
}
.top_topics_law {
	padding-left:14px;/* Topicsの投稿ごとに左余白をつけるためその分、削る。合計で40になるようにする */
	padding-right:40px;
	margin-top:0;
	margin-right:auto;
	margin-left:auto;
	margin-bottom:0;
}

.TopicsBoxC {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 46px; /* TopicsBoxのmb34を引いて合計80にする */
}

.TopicsBox {
	margin-bottom: 34px;
	margin: 0 0 34px 26px; /* 左の余白分top_topics_lawの左余白を削る */

	width: 100%;
    max-width: 320px;
	width: calc(25% - 26px);
}

.TopicsPhoto img {
	width: 100%;
    max-width: 320px;
}
.TopicsTag {
	width: 150px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	font-size: 1.4rem;	
	font-weight: var(--fw600);
	color: var(--color-white);
	margin-top: 20px;
}
.TopicsDay {
	padding-bottom: 2px;
}
.TopicsDay, .TopicsBox p:last-child {
	font-size: var(--fz16);
}


/* 仕切り画像
----------------------------------------------- */
.top_partition img, .top_partition_movie img {
	width: 100%;
}


/* 学科?コース Course
----------------------------------------------- */
/* 背景 */
.gray70_bg {
	margin: 0;
	background-image: url("/shodaifu2024/wp-content/themes/shodaifu/assets/images/top_line_bg_r.png"),url("/shodaifu2024/wp-content/themes/shodaifu/assets/images/top_line_bg_l.png"), linear-gradient(to right, transparent 30%, var(--color-bg_lightgray) 30%);
	background-repeat: no-repeat;
	background-size:195px 195px, 195px 195px, cover;
	background-position:  right top, left bottom, center;
}


picture.top_5point img {
	display: inline-block;
	max-width: 800px;
	width: 100%;
}
.top_course p {
	font-size: var(--fz16);
	margin-bottom: var(--space40-34);
}


.top_couse_title {
	margin: var(--space80) auto;
}
.top_couse_title h3 {
	font-size: 3.2rem;
	color: var(--color-bluish-black);
	font-weight: var(--fw700);
}

/* 2色の下線 */
.border-container {
	position: relative;
	width: 100%;
	max-width: 500px;
	margin: 0 auto; /* 中央揃え */
	height: 2px; /* ボーダーの高さ */

	margin-top: 13px;
}
.border-container::before,
.border-container::after {
	content: '';
	position: absolute;
	top: 0;
	width: 50%;
	height: 100%;
}
.border-container::before {
	left: 0;
	background-color: var(--color-skyblue); /* 左側の色 */
}

.border-container::after {
	right: 0;
	background-color: var(--color-bluish-black); /* 右側の色 */
}
/* 2色の下線　ここまで */

.top_couse_group {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.top_couse_group .unit:nth-child(even) { /* 偶数 */
	margin-top: 88px;/* 80+8px(影の分) */
}


/* ------------ 画像 ------------ */
.top_couse_group .unit img {
	max-width: 560px;
    width: 100%;
}

/* ------------ 枠部分 ------------ */
.top_couse_group .unit > div {
	width: 568px;

	/* 位置 */
	position: relative;
	top: -40px;
	left: 78px;   
    z-index: 10;   
}

.top_couse_group .unit h4 {
	font-size: 3.2rem;
	font-weight: var(--fw700);
	position:relative;
	padding-left: 27px;
}

/* --- タイトル前に画像配置 --- */
.top_couse_group .unit h4::before {
	position: absolute;
	left:0;
	width: 8px;
	height: 40px;

	/* 高さ中央揃え */
	top: 0;
	bottom: 0;
	margin: auto;
}

/* コースごとに別の画像を付ける */
.top_couse_group .unit .top_course01 h4::before {
	content: url("/shodaifu2024/wp-content/themes/shodaifu/assets/images/top_pc_course01_ls-sps_before.png");
}
.top_couse_group .unit .top_course02 h4::before {
	content: url("/shodaifu2024/wp-content/themes/shodaifu/assets/images/top_pc_course02_ls-sp_before.png");
}
.top_couse_group .unit .top_course03 h4::before {
	content: url("/shodaifu2024/wp-content/themes/shodaifu/assets/images/top_pc_course03_ls-ic_before.png");
}
.top_couse_group .unit .top_course04 h4::before {
	content: url("/shodaifu2024/wp-content/themes/shodaifu/assets/images/top_pc_course04_ls_before.png");
}
.top_couse_group .unit .top_course05 h4::before {
	content: url("/shodaifu2024/wp-content/themes/shodaifu/assets/images/top_pc_course05_business-accounting_before.png");
}
.top_couse_group .unit .top_course06 h4::before {
	content: url("/shodaifu2024/wp-content/themes/shodaifu/assets/images/top_pc_course06_business-comprehensive_before.png");
}


.top_couse_group .unit p {
	font-size:var(--fz16);
	margin: var(--space40-34) auto;
}


/* 動画で見る商大附
----------------------------------------------- */

/* top: -280px;した分 */
.position_pt280 {
	padding-top: 280px;
}

.top_partition_movie {
	position: absolute;
	top: -280px;
    z-index: 1;
}

.gray_bg {
	position: relative;
}
/* 白枠 */
.top_white_box {
	background: var(--color-white);
	padding: 80px;
	margin: auto;
	
	position: relative;
    z-index: 5;
}

/* 白枠内 */
.top_movie_flex {
	display: flex;
	margin-bottom: var(--space80);
}
.top_movie_flex .text_box {
	width: 100%;
	margin-right: var(--space80);
}

.top_movie_flex .text_box p {
	font-size: var(--fz16);
}


/* youtube動画配置 */
.youtube iframe {
	margin: 15px auto;
    display: block;
}
@media screen and (max-width: 1660px) {
	.youtube {
		width: 100%;
		height: 100%;
		aspect-ratio: 16 / 9;
	}
	.youtube iframe {
		width: 100%;
		height: 100%;
		max-width: 720px;
		max-height: 405px;
	}
}



/* 商大附をもっと知る　バナー
----------------------------------------------- */
.about_banner {
	display: flex;
	justify-content: center;
}
.about_banner img {
	width:100%;
	max-width: 450px;
}


/* サブバナー
----------------------------------------------- */
.ichimatu_bg {
	background: url("/shodaifu2024/wp-content/themes/shodaifu/assets/images/ichimatu_bg.jpg") repeat-y;
	background-size: cover;
	padding-top: var(--space80);
	padding-bottom: var(--space80);
}

.subbanner {
	display: flex;
	justify-content: space-between;
}
.subbanner p {
	width: 25%;
}
.subbanner p:not(:last-child) {
	margin-right: 80px;
}
.subbanner a {
	width: 100%;
	max-width: 280px;
	height: 80px;
	
	display: flex;
	align-items: center;
    justify-content: center;
	text-align: center;

	font-size: var(--fz16);
	font-weight: var(--fw600);
	color: var(--color-white);
	background: var(--color-skyblue);
}


 
/* PC */
@media screen and (max-width:1660px) {
	
	/* 学科?コース Course
	----------------------------------------------- */
		.top_couse_group .unit {
		width: calc(50% - 20px);
		padding-right: 7%;
	}

	/* ------------ 枠部分 ------------ */
	.top_couse_group .unit > div {
		width: 100%;
		left: 0;
		top: -30px;
		padding: 30px;
		margin-left: 15%; 
	}


	/* 動画で見る商大附
	----------------------------------------------- */

	/* top: -220px;した分 */
	.position_pt280 {
		padding-top: 13.253012048192772vw;
	}

	.top_partition_movie {
		top: -13.253012048192772vw;
	}
}

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

	/* バナー
	----------------------------------------------- */
	.top_banner a:not(.top_banner a:last-child) {
		margin-right: 30px;
	}


	/* サブバナー
	----------------------------------------------- */
	.subbanner p:not(:last-child) {
		margin-right: 40px;
	}

}

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

	/* 学科?コース Course
	----------------------------------------------- */
	/* ------------ 枠部分 ------------ */
	.top_couse_group .unit h4 {
		font-size: 2.4rem;
	}
	
	/* --- タイトル前に画像配置 --- */
	.top_couse_group .unit h4::before {
		height: 30px;
	}
	
	/* コースごとに別の画像を付ける */
	.top_couse_group .unit .top_course01 h4::before {
		content: url("/shodaifu2024/wp-content/themes/shodaifu/assets/images/top_sp_course01_ls-sps_before.png");
	}
	.top_couse_group .unit .top_course02 h4::before {
		content: url("/shodaifu2024/wp-content/themes/shodaifu/assets/images/top_sp_course02_ls-sp_before.png");
	}
	.top_couse_group .unit .top_course03 h4::before {
		content: url("/shodaifu2024/wp-content/themes/shodaifu/assets/images/top_sp_course03_ls-ic_before.png");
	}
	.top_couse_group .unit .top_course04 h4::before {
		content: url("/shodaifu2024/wp-content/themes/shodaifu/assets/images/top_sp_course04_ls_before.png");
	}
	.top_couse_group .unit .top_course05 h4::before {
		content: url("/shodaifu2024/wp-content/themes/shodaifu/assets/images/top_sp_course05_business-accounting_before.png");
	}
	.top_couse_group .unit .top_course06 h4::before {
		content: url("/shodaifu2024/wp-content/themes/shodaifu/assets/images/top_sp_course06_business-comprehensive_before.png");
	}
	

	/* 動画で見る商大附
	----------------------------------------------- */
	.top_movie_flex {
		display: block;
	}
	.top_movie_flex .text_box {
		margin-right: 0;
	}
	.top_movie_flex .text_box p {
		margin-bottom: var(--space80);
	}

}





/* タブレット */
@media screen and (max-width:840px) {

	/* 重要なお知らせ
	----------------------------------------------- */
	.top_importantnews h2 {
		padding-top: 15px;
		padding-bottom: 15px;
	}

	.top_importantnews_item {
		padding-top: 14px;
		padding-bottom: 14px;
	}
	.top_importantnews_item li:not(.top_importantnews_item li:last-child) {
		margin-bottom: 14px;
	}

	.top_importantnews_item dt {
		margin-right: 15px;
	}


	/* 共通
	----------------------------------------------- */
	/* タイトル */

	.top_title h2 {
		font-size: 3.2rem;
		margin-bottom: 10px;
	}
	.top_title p {
		font-size: 1.6rem;
	}

	/* 影背景 */
	.box-shadow {
		padding: 40px 20px;
	}

	/* ボタン */
	/* 枠線 */
	.border_btn a {
		max-width: 280px;
		height: 50px;
		font-size: var(--fz16);
	}
	.border_btn a::after {
		line-height: 50px;
	}


	/* バナー
	----------------------------------------------- */
	.top_banner {
		flex-wrap: wrap;
	}

	.top_banner a:nth-child(odd) {
		margin-right: 40px!important;
	}
	.top_banner a:nth-child(even) {
		margin-right: 0!important;
	}
	.top_banner a:nth-child(n+3) {
		margin-top: 30px;
	}

	.top_banner a {
		width: calc(50% - 20px);
	}
	.top_banner a img {
		width: 100%;
		max-width: none;
	}


	/* News
	----------------------------------------------- */
	/* 方眼紙　背景 */
	.top_graph-paper_bg {
		background-size: 200% auto;
		padding-top: 60px;
		padding-bottom:60px;
	}

	.top_news_title {
		font-size: 4.8rem;
	}

	.top_news_item {
		margin-bottom: 14px;
	}
	.top_news_item li {
		display: block;
		margin-bottom: 14px;
	}

	/* カテゴリーのタグ */
	.top_news_item p.NewsT {
		display: inline-block;
		margin-right: 0;
		margin-bottom: 14px;
	}


	/* 学校の様子 Topics
	----------------------------------------------- */
	#sort {
		margin-bottom: 20px;
	}

	#sort li:not(:last-child) {
		margin-right: 15px;
	}

	/* 未選択のタブ */
	#sort li {
		width: 165px;
		height: 35px;
		line-height: 35px;
	}

	.top_topics_law {
		padding-left: 15px; /* 合計で30になるようにする */
		padding-right: 30px;
	}

	.TopicsBox {
		margin-bottom: 14px;
		margin: 0 0 14px 15px; /* 左の余白分top_topics_lawの左余白を削る */
		width: calc(33.3333% - 15px);
	}
	.TopicsTag {
		width: 120px;
		height: 24px;
		line-height: 24px;
		margin-top: 15px;
	}


	/* 学科?コース Course
	----------------------------------------------- */
	/* 背景 */
	.gray70_bg {
		background-size:130px 130px, 130px 130px, cover;
	}
	.top_couse_title h3 {
		font-size: 2.4rem;
	}

	.top_couse_group .unit:nth-child(even) { /* 偶数 */
		margin-top: 58px;/* 50+8px(影の分) */
	}

	/* ------------ 枠部分 ------------ */
	.top_couse_group .unit > div {
		padding: 30px 20px;
	}
	.top_couse_group .unit h4 {
		font-size: 2rem;
	}

	picture.top_5point img {
		max-width: 648px;
	}


	/* 動画で見る商大附
	----------------------------------------------- */
	/* 白枠 */
	.top_white_box {
		padding: 40px;
	}


	/* 商大附をもっと知る　バナー
	----------------------------------------------- */
	.about_banner {
		flex-wrap: wrap;
	}
	.about_banner a {
		width: calc(50% - 40px);
        max-width: none;
    }
	.about_banner img {
		max-width: none;
	}
	


	/* サブバナー
	----------------------------------------------- */
	.subbanner {
		flex-wrap: wrap;
		justify-content: center;

	}
	.subbanner p {
		max-width: 280px;
	}
	.subbanner p:nth-child(odd) {
		margin-right: 60px;
	}
	.subbanner p:nth-child(even) {
		margin-right: 0;
	}
	.subbanner p:nth-child(-n+2) {
		margin-bottom: 40px;
	}
	.subbanner a {
		height: 70px;
	}

	.subbanner p {
		width: calc(50% - 60px);
	}



}



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

	/* 学科?コース Course
	----------------------------------------------- */
	.top_couse_group {
		display: block;
	}

	.top_couse_group .unit {
		width: 100%;
		max-width: 560px;
		padding-right: 0;
		margin: auto;
	}

	/* ------------ 枠部分 ------------ */
	.top_couse_group .unit > div {
		/* 位置 */
		position: static;
		top: 0;
		left: 0;   
		margin-left: 0;
	}

}



/* スマホ */
@media screen and (max-width:480px) {

	/* 重要なお知らせ
	----------------------------------------------- */
	.top_importantnews_item li:not(.top_importantnews_item li:last-child) {
		margin-bottom: 6px;
	}
	.top_importantnews_item dl {
		display: block;
	}


	/* --- 共通 --- */

	/* タイトル */
	.top_title h2 {
		font-size: 2.4rem;
	}

	/* --- 共通　ここまで --- */


	/* バナー
	----------------------------------------------- */
	.top_banner {
		display: block;
		text-align: center;
	}

	.top_banner a:nth-child(odd) {
		margin-right: 0!important;
	}
	.top_banner a:nth-child(n+2) {
		margin-top: 30px;
	}

	.top_banner a {
		display: inline-block;
		width: 100%;
	}
	.top_banner a img {
		max-width: 400px;
	}


	/* News
	----------------------------------------------- */
	/* 方眼紙　背景 */
	.top_graph-paper_bg {
		background-size: 350% auto;
		padding-top: 40px;
		padding-bottom:40px;
	}

	.top_news_title {
		font-size: 4.2rem;
	}

	/* 学校の様子 Topics
	----------------------------------------------- */
	#sort {
		flex-wrap: wrap;
	}
	#sort li {
		width: calc(50% - 15px);
	}
	#sort li:nth-child(odd) {
		margin-right: 15px;
	}
	#sort li:nth-child(even) {
		margin-right: 0;
	}
	#sort li:nth-child(-n+2) {
		margin-bottom: 15px;
	}

	.top_topics_law {
		padding-left: 0; /* 合計で15になるようにする */
		padding-right: 15px;
	}

	.TopicsBoxC {
		margin-bottom: 26px; /* TopicsBoxのmb14を引いて合計40にする */
	}
	.TopicsBox {
		width: calc(50% - 15px);
	}


	/* 学科?コース Course
	----------------------------------------------- */
	/* 背景 */
	.gray70_bg {
		background-size:100px 100px, 100px 100px, cover;
	}

	.top_couse_title h3 {
		font-size: 2rem;
	}

	.top_couse_group .unit:nth-child(even) { /* 偶数 */
		margin-top: 48px;/* 40+8px(影の分) */
	}

	/* ------------ 枠部分 ------------ */
	.top_couse_group .unit > div {
		padding: 20px;
	}

	
	/* 動画で見る商大附
	----------------------------------------------- */

	/* top: -88px;した分 */
	.position_pt280 {
		padding-top: 18.333333333333332vw;
	}

	.top_partition_movie {
		top: -18.333333333333332vw;
	}

	/* 白枠 */
	.top_white_box {
		padding: 40px 20px;
	}
	

	/* サブバナー
	----------------------------------------------- */
	.subbanner {
		display: block;
		text-align: center;
	}
	.subbanner p {
		width: 100%;
		max-width: 345px;
		display: inline-block;
		
	}
	.subbanner a {
		max-width: 345px;
	}
	.subbanner p:nth-child(n-3) {
		margin-bottom: 20px;
	}
    .subbanner p:nth-child(odd) {
        margin-right:0;
    }


	/* 商大附をもっと知る　バナー
	----------------------------------------------- */
	.about_banner a {
		width:50%;
	}

}