@charset "utf-8";

:root {
	/*全体背景*/
	--body-color: rgb(253, 253, 253);
	/*全体文字色*/
	--text-color: #494949;
	/*全体文字色(ヘッダー)*/
	--text-color-header: rgb(253, 249, 245);
	/*ボタン色*/
	--btn-text-color: #f4f3f1;
	--btn-background-color: #A7A297;
	/*ボックス色１*/
	--area-background-color: #f4f3f1;
	/*ボックス色２*/
	--area-background-color2: rgb(245, 237, 230);
	/*スマホナビバー色*/
	--background-navbar: rgb(245, 237, 230,0);
	/*スマホナビバーメニュー色*/
	--background-navbar-menu: rgb(245, 237, 230,1);
	/*全体文字色*/
	/*全体文字色*/

		
}

  /*========= レイアウトのためのCSS ===============*/
  
  html,body {
	overflow-x: hidden;
	color: var(--text-color);
  }

  

  #header{
	background:rgb(206, 206, 206);
  }
  
  h1{
	font-size:1.5rem;
	text-align: center;
	text-transform: uppercase;
	padding: 20px;
	color: var(--text-color-header);
  }
  
  h2{
	font-size:1.2rem;
	text-align: center;
	margin: 0 0 30px 0;
  }
  
  a{
	color:var(--text-color);
  }

  input[type="radio"] {
	margin-left: 7px;
	margin-right: 7px;
	position: relative;
	width: 16px;
	height: 16px;
	border: 1px solid var(--text-color);
	border-radius: 50%;
	vertical-align: -2px;
	-webkit-appearance: none;
	   -moz-appearance: none;
			appearance: none;
  }
  
  input[type="radio"]:checked:before {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--text-color);
	content: '';
  }
  input[type="checkbox"] {
	margin-left: 7px;
	margin-right: 7px;
	position: relative;
	width: 16px;
	height: 16px;
	border: 1px solid var(--text-color);
	border-radius: 0%;
	vertical-align: -2px;
	-webkit-appearance: none;
	   -moz-appearance: none;
			appearance: none;
  }
  
  input[type="checkbox"]:checked:before {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 9px;
	height: 9px;
	border-radius: 0%;
	background: var(--text-color);
	content: '';
  }

body {
	margin: 0;
	font-family: "ヒラギノ角ゴProN", "遊ゴシック", sans-serif;
	font-weight: 300;
	background-color: var(--body-color);
  }
  

.fixed-background-top { 
	height: 90vh;
  }

  .background-1{ 
	width: 100%;
	background-size: contain;
	background-position: top,left 50%;
  }


.fixed-background-top p{
	position: absolute;/*絶対配置*/
	color: #ffffff;
	width: 70%;
	margin-top:0px;
	margin-left:35%;
	padding: 20px;
	top: 25%;
	-webkit-backdrop-filter: brightness(.7);
	backdrop-filter: brightness(.7);
}
.fixed-title-top{
	font-size: 3.5em;
	font-weight: 200;
	width: 80%;
	line-height: 1em;
}

