/*======= common style =======*/
@charset "utf-8";

@media only screen and (max-width: 1024px) { 
    .sp {
        display: block;
    }
    .pc {
        display: none;
    }
    .header__nav-sp {
        display: flex;
        justify-content: space-between;
        padding: 26px 20px;
    }
    .header__nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 20000;
        width: 100%;
        height: 100%;
        color: #fff;
        background: #1f1f1f;
        transition: visibility 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
        
        opacity: 0;
								line-height: 1;
								visibility: hidden;
    }
    .header__nav.is-active {
        visibility: visible;
        opacity: 1;
    }
    .main-menu {
        display: block;
    }
    .menu-item {
        width: 100%;
        padding: 18px 20px;
        border-bottom: 1px solid #363636;
    }
    .menu-item:first-child {
        border-top: 1px solid #363636;
    }
    .menu-link img {
        display: none;
    }
    .header__logo span {
        font-size: 16px;
								display: block;
    }
    .header__logo {
        font-size: 22px;
								line-height: 1;
    }
    .menu-link.--has-icon::after {
        left: unset;
        right: 0px;
        bottom: 50%;
        transform: translateY(50%);
        width: 10px;
    }
    .menu-link {
        justify-content: flex-start;
        align-items: flex-start;
    }
    .sub-menu {
        margin-top: 20px;
        width: 100%;
        position: relative;
        background-color: unset;
        padding-bottom: 0px;
        display: none;
        background-color: #fff;
    }
    .menu-item.active .sub-menu {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0px);
        display: block;
    }
    .sub-menu a {
        color: #003470;
    }
    .sub-menu li:not(:last-child) a{
        border-bottom: 0;
    }
    .l-header__menu-trigger {
        display: block;
        position: fixed;
        z-index: 30000;
        background-color: transparent;
        border: 0;
        cursor: pointer;
        top: 35px;
        right: 20px;
								width: 25px;
								height: 22px;
    }
    .l-header__menu-trigger .line-wrap {
        position: relative;
        display: block;
        width: 25px;
        height: 22px;
    }
    .l-header__menu-trigger .line {
        position: absolute;
        right: 0;
        display: block;
        width: 100%;
        height: 1px;
        background: #004695;
        transition: opacity 0.4s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
        transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
        transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.4s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
    }
				.l-header__menu-trigger.is-active .line {
					background: #fff;
				}
    .l-header__menu-trigger .line:nth-child(1) {
        top: 0;
    }
    .l-header__menu-trigger .line:nth-child(2) {
        top: 50%;
    }
    .l-header__menu-trigger .line:nth-child(3) {
        top: 100%;
    }
    .l-header__menu-trigger.is-active .line {
        transition: 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    }
    .l-header__menu-trigger.is-active .line:nth-child(1) {
        top: 50%;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    .l-header__menu-trigger.is-active .line:nth-child(2) {
        opacity: 0;
    }
    .l-header__menu-trigger.is-active .line:nth-child(3) {
        top: 50%;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    .header__right {
        column-gap: 25px;
        align-items: center;
    }
    .language {
        margin-top: 0px;
    }
    .header__inner{
        padding: 26px 68px 26px 20px;
    }
    .hero__intro-text .__text {
        font-size: 48px;
    }
    .hero__intro-text {
        padding: 0px 5%;
        top: 36%;
    }
    .footer__inner {
        flex-wrap: wrap;
    }
    .wrap__ft-menu {
        flex: unset;
        width: 100%;
        padding-left: 0px;
        padding-top: 40px;
        justify-content: flex-start;
        flex-wrap: wrap;
        row-gap: 30px;
    }
    .footer-content {
        padding: 45px 0px;
    }
    #back-to-top.show {
    }
    .hero-slide,
    .hero-option {
        height: 85vh;
        max-height: 800px !important;
    }
				
				#back-to-top {
					bottom: 50px;
				}
				
				#back-to-top img {
					width: 40px;
					height: 40px;
				}
				
				.footer-content {
					margin-top: 40px;
				}
				
				.footer-content:before {
					top: -40px;
				}

}
/* end breakpoint 1024 */

