@charset "utf-8";
/* CSS Document */

/*==============================*/
/* mainVisual */
/*==============================*/
div.mainVisual{
	position: relative;
	background: url("/common/img/slide/main_visual_pc.jpg");
	background-position: right;
	background-size: cover;
	height: 30vh;
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.mainVisual{ height: 240px;}
	}
	/* ======= SP =======*/
	@media (max-width: 767px){
		div.mainVisual{
			height: 176px;
			background: url("/common/img/slide/main_visual_sp.jpg");
			background-position: top;
			background-size: cover;
		}
	}

/*==============================*/
/* Pickup */
/*==============================*/
div.pickup{
	padding-top: 40px;
	padding-bottom: 40px;
	background: #F5F5F5;
}

/*-- タイトル
------------------------- */
div.pickup h2{
	margin-bottom: 16px;
	font-size: 22px;
	font-family: "Noto Sans Japanese"; letter-spacing: -0.02em;
	line-height: 1.3em;
}
div.pickup h2 img{
	position: relative; top: -3px;
	margin-right: 10px;
}
	/* ======= SP =======*/
	@media (max-width: 767px){
		div.pickup h2{
			margin-bottom: 10px;
			font-size: 20px;
		}
		div.pickup h2 img{ margin-right: 8px;}
	}