.fixed-background {
	min-height: 38vh;
	position: relative;
    clip-path: inset(0);
  }
  .fixed-background img{
	object-fit: cover;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  .fixed-background p{
	position: absolute;/*絶対配置*/
	color: var(--text-color-header);
	top: auto;
	left: 0;
	bottom: -15px;
  }

  .fixed-title{
	justify-content: center;
	font-size: 11em;
	font-weight: 500;
	color: var(--text-color-header);
	width: 100%;
	margin: 0%;
	padding-left: 0%;
	padding-top: 10vh;
	line-height: 1em;
	font-family: 'segoe print','gill sans';
  }
  
  .fixed-h-back{
	background-position: center 20px;
	align-items: center;
	justify-content: center;
	background-color:rgba(255, 255, 255, 0.8);
	background-blend-mode:lighten;
	background-size: 200px;
  }
  .h-background-1 {
	background-image: url(../img/niku_blue.png);
  }
  .h-background-2 {
	background-image: url(../img/niku_bro.png);
  }
  .h-background-3 {
	background-image: url(../img/niku_gray.png);
  }
  .h-background-4 {
	background-image: url(../img/niku_green.png);
  }
  .h-background-5 {
	background-image: url(../img/niku_red.png);
  }
  .h-background-6 {
	background-image: url(../img/niku_blue.png);
  }
  .snsicon{
	left: 80%;
	position: relative;
	transform: translateX(-100%); 
	top: -200px;
	width: 50px;
	height: 0px;
	}
	.snsicon img{
		transition: 0.5s;
		width:100%;
		margin-bottom: 7px;
	}
	.snsicon img:hover{
		opacity: 0.4;
	}
	.snsicon-top{
		left: 98%;
		position: relative;
		transform: translateX(-100%); 
		top: 300px;
		width: 50px;
		height: 0px;
		transition: 1s;
	}
	.snsicon-top img{
		width:100%;
		margin-bottom: 7px;
	}
  
	section{
		padding: 50px;
		margin-bottom: 100px;
	}
	section:first-child{
		padding:120px 100px 0px;
	}
	
	section:nth-child(2n){
		background:var(--text-color-header); 
	}
  
/*========= スクロール途中からヘッダーの高さが小さくなるためのCSS ===============*/
#header{
	position: fixed;
	z-index: 999;/*最前面へ*/
    /*はじめの高さを設定*/
	height: 70px;
	width:100%;
   /*以下はレイアウトのためのCSS*/
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: rgba(255, 255, 255, 0.562);
	color:var(--text-color-header);
	background-repeat: no-repeat;
	background-size:cover;
	
}
.headerimg{
	margin-top: 0px;
	margin-left: 0px;
	width:auto;
	height:60px;
}

/*========= レイアウトのためのCSS ===============*/

h1{
	font-size:1.2rem;
}

h2{
	font-size:1.2rem;
	text-align: center;
	margin: 0 0 30px 0;
}

p{
	margin-top:80px;
}

small{
	background:var(--btn-background-color);
	color:var(--text-color);
	display: block;
	text-align: center;
	padding:20px;
}

nav{
	width: 100%;
}
nav ul{
	display: flex;
	justify-content: left;
    margin-right: 50px;
    padding: 0;
}
nav ul li{
	display: inline-block;
	width: 100%;
	min-width: 80px;
	list-style: none;
	text-align: center;
	vertical-align:bottom;
}
nav ul li a{
	display: block;
	text-decoration: none;
	color: var(--text-color-header);
	padding:10px;
	transition:all 0.3s;
}

nav ul li.current a,
nav ul li a:hover{
	color:var(--text-color-header);	
}

section:nth-child(2n){
	background:var(--text-color-header);
}
.nomallist{
	width:100%;
	list-style: none;
	background-color: var(--body-color);
}
.nomallist li{
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 40px;
}
.nomallist div{
	width:100%;
	height: auto;
}

.nomallist p{
	margin-top:0px;
	line-height: 2em;
}
.nomallist .gl{
	width:100%;
height: 890px;
}
.nomallist .sl{
	width:100%;
	height: 400px;
}
.imagelist li{
	/*線の起点とするためrelativeを設定*/
	height: 400px;
	margin: auto;
	position: relative;
	
}
.imagelist div{
	width:50%;
	position: absolute;
	top: 50%;
  	left: 50%;
  	-webkit-transform : translate(-50%,-50%);
  	transform : translate(-50%,-50%);
}
.imagelist p{
	margin-top:0px;
	line-height: 2em;
}


.imagelist li:nth-child(1){
	background: url(../img/si.png) left 0px top 3px no-repeat;
	background-color:rgba(255,255,255,0.5);
	background-blend-mode:lighten;
	background-size:cover;
	width:100%;
}

.imagelist li:nth-child(2){
	background: url(../img/dev.png) left 0px top 3px no-repeat;
	background-color:rgba(255,255,255,0.5);
	background-blend-mode:lighten;
	background-size:cover;
	width:100%;
}
.imagelist li:nth-child(3){
	background: url(../img/phone.png) left 0px top 3px no-repeat;
	background-color:rgba(255,255,255,0.5);
	background-blend-mode:lighten;
	background-size:cover;
	width:100%;
}