@media screen and (min-width:769px) and ( max-width:1024px) {
	.header__logo {
		font-size: 19px;
	}
	
	.header__logo img {
		max-width: 140px;
		margin-bottom: 4px;
	}
	
    .language {
        border: 0;
        padding: 8px;
								z-index: 20001;
    }
}


@media only screen and (max-width: 768px) {
    html, body {
        overflow-x: hidden;
        min-width: 320px;
    }
    .language {
        border: 0;
        padding: 8px;
								z-index: 20001;
    }

    .language span {
        display: none;
    }
    .header__right {
        column-gap: 10px;
    }
    .header__inner {
        align-items: center;
        padding-right: 56px;
        /*padding-top: 20px;*/
        padding-bottom: 20px;
    }
    .hero__intro-text .__text {
        font-size: 22px;
    }
    .footer__copyright {
        flex-wrap: wrap;
        row-gap: 6px;
    }
    .hero-slide,
    .hero-option {
        height: 300px;
        max-height: unset;
    }

.hero--image.image--left::before {
    background-image: url(../image/slide-01.png);
    background-position: center center;
    right: -20%;
   
}

.hero--image.image--right::before {
    background-image: url(../image/slide-02.png);
    background-position: 0 100%;
    left: -20%;
}

}
/* end breakpoint 768 */

@media only screen and (max-width: 479px) { 
    .header__logo img {
        max-width: 156px;
    }
    .header__inner,
    .header__nav-sp  {
        padding: 20px 16px;
        padding-right: 48px;
    }
    .l-header__menu-trigger  {
        right: 16px;
    }
    .hero__intro-text .__text {
        font-size: 26px;
    }
    .hero-slide,
    .hero-option {
        height: 356px;
    } 
    .ft-block {
        width: 100%;
    }
}
/* end breakpoint 479 */

@media only screen and (max-width: 436px) {
				.footer-content:before {
					top: -20px;
				}
}

@media only screen and (max-width: 360px) {
    .hero__intro-text .__text {
        font-size: 24px;
    }
    .hero-slide,
    .hero-option {
        height: 320px;
    } 
				.header__logo {
					font-size: 18px;
				}
}


/*page--------------------------------------------------*/

@media only screen and (max-width: 1024px) {
    .topics {
        padding-top: 65px;
        padding-bottom: 90px;
    }
    .yt__item {
        column-gap: 16px;
    }
				.new__item {
					display: block;
				}
				.new__item .date {
					display: block;
				}
				.new__item h4 span.new {
					position: relative;
					right: unset;
					top: unset;
					padding-left: 4px;
				}
				
				/*--------------------------------------------------*/
				.alignright,
				.alignleft,
				.aligncenter {
					display: block;
					float: none;
					margin: 0 auto 30px;
				}
				
				#pageHeader .ttl {
					margin: 0 10px;
				}
				
				#pageHeader .ttl h2 {
					line-height: 1;
					font-size: 20px;
				}
				
				#pageHeader .ttl h2 span {
					display: block;
					margin-bottom: 10px;
					font-size: 50px;
				}
				
				#pageHeader .pan {
					bottom: 40px;
				}

				main#second ul.pageMenu {
					flex-wrap: wrap;
				}
				
				main#second ul.pageMenu li {
					width: 100%;
					margin: 0 1% 20px;
				}
				
				main#second h4 {
					font-size: 22px;
				}


/*--------------------------------------------------
  research　研究・スタッフ
--------------------------------------------------*/
#pageHeader.research {
	background: url(../../research/image/research_ttl_back.jpg) no-repeat 40% 0;
	background-size: cover;
}

.labList {
	display: block;
}
				
.labList .box {
	width: 100%;
	margin: 0 0 40px;
}

.labTheme {
	display: block;
}

.labTheme figure {
	width: 100%;
	margin-bottom: 30px;
}

.labTheme figure:before {
	bottom: -20px;
}

.labTheme div {
	width: 100%;
}

.labTeacher {
	flex-direction: column;
	margin: 0 0 40px;
}

.labTeacher div {
	width: 100%;
	order: 2;
}

.labTeacher figure {
	width: 100%;
	order: 1;
	text-align: center;
	margin-bottom: 20px;
}

.labTeacher figure img {
	display: inline-block;
}

main#second .labTeacher div ul {
	display: block;
}

main#second .labTeacher div ul li {
	width: 100%;
	margin: 0 0 20px;
}


