@charset "utf-8"; 
 
/* VISUAL  ================================================================================== */
.main_container					{padding:135px 0 0 0; overflow:hidden;}
.mVisual .bxslider				{visibility:hidden;}
.mVisual .mvideo_box			{position: relative;width: 100%; aspect-ratio:16/9; padding:0; margin:0;   }

.mVisual						{position:relative; top:0; left:0; overflow:hidden;  }  
.mVisual .item 					{position:relative; height:480px; overflow:hidden;}
.mVisual .bg 					{overflow:hidden; position:absolute; width:100%; height:100%; top:0; left:0; animation:imgScale 3s both;} 
.mVisual .text					{position:absolute; width:100%; top:20%; transform:translateY(-50%); color:#fff; z-index:100; animation:slide-up 2s cubic-bezier(.5,.2,0,1) forwards;} 
.mVisual .Btit					{font-family:'Paperlogy'; font-size:2em; line-height:1.3; font-weight:300; letter-spacing:0; /*text-shadow:0 0 10px rgba(0,0,0,0.2);*/}
.mVisual .Btit strong			{font-size:43px; display:block; font-weight:800;}
.mVisual .Stit					{font-family:'Paperlogy'; font-size:1.25em; line-height:1.5; margin-top:25px; letter-spacing:.5px; opacity:0.9;}
.mVisual .default				{background:url('../img/main/visual.jpg') no-repeat center 50%; background-size:cover;}
.mVisual .default:after			{content:''; position:absolute; right:0; bottom:0; display:block; width:670px; height:100%; background:url('../img/main/visual_acc.png') no-repeat right bottom;}

/* CONTENTS    ================================================================================== */
.mHeadline						{position:relative; margin-bottom:20px;}
.mHeadline p					{font-family:'Paperlogy'; font-weight:700; color:#111; font-size:1.6em; line-height:1; display:inline-block;}
.mHeadline p strong				{color:var(--color2);}
.mHeadline span					{font-family:'Paperlogy'; color:#555; margin-left:15px; font-size:1.05em; font-weight:500; line-height:1.4;}
.mHeadline span strong			{font-weight:500; font-size:16px; letter-spacing:0;}

.mControl						{position:absolute; top:-5px; right:0;}
.mControl p						{position:relative; display:inline-block; width:38px; height:38px; line-height:30px; text-align:center; border:2px solid #c6c6c6; background:#fff; cursor:pointer; vertical-align:top; border-radius:10px;}
.mControl p.cnt0, .mControl p.cnt1, .mControl p.cnt2	{display:none;}
.mControl .prev:after			{content:''; display:inline-block; margin:0 0 0 3px; border:solid #555; border-width:0 0 3px 3px; padding:3px; transform:rotate(45deg); border-radius:2px;}
.mControl .next:after			{content:''; display:inline-block; margin:0 3px 0 0; border:solid #555; border-width:3px 3px 0 0; padding:3px; transform:rotate(45deg); border-radius:2px;}
.mControl .pause				{line-height:34px;}
.mControl .pause:before			{content:''; display:inline-block; width:3px; height:13px; background:#555; border-radius:2px;}
.mControl .pause:after			{content:''; display:inline-block; width:3px; height:13px; background:#555; border-radius:2px; margin-left:3px;}
.mControl .play					{line-height:34px; text-indent:2px;}
.mControl .play:after			{content:''; display:inline-block; width:0; height:0; border-style:solid; border-width:7px 0 7px 10px; border-color:transparent transparent transparent #555; border-radius:3px;}
.mControl p:hover				{border-color:var(--color1); background:var(--color1);}
.mControl p:hover:after, .mControl p:hover:before	{border-color:#fff;}
.mControl .more					{line-height:34px; font-size:17px;}
.mControl .more:hover			{color:#fff;}
.mControl .more:hover i			{transform: rotate(180deg); transition: all 0.2s; }
.mControl .pause:hover:after, .mControl .pause:hover:before	{background:#fff;}
.mControl .play:hover:after		{border-color:transparent transparent transparent #fff;}

.mRecruit						{padding:40px 0; position:relative;}
.mProitems						{margin:-20px 0; height:250px; overflow:hidden;}
.mProitems dl					{margin:20px 12px; border-radius:20px; box-shadow:0 0 15px 1px rgba(0,0,0,0.07); min-height:250px; overflow:hidden; cursor:pointer;}
.mProitems dl dt				{font-family:'Paperlogy'; font-weight:700; background:#e8f0fe; color:var(--color1); text-align:center; padding:12px 30px; letter-spacing:0; font-size:1.1em; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; white-space:nowrap; }
.mProitems dl dd				{padding:20px 30px 0 30px; font-size:0.95em; color:#888;}
.mProitems .tit					{font-family:'Paperlogy'; font-weight:500; color:#333; font-size:19px; height:52px; line-height:1.4; overflow:hidden; text-overflow:ellipsis;-o-text-overflow:ellipsis; display:-webkit-box;-webkit-line-clamp: 2;-webkit-box-orient:vertical; word-wrap:break-word;}
.mProitems .info				{margin:10px 0 15px 0; line-height:1.45; height:52px; overflow:hidden; text-overflow:ellipsis;-o-text-overflow:ellipsis; display:-webkit-box;-webkit-line-clamp: 2;-webkit-box-orient:vertical; word-wrap:break-word;}
.mProitems .info span:first-child	{position:relative; padding-right:16px;}
.mProitems .info span:first-child:after	{content:''; position:absolute; top:2px; right:5px; bottom:0; width:1px; height:0.8em; margin:auto; background:#ccc;}
.mProitems .info span:last-child	{letter-spacing:-1px;}
.mProitems .status				{font-size:0.9em;}
.mProitems .status span			{display:inline-block; width:65px; border-radius:3px; margin-right:10px; color:var(--color1); border:1px solid var(--color1); text-align:center; font-size:15px; height:25px; line-height:23px;}
.mProitems .finish .status span	{color:#999; border-color:#aaa;}
.mProitems dl:hover				{transform: translateY(-8px); transition:.4s;}
.mProitems dl:hover dt			{background:var(--color1); color:#fff; }
.mProarrow						{position:absolute; top:45%; transform:translateY(-50%); width:100%;}
.mProarrow p					{position:absolute; cursor:pointer; opacity:0.5;} 
.mProarrow p:after				{content:''; display:inline-block; border:solid #aaa; border-width:6px 0 0 6px; padding:10px;}
.mProarrow .prev				{left:-50px;}
.mProarrow .prev:after			{transform:rotate(315deg);}
.mProarrow .next				{right:-50px;}
.mProarrow .next:after			{transform:rotate(135deg);}
.mProarrow p:hover				{opacity:1;}

.mBoard .web_size				{display:flex; justify-content:space-between; gap:60px;} 
.mBoard .notice					{position:relative; flex:1; min-width:0; width:100%;}
.mBoard .program				{position:relative; flex:1; min-width:0; width:100%;}
.mBoard .program .items			{overflow:hidden;width: calc(100% + 30px);margin-left:-15px;}
.mBoard .program .items li		{margin:0px 10px;}
.mBoard .program .items figure	{height:320px; border-radius:20px; border:1px solid rgba(0,0,0,0.09); overflow:hidden;}
.mBoard .program .items figure img	{ width:100%; height:100%; object-fit:cover; }
.mBoard .program .items figure:hover img	{transform: scale(1.1); transition:all 0.4s ease;}

.mBoard2						{padding:40px 0 60px 0; position:relative;}
.mBoard2 .web_size				{display:flex; justify-content:space-between; gap:60px;}
.mBoard2 .recruit				{position:relative; flex:1; width:100%; }
.mBoard2 .recruit .wrap			{border-radius:30px; padding:30px; box-shadow:0 0 15px 1px rgba(0,0,0,0.07); max-width:890px;}
.mBoard2 .mProitems				{margin:-20px -9px; overflow:hidden;}
.mBoard2 .mProitems dl			{position:relative; margin:20px; min-height:220px; box-shadow:none; border-radius:0; overflow:unset;}
.mBoard2 .mProitems dl:after	{position:absolute; top:0; right:-20px; content:''; width:1px; height:100%; background:#e3e3e3; display:inline-block;}
.mBoard2 .mProitems dl dt		{background:#e5f7f9; color:var(--color2); border-radius:20px 20px 0 0;}
.mBoard2 .mProitems dl dd		{padding:15px 10px 0 10px;}
.mBoard2 .mProitems .status span	{color:var(--color2); border-color:var(--color2);}
.mBoard2 .mProitems dl:hover dt	{background:var(--color2); color:#fff; }
.mBoard2 .mProarrow				{top:55%; left:20px;}
.mBoard2 .mProarrow p:after		{border-width:6px 0 0 6px; padding:8px;}
.mBoard2 .mProarrow .prev		{left:0;}
.mBoard2 .mProarrow .next		{right:40px;}
.mBoard2 .photo					{position:relative;width:450px;}

.famsite							{position:relative; padding:20px 0; border-top:1px solid #e5e5e5; background:#fff;}
.famsite ul							{width:calc(100% - 60px); margin:0 auto; text-align:center}
.famsite img						{margin:0 auto;}
.famsite .arrow p					{position:absolute; top:calc(50% - 15px); width:30px; height:30px; cursor:pointer;}
.famsite .arrow span				{display:inline-block; border:solid #aaa; border-width:0 3px 3px 0; padding:7px; margin:10px 0 0 10px;}
.famsite .arrow span:hover			{border-color:#555;}
.famsite .prev						{left:0; transform: rotate(135deg);}
.famsite .next						{right:0; transform: rotate(-45deg);}
 
 
@media screen and (max-width:1540px) {   
	.mProarrow .prev			{left:-5px;}
	.mProarrow .next			{right:-5px;}
}

@media screen and (max-width:1400px) {   
	.mVisual .text					{padding:0 20px;}

	.mRecruit						{padding:40px 20px;}
	.mBoard							{padding:0 20px;}
	.mBoard .web_size				{gap:40px;}
	.mBoard2						{padding:40px 20px 60px 20px;}
	.mBoard2 .web_size				{gap:40px;}
	.mBoard2 .mHeadline span		{display:block; margin:8px 0 0 0;}
	.mBoard2 .mProarrow .next		{right:60px;}
	.mBoard2 .photo					{width:420px;}

	.famsite						{padding:20px;}
}
@media screen and (max-width:1200px) {   
	.mProitems					{margin:-20px 0;}
	.mProitems dl				{margin:20px 10px;}
	.mProitems dl dd			{padding:20px 20px 0 20px;}
	.mProarrow p:after			{border-width:6px 0 0 6px; padding:8px;}
	.mProarrow .prev			{left:0;}
	.mProarrow .next			{right:0;}
	.mBoard2 .web_size			{display:block;}
	.mBoard2 .photo				{width:100%; margin-top:40px;}

	.mBoard2 .recruit .wrap		{border-radius:0; padding:0; box-shadow:none; max-width:100%;}
	.mBoard2 .mProitems			{margin:-20px 0;}
	.mBoard2 .mProitems dl		{padding:0; margin:20px 10px; border-radius:20px; box-shadow:0 0 15px 1px rgba(0,0,0,0.07);}
	.mBoard2 .mProitems dl:after	{display:none;}
	.mBoard2 .mProitems dl dd	{padding:15px 20px;}
	.mBoard2 .mProarrow			{left:0px;}
	.mBoard2 .mProarrow .next	{right:0;}
	.mBoard2 .mHeadline span	{display:inline-block; margin:0 0 0 15px;}
}
@media screen and (max-width:1024px) {   
	.main_container					{padding:60px 0 0 0;}  
	.mVisual .item					{aspect-ratio:6 / 3; height:auto;}
	.mVisual .default:after			{height:70%; background-size:contain;}
	.mVisual .Btit					{font-size:1.6em;}
	.mVisual .Btit strong			{font-size:36px;}
	.mVisual .Stit					{font-size:1.1em; margin-top:10px;}

	.mHeadline						{margin-bottom:15px;}
	.mHeadline p					{font-size:1.4em;}
	.mHeadline span					{font-size:0.95em; display:block; margin:2px 0 0 0;}
	.mHeadline span strong			{font-size:14px; display:block;}
	.mControl p						{width:32px; height:32px; line-height:24px;}
	.mControl .more					{line-height:28px; font-size:15px;}
	.mControl .pause				{line-height:26px;}
	.mControl .pause:before, .mControl .pause:after	{height:11px;}
	.mControl .play					{line-height:27px;}
	.mControl .play:after			{border-width:6px 0 6px 8px;}

	.mBoard .web_size				{display:block;}
	.mBoard .program				{margin-top:20px;}
	.mBoard .program .items figure	{aspect-ratio:1 / 1; height:100%;}

	.mRecruit						{padding:20px 15px;}
	.mProitems dl					{margin:15px 10px; min-height:160px;}
	.mProitems dl dt				{padding:8px 15px;}
	.mProitems dl dd, .mBoard2 .mProitems dl dd	{padding:12px 20px 0 20px;}
	.mProitems .tit					{font-size:17px; -webkit-line-clamp:1; height:auto;}
	.mProitems .info				{margin:5px 0 10px 0; -webkit-line-clamp:1; height:auto; margin:5px 0 10px 0;}
	.mProitems .status span			{width:55px; font-size:14px;}
	.mBoard2						{padding:20px 15px 40px 15px;}
	.mBoard2 .mProitems dl			{min-height:160px;}
	.mProarrow p:after, 	.mBoard2 .mProarrow p:after		{border-width:5px 0 0 5px; padding:7px;}
	.mBoard2 .mHeadline span		{display:block; margin:5px 0 0 0;}
	.mBoard2 .photo					{margin-top:20px;}
	.mBoard2 .mProitems dl			{margin:15px 10px;}

	.famsite						{padding:10px 0;}
	.famsite img					{width:70%;}
	.famsite .arrow span			{padding:3px;}
}
@media screen and (max-width:768px) {
	.mControl p.cnt0, .mControl p.cnt1, .mControl p.cnt2	{display:inline-block;}

	.mVisual .item					{aspect-ratio:unset; height:360px;}
	.mVisual .default:after			{bottom:-10px; height:50%;}
	.mVisual .text					{top:15%;}
	.mVisual .Btit					{font-size:1.2em;}
	.mVisual .Btit strong			{font-size:26px;}
	.mVisual .Stit					{font-size:0.95em;}
	.mVisual .Stit br				{display:none;}
}