/*==================================================
ふわっ
===================================*/


/* fadeUp */

.fadeUp{
	animation-name:fadeUpAnime;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
	opacity:0;
	}
	
	@keyframes fadeUpAnime{
	  from {
		opacity: 0;
	  transform: translateY(100px);
	  }
	
	  to {
		opacity: 1;
	  transform: translateY(0);
	  }
	}
	
	
	/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
	 
	.fadeUpTrigger{
		opacity: 0;
	}


/*マウスオーバーテキスト切り替え*/
.switch_text {
    display: inline-block;
    position: relative;
    color: var(--text-color);
    transition: 0.8s;
	margin-top: 30px;
}
.switch_text::before {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    color: transparent;
    text-align: center;
    white-space: nowrap;
    transition: 0.8s;
    content: attr(data-hover-text);
}
.switch_text:hover {
    color: transparent;
}
.switch_text:hover::before {
    color: var(--text-color);
}

.iframeWrap {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}

.iframeWrap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.iframeBanoff {
	position: relative;
	padding-bottom: 56.25%;
	height: 700px;
	overflow: hidden;
}
.iframeBanoff iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

iframe[src*="youtube.com"],
iframe[src*="youtube-nocookie.com"] {
width: 100%;
height: auto;
}
.yiframe[src*="youtube.com"],
.yiframe[src*="youtube-nocookie.com"] {
	aspect-ratio: 16 / 9;
}

.hide-pc{
	display: none;
}


.arrows {
	width: 100px;
	height: 120px;
	position: absolute;
	left: 50%;
	margin-left: -30px;
	bottom: 140px;
  }
  
  .arrows path {
	stroke: var(--text-color);
	fill: transparent;
	stroke-width: 4px;  
	animation: arrow 2s infinite;
	-webkit-animation: arrow 2s infinite; 
  }
  

/*なかみのレイアウト*/

/*コンセプトのデザイン*/
.area-1-text {
	position: relative;
	background: rgb(255, 255, 255);
	height: 1600px;
}

.area-1-box1{
	position: absolute;
	height: 450px;  /*高さ*/
	width: 80%;  /*幅*/
	background-color: var(--area-background-color);
	top:100px;
	left:10%;
}

.area-1-box2{
	position: absolute;
	height: 600px;  /*高さ*/
	width: 400px;  /*幅*/
	/*★コンセプト１枚目*/
	background-image: url(../img/box1.png);
	background-position: left, center;
	background-size: cover;
	top:50px;
	right:10%;
}

.area-1-box3{
	position: absolute;
	height: 700px;  /*高さ*/
	width: 60%;  /*幅*/
	background-color: var(--area-background-color2);
	top:700px;
	right:15%;
}

.area-1-box4{
	position: absolute;
	height: 500px;  /*高さ*/
	width: 400px;  /*幅*/
	/*★コンセプト２枚目*/
	background-image: url(../img/gallery07.jpg);
	background-position: right, center;
	background-size: cover;
	top:630px;
	left:1%;
}
.area-1-box5{
	position: absolute;
	height: 300px;  /*高さ*/
	width: 500px;  /*幅*/
	/*★コンセプト３枚目*/
	background-image: url(../img/box5.jpg);
	background-position: bottom, center;
	background-size: cover;
	top:1100px;
	right:0%;
}
.area-1-box6{
	position: absolute;
	height: 500px;  /*高さ*/
	width: 70%;  /*幅*/
	background-color: rgb(248, 245, 241);
	top:1200px;
	left:0%;
}

.area-1-text1{
	position: absolute;
	top:50px;
	left: -50px;
	font-size: 5em;
	font-weight: 500;
}
.area-1-text2{
	position: absolute;
	top:250px;
	left: -10px;
	font-size: 2em;
	font-weight: 400;
	
}
.area-1-text3{
	position: absolute;
	top:750px;
	left: 50%;
	font-size: 2em;
	font-weight: 400;
}
.area-1-text4{
	position: absolute;
	top:1400px;
	left: 10%;
	font-size: 2em;
	font-weight: 400;
}

