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


@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);

*{
  box-sizing: border-box;
}


html{
	margin:0;
	padding:0;
	height:100%;
	font-size:14px;
	line-height:1.6;
}
body{
	margin:0!important;
	padding:0;
	font-family: 'Noto Sans JP', sans-serif;
	height:100%;
	color:#505050;
	font-weight:400;
}

p{
	font-size:14px;
	line-height:2.2;
}
/* Chrome */
img {
    image-rendering: -webkit-optimize-contrast;
}
img {
  max-width:100%;
	height:auto;
  vertical-align: baseline;
}


a:link{
	text-decoration: none;
}


a:hover{
	text-decoration: underline;
	opacity: 0.8;
}

a:active{
}
a:visited{
	
}

/***********************
  Wordpress
************************/

body:not(.home) .article-content{
	padding-top:80px;
	padding-bottom:80px;
}

/* ニュース */
@media screen and (max-width:768px){
	body:not(.home) .article-content{
		padding-top:40px;
		padding-bottom:40px;
	}
}



/***********************
  TOOL
************************/
.txt-center{
	text-align:center;
}

.mt-50{
  margin-top:50px;
}
.mt-60{
  margin-top:60px;
}

.inner-range {
	width:940px;
	max-width:100%;
	margin:0 auto;
}



a.link-more{
	transition: .4s;
	display: inline-block;
}
a.link-more:hover{
    transform: translateX(5px);
}

/***********************
ヘッダー
************************/

#header {
	width:100%;
	background-color:#FEA3A3;
	height:100px;
	transition: all 0.6s;
	z-index:10;
}

#header .inner-range{
	display:flex;
	justify-content: space-between;
	gap :0 20px;
	height:100%;
}

#header .header-left{
	flex:0 0 auto;
	display:flex;
	align-items: center;
	align-content: flex-end;
}

#header .header-right{
	flex:2 0 auto;
	display:flex;
	position:relative;
	align-items:flex-end;
}

#header h1{
	margin:0;
	position:relative;
	z-index:100;
}



/***********************

ナビゲーション

************************/
#header nav{
	width:100%;
}

#primary-menu {
	display:flex;
	justify-content:flex-end;
	margin-right:0;
	gap:0 30px;
	padding-bottom:20px;

	width:100%;
}
#primary-menu li{
	flex:0 0 auto;
	font-size:13px;
}

#primary-menu li a{
	color: #FFF;
	font-weight:700;
	position:relative;
}

#primary-menu li a:hover{
	text-decoration: none;
	opacity: 1;
}


#primary-menu li a::after {
position: absolute;
left: 1px;
content: '';
width: calc(100% - 2px);
height: 1px;
background: #FFF;
bottom: -3px;               /*アンダーラインがaタグの下端から現れる*/
transform: scale(0, 1);     /*アンダーラインの縮尺比率。ホバー前はx方向に0*/
transform-origin: left top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の左端*/
transition: transform 0.3s; /*変形の時間*/
}

#primary-menu li a:hover::after {
transform: scale(1, 1);     /*ホバー後、x軸方向に1（相対値）伸長*/
}












/* ハンバーガーメニュー */

.menu-trigger{
	position:absolute;
	top:15px;
	right:0;
	transform: scale(0.7);
	z-index: 100;
}
.menu-trigger,
.menu-trigger span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}
.menu-trigger {
  position: relative;
  width: 50px;
  height: 44px;
  background: none;
  border: none;
  appearance: none;
  cursor: pointer;
}
.menu-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #fff;
  border-radius: 4px;
}
.menu-trigger span:nth-of-type(1) {
  top: 0;
}
.menu-trigger span:nth-of-type(2) {
  top: 20px;
}
.menu-trigger span:nth-of-type(3) {
  bottom: 0;
}

#menu01.active span:nth-of-type(1) {
  transform: translateY(20px) rotate(-45deg);
}
#menu01.active span:nth-of-type(2) {
  opacity: 0;
}
#menu01.active span:nth-of-type(3) {
  transform: translateY(-20px) rotate(45deg);
}

