@charset "utf-8";

#splash {
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
background:#daefe9;
text-align:center;
color:#1aa1a8;
}
#splash_text {
position: absolute;
top: 50%;
left: 50%;
z-index: 900;
width: 100%;
transform: translate(-50%, -50%);
color: #1aa1a8;
}

#main > section {
padding: 100px 0;
}

#main > section#fv {
padding: 30px 0 0;
}
#fv {
background: url(../images/tree.svg) no-repeat bottom left 5%;
background-size: 40% auto;
position: relative;
}
#fv h1 {
line-height: 150%;
}
#fv h1 span {
display: table;
}
#video {
position: relative;
margin-bottom: 80px;
}
#video video {
border-radius: 50%;
opacity: 0.4;
position: relative;
z-index: 2;
}
#video:after {
position: absolute;
top: 0;
left: 0;
content: " ";
display: block;
width: 100%;
height: 100%;
background:linear-gradient(90deg, #2D426F,#79998B,#F0E78B);
background-size: 200% 200%;/*サイズを大きくひきのばす*/
background-position: 0%;
animation: bggradient 15s ease infinite;
border-radius: 50%;
z-index: 1;
}
@keyframes bggradient{
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
#fv ul.slider {
position: absolute;
top: 25%;
left: 0;
border-radius: 0 40px 40px 0;
overflow: hidden;
}
#news {
position: relative;
width: 90%;
max-width: 1280px;
margin: 0 auto;
}

#main > section#outline {
padding: 30px 0 150px;
position: relative;
}
#outline:after {
position: absolute;
display: block;
content: "";
bottom: 0;
left: 0;
background:url(../images/outlineBtm.webp) no-repeat center center;
background-size: 100% 100%;
width: 100%;
height: 150px;
z-index: 1;
}
#wave1 {
position: relative;
width: 100%;
height: 150px;
}
#wave1:before {
position: absolute;
display: block;
content: "";
top: 0;
left: 0;
background:url(../images/outlineTop.webp) no-repeat center center;
background-size: 100% 100%;
width: 100%;
height: 100%;
z-index: 1;
}
#outline h2.head {
padding-top: 70px;
position: relative;
z-index: 2;
}
#outlineContent {
padding-top: 30px;
background:#daefe9;
}
#outlineContent p {
font-weight: 700;
font-size: 2rem;
line-height: 220%;
padding-bottom: 20px;
}
#outlineContent p:last-child {
padding-bottom: 0;
}
#outlineContent > div img {
position: relative;
z-index: 2;
}

#news h2 {
display: table;
margin-left: auto;
}
#news ul {
padding-bottom: 30px;
}
#news ul li, #link ul li {
padding-bottom: 16px;
}
#news ul li:last-child, #link ul li:last-child {
padding-bottom: 0;
}
#news ul li a {
font-size: 1.8rem;
position: relative;
padding-right: 30px;
}
#news ul li a:after {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
content: '\f138';
font-family: "Font Awesome 5 Pro";
font-weight: 700;
transition: 0.6s;
}
#news ul li a:hover:after {
transform: translateY(-50%) rotateZ(180deg);
color: #1aa1a8;
}
#news ul li a time, #news ul li a span {
display: table;
}
#news > a {
display: table;
background: #000;
color: #fff;
line-height: 1em;
margin-left: auto;
padding: 8px 20px;
font-size: 3.5vw;
transition: 0.6s;
}
#news > a:hover {
background: #1aa1a8;
}


#pdf h2.head {
padding-bottom: 10px;
}
#pdf h2 + p {
color: red;
padding-bottom: 40px;
}
#pdf ul li {
position: relative;
padding-left: 20px;
margin-bottom: 16px;
}
#pdf ul li:last-child {
margin-bottom: 0;
}
#pdf ul li:before {
position: absolute;
top: 4px;
left: 0;
content: '\f192';
font-family: "Font Awesome 5 Pro";
font-size: 0.8em;
}
#pdf ul li p {
color: #111;
font-size: 1.8rem;
}
#pdf ul li a {
font-size: 1.4rem;
display: inline-block;
border-radius: 8px;
height: 100%;
padding: 6px 8px;
}
#pdf ul li > a {
background: #1aa1a8;
color: #fff;
margin-right: 8px;
}
#pdf ul li span {
height: 100%;
}
#pdf ul li span a {
background: #ddd;
}
#pdf ul li a i {
font-size: 1.5em;
}
#pdf ul li p span {
display: block;
font-size: 0.8em;
}
#link ul {
list-style-type: square;
margin-left: 20px;
}
#link ul li a {
text-decoration: underline;
font-size: 1.8rem;
}