/*参加方法のデザイン*/
.area3-midashi {
	position:relative;
	display: inline-block;
	border:1px solid #494949;
	height: 200px;
	width: 49%;
	text-align: left;
	padding:20px;
	vertical-align:middle;
	font-size: 1.2em;
}
.area3-midashi:after{
	content: attr(midashi);
	position: absolute;
	top: -13px;
	left: 10px;
	background-color: var(--body-color);
	font-size: 0.7em;
	color: #414141;
	padding: 0 10px;
}
.area3-midashi span{
	font-size: 0.5em;
}
.area-3-box1{
	position: absolute;
	height: 450px;  /*高さ*/
	width: 100%;  /*幅*/
	background-color: rgb(248, 245, 241);
	top:300px;
	left:0%;
}

a.area-3-btn {
	display: block;
	text-align: center;
	text-decoration: none;
	width: 220px;
	margin-top: 20px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 13px;
	font-weight: bold;
	border: 1px solid var(--btn-text-color);
	color: var(--btn-text-color);
	border-radius: 100vh;
	background-color:var(--btn-background-color);
	transition: 0.5s;
	height: 50px;
	font-size: 0.7em;
	font-weight: 400;
	
}
a.area-3-btn:hover {
	color: rgb(241, 241, 241);
	background: rgb(160, 128, 96);
}

.nextentry{
	position: relative;
	height: 32px;
	line-height: 70px;
	padding: 0 0 0 20px;
	font-size:15px;
	border: 1px solid var(--btn-background-color);
	border-radius: 3px;
	margin-bottom: 10px;
	max-width: 400px;

}
.nextentry::before{
	content: attr(title);
	position: absolute;
	right: 0;
	top: 0;
	padding:0 20px;
	font-size:15px;
	background: var(--btn-background-color);;
	color: var(--btn-text-color);
}

.schedule{
	background-position: top, center;
	background-size: contain;
	width: 100%;
	height: 50vh;
	/*★大まかなスケジュール画像(PC)*/
	background-image:url(../img/schedule_pc.jpg);
}



/*ギャラリーのデザイン*/
/*配信のデザイン*/
.remote-exp{
	margin: 1em 0.3em 1em; /* 外側の余白（上下と中央配置） */
    padding: 2em; /* 内側余白 */
    position: relative;
    z-index: 0;
    background-color: var(--area-background-color); /* 薄いベージュ */
	max-width: 100%;
	min-height: 520px;
	background-position: center 20px;
	background-size: 80%;
	text-align: left;
}
.remote-exp::before {
    content: '';
    position: absolute;
    inset: 0; /* top, right, bottom, left を一括指定 */
    margin: 20px;
	margin-right: 30px;
    border: 2px dashed #A7A297;
    border-radius: 10px;
    z-index: -1;
    display: block;
}

/*お知らせのデザイン*/
.fusen-3 {
    display: flex;
    align-items: center;
    position: relative;
    width: 80%;
    height: 240px;
    padding: 2.5em 2em;
    background-color: #f0e8ee;
    color:var(--text-color);
	margin-left: 0px;
}

.fusen-3::before {
    position: absolute;
    bottom: -5px;
    right: 7px;
    z-index: -1;
    transform: rotate(5deg);
    width: 70%;
    height: 50%;
    background-color: rgb(206, 206, 206);
    content: "";
    filter: blur(4px);
}
.fusen-3 h3{
	position: absolute;
	font-size: 1em;
	margin-right: 10px;
	top: 10px;
}