.navToggle{
	display:none;
}


/***********************
サブメニュー
************************/

#header .submenu{
	position:absolute;
	top:0;
	right:0;
	display:flex;
	gap:0 22px;
	justify-content:flex-end;
}


.submenu .submenu-item-sp,
.submenu .submenu-item-icon{
	display:none;
}

#header:not(.scrolled) .submenu a{

}

.submenu a img{
}




.submenu-sp{
	display:none;
}




/***********************
スクロール追従
************************/


#header.scrolled{
	position:fixed;
	top:0;
	left:0;
	height:74px;
}
#header.scrolled h1 {
	width:60px;
	overflow:hidden;
}
#header.scrolled h1 img{
	height:44px;
	max-width: initial;
}

#header.scrolled .submenu a{
	margin-top:10px;
}

#header.scrolled .submenu-item-pc{
	display:none;
}
#header.scrolled .submenu-item-icon{
	display:block;
}



/**********************************************

フッター

***********************************************/
#footer {
	position:relative;
	padding-bottom:20px;
}

#gotoTop {
	display:block;
	position:absolute;
	top:-34px;
	right:70px;
}
/*
#gotoTop {
	display:block;
	position:fixed;
	top:initial;
	bottom:270px;
	right:70px;
}
*/



.site-footer{
	background-color:#FEA3A3;
	padding-top:40px;
	color:#FFF;
}

.site-footer .inner{
	display:flex;
	flex-wrap: wrap;
	justify-content:space-between;
	gap:15px;
}

.footer-left{
	flex:0 0 auto;
}
.footer-right{
	flex:0 0 auto;
}

.footer-right p{
	font-size:17px;
	line-height:1.8;
}

.footer-bottom {
	border-top:1px solid #FFF;
	flex:0 0 100%;
}


.footer-bottom p{
	margin-top:10px;
	font-size:16px;
	line-height:1.8;

}
	



#menu-footer{

	width:300px;
	height:180px;
	margin:0;
	padding:0;
	list-style:none;
	column-fill:auto;
	column-count:2;
}

#menu-footer li{
	margin-bottom:28px;
}

#menu-footer li a{
	color:#FFF;
	text-decoration:none;
}



.page-content{
	margin-bottom:120px;
}



/**********************

固定ページ共通

***********************/

.page-header .post-edit-link{
	position:absolute;
	bottom:10px;
	right:10px;
}

.page-header {
	background-image:url("../images/header_bg.jpg");
	background-size:cover;
	background-repeat: no-repeat;
	height:210px;
	text-align:center;
	display:flex;
	align-items:center;
	justify-content:center;
	color:#FEA3A3;
	flex-wrap: wrap;
	flex-direction:column;
	position:relative;
}

.page-title{
	font-size:40px;
	letter-spacing:7px;
	font-weight:700;
	margin:0;
}
.page-title::after{
	display:block;
	font-size:17px;
	font-weight:400;
	letter-spacing:2px;
	margin-top:10px;
}


.page-header span{
	display:block;
}




.about-us .page-title::after{
	content:"私たちについて";
}
.achievement .page-title::after{
	content:"活動実績";
}
.member .page-title::after{
	content:"メンバー紹介";
}
.research .page-title::after{
	content:"研究テーマ";
}
.news .page-title::after{
	content:"お知らせ";
}
.message .page-title::after,
.message-1 .page-title::after,
.message-2 .page-title::after,
.message-3 .page-title::after{
	content:"メッセージ";
}
.contact .page-title::after,
.confirm .page-title::after,
.complete .page-title::after{
	content:"お問い合わせ";
}
.privacy .page-title::after{
	content:"個人情報のお取り扱いについて";
}


/**********************

パンくずリスト

***********************/

.breadcrumbs{
	margin-top:10px;
}

.page-content{
	min-height:30vh;
	margin-top:60px;
	margin-bottom:60px;
}






/**********************

投稿ページ

***********************/
.entry-header {
	margin-bottom:30px;
}
.entry-header h1.entry-title{
	font-size:22px;
	margin-bottom:20px;
	color:#FEA3A3;
}