/*-- 
------------------------- */
div.pickup div.pickupContent{
	display: flex; display: -webkit-flex;
	justify-content: space-between; -webkit-justify-content: space-between;
	position: relative;
}
div.pickup div.pickupContent > div{
	position: relative;
	display: flex; display: -webkit-flex;
	align-items: center; -webkit-align-items: center;
	justify-content: space-between; -webkit-justify-content: space-between;
	width: calc(50% - 16px);
	padding: 16px 24px 16px 16px;
	background: #fff;
	border-radius: 8px;
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.pickup div.pickupContent > div{
			flex-direction: column; -webkit-flex-direction: column;
			width: calc(50% - 32px);
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px){
		div.pickup div.pickupContent{ flex-direction: column; -webkit-flex-direction: column; }
		div.pickup div.pickupContent::before{ display: none;}
		div.pickup div.pickupContent > div{ width: 100%; min-height: 64px;}
        div.pickup div.pickupContent > div:not(:last-child){ margin-bottom: 8px;}
	}


/*-- 画像
------------------------- */
div.pickup div.pickupContent > div p{ width: 208px;}
div.pickup div.pickupContent > div p img{
    object-fit: cover;
    width: 100%;
    height: 144px;
    border-radius: 8px;
}


	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.pickup div.pickupContent > div p{
			width: 100%;
			margin-bottom: 16px;
		}
		div.pickup div.pickupContent > div p img{
			height: 160px;
			border-radius: 5px;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px){
		div.pickup div.pickupContent > div p{ width: 80px;}
		div.pickup div.pickupContent > div p img{
            border-radius: 5px;
            height: 64px;
        }
	}

/*-- コンテンツ
------------------------- */
div.pickup div.pickupContent > div dl{ width: calc(100% - 208px - 24px);}
div.pickup div.pickupContent > div dl dt{
	margin-bottom: 12px;
	font-size: 19px;
	line-height: 1.3em;
	font-family: "Noto Sans Japanese"; letter-spacing: -0.02em;
}
div.pickup div.pickupContent > div dl dd:nth-child(2){
	margin-bottom: 16px;
	font-size: 14px;
	line-height: 1.5em;
     display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden; 
}
div.pickup div.pickupContent > div dl dd:last-child{ color: #848484;}
div.pickup div.pickupContent > div dl dd:last-child span{
	position: relative;
	display: inline-block;
	line-height: 1.3em;
	margin-left: 20px;
	font-size: 14px;
}
div.pickup div.pickupContent > div dl dd:last-child span::before{
	position: absolute; top: -1px; left: -10px;
	content: "";
	width: 1px;
	height: 100%;
	background: #ccc;
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.pickup div.pickupContent > div dl{ width: 100%;}
	}
	/* ======= SP =======*/
	@media (max-width: 767px){
		div.pickup div.pickupContent > div dl{ width: calc(100% - 80px - 16px); padding-top: 8px;	}
		div.pickup div.pickupContent > div dl:not(:last-child){ margin-bottom: 8px;}
		div.pickup div.pickupContent > div dl dt{
			margin-bottom: 8px;
			font-size: 16px;
		}
		div.pickup div.pickupContent > div dl dd:nth-child(2){ display: none;}
		div.pickup div.pickupContent > div dl dd:last-child{ color: #848484;}
		div.pickup div.pickupContent > div dl dd:last-child span{
			margin-left: 12px;
			font-size: 11px;
		}
		div.pickup div.pickupContent > div dl dd:last-child span::before{ position: absolute; top: -1px; left: -8px;}
	
	}


/*-- リンク
------------------------- */
div.pickup div.pickupContent > div a{
	position: absolute; top: 0; right: 0;
	content: "";
	width: 100%;
	height: 100%;
}


/*==============================*/
/* Work */
/*==============================*/
/*-- タイトル
------------------------- */
h2.topWork_title{
	margin-bottom: 20px;
	font-size: 22px;
	font-family: "Noto Sans Japanese"; letter-spacing: -0.02em;
	line-height: 1.3em;
}
h2.topWork_title img{
	position: relative; top: -3px;
	margin-right: 12px;
}


div.topWork{
	display: flex; display: -webkit-flex;
	align-items: flex-start; -webkit-align-items: flex-start;
	justify-content: space-between; -webkit-justify-content: space-between;
}
div.topWork div:first-child{
	position: relative;
	width: calc(52% - 20px);
	padding-bottom: 40px;
}
div.topWork div:last-child{
	display: flex; display: -webkit-flex;
	flex-wrap: wrap; -webkit-flex-wrap: wrap;
	justify-content: space-between; -webkit-justify-content: space-between;
	width: calc(48% - 20px);
	margin-bottom: -32px;
}

/*-- 共通設定
------------------------- */
div.topWork dl{
	display: flex; display: -webkit-flex;
	flex-direction: column-reverse; -webkit-flex-direction: column-reverse;
}
div.topWork dl dt a{
	font-size: 16px;
	line-height: 1.3em;
	font-family: "Noto Sans Japanese"; letter-spacing: -0.02em;
}
div.topWork dl dt a br{ line-height: inherit;}
div.topWork dl dd{ margin-bottom: 16px;}
div.topWork dl dd img{ border-radius: 8px;}


/*-- 個別設定：メイン
------------------------- */
div.topWork div:first-child dl dt a{ font-size: 20px;}
div.topWork div:first-child dl dd{ margin-bottom: 24px;}
div.topWork div:first-child > a{
	position: absolute; bottom: 0; right: 0;
	display: block;
	margin-right: 32px;
}
div.topWork div:first-child > a::before{
	position: absolute; top: 0px; right: -32px;
	content: "";
	width: 24px;
	height: 24px;
	background: url("/common/img/share/icon_link.png");
	background-size: cover;
}

/*-- 個別設定：サブ
------------------------- */
div.topWork div:last-child dl{
	width: calc(50% - 12px);
	margin-bottom: 32px;
}
div.topWork div:last-child dl dt a{
	position: relative;
	display: block;
}
div.topWork div:last-child dl dt a::before{
	position: absolute; top: 0px; right: 6px;
	content: "";
	width: 24px;
	height: 24px;
	background: url("/common/img/share/icon_link.png");
	background-size: cover;
}


/*==============================*/
/* カラム */
/*==============================*/
div.topColumn{
	display: flex; display: -webkit-flex;
	justify-content: space-between; -webkit-justify-content: space-between;
}

	/* ======= PC以下 =======*/
	@media (max-width: 1024px) {
		div.topColumn{ flex-direction: column; -webkit-flex-direction: column;}
	}


/*-- メインコンテンツ
------------------------- */
div.topColumn div.mainContent{
	width: calc(100% - 311px - 56px);
	padding: 64px 64px 36px 0;
	background: #fff;
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.topColumn div.mainContent{
			width:100%;
			margin-bottom: 32px;
			padding: 48px 48px 24px 48px;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px){
		div.topColumn div.mainContent{
			width:100%;
			margin-bottom: 32px;
			padding: 32px 28px 16px 28px;
		}
	}

/*-- サイドコンテンツ
------------------------- */
div.topColumn div.sideContent{ width: 311px; }
div.topColumn div.sideContent > div:not(:last-child){ margin-bottom: 40px;}
div.topColumn div.sideContent h2{
	font-size: 18px;
	letter-spacing: -0.12em;
	padding-left: 40px;
}
div.topColumn div.sideContent ul{
	padding: 16px 24px 20px 24px;
	background: #fff;
}
div.topColumn div.sideContent ul li:not(:last-child){ border-bottom: 1px solid #ccc;}
div.topColumn div.sideContent ul li a{
	display: block;
	padding: 8px 0;
}
div.topColumn div.sideContent ul li:first-child a{ padding-top: 0;}
div.topColumn div.sideContent ul li:last-child a{ padding-bottom: 0;}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.topColumn div.sideContent{
			display: flex; display: -webkit-flex;
            flex-wrap: wrap; -webkit-flex-wrap: wrap;
			justify-content: space-between; -webkit-justify-content: space-between;
			width: 100%;
		}
		div.topColumn div.sideContent > div{ width: calc(50% - 16px);}
	}
	/* ======= SP =======*/
	@media (max-width: 767px){
		div.topColumn div.sideContent{
			width: 100%;
		}
	}


/*==============================*/
/* プレゼンテーション */
/*==============================*/
section.presentationWrap{
	position: relative;
	padding-top: 120px;
	padding-bottom: 80px;
	background: #F5F5F5;
	min-height: 800px;
}
section.presentationWrap::before{
	position: absolute; top: 170px; left: -0px;
	content: "";
	width: calc( 50% - 600px);
	height: calc(100% - 226px);
	background: #fff;
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		section.presentationWrap::before{ display: none;}
	}
    /* ======= SP =======*/
    @media (max-width: 767px){
        section.presentationWrap{
            padding-top: 72px;
            padding-bottom: 72px;
        }
    }

/*-- タイトル
------------------------- */
section.presentationWrap h2{
	position: relative;
	margin-bottom: 24px;
	padding-left: 64px;
	font-size: 20px;
	font-family: "Noto Sans Japanese"; letter-spacing: -0.03em;
	line-height: 1.3em;
}
section.presentationWrap h2 img{ position: absolute; top: 0px; left: 0;}
section.presentationWrap .sideContent div:nth-child(2) h2 img{ position: absolute; top: 0; left: 0;}/* 実際に体験する */

/* ======= SP =======*/
@media (max-width: 767px){
    section.presentationWrap h2{

        font-size: 18px;
    }
}

/*-- コンテンツ
------------------------- */
div.presentation{
	display: flex; display: -webkit-flex;
	flex-wrap: wrap; -webkit-flex-wrap: wrap;
	justify-content: space-between; -webkit-justify-content: space-between;
}
div.presentation > div{
	position: relative;
	width: calc(50% - 22px);
	margin-bottom: 44px;
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.presentation > div{
			width: calc(50% - 16px);
			margin-bottom: 40px;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px){
		div.presentation{ flex-direction: column; -webkit-flex-direction: column;}
		div.presentation > div{
			width: 100%;
			margin-bottom: 24px;
		}
	}


/* 日付 */
div.presentation p.presentaionDate{
	margin-bottom: 4px;
	color: #7D7D7D;
}

/* 画像 */
div.presentation p.presentaionTmb{ margin-bottom: 16px;}
div.presentation p.presentaionTmb img{
    object-fit: cover;
    width: 100%;
    height: 184px;
    border-radius: 8px;
}

div.presentation div.new p.presentaionTmb{ position: relative; }
div.presentation div.new p.presentaionTmb::before{
	position: absolute; top: -2px; left: 20px;
	content: "NEW";
	width: 48px;
	height: 40px;
	padding-top: 8px;
	background: #F8B62D;
	text-align: center;
	font-weight: 500;
	font-family: 'Roboto', sans-serif; letter-spacing: 0.03em; 
	color: #fff;
}
div.presentation div.new p.presentaionTmb::after{
	position: absolute;  top: 38px; left: 20px;
	content: '';
	width: 0;
	height: 0;
	border-left: 24px solid #F8B62D;
	border-right: 24px solid #F8B62D;
	border-bottom: 8px solid transparent;
}

/* コンテンツ */
div.presentation dl dt{
	margin-bottom: 12px;
	font-size: 18px;
	line-height: 1.3em;
	font-family: "Noto Sans Japanese"; letter-spacing: -0.02em;
}
div.presentation dl dd{
    line-height: 1.618em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}

/* リンク */
div.presentation a{
	position: absolute; top: 0; right: 0;
	content: "";
	width: 100%;
	height: 100%;
}


    /* ======= TB =======*/
    @media screen and (min-width: 768px) and (max-width: 1024px) {
        /* 画像 */
        div.presentation p.presentaionTmb img{ height: 152px;}
    }

    /* ======= SP =======*/
    @media (max-width: 767px){
        /* 画像 */
        div.presentation p.presentaionTmb img{ height: 120px; border-radius: 5px;}
        
        /* コンテンツ */
        div.presentation dl dt{
            margin-bottom: 12px;
            font-size: 17px;
        }
        div.presentation dl dd{
            font-size: 13px;
            line-height: 1.618em;
        }
    }


/*==============================*/
/* Tab */
/*==============================*/
ul.tab li.active a,
ul.tab li a:hover{
	position: relative;
	color: #fff;
	background: #F8B62D;
}
#all{ display:none;}
#lecture{ display:none; }
#performance{ display:none; }
#news{ display:none; }

	/* ======= SP以上 =======*/
	@media (min-width: 768px){
		ul.tab {
			display: flex; display: -webkit-flex; /* Safari */
			justify-content: space-between; -webkit-justify-content: space-between;
			border-top: 1px solid #ccc;
			border-bottom: 1px solid #ccc;
		}
		ul.tab li{ width: 25%;}
		ul.tab li:first-child a{ border-left: 1px solid #ccc ;}
		ul.tab li a{
			display: block;
			padding: 4px 0 5px 0;
			text-align: center;
			border-right: 1px solid #ccc ;
			font-size: 15px;
			font-family: "Noto Sans Japanese"; letter-spacing: -0.02em;
			color: #ccc;
		}

	}

	/* ======= SP =======*/
	@media (max-width: 767px){
		ul.tab {
			display: flex; display: -webkit-flex; /* Safari */
			justify-content: space-between; -webkit-justify-content: space-between;
			flex-wrap: wrap; -webkit-flex-wrap: wrap;
			margin-bottom: 24px;
			border-top: 1px solid #ccc;
			border-left: 1px solid #ccc;
		}
		ul.tab li{ width: 50%;}
		ul.tab li:first-child a{ border-left: 1px solid #ccc ;}
		ul.tab li a{
			display: block;
			padding: 8px 0;
			text-align: center;
			border-right: 1px solid #ccc;
			border-bottom: 1px solid #ccc;
			font-size: 15px;
			font-family: "Noto Sans Japanese"; letter-spacing: -0.02em;
			color: #ccc;
		}
	}

/*==============================*/
/* News */
/*==============================*/
section.informationWrap{
	padding-top: 64px;
	padding-bottom: 64px;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px){
		section.informationWrap{
			padding-top: 40px;
			padding-bottom: 48px;
		}
	}


/*-- タイトル
------------------------- */
div.informationTitle{
	display: flex; display: -webkit-flex;
	align-items: center; -webkit-align-items: center;
	justify-content: space-between; -webkit-justify-content: space-between;
}

div.informationTitle h2{
	margin-bottom: 20px;
	font-size: 22px;
	font-family: "Noto Sans Japanese"; letter-spacing: -0.02em;
	line-height: 1.3em;
}
div.informationTitle h2 img{
	position: relative; top: -3px;
	margin-right: 12px;
}

div.informationTitle p{
	position: relative; top: -6px;
	margin-right: 32px;
}
div.informationTitle p::before{
	position: absolute; top: 2px; right: -32px;
	content: "";
	width: 24px;
	height: 24px;
	background: url("/common/img/share/icon_link.png");
	background-size: cover;
}

div.information article{
	display: flex; display: -webkit-flex;
	justify-content: space-between; -webkit-justify-content: space-between;
	padding: 24px 0;
	border-bottom: 1px solid #ccc;
}
	/* ======= SP =======*/
	@media (max-width: 767px){
		div.information article{ padding: 24px 0 20px 0;}
		div.information article:first-child{ border-top: 1px solid #ccc;}
	}

/*-- 画像
------------------------- */
div.information article > p{
	width: 176px;
	margin-right: 24px;
}
div.information article > p img{
	width: 100%;
	height: 120px;
	object-fit: cover;
	border-radius: 6px;
}
	/* ======= SP =======*/
	@media (max-width: 767px){
		div.information article >p{ display: none;}
	}

/*-- コンテンツ
------------------------- */
div.information article dl{
	position: relative; top: -12px;
	display: flex; display: -webkit-flex;
	flex-direction: column-reverse; -webkit-flex-direction: column-reverse;
	flex: 1;
}
div.information article dl dt p.date{ color: #929292;}
div.information article dl dt p.date span{
	position: relative;
	margin-left: 20px;
	font-size: 13px;
}
div.information article dl dt p.date span::before{
	position: absolute; top: 1px; left: -10px;
	content: "";
	width: 1px;
	height: 16px;
	background: #ccc;
}
div.information article dl dd{
	padding-right: 160px;
	margin-bottom: 12px;
	line-height: 1.618em;
	width: 100%;
	font-size: 15px;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.information article dl dd{
			padding-right: 120px;
			font-size: 14px;
		}
	}
	/* ======= SP以上 =======*/
	@media (min-width: 768px){
		div.information article dl dt p.informationLink{
			position: absolute; top: 50%; right: 32px;
		}
		div.information article dl dt p.informationLink::before{
			position: absolute; top: 2px; right: -32px;
			content: "";
			width: 24px;
			height: 24px;
			background: url("/common/img/share/icon_link.png");
			background-size: cover;
		}
	}

	/* ======= SP =======*/
	@media (max-width: 767px){
		div.information article dl{ width: 100%;}
		div.information article dl dt{
			display: flex; display: -webkit-flex;
			justify-content: space-between; -webkit-justify-content: space-between;
		}
		div.information article dl dt p.informationLink{
			position: relative; top: -3px;
			margin-right: 28px;
		}
		div.information article dl dt p.informationLink::before{
			position: absolute; top: 2px; right: -28px;
			content: "";
			width: 20px;
			height: 20px;
			background: url("/common/img/share/icon_link.png");
			background-size: cover;
		}
		div.information article dl dt p.informationLink a{ font-size: 12px;}
		
		div.information article dl dd{
			padding-right: 0px;
			margin-bottom: 12px;
			line-height: 1.5em;
			width: 100%;
		}

	}