/*スタッフのデザイン*/
.area-7-box{
	display: flex;
	justify-content: center;
	width: 100%;
	flex-wrap: wrap;
}
.area-7-prof{
	margin: 1em 0.3em 1em; /* 外側の余白（上下と中央配置） */
    padding: 2em; /* 内側余白 */
    position: relative;
    z-index: 0;
    background-color: var(--area-background-color); /* 薄いベージュ */
	max-width: 350px;
	min-height: 500px;
	background-position: center 20px;
	background-size: 80%;
	text-align: center;
}
.area-7-prof::before {
    content: '';
    position: absolute;
    inset: 0; /* top, right, bottom, left を一括指定 */
    margin: 5px;
    border: 2px dashed #A7A297;
    border-radius: 10px;
    z-index: -1;
    display: block;
}

.staff1{
	background-image: url(../img/staff01.jpg);
}
.staff2{
	background-image: url(../img/staff02.jpg);
}
.staff3{
	background-image: url(../img/staff03.jpg);
}
.staff4{
	background-image: url(../img/staff04.jpg);
}
.staff5{
	background-image: url(../img/staff05.jpg);
}

a.area-7-btn {
	display: block;
	text-align: center;
	text-decoration: none;
	width: 120px;
	margin-top: 20px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
	padding-top: 5px;
	font-weight: bold;
	border: 1px solid #f4f3f1;
	color: var(--btn-text-color);
	border-radius: 100vh;
	background-color: var(--btn-background-color);
	transition: 0.5s;
	height: 30px;
	font-size: 0.7em;
	font-weight: 400;
	
}
a.area-7-btn:hover {
	color: rgb(245, 245, 245);
	background: rgb(192, 160, 160);
}

.area-7-prof p {
	margin-top: 100%;
	font-size: 0.9em;
}
.area-7-prof p span{
	font-size: 1.5em;
	font-weight: 500;
}

.area-7-prof img{
	width: 35px;
	margin: 10px;
}

/*FAQのデザイン*/
.accordion-007 {
    width: 100%;
    margin-bottom: 15px;
}

.accordion-007 summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 1em 2em;
    border: 2px solid var(--btn-text-color);
	background-color: var(--btn-background-color);
    border-radius: 5px;
    color: var(--btn-text-color);
    font-weight: 600;
    cursor: pointer;
}

.accordion-007 summary::-webkit-details-marker {
    display: none;
}

.accordion-007 summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    border-bottom: 3px solid var(--btn-text-color);
    border-right: 3px solid var(--btn-text-color);
    content: '';
    transition: transform .3s;
}

.accordion-007[open] summary::after {
    transform: rotate(225deg);
}

.accordion-007 p {
    position: relative;
    transform: translateY(-10px);
    opacity: 0;
    margin-top: 20px;
    padding: .8em 1.2em;
    border: 2px solid var(--btn-background-color);
    border-radius: 5px;
    background-color: rgb(252, 252, 252);
    color: var(--text-color);
    transition: transform .5s, opacity .5s;
}

.accordion-007[open] p {
    transform: none;
    opacity: 1;
}

.accordion-007 p::before,
.accordion-007 p::after {
    position: absolute;
    top: -15px;
    left: 1.2em;
    width: 30px;
    height: 15px;
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
    content: '';
}

.accordion-007 p::before {
    background-color: var(--btn-background-color);
}

.accordion-007 p::after {
    top: -12px;
    background-color: rgb(252, 252, 252);
}



  @keyframes arrow
  {
  0% {opacity:0}
  40% {opacity:1}
  80% {opacity:0}
  100% {opacity:0}
  }
  
  @-webkit-keyframes arrow /*Safari and Chrome*/
  {
  0% {opacity:0}
  40% {opacity:1}
  80% {opacity:0}
  100% {opacity:0}
  }
  
  .arrows path.a1 {
	animation-delay:-1s;
	-webkit-animation-delay:-1s; /* Safari 和 Chrome */
  }
  
  .arrows path.a2 {
	animation-delay:-0.5s;
	-webkit-animation-delay:-0.5s; /* Safari 和 Chrome */
  }
  
  .arrows path.a3 { 
	animation-delay:0s;
	-webkit-animation-delay:0s; /* Safari 和 Chrome */
  }

