@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

/* CSS Document */
html {
	scroll-behavior: smooth;
	font-size: 62.5%;
}
body {
	margin: 0;
	padding: 0;
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	background-image: url(../img/library/bg_head.jpg), url(../img/library/bg_foot.jpg);
	background-repeat: no-repeat, no-repeat;
	background-size: 100%, 100%;
	background-position: top, bottom;
	overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
	margin: 0;
	text-align: center;
}
p {
	margin:0;
	padding: 0;
	overflow-wrap: break-word;
}
a {
	color: #000;
	text-decoration: none;
	transition: .1s cubic-bezier(0.45, 0, 0.55, 1);
}
ul,ol {
	list-style-type: none;
	padding:0;
	margin:0;
}
/* Common */
.cont {
	width:94%;
	max-width:1070px;
	margin:0 auto;
}
.center {
	display: block;
	margin: 0 auto 2rem;
}
.br30 {
	border-radius: 3rem;
}
.pc_none {
	display: none;
}
.fadein {
	opacity : 0;
	transform : translate(0, 50px);
	transition : all 1200ms;
}
.fadein.scrollin {
	opacity : 1;
	transform : translate(0, 0);
}
.zoomin {
    transform: scale(0.75);
    opacity: 0;
}
.zoomin.scrollzoom {
  animation: zoomIn 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes zoomIn {
  20% {
    transform: scale(0.75);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@media screen and (max-width: 1070px) {
	html {
		font-size: 48.5%;
	}
}
@media screen and (max-width: 640px) {
	.pc_none {
		display: inline;
	}
}
@media screen and (max-width: 480px) {
	html {
		font-size: 54.5%;
	}
	.cont h2 {
		font-size: 2rem;
	}
}

/* ----------------------------- */
/* メイン
/* ----------------------------- */
.main {
	padding: 5rem 0 0;
	margin-bottom: 5rem;
}
.main .name {
	display: block;
	width: 50%;
	max-width: 265px;
	margin:0 auto 3rem;
}
.main .title {
	display: block;
	width: 100%;
	max-width: 1000px;
	margin:0 auto 5rem;
	animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
	opacity: 0;
	animation-delay: 0.5s;
}
@keyframes zoomIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.concept {
	padding-bottom: 5rem;
	position: relative;
}
.concept div {
	width: 70%;
	max-width: 680px;
	margin: 0 auto;
}
.concept div h2 {
	font-size: 4rem;
	line-height: 1.6;
	font-weight: 600;
	text-align: center;
	margin-bottom: 3rem;
    animation-name: fadeIn;
    animation-delay: 1000ms;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    opacity: 0;		
}
.concept div h2+p {
	font-size: 2.2rem;
	line-height: 2.2;
	font-weight: 400;
	text-align: justify;
	margin-bottom: 10rem;
    animation-name: fadeIn;
    animation-delay: 1500ms;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    opacity: 0;		
}
@keyframes fadeIn {
    0% {
    }
    100% {
        opacity: 1;
    }
}
.concept img,
.prize img,
.theme img {
	display: block;
	position: absolute;
	transform: scale(0.5);
	z-index: 1;
}
.cpt01 {
	width: 403px;
	left: 2%;
	top: -5%;
}
.cpt02 {
	width: 165px;
	right: 18%;
	top: -5%;
}
.cpt03 {
	width: 287px;
	right: -3%;
	top: 0;
}
.cpt04 {
	width: 292px;
	left: -3%;
	bottom: -14%;
}

.concept span {
	display: block;
	width: 160px;
	text-align: center;
	background: #ffe45d;
	border-radius: 3rem;
	font-size: 2.4rem;
	line-height: 1;
	padding: 1rem 0;
	color: #000;
	font-weight: 700;
	margin: 0 auto 2rem;
	letter-spacing: 0.1em;
}
.concept span+p {
	text-align: center;
	font-size: 3.2rem;
	font-weight: 700;
	margin-bottom: 5rem;
}
.concept span+p small {
	display: block;
	text-align: right;
	font-size: 1.6rem;
	font-weight: 400;
	margin-top: 1rem;
}

.prize {
	position: relative;
	background-image: linear-gradient(90deg, #ff5f29, #ffb000);
	text-align: center;
	padding: 5rem 0 6rem;
	color: #fff;
}
.prize01 {
	width: 192px;
	right: 15%;
	top: -25%;
}
.prize b {
	font-size: 5.4rem;
	display: block;
	font-weight: 700;
}
.prize span {
	font-size: 3.6rem;
	display: block;
	font-weight: 700;
	margin-bottom: 1.5rem;
}
.prize p {
	font-size: 2.2rem;
	font-weight: 600;
}

.theme {
	position: relative;
	background-image: linear-gradient(90deg, #da007e, #ff6066);
	padding: 3.5rem 0;
	text-align: center;
}
.theme01 {
	width: 228px;
	left: 3%;
	top: -6%;
}
.theme .theme_txt {
	display: inline-block;
	
}
.theme .theme_txt div {
	display: flex;
	align-items: center;
}
.theme .theme_txt div b {
	font-size: 4.6rem;
	font-weight: 700;
	color: #ffe45d;
	text-align: left;
}
.theme .theme_txt div p {
	font-size: 2.4rem;
	line-height: 1.5;
	font-weight: 700;
	color: #fff;
	margin-left: 2rem;
	text-align: left;
}

@media screen and (max-width: 1200px) {
	.cpt01 {
		width: 28%;
		left: 2%;
		top: -5%;
	}
	.cpt02 {
		width: 12%;
		right: 18%;
		top: -5%;
	}
	.cpt03 {
		width: 15%;
		right: -3%;
		top: 0;
	}
	.cpt04 {
		width: 16%;
		left: -3%;
		top: 30%;
	}
	.prize01 {
		width: 15%;
		right: 15%;
		top: -25%;
	}
	.theme01 {
		width: 15%;
		left: 5%;
		top: -6%;
	}
	.theme .theme_txt div b {
		font-size: 3.8rem;
	}
	.theme .theme_txt div p {
		font-size: 2.2rem;
	}	

}
@media screen and (max-width: 960px) {
	.concept div.kikan {
		width: 92%;
	}
}
@media screen and (max-width: 640px) {
	.prize {
		padding: 2.5rem 0 3rem;
	}
	.prize01 {
		width: 18%;
		right: 5%;
		top: -18%;
	}	
	.prize b {
		font-size: 4rem;
	}
	.prize span {
		font-size: 2.8rem;
	}
	.prize p {
		font-size: 2rem;
	}	
	.theme {
		padding: 2rem 0 4rem;
	}
	.theme01 {
		width: 20%;
	}	
	.theme .theme_txt div {
		display: block;
	}
}
@media screen and (max-width: 480px) {
	.main .title {
		margin-bottom: 2rem;	
	}
	.concept {
		overflow: hidden;
		padding-top: 8rem;
	}
	.concept div h2 {
		font-size: 3rem;
		line-height: 1.6;
		margin-bottom: 2rem;
	}
	.concept div h2+p {
		font-size: 2rem;
		line-height: 1.8;
		margin-bottom: 10rem;
	}
	.cpt01 {
		width: 35%;
		left: 2%;
		top: 0;
	}
	.cpt02 {
		width: 17%;
		right: 3%;
		top: 0;
	}
	.cpt03 {
		width: 35%;
		right: -24%;
		top: 15%;
	}
	.cpt04 {
		width: 36%;
		left: -24%;
		top: 36%;
	}
	
	
	.concept {
		padding-bottom: 3rem;
	}
	.prize01 {
		width: 20%;
		right: 2%;
		top: -15%;
	}	
	.theme01 {
		width: 25%;
		top: inherit;
		bottom: -25%;
	}	

}

/* ----------------------------- */
/* 要項
/* ----------------------------- */
.outline {
	padding: 3rem 2rem;
	width: 100%;
	box-sizing: border-box;
	max-width: 920px;
	margin: 0 auto;
}
.outline_list {
	margin-bottom: 5rem;
}
.outline_list li {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	border-bottom: solid 1px #667db9;
	padding: 2rem 0;
}
.outline_list li b {
	display: flex;
	justify-content: space-between;
	width: 200px;
	border-radius: 1.2rem;
	background: #667db9;
	color: #fff;
	font-size: 2.4rem;
	line-height: 1;
	font-weight: 700;
	padding: 1.5rem 3rem;
	box-sizing: border-box;
}
.outline_list li p {
	width: calc(100% - 220px);
	font-size: 2.2rem;
	line-height: 1.8;
	font-weight: 500;
	text-align: justify;
}
.outline_list+p {
	text-align: center;
	font-size: 3.6rem;
	line-height: 1.6;
	font-weight: 600;
	margin-bottom: 3rem;
}

.button {
	display: flex;
	justify-content: space-between;
	margin-bottom: 7rem;
}
.button a {
	width: 47.5%;
	display: block;
	
}
.button a img {
	width: 100%;	
}
.button a:hover img {
	/*opacity: 0.7;*/
}

.caution {
	border: solid 1px #667db9;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 10rem;
}
.caution b {
	display: block;
	writing-mode: vertical-rl;
	color: #667db9;
	font-size: 2rem;
	font-weight: 700;
	padding: 1rem;
	padding-top: 2.5rem;
	width: 50px;
	box-sizing: border-box;
	letter-spacing: 0.1em;
}
.caution ul {
	width: calc(100% - 50px);
	padding: 2rem;
	padding-left: 5rem;
	border-left: solid 1px #667db9;
	box-sizing: border-box;
}
.caution ul li {
	font-size: 1.8rem;
	font-weight: 500;
	line-height: 1.6;
	margin-bottom: 1rem;
	position: relative;
}
.caution ul li:before {
	content: '■';
	color: #667db9;
	font-size: 1.6rem;
	line-height: 1.6;
	position: absolute;
	left: -20px;
	top: 2px;
}

.komorebi {
	background-image: url(../img/library/bg_komorebi.jpg);
	background-size: cover;
	border-radius: 3rem;
	padding: 7rem;
	margin-bottom: 10rem;
}
.komorebi b {
	display: block;
	text-align: center;
	font-size: 3rem;
	margin-bottom: 4rem;
}
.komorebi p {
	font-size: 2rem;
	line-height: 1.8;
	text-align: justify;
}
@media screen and (max-width: 1070px) {
	.caution b {
		line-height: 2;	
	}
}

@media screen and (max-width: 640px) {
	.komorebi {
		padding: 4rem 3rem;
	}
	
}
@media screen and (max-width: 480px) {
	
	.outline_list li {
		display: block;
	}
	.outline_list li b {
		margin: 0 auto 1rem;
	}
	.outline_list li p {
		width: 100%;
		font-size: 2.2rem;
	}
	
	.outline_list+p {
		font-size: 2.6rem;
	}	
	
	.button {
		display: block;
	}
	.button a {
		width: 90%;
		margin: 0 auto;
	}	
	
	.komorebi {
		margin-bottom: 5rem;
	}
	.komorebi b {
		margin-bottom: 2rem;
	}

	
}

/* ----------------------------- */
/* 問い合わせ
/* ----------------------------- */
footer {
	padding: 5rem 0 4rem;
}
footer div {
	text-align: center;
	font-weight: 700;
}
.toi {
	display: inline-block;
	width: 50%;
	max-width: 300px;
	margin-bottom: 4rem;
}
footer div b {
	font-size: 3.8rem;
	display: block;
	font-weight: 700;
}
footer div p {
	font-size: 3.2rem;
	margin-bottom: 3rem;
}
footer div a {
	font-size: 3.2rem;
	line-height: 1.6;
	display: inline-block;
	text-decoration: underline;
}
footer div b a {
	text-decoration: none;
	font-size: 3.8rem;
}

footer div small {
	display: block;
	font-size: 1.6rem;
	margin: 4rem 0;
}

.pagetop {
	position: fixed;
	bottom: 25px;
	right: 15px;
	width:1rem;
	height: 1rem;
	opacity: 0;
	z-index:-1;
	transition: 0.2s;
}
.pagetop a{
	display: block;
	position: relative;
}
.pagetop a:after {
	content: "↑";
	position: absolute;
	top: calc(50% - 0.7em);
	right: 0;
	line-height: 1;
	background: #000;
	font-size: 2rem;
	font-weight: 400;
	color: #fff;
	padding: 0.75rem;
	border-radius: 50%;
	transition: transform .4s cubic-bezier(0.8, 0, 0.2, 1) 0s;
}
.pagetop a:hover:after {
	transition: transform .4s cubic-bezier(0.8, 0, 0.2, 1) 0s;
	transform: translateY(-5px);
}

@media screen and (max-width: 960px) {
}
@media screen and (max-width: 640px) {
	footer div b {
		font-size: 3.2rem;
	}
	footer div p {
		font-size: 2.4rem;
	}
	footer div a {
		font-size: 2.4rem;
	}
	footer div b a {
		font-size: 3.2rem;
	}
}
@media screen and (max-width: 480px) {
	body {
		background-size: 540px, 540px;
	}
	
}