@charset"utf-8";
/*
Web Site ver.1  --  Section CSS
Author : Hideyuki Koyama -MONTAGE lab.(https://www.montagelab.jp)
Latest Updated : 18 Apr., 2024
*/

/**
 * Table of Contents
 *
 * 1.0 - Reset
 * 2.0 - 
 * 3.0 - 
 * 4.0 - 
 * 5.0 - 
 * 6.0 - 
 * 7.0 - 
 *
 */


/* **************************************************************************** */
/*
/* 
/*
/* **************************************************************************** */

.home-billboard	{ position:relative; z-index:3;}
.home-billboard:after {
	position:absolute; top:0; left:0; bottom:0; right:0; content:'';
	background: linear-gradient( 0deg, rgba(0,0,0, 0), rgba(0,0,0, 0) );
}
.home-billboard figure img	{ aspect-ratio:3 / 2; object-fit:cover;}


.home-section    { padding:6rem 8%;}
.home-section .section-header { position:relative; margin:0 auto; text-align:left; max-width:1280px;}
.home-section .section-title  { margin:0; padding:0 0 3rem;}
.home-section .section-title span  { display:inline-block; vertical-align:top;}
.home-section .section-title .en  {
	position:absolute; top:0; left:0; z-index:1;
	font-size:6.0rem; font-weight:700; line-height:1; color:rgba(143,33,77,.15); font-family:"Roboto", sans-serif;
}
.home-section .section-title .jp  {
	position:relative; top:0; left:0; z-index:2; padding:3rem 0 0 4rem; 
	writing-mode: vertical-rl; text-align:left; line-height:1.6; color:#000;
	font-size:2.8rem; font-weight:500; font-family: "Noto Serif JP", serif;
	text-shadow:6px 4px 3px rgba(0,0,0,.08);
}