@media screen and (max-width: 767px) {
	main{
		/*コレ*/margin-left: calc(-50vw + 50%);
    /*コレも忘れずに*/width: 100vw;
	}


	.nomallist .iframeWrap{
		width:100%;
	}

	.nomallist .iframeBanoff{
		width:100%;
	}

	.nomallist li{
		width: 90%;
		margin-left: 20px;
		margin-right: 0px;
		margin-bottom: 40px;
	}

	.nomallist .gl{
		width:100%;
		height: 600px;
	}

	.hide-sp{
		display: none;
	}


	  /* Navbar & Navmenu color */


	  .headerimg{
		margin-top: 8px;
		width:auto;
		height:60px;
	}
	  
	  #header {
		background: var(--background-navbar);
		position: fixed;
		width: 100%;
		height: 52px;

	  }

	  /* Nav items */
	  .menu {
		list-style: none;
		position: absolute;
		width: 100%;
		height: auto;
		top: 0;
		margin-top: 0px;
		padding: 0 0 0 0;
		clear: both;
		background: var(--background-navbar-menu); 
		transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
		transform: scale(1, 0);
		transform-origin: top;
	  }
	  
	  /* Hamburger menu button */
	  .menu-btn:checked ~ .menu {
		transform: scale(1, 1);
		transform-origin: top;
		transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
	  }
	  
	  /* Hamburger menbu text */
	  .menu a {
		text-decoration: none;
		font-weight: 300;
		font-size: 25px;
		text-transform: capitalize;
		color: var(--text-color);
		opacity: 0;
		transition: 0.5s;
	  }
	  .menu a span{
		font-size: 10px;
		margin-left: 10px;
	  }
	  
	  .menu li {
		border-top: 0px solid #494949;
		margin: 30px 30px;
		opacity: 0;
		transition: 0.5s;
	  }
	  
	  .menu-btn:checked ~ .menu a,
	  .menu-btn:checked ~ .menu li {
		opacity: 1;
		transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.2s;
	  }
	  
	  .menu-btn {
		display: none;
	  }
	  
	  .menu-icon {
		display: inline-block;
		position: relative;
		cursor: pointer;
		padding: 24px 14px;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	  }
	  
	  .navicon {
		background: var(--text-color);
		display: block;
		height: 3px;
		width: 26px;
		position: relative;
		transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
	  }
	  
	  .navicon:before,
	  .navicon:after {
		content: "";
		display: block;
		height: 100%;
		width: 100%;
		position: absolute;
		background: var(--text-color);
		transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
	  }
	  
	  .navicon:before {
		top: 9px;
	  }
	  
	  .navicon:after {
		bottom: 9px;
	  }
	  
	  /* Hamburger Menu Animation Start */
	  .menu-btn:checked ~ .menu-icon .navicon:before {
		transform: rotate(-45deg);
	  }
	  
	  .menu-btn:checked ~ .menu-icon .navicon:after {
		transform: rotate(45deg);
	  }
	  
	  .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before {
		top: 0;
	  }
	  .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
		bottom: 0;
	  }
	  
	  .menu-btn:checked ~ .menu-icon .navicon {
		background: rgba(0, 0, 0, 0);
		transition: 0.2192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
	  }
	  /* Hamburger Menu Animation End */
	  
	  /* Navbar Container */
	  .navtext-container {
		width: 100%;
		height: 65px;
		position: absolute;
		box-sizing: border-box;
		display: flex;
		justify-content: left;
		align-items: center;
	  }
	  
	  /* Navbar Text */
	  .navtext {
		position: absolute;
		text-transform: uppercase;
		color: var(--text-color-header);
		letter-spacing: 4px;
		font-size: 20px;
	  }


	.fixed-title{
		justify-content: left;
		font-size: 4em;
		font-weight: 700;
		width: 100%;
		margin-left: 10px;
		padding-top: 30vh;
		line-height: 2em;
	  }
	  .fixed-background-top {
		height: 50vh;
	  }
	  .background-1{ 
		background-position:center top;                     /* 画像の表示位置を指定 */
		height: 40vh;
		background-size: cover;
	  }
	  .fixed-background {
		min-height: 18vh;
	  }

	  .fixed-background p{
		position: absolute;/*絶対配置*/
		top: auto;
		left: 0;
		bottom:-3px; 
	  }

	.fixed-title-top{
		font-size: 1.2em;
		font-weight: 200;
		width: 100%;
	}
	  
	.fixed-title{
	padding-left: 0%;
	padding-top: 0px;
	line-height: 1em;
	}
	section{
		padding: 0px;
		margin-bottom: 5px;
	  }
	section:first-child{
		padding:80px 0px 0px;
	}
	.snsicon-top.hide{
		transform:translatex(100px);
	}

	.arrows {
		bottom: 700px;
	  }

	/*なかみのレイアウト*/

