@charset "utf-8";

@media screen and (max-width: 768px) {
  
	body {
    -webkit-text-size-adjust: none;
		padding-top: 80px;
  }
	
	
	/*===== first =====*/	
	#first .logo {
		width: 192px;
		height: 209px;
	}
  
  
  /*===== header =====*/
	header {
		height: 80px;
		padding: 0 25px;
	}
	header h1 {
		position: relative;
		z-index: 1000;
	}
	header h1 img {
		width: auto;
		height: 42px;
	}
	
	#menu_btn {
    position: relative;
    z-index: 1000;
		width: 39px;
		height: 34px;
  }
  .menu-trigger,
  .menu-trigger div {
    display: inline-block;
    transition: all .4s;
    box-sizing: border-box;
  }
  .menu-trigger {
    position: absolute;
		right: 0;
		top: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
  }	
  .menu-trigger:hover {
    opacity: 1;
  }
  .menu-trigger div {
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #000;
    border-radius: 4px;
		transition: all .3s;
  }
	
  .menu-trigger div:nth-of-type(1) {
    top: 0;
  }
  .menu-trigger div:nth-of-type(2) {
    top: 15px;
  }
	.menu-trigger div:nth-of-type(3) {
    bottom: 0;
  }
  
	.menu-trigger.active div {
		
	}
  .menu-trigger.active div:nth-of-type(1) {
    transform: translateY(15px) rotate(-45deg);
  }
	.menu-trigger.active div:nth-of-type(2) {
		display: none;
	}
  .menu-trigger.active div:nth-of-type(3) {
    transform: translateY(-15px) rotate(45deg);
  }
	
	
	/*===== menu =====*/
  #menu {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10;
    color: #342e2c;
    width: 100%;
    height: 100dvh;
    padding: 150px 0 0;
    overflow-y: scroll;
    background-color: #fff;;
    transition: all .5s;
    opacity: 0;
    pointer-events: none;
  }
  #menu.open {
    opacity: 1;
    pointer-events: auto;
  }
	
	#menu ul.list_sp {
		padding-bottom: 42px;
	}
	#menu ul.list_sp li {
		margin-bottom: 42px;
	}
	#menu ul.list_sp li a {
		display: block;
		text-align: center;
	}
	#menu ul.list_sp li a img {
		width: auto;
		height: 24px;
	}
	
	#menu ul.sns {
		align-items: center;
		justify-content: space-between;
		padding: 0 37px 0 40px;
	}
	#menu ul.sns li a {
		display: inline-block;
	}
	#menu ul.sns li:nth-of-type(1) a img {
		width: 31.8743px;
		height: auto;
	}
	#menu ul.sns li:nth-of-type(2) a img {
		width: 32.5748px;
		height: auto;
	}
	#menu ul.sns li:nth-of-type(3) a img {
		width: 40.3062px;
		height: auto;
	}
	#menu ul.sns li:nth-of-type(4) a img {
		width: 94.1197px;
		height: auto;
	}
	
	
	/*===== footer =====*/
	footer {
		padding: 100px 0 30px;	
	}
	footer .copy_sp {
		width: 100%;
	}
	
	
	/*===== common =====*/
	h2.midashi::after {
		top: 14px;
	}
	h2.midashi img {
		width: auto;
		padding: 0 15px;
		height: 28.3525px;
	}
	h2.midashi span {
		font-size: 16px;
		margin-top: 13px;
	}

	a.more {
		width: 72px;
	}
	
	.midashi2 {
		font-size: 20px;
		height: 106px;
		padding-top: 43px;
		margin: 0 auto 50px;
		background: url("../img/midasi_bk2.png") no-repeat 50% 0 / 86px 106px;
	}
	
	.midashi3 {
		font-size: 21px;
		margin-bottom: 50px;
	}


	/*===== top page =====*/
	#fv {
		position: static;
		left: auto;
		top: auto;
		width: 100%;
		height: 100%;
		aspect-ratio: 1 / 1;
	}
	
	
	#about_lead.top a.more {
		margin-top: 50px;
	}


	#news {
		padding-bottom: 0;
	}
	#news.top {
		padding-bottom: 100px;
	}
	#news.list {
		padding-top: 50px;
	}
	#news h2 {
		margin-bottom: 60px;
	}
	#news p {
		font-size: 15px;
	}
	#news ul {
		display: block !important;
		padding: 0 30px;
		margin-top: 70px;
	}
	#news.list ul {
		margin-bottom: 0;
	}
	#news ul li {
		width: 100%;
		margin-right: 0;
	}
	#news ul li,
	#news.list ul li {
		margin-bottom: 30px;
	}
	#news ul li:last-of-type,
	#news.list ul li:last-of-type {
		margin-bottom: 0;
	}
	#news ul li .i {
		width: 100%;
		height: 330px;
	}
	#news ul li .text {
		font-size: 14px;
		line-height: 1.714em;
		height: auto;
		padding: 18px;
	}
	#news ul li .text div.sub {		
		margin-bottom: 0.7em;
	}
	#news a.more {
		margin-top: 50px;
	}
	
	
	#course ul {
		width: 100%;
		padding: 0 60px 10px;
	}
	#course ul li {
		margin-bottom: 90px;
	}
	#course ul li a {
		align-items: center;
	}
	#course ul li a .title {
		width: 144px;
		margin: 0 auto 40px;
	}
	#course ul li a .title h3 {
		font-size: 20px;
		line-height: 1.5em;
		text-align: center;
	}
	#course ul li a .text {
		width: 460px;
	}
	#course ul li a .text h4 {
		font-size: 20px;
		line-height: 1.6em;
		text-align: center;
		margin-bottom: 1em;
	}
	#course ul li a .text p {
		font-size: 14px;
	}
	#course ul li a .more {
		width: 72px;
		margin: 30px auto 0;
	}


	#course h2,
	#faq h2,
	#contact h2 {
		margin-bottom: 60px;
	}
	
	
	#faq h3 {
		font-size: 17px;
		padding-top: 44px;
		height: 104px;
		margin-bottom: 50px;
		background: url("../img/midasi_bk.png") no-repeat 50% 0 / 97px 104px;
	}
	#faq .unit {
		width: 100%;
		padding: 0 30px;			
		margin: 0 auto 90px;
	}
	#faq .unit dl {
		margin-bottom: 35px;
	}
	#faq .unit dl dt {
		font-size: 14px;
		line-height: 1.857em;
	}
	#faq .unit dl dt div {
		padding: 0 0 0 32px;
	}
	#faq .unit dl dt::before {
		top: 0;
		font-size: 14px;
		width: 25.9005px;
		height: 25.9005px;
		padding-top: 3px;
	}
	#faq .unit dl dd {
		font-size: 13px;	
	}
	#faq .unit dl dd::before {
		top: 20px;
		font-size: 14px;
		width: 25.9005px;
		height: 25.9005px;
		padding-top: 3px;
	}
	#faq .unit dl dd div {		
		padding: 25px 0 5px 32px;
	}
	
	
	#contact ul li {
		font-size: 18px;
	}
	#contact ul li:first-of-type {
		margin-bottom: 50px;
	}
	#contact ul li a {
		padding-right: 44px;
	}
	#contact ul li a::after {
		top: calc(50% - 16px);
		width: 32px;
		height: 32px;
		background: url("../img/mark_link.png") no-repeat 0 0 / 32px 32px;
	}
	

	/*===== about =====*/
	#about_lead {		
		padding: 90px 0 100px;
	}
	#about_lead.top {
		padding-bottom: 100px;
	}
	#about_lead .ko {
		/*height: 350px;*/
		padding-top: 110px;
		padding-bottom: 90px;
		overflow: hidden;
		background: url("../img/ko_top.png") no-repeat 50% 0 / 260px 93px;
	}
	#about_lead .ko.fix {
		height: 746px;
	}
	#about_lead .ko::after {
		left: 0;
		width: 100%;
		height: 93px;
		background: #fff url("../img/ko_bottom.png") no-repeat 50% 100% / 260px 93px;
	}

	#about_lead p {
		font-size: 15px;
	}
	#about_lead p:first-of-type {
		font-size: 26px;
		line-height: 1.615em;
		margin-bottom: 1.615em;
	}
	#about_lead p:last-of-type {
		margin-bottom: 25px;
	}
	
	.about_img {
		height: 230px;
		margin-bottom: 90px;
	}
	
	.lec .t {
		margin-bottom: 70px;
	}
	.lec .t p {	
		font-size: 14px;
	}
	.lec ul {
		width: 100%;
		padding: 0 60px 10px;
	}
	.lec ul li {
		display: block !important;
		margin-bottom: 80px;
	}
	.lec ul li .i {
		width: 170px;
		height: 170px;
		margin: 0 auto 30px;
	}
	.lec ul li .text {
		width: 100%;
	}
	.lec ul li .text h3 {
		font-size: 17px;
		text-align: center;
	}
	.lec ul li .text .title {
		font-size: 11px;
		line-height: 1.72em;
		text-align: center;
		padding: 1.8em 0;
	}
	.lec ul li .text p {
		font-size: 14px;		
	}
	
	.annai,
	.msg {
		width: 100%;
		padding: 0 30px;
		margin: 0 auto 90px;
	}
	.annai p,
	.msg p {
		font-size: 14px;
	}
	
	.msg .i {
		height: 220px;
		margin-bottom: 40px;
	}
	
	.company {
		width: 100%;
		padding: 0 30px;
	}
	.company table,
	.company table tbody,
	.company table tr,
	.company table th,
	.company table td {
		display: block;
	}
	.company table th {
		font-size: 9px;
		line-height: 1em;
		text-align: center;
		width: 100%;
		padding: 17px 0 0;
		border-bottom: none;
	}	
	.company table td {
		font-size: 12px;
		text-align: center;
		padding: 10px 0;
	}
	.company table tr:first-of-type td {
		padding-top: 10px;
	}
	.company table tr:last-of-type td {
		padding-bottom: 0;
		border-bottom: none;		
	}
	
	
	/*===== course =====*/
	#course.single {
		text-align: center;
		padding: 50px 30px 0;
	}
	#course.single h2 {
		width: 144px;
		margin-bottom: 60px;
	}
	#course.single h3 {
		font-size: 20px;
		height: 106px;
		padding-top: 45px;
		margin: 90px auto 50px;
		background: url("../img/midasi_bk2.png") no-repeat 50% 0 / 86px 106px;
	}
	#course.single h4 {
		font-size: 20px;
		text-underline-offset: 5px;
		text-decoration-thickness: 2.5px;
		margin: 56px 0 30px;
	}
	#course.single h4.tp2 {
		margin-top: 60px;
	}
	#course.single h5 {
		font-size: 16px;
		line-height: 1.625em;
		margin-block: calc((1em - 1lh) / 2);
		margin-bottom: 21px;
	}
	#course.single p {
		font-size: 14px;
	}
	#course.single p.p2 {
		width: 100%;
	}
	#course.single p.b {
		font-size: 21px;
	}
	#course.single p.m {
		font-size: 20px;
		line-height: 1.65em;
	}
	#course.single p.num {
		font-size: 32px;
		margin: 30px 0 15px;
	}
	#course.single p.l2 {
		line-height: 1.5em;
	}
	#course.single p span.ten {
		display: none;
	}
	#course.single .n {
		margin: 46px 0 28px;
	}
	#course.single .n img {
		height: 68px;
	}
	#course.single .btn a {
		width: 55px;
		height: 55px;
	}
	#course.single p:has(+ .btn) {
		margin-bottom: 20px;
	}
  
	
	/*===== page =====*/
	#page {
		width: 100%;
		padding: 50px 30px 0;
	}
	#page h3 {
		font-size: 16px;
		margin-bottom: 1.2em;
	}
	
    
  .not-found {
    height: calc(100vh - 282px);
  }


  br.sp {
      display: inline !important;
  }
  br.pc,img.pc {
      display: none;
  }
	img.sp {
		display: inline-block;
	}
    
    
  .sa--left {
    transform: translate(20px, 0);
  }
  .sa--right {
    transform: translate(-20px, 0);
  }
  .sa--up {
    transform: translate(0, 20px);
  }
  .sa--down {
    transform: translate(0, -20px);
  }
}

@keyframes fadeupSP {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fluffySP {
  0%, 100% {
    transform: translate(0,0);
  }
  50% {
    transform: translate(1px,-3px);
  }
}

@keyframes prog {
	0% {
			width: 0;
	}
	100% {
			width: 50px;
	}
}