.entry-header h2.entry-title{
	font-size:22px;
	margin:0;
}





/**********************************************

HOME

***********************************************/

.home .page-header{
	display:none;
}

.home .entry-header{
	display:none;
}

.home .page-content,
.home.page-content,
#home.page-content{
	margin-top:0;
}

/************************
	メインビジュアル
*************************/

.main-visual{
	width:100%;
	background-image:url("../images/main.jpg");
	background-position: top center;
	background-repeat: no-repeat;
	background-size:cover;
	aspect-ratio: 16/9;
	margin-bottom:120px;

	display:flex;
	align-items:flex-end;
}

.main-visual-bottom{
	width:100%;
}

.main-visual h2.catchcopy{
	transform:translateY(50%);
}

/************************
	セクション
*************************/

.home section{
	margin-bottom:110px;
}


#home_about_us{
	margin-botom:20px;
}

.txt-large{
	font-size:22px;
	line-height:1.72;
}

.sec-header{
	color:#FEA3A3;
}
.sec-header h2{
	font-weight:700;
	font-size:40px;
	margin:0;
}

.sec-header span{
	display:block;
	margin-top:10px;
	font-size:17px;
	letter-spacing: 3px;
}


/************************
	NEWS
*************************/
#home_news{
	background-image:url("/images/header_bg.jpg");
	background-size:cover;
	background-repeat: no-repeat;
}

#home_news .inner{
	padding-top:40px;
	padding-bottom:40px;
}

#home_news .post-list{
	display:block;
	padding:0;
	margin:0;
	list-style: none;
	padding-top:20px;
	padding-bottom:20px;
}
#home_news .post-list li{
	display:flex;
	gap:10px 15px;
	margin-bottom:15px;
	font-size:12px;
	color:#505050;
	line-height:20px;		
}
#home_news .post-list .post-date{
	flex:0 0 60px;
	white-space: nowrap;
}
#home_news .post-list .post-cat{
	flex:0 0 100px;
}
#home_news .post-list .post-cat a{
	width:100px;
	height:20px;
	line-height: 20px;
	font-size: 12px;
	background-color: #FEA3A3;
	color: #FFF;
	text-decoration: none;
	display: block;
	text-align:center;
}
#home_news .post-list .post-title{
	flex:1 1 auto;
	white-space: nowrap;
	text-decoration: none;
}
#home_news .post-list .post-title a{
	color:#505050;
	text-decoration: none;
}
/* ニュース */
@media screen and (max-width:768px){
	#home_news{
		background-image:url("../images/header_bg_sp.png");
		background-size:cover;
		background-repeat: no-repeat;
	}
	
	#home_news .post-list li{
		flex-wrap: wrap;
	}
	#home_news .post-list .post-title{
		flex:1 1 100%;
	white-space: normal;
	}
}




/******************************
	グリッド形式のセクション
*******************************/
#home_member .sec-text,
#home_achiveement .sec-text,
#home_research .sec-text{
	margin-top:30px;
}

/* バブル １*/
#home_member .sec-image{
	position:relative;
	z-index: -1;
}
#home_member .deco{
	position:absolute;
	bottom:-50px;
	right:4%;
	/*transform:translateY(50%);*/
}

/* バブル ２*/
#home_research .sec-header{
	position:relative;
	z-index: -1;
}
#home_research .sec-header .deco{
	position:absolute;
	top:-40px;
	left:-60px;
}

/* バブル ３ */
#home_research .inner {
	position:relative;
	z-index: 0;
}
#home_research .inner .deco{
	position:absolute;
	bottom:-60px;
	left:-60px;
}

@media screen and (max-width:767px){
	
#home_member .deco{
	position:absolute;
	bottom:-30px;
	right:4%;
	width:90px;
}
	
	
	#home_research .sec-header .deco{
		display:none;
	}
	#home_research .inner .deco{
		display:none;
	}
	
	
	
}