.fixed-h-back{
	background-position: center -20px;
	background-color: var(--body-color);
}

/*コンセプトのデザイン*/
.area-1-text {
	position: relative;
	height: 1230px;
}

.area-1-box1{
	position: absolute;
	height: 400px;  /*高さ*/
	width: 80%;  /*幅*/
	top:50px;
	left:0%;
}

.area-1-box2{
	position: absolute;
	height: 400px;  /*高さ*/
	width: 200px;  /*幅*/
	background-image: url(../img/box1.png);
	background-position: left, center;
	background-size: cover;
	top:20px;
	right:2%;
}

.area-1-box3{
	position: absolute;
	height: 600px;  /*高さ*/
	width: 60%;  /*幅*/
	top:500px;
	right:2%;
}

.area-1-box4{
	position: absolute;
	height: 200px;  /*高さ*/
	width: 300px;  /*幅*/
	background-position: center, center;
	background-size: cover;
	top:350px;
	left:3%;
}
.area-1-box5{
	position: absolute;
	height: 150px;  /*高さ*/
	width: 300px;  /*幅*/
	background-image: url(../img/box5.jpg);
	background-position: bottom, center;
	background-size: cover;
	top:800px;
	right:10%;
}
.area-1-box6{
	position: absolute;
	height: 550px;  /*高さ*/
	width: 50%;  /*幅*/
	top:650px;
	left:3%;
}

.area-1-text1{
	position: absolute;
	top:60px;
	left: 0%;
	font-size: 2.5em;
	font-weight: 500;
}
.area-1-text2{
	position: absolute;
	top:200px;
	left: 3%;
	font-size: 1em;
	font-weight: 400;
	
}
.area-1-text3{
	position: absolute;
	top:600px;
	left: 40%;
	font-size: 1em;
	font-weight: 400;
}
.area-1-text4{
	position: absolute;
	top:1000px;
	left: 10%;
	font-size: 1em;
	font-weight: 400;
}

/*参加方法のデザイン*/
.area-3-box1{
	height: 550px;  /*高さ*/
	top:400px;
}
.area3-midashi {
	text-align: center;
	width: 100%;
	height: 150px;
}
a.area-3-btn {
	width: 300px;
	height: 50px;
	font-size: 0.7em;
	font-weight: 400;
	
}
.schedule{
	background-position: top, center;
	background-size: contain;
	width: 100%;
	height: 80vh;
	/*★大まかなスケジュール画像(モバイル)*/
	background-image:url(../img/schedule_mob.jpg);
}

/*FAQのデザイン*/
.accordion-007 summary {
	font-size: 0.8em;
    font-weight: 400;
}
.accordion-007 p {
    font-size: 0.8em;
}

/*スタッフのデザイン*/
.area-7-prof{
	margin: 1em 0.3em 1em; /* 外側の余白（上下と中央配置） */
    padding: 1em; /* 内側余白 */
	height: 100%;
}
.area-7-prof::before {
    content: '';
    position: absolute;
    inset: 0; /* top, right, bottom, left を一括指定 */
    margin: 5px;
    border: 2px dashed #A7A297;
    border-radius: 10px;
    z-index: -1;
    display: block;
}
.area-7-prof p {
	margin-top: 100%;
	font-size: 0.9em;
}
.area-7-prof p span{
	font-size: 1.5em;
	font-weight: 500;
}

}