/*--------------------------------------------------
  feature　特徴と学び
--------------------------------------------------*/
#pageHeader.feature {
	background: url(../../feature/image/feature_ttl_back.jpg) no-repeat 0 0;
	background-size: cover;
}

.featurePoint {
	display: block;
}

.featurePoint li {
	width: 100%;
	margin: 0 0 50px;
}

.featurePoint li:nth-child(2) {
	margin: 0 0 50px;
}

.fieldWrap {
	display: block;
}

.fieldWrap div {
	width: 100%;
	margin: 0 0 30px;
}

.flowYear {
	flex-direction: column;
}

.flowYear .grade {
	font-size: 20px;
	width: 100%;
	order: 1;
	margin: 0;
	padding: 0;
}

.flowYear .info {
 width: 100%;
	order: 2;
	padding: 0;
}

.flowYear .info dt {
	margin: 8px 0 10px;
}

.flowYear .photo {
	width: 100%;
	order: 3;
	text-align: center;
}

.flowYear .photo img {
	display: inline-block;
}

.flowCourse {
	padding-bottom: 10px;
}

.flowCourse .lead {
	font-size: 20px;
 margin:	0 0 40px !important
}

.flowCourse dl {
	display: block;
}

.flowCourse dl dt {
	width: 100%;
}

.flowCourse dl dd {
	width: 100%;
	margin: 0 0 20px;
}

/*--------------------------------------------------
  topic
--------------------------------------------------*/
.topicList table td {
	display: block;
}

.topicList table td img {
	margin-bottom: 8px;
}

.topicList h5 {
	margin-bottom: 20px;
	line-height: 1.6;
}


}

@media only screen and (max-width: 1023px) {
    .yt-slide .swiper-slide.swiper-slide-prev .yt__item,
    .yt-slide .swiper-slide.swiper-slide-next .yt__item {
        opacity: 0.5;
    }
}

@media only screen and (max-width: 768px) {
    .h-news {
        margin-top: -60px;
    }
    .news__inner {
        height:  auto;
        position: relative;
        flex-wrap: wrap;
        padding: 10px 30px;
    }
    .news-slide {
        width: 100%;
        flex: unset;
        order: 3;
    }
    .pickup-news__ui {
        padding-right: 0px;
    }
    .news__inner .__title {
        width: unset;
        margin-right: 0px;
        border-right: 0px;
    }
    .new__item {
        flex-wrap: wrap;
    }
    .new__item h4 {
        min-width: 230px;
    }
    .topics {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .section-title.--topic img {
        max-width: 120px;
    }
    .section-title span {
        font-size: 15px;
    }
    .new__item.--topic {
        padding: 16px 16px;
        padding-left: 0px;
    }
    .new__item.--topic {
        background-position: 100% center;
    }
    .new__item {
        row-gap: 4px;
    }
    .btn {
        min-width: 280px;
        font-size: 15px;
        padding: 12px 16px;
    }
    .yt-slide__bt .swiper-button-prev, .yt-slide__bt .swiper-button-next {
        width: 40px;
    }
    .new__item h4 span.new {
        font-size: 14px;
    }
    .new__item h4 {
        -webkit-line-clamp: 2;
    }
				.h-news:after {
					top: -30px;
				}
				.new__item {
					padding: 0;
				}
				.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
					   bottom: 5px !important;
				}

}

@media only screen and (max-width: 479px) {
    .news__inner  {
        padding-right: 20px;
        padding-left: 20px;
    }
    .news__inner .__title {
        padding: 16px 0px;
    }
				.swiper-wrapper {
					   margin-bottom: 20px;
				}
    .swiper.yt-slide {
        padding-bottom: 40px;  
    } 
    .yt__item iframe {
        height: 160px !important;
    }
    .yt-slide__bt {
					   top: unset;
        bottom: 20px;
    }
    .l-header__menu-trigger {
        top: 36px;
    }
}

@media only screen and (max-width: 360px) { 
    .yt-slide__bt {
        top: calc(144px / 2);
    }
    .yt__item iframe {
        height: 144px !important;
    }
}

@media only screen and (max-width: 320px) { 
    .yt__item iframe {
        height: 130px !important;
    }
    .yt-slide__bt {
					   top: unset;
        bottom: 20px;
    }
}