@charset "utf-8"; 
 

/* VISUAL  ================================================================================== */
.main_container						{overflow:hidden;}
.mainVisual .bxslider				{visibility:hidden;}
.mainVisual .mvideo_box				{position:relative; width:100%; aspect-ratio:16/9; padding:0; margin:0;}

.mainVisual							{position:relative; overflow:hidden;}  
.mainVisual .item 					{aspect-ratio:16/6; min-height:800px;}
.mainVisual .bg 					{overflow:hidden; position:absolute; width:100%; height:100%; top:0; left:0; filter: brightness(0.7); animation:imgScale 3s both; } 
.mainVisual .wrap					{position:absolute; width:100%; text-align:center; top:25%; transform:translateX(-50%); z-index:100; animation:slide-up 2s cubic-bezier(.5,.2,0,1) forwards; } 
.mainVisual .typo img				{height:350px; margin-bottom:10px;}
.mainVisual .tit					{font-family: 'S-Core Dream'; letter-spacing:-1.5px; font-size:1.5em; color:#fff; text-shadow:0 0 15px rgba(0,0,0,0.3); line-height:1.4;}
.mainVisual .tit strong				{font-weight:800; font-size:46px;}


/* CONTENTS  ================================================================================== */
.mainIntro						{display:grid; grid-template-columns:300px auto; gap:5%; padding:100px 0 80px 0;}
.mainIntro .lt					{margin-top:-140px; display:grid; align-items:Center; width:100%; height:280px; background:url('../img/main/acc_symbol.jpg') no-repeat 110px center #a80e0e;}
.mainIntro .lt img				{height:130px; margin:0 auto;}
.mainIntro .rt img				{height:45px;}
.mainIntro .rt>p				{font-family: 'S-Core Dream'; letter-spacing:-1.5px; font-size:1.45em; color:#414141; line-height:1.4; margin:10px 0 20px 0;}
.mainIntro .rt>p strong			{font-weight:700; font-size:37px; color:#111;}
.mainIntro .rt>div				{font-family: 'S-Core Dream'; font-size:1.1em; color:#888; line-height:1.6; letter-spacing:-0.75px;}

.main_container h2				{font-family: 'S-Core Dream'; font-weight:300; color:#222; font-size:1.8em; letter-spacing:-2px; line-height:1; margin-bottom:35px;}
.main_container h2 strong		{font-weight:700;}
.main_container h2 em			{font-family:'Paperlogy'; color:var(--color1); margin-left:15px; font-size:17px; letter-spacing:1px; font-weight:500;}

.mainPro						{position:Relative; }
.mainPro .item					{margin:-15px;}
.mainPro .item li				{position:Relative; margin:15px; box-shadow:0 0 15px 1px rgba(0,0,0,0.08);}
.mainPro .item li p				{font-family: 'S-Core Dream'; font-size:1.4em; font-weight:500; letter-spacing:-1px; text-align:center; position:absolute; left:0; bottom:0; padding:30px; width:100%; color:#fff; z-index:1; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);}
.mainPro .item li:hover 		{transform: translateY(-8px); transition:.4s;}
.mainArrow						{position:absolute; top:45%; transform:translateY(-50%); width:100%; z-index:1;}
.mainArrow p					{position:absolute; cursor:pointer; width:80px; height:80px; line-height:85px; background:rgba(0,0,0,0.2); border-radius:100%; text-align:center;} 
.mainArrow p:after				{content:''; display:inline-block; border:solid #fff; border-width:5px 0 0 5px; padding:7px; border-radius:3px;}
.mainArrow .prev				{left:-140px;}
.mainArrow .prev:after			{transform:rotate(315deg); margin-left:5px;}
.mainArrow .next				{right:-140px;}
.mainArrow .next:after			{transform:rotate(135deg); margin-right:5px;}
.mainArrow p:hover				{background:var(--color1);}

.mainBoard						{padding:100px 0; display:flex; justify-content:space-between; gap:5%;}
.mainBoard>div					{position:relative; flex:1; min-width:0; width:100%;}

.mainArchive					{padding:100px 0; position:Relative; background:#f2f2f2;}
.mainArchive .item				{margin:-20px; height:480px; overflow:hidden;}
.mainArchive .item li			{position:Relative;margin:20px; text-align:Center;}
.mainArchive .item .img			{aspect-ratio:6/9; overflow:hidden; box-shadow:0 0 15px 1px rgba(0,0,0,0.08);}
.mainArchive .item .img img		{width:100%; height:100%; object-fit:cover; transition:all 0.4s ease;}
.mainArchive .item li p			{font-family: 'S-Core Dream'; font-size:1.15em; font-weight:500; margin:20px 0 5px 0; letter-spacing:-1px; color:#333; line-height:1.4;}
.mainArchive .item li em		{font-family: 'S-Core Dream'; color:#797979; font-size:0.95em; line-height:1;}
.mainArchive .item .layer		{font-family: 'S-Core Dream'; font-size:1.1em; font-weight:500; aspect-ratio:6/9; background:rgba(0,0,0,0.5); color:#fff; position:absolute; z-index:1; width:100%; display:none; align-items:Center; transition:all 0.4s ease; padding:0 20px;}
.mainArchive .item li a:hover img	{transform: scale(1.1);}
.mainArchive .item li:hover .layer	{display:grid;}
.mainArchive .mainArrow			{top:40%;}
.mainArchive .photo_dots		{display:none !important;}

.mFamsite						{position:relative; padding:30px 0; text-align:center; height:110px; overflow:hidden;}
.mFamsite ul					{width:calc(100% - 60px); margin:0 auto;}
.mFamsite .arrow				{position:absolute; top:calc(50% - 20px); width:100%;}
.mFamsite .arrow p				{position:absolute; width:30px; height:30px; cursor:pointer;}
.mFamsite .arrow p:after		{content:''; display:inline-block; border:solid #d1d1d1; border-width:0 3px 3px 0; padding:7px; margin:10px 0 0 10px;}
.mFamsite .arrow p:hover:after	{border-color:#333;}
.mFamsite .prev					{left:-5px;}
.mFamsite .prev:after			{transform: rotate(135deg);}
.mFamsite .next					{right:5px;}
.mFamsite .next:after			{transform: rotate(-45deg);}
.mFamsite img					{margin:0 auto;}


@media screen and (max-width:1560px) { 
	.mainArrow .next			{right:-50px;}
	.mainArrow .prev			{left:-50px;}
	.mainArchive .item			{margin:-20px -10px;}
	.mainArchive .mainArrow .next	{right:-30px;}
}

@media screen and (max-width:1280px) { 
	.mainIntro					{padding:100px 20px 80px 20px;}
	.mainPro					{padding:0 20px;}
	.mainArrow .next			{right:0;}
	.mainArrow .prev			{left:-35px;}
	.mainBoard, .mainArchive	{padding:100px 20px;}
	.mFamsite					{padding:30px 10px;}
}

@media screen and (max-width:1024px) {
	.main_container					{padding:60px 0 0 0;}
	.mainVisual .item 				{aspect-ratio:6/4; min-height:360px;}
	.mainVisual .wrap				{top:15%; padding:0 20px;}
	.mainVisual .typo img			{height:auto; width:55%; margin:0;}
	.mainVisual .tit				{font-size:1.1em;}
	.mainVisual .tit strong			{font-size:26px; font-weight:700;}

	.mainIntro						{grid-template-columns:200px auto; gap:4%; padding:40px 15px;}
	.mainIntro .lt					{margin-top:-70px; height:180px;}
	.mainIntro .lt img				{height:80px;}
	.mainIntro .rt img				{height:30px;}
	.mainIntro .rt>p				{font-size:1.1em; margin:5px 0 10px 0;}
	.mainIntro .rt>p strong			{font-size:23px;}
	.mainIntro .rt>div				{font-size:0.95em;}
	.mainIntro .rt>div br			{display:none;}

	.main_container h2				{font-size:1.4em; margin-bottom:20px;}
	.main_container h2 em			{font-size:14px; margin-left:10px;}

	.mainPro .item					{margin:-10px;}
	.mainPro .item li				{margin:10px;}
	.mainPro .item li p				{font-size:1.1em; padding:40px 20px 20px 20px;}
	.mainArrow p					{width:50px; height:50px; line-height:50px;}
	.mainArrow p:after				{border-width:4px 0 0 4px; padding:4px; border-radius:2px;}
	.mainArrow .prev				{left:-20px;}
	.mainArrow .next				{right:20px;}

	.mainBoard						{padding:40px 15px; display:block;}
	.mainBoard .lt					{margin-bottom:20px;}

	.mainArchive					{padding:40px 15px;}
	.mainArchive .item				{margin:-15px 0;}
	.mainArchive .item li			{margin:15px 10px;}
	.mainArchive .item li p			{font-size:1.05em; margin:15px 0 0 0;}
	.mainArchive .item li em		{font-size:0.85em;}
	.mainArchive .item .layer		{font-size:1em;}
	.mainArchive .mainArrow .next	{right:-20px;}

	.mFamsite						{padding:15px 0; height:auto;}
	.mFamsite .arrow				{top:calc(50% - 15px);}
	.mFamsite ul					{width:calc(100% - 40px);}
	.mFamsite .arrow p:after		{padding:4px;}
	.mFamsite img					{width:70%;}
}

@media screen and (max-width:768px) { 
	.mainIntro						{display:block;}
	.mainIntro .lt					{margin-top:-60px; height:auto; padding:20px; margin-bottom:20px;}
	.mainIntro .rt img				{height:auto; width:80%;}
}