@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
/* CSS Document */
:root {
  --vw: 1vw;
}
:root {
  --vh: 1vh;
}
img{
	display: block;
}
html{
	
}
body{
	font-family: "Noto Sans JP" , "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	overflow: hidden;
	height: calc(var(--vh) * 100);
	width: 100vw;
}
#top{
	
	position: relative;
	
	
} 
#top .topbtnarea{
	display: flex;
	position: absolute;
	top: 0;
    width: 100%;
}
#top .topbtnarea div{
	width: 50%;
	display: flex;
	justify-content: flex-end;
	padding-top: 4vw;
	padding-right:4vw;
	
}
#top .topbtnarea div a{
	display: block;
	width: 12vw;
}
#top .contents {
	display: flex;
	 width: 100%;
	box-sizing: border-box;
}
#top .contents .con{
	width: 50%;
	display: flex;
	align-items: center;
	height: calc(var(--vh) * 100);
	padding: 4vw;
    box-sizing: border-box;
	background: #1d252d;
}
#top .contents .con:last-child{
	background: #236192;
}



#top .contents .con img{
	width: 100%;
}
.contents img{
	width: 100%;
}
#terea{
	background: #1d252d;
	position: relative;
	
}
#sentia{
	background: #236192;
	position: relative;
	
}



header{
	position:absolute;
	width: 14vw;	
	top: 4vw;
	right: 4vw;
	box-sizing: border-box;
	
}
header a{
	opacity: 1;
	cursor: pointer;
}
.anime_botan{
	/*animation: botan 1s infinite;*/
}
header.title{
	width: 20vw;
	z-index: 30;
}
header.title a{
	animation: none;
}
@keyframes botan {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  70% {
    opacity: 0.6;
  }
  80% {
    opacity: 1;
  }
  90% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
header.quiz{
	width: 100vw;
	
	height:calc(var(--vh) * 20);
	position: absolute;
	top: 0;
	padding: 0;
	right: 0;
	display: flex;
	justify-content: space-between;
	align-items:center;
	z-index: 100;
}

header.quiz h3{
	width: 50vw;
}
header.quiz a{
	width: 16vw;
    margin-right: 4vw;
}
header.ans{
	width: 100vw;
	height:calc(var(--vh) * 20);
	position: absolute;
	top: 0;
	padding: 0;
	right: 0;
	display: flex;
	justify-content: space-between;
	align-items:center;
	z-index: 30;
}
header.ans h3{
	width: 42vw;
}
header.ans a{
	width: 12vw;
    padding-right: 4vw;
}
.contents .con1{
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	padding-left: 12vw;
	padding-right: 12vw;
	height: calc(var(--vh) * 100);
}
.contents .con2{
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	padding-left: 0vw;
	padding-right: 16vw;
	height: calc(var(--vh) * 100);
}

.contents .con1 img{
	width: 100%;
}
.contents .con3{
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	padding-left: 25vw;
	padding-right: 25vw;
	height: calc(var(--vh) * 100);
	z-index: 20;
	position: relative;
	
	animation: start 2s infinite;
	opacity: 1;
}
.contents .con4{
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	padding-left: 14vw;
	padding-right: 14vw;
	height: calc(var(--vh) * 100);
	z-index: 20;
	position: relative;
}
@keyframes start {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}
.gray{
	position: absolute;
	height: calc(var(--vh) * 100);
	width: 100vw;
	background: #000000;
	opacity: 0.8;top: 0;
	z-index: 15;
}
.flower{
	background: url(../images/flower.svg);
    width: 64vw;
    height: 64vw;
    background-repeat: no-repeat;
    opacity: 0.1;
    position: absolute;
    bottom: 0;
    right: 2vw;
    top: 0;
    margin: auto;
}
#top .flower{
	left: 0;
	right: 0;
}


ul.tabacolist{
	display: flex;
    flex-wrap: wrap;
    padding-left: 6vw;
    padding-right: 6vw;
    box-sizing: border-box;
    padding-top: 4vw;
}
ul.tabacolist li{
	margin: 0;
	padding: 0;
	width: 17%;
    margin: 1.5% 1.5%;
	list-style: none;
	
}
ul.tabacolist li img{
	width: 94%;
    margin: auto;
}
ul.tabacolist li h3{
	    font-family: "Noto Sans JP";
    background: #fffaf2;
    border-radius: 40px;
    list-style: none;
    padding: 5px 0;
    margin: 0;
    text-align: center;
    font-weight: 800;
    font-size: 1.2vw;
    margin-top: 0.7vw;
    margin-bottom: 0.7vw;
    color: #1d252d;
    line-height: 1;
}
#sentia ul.tabacolist li h3{
	color: #236192;
}


ul.tabacolist li h3.title_small{
    letter-spacing: -0.1em;
}
ul.tabacolist li h4{
	color: #fffaf2;
	font-weight: 500;
	text-align: center;
	padding: 0;
margin: 0;
	font-size: 0.76vw;
	line-height: 1.1;
  
}
ul.tabacolist li h4 span{
	letter-spacing: -0.5em;
}
.contents .tabaco{
	position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 100vw;
    height: 40vw;
}
ul.tabacolist .tabacolist_btn{
	cursor: pointer;
}
ul.tabacolist .tabacolist_item.active  h3{
	background-color: #FFFF00;
}
ul.tabacolist .tabacolist_item.active  h4{
	color: #FFFF00;
}

ul.tabacolist .tabacolist_item{
	position: relative;
	
}
ul.tabacolist .tabacolist_item.maru:before{
	content:"";
	display: block;
	width: 110%;
	height: 110%;
	display: block;
	border-radius: 15px;
	border: solid 3px #5bcda8;
	position: absolute;
	left: -50%;
	top: -50%;
	right: -50%;
	bottom: -50%;
	margin: auto;
}
ul.tabacolist .tabacolist_item.batsu{
	opacity: 0.5;
}
.btn_inner{
	position: relative;
	z-index: 10;
}
.anss{
	width: calc(var(--vh) * 160);
    padding-top: calc(var(--vh) * 20);
    margin: auto;
    position: relative;
	z-index: 1;
	max-width: 96vw;
}
footer.quiz img{
	width: 100%;
}
footer.quiz{
	position: absolute;
	bottom: 1.5vw;
    width: 65%;
	box-sizing: border-box;
	padding-left: 4vw;
	padding-right: 4vw;
}