/* HOMEのセクションのグリッド
	PC画面
*/
@media screen and (min-width:768px){

	#home_member .sec-image{
		height:384px;
		position:relative;
	}
	#home_member .sec-image > img{
		position:absolute;
		top:0;
		right:0;
		width:690px;
		max-width: initial;
		z-index:-1;
	}
	
	
	#home_research .sec-header{
		padding-top:50px;
	}

	
	.sec-grid-rev {
		width: 100%;
		display: grid;
		grid-template-columns: 480px 1fr; /*列を指定*/
		grid-template-rows: auto 1fr; /*行を指定*/
		grid-template-areas:
		"b a"
		"b c";
		gap: 0 80px;
	}
	.sec-grid-rev .sec-header {
		grid-area: a;
	}

	.sec-grid-rev .sec-image {
		grid-area: b;
	}

	.sec-grid-rev .sec-text {
		grid-area: c;
		line-height: 1.5;
		font-size: 14px;
	}

	.sec-grid {
		width: 100%;
		display: grid;
		grid-template-columns: 1fr 480px; /*列を指定*/
		grid-template-rows: auto 1fr; /*行を指定*/
		grid-template-areas:
		"a b"
		"c b";
		gap: 0;
	}
	.sec-grid .sec-header {
		grid-area: a;
	}
	.sec-grid .sec-image {
		grid-area: b;
	}
	.sec-grid .sec-text {
		grid-area: c;
		line-height: 1.5;
		font-size: 14px;
	}

}



#home_message{
	background-image:url("/images/header_bg.jpg");
	background-size:100% 320px;
	background-repeat: no-repeat;
	background-position: center center;
	padding:0;
}

#home_message .sec-header h2{
	margin-bottom:20px;
}



@media screen and (max-width:768px){
	
	
	#home_message .sec-header h2{
		
	}
	#home_message .sec-grid {
		width: 100%;
		display: grid;
		grid-template-columns: 1fr 35%; /*列を指定*/
		grid-template-rows: auto 1fr; /*行を指定*/
		grid-template-areas:
		"a b"
		"c c";
		gap: 0 20px;
	}
	#home_message .sec-grid .sec-header {
		grid-area: a;
		margin-bottom: 0;
	}
	#home_message .sec-grid .sec-image {
		grid-area: b;
	}
	#home_message .sec-grid .sec-image {
		grid-area: b;
	}
	#home_message .sec-grid .sec-text {
		grid-area: c;
		line-height: 1.5;
		font-size: 14px;
	}
	
	
	#home_message {
		background-size: 100% 300px;
		background-position: center 70px;
	}
	#home_message .sec-text {
		padding-top:30px;
		padding-bottom:30px;
	}
	
	#home_message .sec-grid {
		/display: flex;
		flex-wrap:wrap;
	}
	
	#home_message .sec-grid .sec-header {
		flex:1 0 auto;
		display:flex;
		align-items: flex-end;
	}
	#home_message .sec-grid .sec-header h2 {
		margin-bottom:0;
	}
	
	#home_message .sec-grid .sec-image {
		flex:0 0 120px;
	}
	#home_message .sec-grid .sec-img img {
		max-width:100%;
	}
	#home_message .sec-grid .sec-text {
		flex:1 1 100%;
	}
	
}



/*バナー*/
.bnr-wrap{
	
}

.bnr-wrap .bnr-item{
	display:inline-block;
}





/*******************
お問い合わせ
********************/
#page_contact form,
#page_confirm form{
	margin:0 auto;
	width:900px;
	max-width:100%;
}


.wpcf7 label > span{
	margin-left:10px;
	color:#E31717;
	font-size:13px;
	vertical-align: baseline;
	
	
}

.page-contact input[type="text"],
.page-contact input[type="email"],
.page-contact input[type="tel"],
.page-contact textarea{
	color:#505050;
	width:100%;
	padding:3px 10px;
	border:1px solid #505050;
	font-size:20px;
	
}

.page-contact p{
	margin-bottom:20px;
	font-size:20px;
}
.wpcf7-form-control-wrap{
	display:block;
	margin-top:20px;
}