#access h2 {
display: table;
}
#access iframe{
height: 600px;
}

@media screen and (max-width:560px) {
#fv {
background: url(../images/tree.svg) no-repeat bottom 50px left 5%;
background-size: 50% auto;
}
#main > section#fv {
padding: 0 0 70px;
}
#fv ul.slider {
top: 25vw;
}

#main > section#outline {
padding: 20px 0 60px;
}
#outline:after {
height: 60px;
}
#wave1 {
height: 60px;
}
#outline h2.head {
padding-top: 20px;
}
#outlineContent p, #news ul li a {
font-size: 3.8vw;
}

#news ul li a {
display: block;
}
#news ul li a time {
display: block;
padding-bottom: 8px;
}

#pdf, #link {
padding-bottom: 60px;
}
#pdf h2 + p {
padding-bottom: 24px;
}
#pdf ul li p, #link ul li a {
font-size: 3.8vw;
}
#pdf ul li a {
font-size: 3.2vw;
padding: 4px 6px;
}

#access iframe{
height: 40vh;
}
}

@media screen and (min-width:561px) {
#news ul {
display: table;
margin-left: auto;
padding-bottom: 50px;
}
#news ul li a {
display: flex;
align-items: center;
}
#news ul li a time {
padding-right: 20px;
}
#news > a {
padding: 10px 24px;
font-size: 1.6rem;
}
}

@media (min-width: 561px) and (max-width: 960px){
#pdf, #link {
padding-bottom: 100px;
}
}

@media screen and (max-width:768px) {
#fv > div.w1280 {
width: 100%;
position: relative;
}
#fv h1 {
position: absolute;
z-index: 4;
left: 5%;
}
#fv h1 span {
background: #fff;
line-height: 100%;
padding: 8px 12px;
margin: 8px 0;
}
#video {
margin-left: auto;
width: 60%;
z-index: 3;
}
#video video, #video:after {
border-radius: 20px 0 0 20px;
}
#fv ul.slider {
border-radius: 0 20px 20px 0;
z-index: 4;
width: 55%;
}

#pdf ul li p {
padding-bottom: 5px;
}
}

@media screen and (min-width:769px) {
#fv .w1280 {
display: flex;
justify-content: space-between;
}
#fv h1 {
width: 50%;
}
h1 span {
font-size: 3rem;
}
#video {
width: 40%;
}
#fv ul.slider {
width: 50%;
}

#pdf ul li {
display: flex;
}
#pdf ul li p {
box-sizing: border-box;
padding-right: 10px;
width: 60%;
}
}

@media screen and (max-width:960px) {
#outlineContent > div {
display: contents;
}
#outlineContent > div div {
width: 90%;
margin: 0 auto;
padding-bottom: 30px;
}
#outlineContent > div img {
width: 60%;
max-width: 400px;
display: block;
margin: 0 auto;
}

#info {
display: contents;
}
#pdf, #link {
width: 90%;
margin: 0 auto;
}
}

@media screen and (min-width:961px) {
h1 span {
font-size: 3.6rem;
}

#outlineContent > div {
display: flex;
justify-content: space-between;
}
#outlineContent > div div {
width: 75%;
}
#outlineContent > div img {
width: 20%;
height: 100%;
}

#info {
display: flex;
justify-content: space-between;
padding-bottom: 100px;
}
#pdf {
width: 66%;
}
#pdf ul li p {
width: 50%;
}
#link {
width: 30%;
}
}

@media screen and (min-width:1281px) {
h1 span {
font-size: 4.6rem;
}
#fv ul.slider {
width: 40%;
}

#pdf ul li p {
width: 60%;
}
}