article .banner	{}
article .banner ul	{ margin:0 auto; padding:0; max-width:720px;}
article .banner li	{ margin:0 0 16px; padding:0;}
article .banner li:last-child	{ margin-bottom:0;}
article .banner li:before	{ background:none; border:0;}
article .banner li a	{ display:block;}
article .banner li.text-banner a	{ display:block; text-decoration:none; background-color:#93214D;}
article .banner li.text-banner a span	{ display:block; padding:3rem 5%; text-align:center; font-size: 1.6rem; letter-spacing:0.1em; color:#fff; }
article .banner li.text-banner a:hover	{ background-color:#d22063;}
article .banner li.image-banner a	{ background-color:transparent;}
article .banner li.image-banner a img	{ transition:opacity 0.2s ease;}
article .banner li.image-banner a:hover img	{ opacity:0.7;}

section.banner	{ padding:3.2rem 8%;}


/**
 * Home - 採用情報
**/
.home-recruit .section-content	{ margin:0 auto 6rem; max-width:724px; text-align:left;}



/**
 * Home - 南京都学園グループ
**/
.home-group    { background-color:#7A0032;}
.home-group .section-title .en  { color:rgba(255,255,255,.15);}
.home-group .section-title .jp  { color:#fff; text-shadow:6px 4px 3px rgba(0,0,0,.08);}
.home-group .section-content    { margin:0 auto 6rem; max-width:724px; text-align:left; color:#fff;}
.home-group .section-content ul li	{ margin:0 auto 24px; padding:0;}
.home-group .section-content ul li:before	{ background:none; border:0;}



/**
 * Home - 学園の歩み
**/
.home-history    { position:relative; background-color:#EEEBE3;}
.home-history .header-image	{ margin:0 auto; max-width:1600px;}
.home-history .header-image img	{}
.home-history .section-title .en	{ color:rgba(94,52,22,.15);}
.home-history .section-content	{ margin:0 auto 6rem; max-width:724px; text-align:left;}
.home-history .lead	{ margin:0 0 1.6em; font-size:1.6rem; font-weight:700; line-height:1.8;}



/* **************************************************************************** */
/*
/* PAGE
/*
/* **************************************************************************** */

.page-section    { padding:6rem 8%;}
.page-section .section-header { position:relative; margin:0 auto; text-align:left; max-width:1280px;}
.page-section .section-title  { margin:0; padding:0 0 3rem;}
.page-section .section-title span  { display:inline-block; vertical-align:top;}
.page-section .section-title .en  {
	position:absolute; top:0; left:0; z-index:1;
	font-size:6.0rem; font-weight:700; line-height:1; color:rgba(143,33,77,.15); font-family:"Roboto", sans-serif;
}
.page-section .section-title .jp  {
	position:relative; top:0; left:0; z-index:2; padding:2rem 0 0 2rem; 
	writing-mode: vertical-rl; text-align:left; line-height:1.6; color:#000;
	font-size:2.8rem; font-weight:500; font-family: "Noto Serif JP", serif;
	text-shadow:6px 4px 3px rgba(0,0,0,.08);
}
.page-section .section-content	{ margin:0 auto; max-width:1280px; text-align:left;}


/* >= 736px                             */
@media screen and (min-width: 736px) {

	.page-section   { padding:6rem 10% 8rem;}
	.page-section .section-title .en  { font-size:10.0rem;}
	.page-section .section-title .jp  { padding:4rem 0 0 4rem; font-size:2.8rem; }

}

/* >= 1024px                             */
@media screen and (min-width: 1024px) {

	.page-section   { padding:6rem 5% 8rem;}
	.page-section .section-title .en  { position:relative;}
	.page-section .section-title .jp  { position:absolute; left:0; white-space:nowrap; letter-spacing:0.1em;}
	.page-section .section-content	{ padding:0 5% 0 20%;}

}

/* >= 1280px                            */
@media screen and (min-width: 1280px) {

	.page-section   { padding:6rem 5% 8rem;}
	.page-section .section-title .en  { font-size:12.8rem;}
	.page-section .section-title .jp  { padding:6rem 0 0 6rem; font-size:4.0rem; text-shadow:8px 6px 4px rgba(0,0,0,.08);}
	.page-section .section-content	{ padding:0 5% 0 25%;}

}

/* >= 1600px                            */
@media screen and (min-width: 1600px) {

	.page-section .section-content	{ padding:0 0 0 20%;}

}



/**
 * 建学の精神
**/
.philosophy	{}
.philosophy h3	{ 
	padding:0 0 0.2em;
	font-weight:500; font-family: "Times New Roman", "游明朝", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	border-bottom:1px solid #000;
}
.philosophy p	{}
.philosophy p.lead	{}
.philosophy p.seitei	{ position:relative; padding-left:48px; color:rgba(0,0,0,.5);}
.philosophy p.seitei:before	{ position:absolute; top:50%; left:0; content:''; width:42px; height:0; border-top:1px solid rgba(0,0,0,.5);}


/**
 * 学園の沿革
**/
.history    { position:relative; background-color:#EEEBE3;}
.history .section-title .en	{ color:rgba(94,52,22,.15);}
.history ul.history-list	{}
.history ul.history-list	{ border-left:1px solid #93214D;}
.history ul.history-list li	{ margin:0; padding:24px 0 24px 24px;}
.history ul.history-list li:before	{ top:30px; left:-5px; width:9px; height:9px; background-color:#93214D; border-radius:50px;}
.history ul.history-list p		{ margin-bottom:0;}
.history ul.history-list h4.year	{ font-weight:1.4rem;}
.history ul.history-list h4.year:before	{ position:absolute; top:34px; left:-5px; content:''; width:24px; height:0; border-top:1px solid #93214D;}
.history ul.history-list h4.year .gengou	{ font-size:1.3rem; font-weight:400;}
.history ul.history-list figure	{ max-width:420px;}
.history ul.history-list figcaption	{ padding:8px 0; font-size:1.3rem; color:#93214D;}



/** 
 * 学園章
**/
.emblem	{ background-color:#7A0032; color:#fff;}
.emblem .section-title .en  { color:rgba(255,255,255,.15);}
.emblem .section-title .jp  { color:#fff; text-shadow:6px 4px 3px rgba(0,0,0,.08);}
.emblem figure	{ margin:0 0 4rem; text-align:center;}
.emblem figcaption	{ display:inline-block; margin:-8px auto 0; padding:8px 2em; text-align:center; color:#fff; background-color:#93214D; border-radius:8px;}

.emblem .schools	{ padding:4rem 0;}
.emblem .schools figure	{ margin:0 0 8px;}



/** 
 * 情報公開
**/
.download	{ background-color:#f8f8f8;}
.download-list	{ border-top:1px solid rgba(0,0,0,.2);}
.download-list li	{ margin:0; padding:0; border-bottom:1px solid rgba(0,0,0,.2);}
.download-list li:before	{ background:none; border:0;}
.download-list a	{ position:relative; display:block; padding:1em 40px 1em 0; text-decoration:none;}
.download-list a:before	{ position:absolute; top:calc(50% - 10px); right:8px; content:'';
	width:20px; height:20px; background:url(../img/section/icon-download.svg) no-repeat center / auto 20px;
}



/**
 * 採用情報
**/
.recruit   {}
.recruit-content	{ 
	margin:0; padding:0;
	display:flex; flex-flow:row wrap; justify-content:space-between; align-items:stretch;
}
.recruit-content article	{ margin:0 0 4rem; padding:0; width:100%; border:2px solid #ccc; border-radius:10px;}
.recruit-content article.kogakkan	{ border-color:#004098;}
.recruit-content article.fukushi		{ border-color:#005BAB;}
.recruit-content article.dobutsu		{ border-color:#8F003F;}
.recruit-content article.gakuen		{ border-color:#90214C;}
.recruit-content .content	{ margin:4px; padding:4px 16px;}
.recruit-content h4  { margin:0; padding:1.6rem 4px 1.4rem; font-size:1.4rem; font-weight:400; border-bottom:1px dashed #979797;}
.recruit-content h4 img	{ width:100%; max-width:320px;}
.recruit-content p	{ margin:0;}
.recruit-content ul	{ margin:0; padding:0;}
.recruit-content li	{ margin:0; padding:12px 0; border-bottom:0 solid rgba(0,0,0,.2);}
.recruit-content li:before	{ background:none;}
.recruit li a  { color:#000; text-decoration:none;} 
.recruit li a:hover  { color:#93214D;}
.recruit-content .buttons	{
	padding:0.5rem 0;
	display:flex; flex-flow:row wrap; justify-content:space-between; align-items:stretch;
}
.recruit-content .buttons a	{ 
	padding:0.8em 0.5em; width:48%; 
	text-align:center; font-size:1.3rem; text-decoration:none; color:#fff;
	background-color:#93214D; border-radius:8px;
	
}
.recruit-content .buttons a:hover	{ color:#fff; background-color:#d22063;}
.recruit-content article.kogakkan .buttons a	{ background-color:#004098;}
.recruit-content article.kogakkan .buttons a:hover	{ background-color:#006afd;}
.recruit-content article.fukushi .buttons a		{ background-color:#005BAB;}
.recruit-content article.fukushi .buttons a:hover	{ background-color:#2f98f5;}
.recruit-content article.dobutsu .buttons a		{ background-color:#8F003F;}
.recruit-content article.dobutsu .buttons a:hover	{ background-color:#e00d6a;}
.recruit-content article.gakuen	 .buttons a		{ background-color:#90214C;}
.recruit-content article.gakuen	 .buttons a:hover	{ background-color:#ef4788;}






/* **************************************************************************** */
/*
/* Media Queries
/*
/* **************************************************************************** */

@-ms-viewport 	{ width: device-width;}
@viewport 		{ width: device-width;}


/* >= 736px                             */
@media screen and (min-width: 736px) {


	/*  */
	.home-section   { padding:6rem 10% 8rem;}
	.home-section .section-title .en  { font-size:10.0rem;}
	.home-section .section-title .jp  { padding:4rem 0 0 4rem; font-size:2.8rem; }

	/*  */
	.home-group    { padding:8rem 10%;}


	.emblem-lead	{ display:flex; flex-flow:row wrap; justify-content:space-between; align-items:center;}
	.emblem-lead figure	{ width:40%;} 
	.emblem-lead p	{ width:50%; font-size:1.6rem;} 
	.emblem .schools	{ display:flex; flex-flow:row wrap; justify-content:space-between; align-items:center;}
	.emblem .schools figure	{ width:30%;}
	
	.recruit-content article	{ width:47%;}

}


/* >= 1024px                             */
@media screen and (min-width: 1024px) {

	.home-billboard	{}

	/*  */
	.home-section   { padding:6rem 5% 8rem;}
	.home-section .section-title .en  { position:relative;}
	.home-section .section-title .jp  { position:absolute; left:0; white-space:nowrap; letter-spacing:0.1em;}
	
	article .banner li.text-banner a span	{ padding:4rem 5%; font-size: 1.8rem;}
	section.banner	{ padding:4.2rem 8%;}
	section.banner ul	{ display:flex; flex-flow:row wrap; justify-content:space-between; align-items:flex-start;}
	section.banner li	{ width:100%;}
	section.banner li.w1	{ width:49%;}


	/*  */
	.home-group    { padding:6rem 5%;}
	.home-group figure figcaption { font-size:2.4rem;}

}


/* >= 1280px                            */
@media screen and (min-width: 1280px) {

	.home-billboard	{}


	/*  */
	.home-section   { padding:6rem 5% 8rem;}
	.home-section .section-title .en  { font-size:12.8rem;}
	.home-section .section-title .jp  { padding:6rem 0 0 6rem; font-size:4.0rem; text-shadow:8px 6px 4px rgba(0,0,0,.08);}

	/*  */
	.home-group    { padding:6rem 5%;}
	.home-group figure figcaption { font-size:2.8rem;}
	.home-group p	{ font-size:1.8rem;}

}


/* >= 1600px                            */
@media screen and (min-width: 1600px) {
}


/* >= Print                             */
@media print {
}