input.btn-confirm{
	background: url("/images/btn-confirm.png") no-repeat;
	width:141px;
	height:36px;
	color: transparent;
	transition: .3s;
}
input.btn-confirm:hover{
    transform: translateX(5px);
}



#page_confirm article P{
	font-size:20px;
	margin-bottom:1.5em;
}

#page_confirm .confirm-buttons{
	margin-top:60px;
}

#page_confirm .confirm-buttons p{
	display:flex;
	justify-content: center;
	gap:34px;
}

#page_confirm .confirm-buttons p > *{
	width:145px;
	height:36px;
}
#page_confirm .confirm-buttons p .wpcf7-spinner{
	display:none;
}

#page_confirm .btn-back{
	background: url("/images/btn-back.png") no-repeat;
	width:141px;
	height:36px;
	color: transparent;
	transition: .3s;
}
#page_confirm .btn-send{
	background: url("/images/btn-send.png") no-repeat;
	width:141px;
	height:36px;
	color: transparent;
	transition: .3s;
}


#page_confirm .btn-back:hover{
    transform: translateX(-5px);
	
}

#page_confirm .btn-send:hover{
    transform: translateX(5px);
	
}


#page_confirm .wpcf7-response-output{
	padding:20px;
	font-size:20px;
	border:2px solid #FEA2A2;
	line-height:1.5;
}


@media screen and (max-width:900px){
	
	.inner-range{
		padding-left:20px;
		padding-right:20px;
	}
	#home_member .inner-range{
		padding-left:0;
		padding-right:0;
	}
	#home_member .sec-text{
		padding-left:20px;
		padding-right:20px;
	}

	/***********************
	    ヘッダー
	************************/
	
	
	#header {
		posiiton:fixed;
		z-index:10;
	}

	.menu-trigger{
		display:block;
	}
	#header{
		height:74px;
	}
	#header h1{
		width:auto!important;
		max-width: initial;
	}
	#header h1 img{
		height:44px;
		max-width: initial;
	}
	

	/***********************
	    スマホナビ
	************************/
	
	.navToggle{
		display:block;
	}

	nav.globalMenuSp {
		position: fixed;
		z-index: 30;
		top: -150%;
		left: 0;
		color: #FFF;
		background-color: #FEA3A3;
		/*transform: translateY(-150%);*/
		transition: all 0.6s;
		width: 100%;
		height:100vh
	}
	nav.globalMenuSp.active {
		top: 0;
	}
	
	#primary-menu {
		list-style: none;
		display:block!important;

		backdrop-filter: blur(3px);
		margin: 0 auto;
		padding: 14vh 30px;
		width: 100%;
	}
	#primary-menu li {
		padding: 20px 0;
		width: 100%;

	}
	#primary-menu li:first-child img {
		width: 50%;
		height: auto;
		margin: 0 auto;
		padding: 10px;
	}

	#primary-menu li a {
		display: inline-block;
		font-size:24px;
		line-height:27px;
		font-weight:500;	
		color: #fff;
	}
	
	#header .submenu{
		display:none;
	}

	#header .submenu-sp{
		display:flex;
		padding:30px;
		gap:20px;
		justify-content: center;
		
	}
	#header .submenu-sp a{
		flex:1 1 auto;
	}
	

	
	/***********************
	    フッター
	************************/
	
	.site-footer{
		padding-top:40px;
	}


	/***********************
	    HOME セクション
	************************/
	
	.home section{
		
	}
	
	.sec-header{
		text-align:center;
		margin-bottom:30px;
	}
	.sec-image{
		text-align:center;
	}
	.sec-text{
		max-width:420px;
		margin:0 auto;
	}
	
	

	
}

@media screen and (max-width:768px){

	
	.home section {
		margin-bottom: 80px;
	}
	
	.main-visual{
		width:100%;
		aspect-ratio: 2/3;
		margin-bottom:100px;
	}
	.page-header{
		height:150px;
	}
	.page-content{
		margin-top:40px;
		margin-bottom:40px;
	}
	
	
	#gotoTop {
		right:30px;
	}
}