@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:100,300,400,500,700,900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap');



/* ==============================================
setting
============================================== */

html {
font-size: calc(100vw * 1 / 375);
line-height: calc(100vw * 1 / 375);
}
@media screen and (min-width:960px) {
html {
font-size: 1.2px;
line-height: 1.2px;
}
}
* {
font-family:"Roboto","Noto Sans JP","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
font-size: 13rem;
line-height: 24rem;
font-weight:400;
letter-spacing: 0.5rem;
color:#222222;
margin:0;
padding:0;
box-sizing: border-box;
}
body{
overflow-x: hidden;
}
body::before{
content: "";
position: fixed;
top:0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: linear-gradient(-45deg, #f5b4c8 0%, #c8bef5 100%);
}
img {
border:none;
vertical-align:top;
width: 100%;
height: auto;
}
ul {
list-style:none;
}
a{
text-decoration: none;
transition: 0.2s ease-out;
}



.pc{
display:none!important;
}



/* ==============================================
header
============================================== */

header{
}
header .logo{
}
@media screen and (min-width:960px) {
header .logo{
display: none;
}
}
header .logo a{
display: inline-block;
font-size: 16rem;
line-height: 20rem;
letter-spacing: 1rem;
color: #fff;
padding: 20rem 0 0 20rem;
}
@media screen and (min-width:960px) {
header .logo a{
font-size: 20rem;
line-height: 30rem;
font-weight: 300;
color: #222222;
padding: 16px 0 0 20px;
}
}
@media screen and (min-width:1120px) {
header .logo a{
font-size: 30rem;
line-height: 40rem;
padding: 30px 0 20px 40px;
}
}
header .logo a img{
width: auto;
height: 30rem;
display: block;
margin: 0 0 6rem 0;
}
@media screen and (min-width:960px) {
header .logo a img{
height: 60rem;
margin: 0 0 10px -6px;
}
}
header .logo a span{
font-size: 10rem;
line-height: 15rem;
letter-spacing: 0.5rem;
color: #fff;
transform: scale(0.8,0.8);
display: block;
margin: 0 0 0 -23rem;
}
@media screen and (min-width:960px) {
header .logo a span{
color: #222222;
padding: 4px 0 0 0;
}
}



header .menu{
position: fixed;
top:0;
right: 0;
width: 60rem;
height: 60rem;
overflow: hidden;
z-index: 10000;
}
@media screen and (min-width:960px) {
header .menu{
display: none;
}
}
header .menu a{
display: block;
width: 60rem;
height: 60rem;
}
header .menu a::before{
content: "";
position: absolute;
top:-8rem;
right: -30rem;
width: 88rem;
height: 44rem;
transform: rotate(45deg);
background: linear-gradient(-90deg, #f5b4c8 0%, #c8bef5 100%);
}
header .menu a span{
position: absolute;
top:20rem;
right: 16rem;
width: 24rem;
height: 1rem;
background: #fff;
transition: 0.2s ease-out;
}
header .menu a span::after{
content: "";
position: absolute;
top:9rem;
right: 0;
width: 15rem;
height: 1rem;
background: #fff;
transition: 0.2s ease-out;
}
header .menu.open a span{
top:24rem;
right: 10rem;
width: 20rem;
transform: rotate(-45deg);
}
header .menu.open a span::after{
top:0;
width: 20rem;
transform: rotate(90deg);
}



header nav{
position: fixed;
top:0;
right: -100%;
width: 80%;
height: 100%;
background: rgba(255,255,255,0.95);
overflow-y: scroll;
z-index: 1000;
transition: 0.2s ease-out;
}
@media screen and (min-width:960px) {
header nav{
right: inherit;
left: 0;
width: calc(100% - 750px);
background: rgba(255,255,255,0.9);
overflow-y: inherit;
}
}
@media screen and (min-width:1500px) {
header nav{
width: calc(50% - 375px);
}
}
header nav.open{
right: 0;
}
header nav::before{
content: "";
position: absolute;
top:0;
left: 0;
width: 1px;
height: 100%;
background: linear-gradient(0deg, #f5b4c8 0%, #c8bef5 100%);
}
header nav .logo{
display: block;
padding: 0 0 20rem 0;
}
header nav .logo a{
color: #222222;
}
header nav .logo a img{
}
header nav .logo a span{
color: #222222;
}
header nav ul{
position: relative;
padding: 14rem 0 14rem 0;
}
@media screen and (min-width:960px) {
header nav ul{
margin: 0 20px;
}
}
@media screen and (min-width:1120px) {
header nav ul{
margin: 0 40px;
}
}
header nav ul li{
}
header nav ul::before{
content: "";
position: absolute;
top:0;
left: 0;
display: block;
width: 100%;
height: 1px;
background: linear-gradient(-90deg, #f5b4c8 0%, #c8bef5 100%);
}
header nav ul li a{
line-height: 18rem;
display: block;
padding: 2rem 20rem 2rem 20rem;
}
@media screen and (min-width:960px) {
header nav ul li a{
font-size: 11rem;
line-height: 15rem;
padding: 4rem 0;
}
}
@media screen and (min-width:1120px) {
header nav ul li a{
font-size: 13rem;
line-height: 20rem;
padding: 4rem 0;
}
}
header nav .contact{
position: relative;
padding: 0 20rem 24rem 20rem;
}
@media screen and (min-width:960px) {
header nav .contact{
display: none;
}
}
header nav .contact::before{
content: "";
position: absolute;
top:0;
left: 0;
display: block;
width: 100%;
height: 1rem;
background: linear-gradient(-90deg, #f5b4c8 0%, #c8bef5 100%);
}
header nav .contact h2{
font-size: 20rem;
line-height: 30rem;
font-weight: 500;
letter-spacing: 1rem;
padding: 15rem 0 5rem 0;
}
header nav .contact p{
font-size: 12rem;
line-height: 20rem;
padding: 5rem 0 0 0;
}
header nav .contact .button{
padding: 15rem 0 0 0;
}
header nav .contact .button a{
font-size: 14rem;
line-height: 20rem;
letter-spacing: 1rem;
color: #fff;
text-align: center;
display: block;
height: 44rem;
background: linear-gradient(-90deg, #f5b4c8 0%, #c8bef5 100%);
border-radius: 4rem;
filter: drop-shadow(0 4rem 4rem rgba(0,0,0,0.1));
padding: 12rem 0 0 0;
}



/* ==============================================
footer
============================================== */

footer{
background: #fff;
margin: 50rem 0 0 0;
}
@media screen and (min-width:960px) {
footer{
margin-left: calc(100% - 750px)!important;
width: 750px;
}
}
@media screen and (min-width:1500px) {
footer{
margin-left: calc(50% - 375px)!important;
width: 750px;
}
}



footer .contact{
position: relative;
padding: 0 30rem 80rem 30rem;
}
@media screen and (min-width:1500px) {
footer .contact{
position: fixed;
top:0;
right: 0;
width: calc(50% - 375px);
height: 100%;
display: table;
padding: 0;
background: rgba(255,255,255,0.6);
}
footer .contact div{
display: table-cell;
vertical-align: middle;
padding: 0 40px 40px 40px;
}
}
footer .contact::before{
content: "";
position: absolute;
top:-10rem;
left: 0;
background: url("../images/cmn_icn_wave.svg") center bottom repeat-x;
background-size: 20rem 10rem;
width: 100%;
height: 10rem;
}
footer .contact h2{
font-size: 40rem;
line-height: 50rem;
font-weight: 300;
letter-spacing: 2rem;
padding: 65rem 0 20rem 0;
position: relative;
z-index: 100;
}
@media screen and (min-width:1500px) {
footer .contact h2{
text-align: center;
padding: 0 0 20rem 0;
}
}
footer .contact h2::before{
content: "";
background: url("../images/cmn_icn_ttl.svg") no-repeat;
background-size: 60rem 120rem;
width: 60rem;
height: 120rem;
position: absolute;
top:30rem;
left: -30rem;
z-index: -1;
}
@media screen and (min-width:1500px) {
footer .contact h2::before{
display: none;
}
}
footer .contact p{
padding: 5rem 0 0 0;
}
@media screen and (min-width:1500px) {
footer .contact p{
text-align: center;
}
}
footer .contact .button{
padding: 30rem 0 0 0;
}
@media screen and (min-width:1500px) {
footer .contact .button{
max-width: 320px;
margin: auto;
}
}
footer .contact .button a{
font-size: 14rem;
line-height: 20rem;
letter-spacing: 1rem;
color: #fff;
text-align: center;
display: block;
height: 44rem;
background: linear-gradient(-90deg, #f5b4c8 0%, #c8bef5 100%);
border-radius: 4rem;
filter: drop-shadow(0 4rem 4rem rgba(0,0,0,0.1));
padding: 12rem 0 0 0;
}
footer .link{
padding: 0 30rem 140rem 30rem;
background: #f5f5f5 url("../images/cmn_ftr_img.png") bottom no-repeat;
background-size: 100% auto;
}
footer .link h2{
font-size: 40rem;
line-height: 50rem;
font-weight: 300;
letter-spacing: 1rem;
padding: 70rem 0 0 0;
}
footer .link p{
padding: 25rem 0 0 0;
}
footer .link ul{
padding: 25rem 0 0 0;
}
footer .link ul li{
padding: 10rem 0 0 0;
}
footer .link ul li a{
font-size: 13rem;
line-height: 20rem;
letter-spacing: 0;
display: block;
height: 44rem;
background: #fff;
border-radius: 4rem;
filter: drop-shadow(0 4rem 4rem rgba(0,0,0,0.1));
padding: 12rem 0 0 14rem;
position: relative;
}
footer .link ul li a::after{
content: "";
position: absolute;
top:0;
right: 0;
width: 44rem;
height: 44rem;
border-radius: 0 4rem 4rem 0;
}
footer .link ul li:nth-child(1) a::after{
background: #8dc131 url("../images/cmn_icn_blank.svg") top 15rem right 14rem no-repeat;
background-size: 16rem 12rem;
}
footer .link ul li:nth-child(2) a::after{
background: #7ed1c7 url("../images/cmn_icn_blank.svg") top 15rem right 14rem no-repeat;
background-size: 16rem 12rem;
}
footer .link ul li:nth-child(3) a::after{
background: #1eb45a url("../images/cmn_icn_blank.svg") top 15rem right 14rem no-repeat;
background-size: 16rem 12rem;
}
footer .copy{
font-size: 10rem;
line-height: 15rem;
color: #fff;
text-align: center;
background: linear-gradient(90deg, #c8bef5 0%, #f5b4c8 100%);
padding: 20rem 0 25rem 0;
}



/* ==============================================
main
============================================== */

main{
overflow-x: hidden;
}
@media screen and (min-width:960px) {
main{
margin-left: calc(100% - 750px);
width: 750px;
}
}
@media screen and (min-width:1500px) {
main{
margin-left: calc(50% - 375px);
width: 750px;
}
}
article{
background: #fff;
}
section{
}



main #link{
}
main #link .inner{
padding: 0 30rem;
}
main #link .inner h2{
font-size: 16rem;
font-weight: 500;
padding: 30rem 0 0 0;
margin: 0 0 -30rem 0;
}
main #link .inner h2 + p{
padding: 35rem 0 0 0;
line-height: 20rem;
margin: 0 0 -25rem 0;
}
main #link .inner ul{
padding: 30rem 0 0 0;
}
main #link .inner ul li{
padding: 10rem 0 0 0;
}
main #link .inner ul li a{
font-size: 13rem;
line-height: 20rem;
letter-spacing: 0;
display: block;
height: 44rem;
background: #fff;
border-radius: 4rem;
filter: drop-shadow(0 4rem 4rem rgba(0,0,0,0.1));
padding: 12rem 0 0 14rem;
position: relative;
}
main #link .inner ul li.l2 a{
font-size: 13rem;
line-height: 16rem;
padding: 7rem 0 0 14rem;
}
main #link .inner ul li a::after{
content: "";
font-size: 11rem;
line-height: 44rem;
letter-spacing: 0.5rem;
color: #fff;
text-align: center;
position: absolute;
top:0;
right: 0;
width: 44rem;
height: 44rem;
border-radius: 0 4rem 4rem 0;
background: #d7b9e6 url("../images/cmn_arw-white.svg") top 15rem right 17rem no-repeat;
background-size: 8rem 12rem;
}
main #link .inner ul li.blank a::after{
background: #d7b9e6 url("../images/cmn_icn_blank.svg") top 15rem right 14rem no-repeat;
background-size: 16rem 12rem;
}
main #link .inner ul li.pdf a::after{
content: "PDF";
background: #c20a0a;
}
main #link .inner ul li.word a::after{
content: "WORD";
background: #1f64c2;
}
main #link .inner ul li.youtube a::after{
background: #f5f5f5 url("../images/cmn_icn_youtube.svg") top 12rem right 10rem no-repeat;
background-size: 24rem 18rem;
}
main #link .inner ul li.color a{
color: #fff;
text-align: center;
padding: 12rem 0 0 0;
background: linear-gradient(90deg, #c8bef5 0%, #f5b4c8 100%);
}
main #link .inner ul li.color a::after{
display: none;
}



/* ==============================================
#page-top
============================================== */

#page-top{
}
#page-top header .logo{
display: none;
}
#page-top header nav .logo{
display: block;
}



#page-top #hero{
position: relative;
background: url("../../images/tp_hr_img.png") bottom no-repeat;
background-size: 100% auto;
}
#page-top #hero::after{
content: "";
position: absolute;
bottom:0;
left: 0;
width: 100%;
height: 10rem;
background: url("../images/cmn_icn_wave.svg") center repeat-x;
background-size: 20rem 10rem;
opacity: 0.8;
}
#page-top #hero .inner{
}
#page-top #hero .inner h1{
font-size: 36rem;
line-height: 48rem;
font-weight: 300;
color: #fff;
text-align: center;
padding: 30rem 0 0 0;
position: relative;
z-index: 200;
}
@media screen and (max-height:600px) {
#page-top #hero .inner h1{
font-size: 30rem;
line-height: 40rem;
padding: 20rem 0 0 0;
}
}
#page-top #hero .inner h1 img{
width: auto;
height: 85rem;
display: block;
margin: 15rem auto 15rem auto;
}
@media screen and (max-height:600px) {
#page-top #hero .inner h1 img{
height: 48rem;
margin: 10rem auto 10rem auto;
}
}
#page-top #hero .inner h1 span{
font-size: 12rem;
line-height: 20rem;
letter-spacing: 0.5rem;
color: #fff;
text-align: center;
display: block;
}
@media screen and (max-height:600px) {
#page-top #hero .inner h1 span{
font-size: 10rem;
}
}
#page-top #hero .inner h1 a{
font-size: 12rem;
line-height: 20rem;
color: #fff;
text-align: center;
display: block;
}
#page-top #hero .inner h1 a span{
font-size: 10rem;
line-height: 15rem;
font-weight: 300;
color: #fff;
text-align: center;
display: block;
}
#page-top #hero .inner h1 a img{
width: auto;
height: 60rem;
display: block;
margin: 0 auto 5rem auto;
}
@media screen and (max-height:600px) {
#page-top #hero .inner h1 a img{
height: 40rem;
}
}
#page-top #hero .inner p{
padding: 35rem 0 0 0;
position: relative;
z-index: 200;
}
@media screen and (max-height:600px) {
#page-top #hero .inner p{
padding: 20rem 0 0 0;
}
}
#page-top #hero .inner p img{
width: auto;
height: 68rem;
display: block;
filter: drop-shadow(0 2rem 8rem rgba(185,100,180,1.0));
}
@media screen and (max-height:600px) {
#page-top #hero .inner p img{
height: 60rem;
}
}
#page-top #hero .inner .scroll{
position: absolute;
bottom:10rem;
left: 20rem;
padding: 0;
}
#page-top #hero .inner .scroll a{
font-size: 12rem;
line-height: 20rem;
color: #fff;
text-align: center;
display: block;
background: url("../images/cmn_icn_ship.svg") center bottom -15rem no-repeat;
background-size: 44rem auto;
width: 44rem;
height: 50rem;
}
#page-top #hero .inner figure{
position: absolute;
bottom: -160rem;
right: 0;
z-index: 100;
}
@media screen and (min-width:960px) {
#page-top #hero .inner figure{
bottom: -104rem;
}
}
#page-top #hero .inner figure img{
width: auto;
height: 480rem;
}
@media screen and (min-width:960px) {
#page-top #hero .inner figure img{
width: auto;
height: 600rem;
}
}



#page-top #information{
background: linear-gradient(90deg, #f9ebf3 0%, #fceaf0 100%);
}
#page-top #information .inner{
padding: 0 30rem 40rem 30rem;
background: url("../images/cmn_icn_wave.svg") center bottom repeat-x;
background-size: 20rem 10rem;
position: relative;
z-index: 100;
}
#page-top #information .inner h2{
font-size: 20rem;
line-height: 30rem;
font-weight: 500;
padding: 25rem 0 0 0;
}
#page-top #information .inner ul{
}
#page-top #information .inner ul li{
padding: 10rem 0 0 0;
}
#page-top #information .inner ul li a{
}
#page-top #information .inner ul li a span{
font-size: 11rem;
line-height: 15rem;
font-weight: 700;
display: block;
}



#page-top #report{
}
#page-top #report .inner{
padding: 0 30rem;
}
#page-top #report .inner h2{
font-size: 16rem;
font-weight: 500;
padding: 30rem 0 0 0;
margin: 0 0 -30rem 0;
}
#page-top #report .inner ul{
padding: 30rem 0 0 0;
}
#page-top #report .inner ul li{
padding: 10rem 0 0 0;
}
#page-top #report .inner ul li a{
font-size: 13rem;
line-height: 20rem;
letter-spacing: 0;
display: block;
height: 44rem;
background: #fff;
border-radius: 4rem;
filter: drop-shadow(0 4rem 4rem rgba(0,0,0,0.1));
padding: 12rem 0 0 14rem;
position: relative;
}
#page-top #report .inner ul li.l2 a{
font-size: 13rem;
line-height: 16rem;
padding: 7rem 0 0 14rem;
}
#page-top #report .inner ul li a::after{
content: "PDF";
font-size: 11rem;
line-height: 44rem;
letter-spacing: 0.5rem;
color: #fff;
text-align: center;
position: absolute;
top:0;
right: 0;
width: 44rem;
height: 44rem;
border-radius: 0 4rem 4rem 0;
background: #c20a0a;
}



#page-top #introduction{
display: inline-block;
background: linear-gradient(-45deg, #f5b4c8 0%, #c8bef5 100%);
border-radius: 20rem;
padding: 4rem;
margin: 40rem 20rem 0 20rem;
}
#page-top #introduction .inner{
background: #fff;
border-radius: 16rem;
padding: 10rem 30rem 30rem 30rem;
}
#page-top #introduction .inner p{
padding: 20rem 0 0 0;
text-align: justify;
}



#page-top #message{
}
#page-top #message .inner{
padding: 0 30rem 0 30rem;
}
#page-top #message .inner h2{
font-size: 40rem;
line-height: 50rem;
font-weight: 300;
letter-spacing: 2rem;
padding: 65rem 0 10rem 0;
position: relative;
z-index: 100;
}
#page-top #message .inner h2::before{
content: "";
background: url("../images/cmn_icn_ttl.svg") no-repeat;
background-size: 60rem 120rem;
width: 60rem;
height: 120rem;
position: absolute;
top:30rem;
left: -30rem;
z-index: -1;
}
#page-top #message .inner .message{
}
#page-top #message .inner .message p{
padding: 35rem 0 0 0;
text-align: justify;
}
#page-top #message .inner .message figure{
height: 80rem;
line-height: 20rem;
text-align: right;
position: relative;
padding: 12rem 92rem 0 0;
margin: 10rem 0 0 0;
}
#page-top #message .inner .message figure img{
width: 80rem;
height: 80rem;
border-radius: 40rem;
position: absolute;
top:0;
right: 0;
}



#page-top #project{
}
#page-top #project .inner{
padding: 0 30rem 0 30rem;
}
@media screen and (min-width:960px) {
#page-top #project .inner{
padding: 0 30rem 80px 30rem;
}
}
#page-top #project .inner h2{
font-size: 40rem;
line-height: 50rem;
font-weight: 300;
letter-spacing: 2rem;
padding: 65rem 0 0 0;
position: relative;
z-index: 100;
}
#page-top #project .inner h2::before{
content: "";
background: url("../images/cmn_icn_ttl.svg") no-repeat;
background-size: 60rem 120rem;
width: 60rem;
height: 120rem;
position: absolute;
top:30rem;
left: -30rem;
z-index: -1;
}
#page-top #project .inner h2 span{
font-size: 24rem;
line-height: 32rem;
font-weight: 500;
letter-spacing: 1rem;
display: block;
margin: 35rem 0 0 0;
}
#page-top #project .inner h2 span img{
width: auto;
height: 57rem;
vertical-align: bottom;
display: inline-block;
margin: 8rem 4rem 5rem 0;
}
#page-top #project .inner div:nth-child(2){
background: linear-gradient(-45deg, #f5b4c8 0%, #c8bef5 100%);
margin: 35rem 0 0 -30rem;
border-radius: 0 40rem 40rem 0;
}
#page-top #project .inner div:nth-child(2) h3{
font-size: 20rem;
line-height: 30rem;
font-weight: 500;
letter-spacing: 1rem;
color: #fff;
padding: 35rem 0 0 30rem;
}
#page-top #project .inner div:nth-child(2) ul{
padding: 10rem 0 35rem 30rem;
}
#page-top #project .inner div:nth-child(2) ul li{
line-height: 20rem;
background: #fff;
margin: 10rem 0 0 0;
padding: 20rem 0 16rem 20rem;
}
#page-top #project .inner div:nth-child(2) ul li img{
width: auto;
height: 20rem;
display: block;
margin: 0 0 10rem 0;
}
#page-top #project .inner div:nth-child(2) + p{
padding: 35rem 0 0 0;
text-align: justify;
}



#page-top #project .inner div:last-child{
position: relative;
height: 750rem;
margin: 30rem -30rem 0 -30rem;
padding: 110rem 30rem 0 30rem;
z-index: 100;
}
#page-top #project .inner div:last-child h3{
font-size: 16rem;
line-height: 20rem;
font-weight: 700;
color: #fff;
text-align: center;
border: solid 4rem #fff;
position: relative;
padding: 15rem 0 15rem 0;
}
#page-top #project .inner div:last-child h3::before{
content: "";
display: block;
background: url("../images/cmn_icn_ship.svg");
background-size: 40rem 42rem;
width: 40rem;
height: 42rem;
position: absolute;
top:-66rem;
left: 0;
right: 0;
margin: auto;
}
#page-top #project .inner div:last-child p:nth-child(2){
padding: 20rem 0;
position: relative;
}
#page-top #project .inner div:last-child p:nth-child(2)::before{
content: "";
width: 100%;
height: 1px;
background: #fff;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
#page-top #project .inner div:last-child p:nth-child(2) a{
font-size: 15rem;
line-height: 20rem;
text-align: center;
display: block;
width: 110rem;
height: 110rem;
border-radius: 55rem;
background: #ffffdc;
padding: 22rem 0 0 0;
margin: auto;
filter: drop-shadow(0 4rem 4rem rgba(0,0,0,0.1));
}
#page-top #project .inner div:last-child p:nth-child(2) a span{
font-size: 12rem;
line-height: 16rem;
text-align: center;
display: block;
padding: 2rem 0 0 0;
}
#page-top #project .inner div:last-child p:nth-child(2) a span::after{
content: "";
background: url("../images/cmn_arw-black.svg");
background-size: 4rem 8rem;
width: 4rem;
height: 8rem;
display: block;
margin: 4rem auto 0 auto;
}
#page-top #project .inner div:last-child p:nth-child(3){
line-height: 18rem;
font-weight: 500;
color: #fff;
text-align: center;
position: absolute;
bottom:466rem;
left: 0;
width: 124rem;
height: 80rem;
border-radius: 0 60rem 60rem 0;
background: #28a0ff;
padding: 8rem 8rem 0 0;
z-index: 100;
}
#page-top #project .inner div:last-child p:nth-child(3) span{
display: block;
font-size: 10rem;
line-height: 12rem;
letter-spacing: 0;
color: #fff;
padding: 2rem 0 0 0;
}
#page-top #project .inner div:last-child p:nth-child(4){
line-height: 18rem;
font-weight: 500;
color: #fff;
text-align: center;
position: absolute;
bottom:466rem;
right: 0;
width: 124rem;
height: 80rem;
border-radius: 60rem 0 0 60rem;
background: #ff6e78;
padding: 8rem 0 0 8rem;
z-index: 100;
}
#page-top #project .inner div:last-child p:nth-child(4) span{
display: block;
font-size: 10rem;
line-height: 12rem;
letter-spacing: 0;
color: #fff;
padding: 2rem 0 0 0;
}
#page-top #project .inner div:last-child ul{
position: relative;
margin: 0 20rem;
clear: both;
}
#page-top #project .inner div:last-child ul::before{
content: "";
width: 1px;
height: calc(100% + 130rem);
background: #fff;
position: absolute;
bottom:30rem;
left: 0;
}
#page-top #project .inner div:last-child ul::after{
content: "";
width: 1px;
height: calc(100% + 130rem);
background: #fff;
position: absolute;
bottom:30rem;
right: 0;
}
#page-top #project .inner div:last-child ul li{
padding: 0 20rem;
margin: 10rem 0 0 0;
position: relative;
}
@media screen and (min-width:960px) {
#page-top #project .inner div:last-child ul li{
padding: 0 120rem;
}
}
#page-top #project .inner div:last-child ul li::before{
content: "";
width: 100%;
height: 1px;
background: #fff;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
#page-top #project .inner div:last-child ul li a{
position: relative;
font-size: 15rem;
line-height: 20rem;
text-align: center;
display: block;
height: 60rem;
background: #fff;
border-radius: 4rem;
padding: 8rem 0 0 0;
filter: drop-shadow(0 4rem 4rem rgba(0,0,0,0.1));
}
#page-top #project .inner div:last-child ul li a::after{
content: "";
background: url("../images/cmn_arw-black.svg");
background-size: 4rem 8rem;
width: 4rem;
height: 8rem;
position: absolute;
bottom:8rem;
right: 8rem;
}
#page-top #project .inner div:last-child ul li a span{
font-size: 12rem;
line-height: 18rem;
color: #fff;
text-align: center;
display: block;
margin: 3rem auto 0 auto;
background: #222222;
width: 160rem;
height: 18rem;
border-radius: 9rem;
}
#page-top #project .inner div:last-child figure{
position: absolute;
top:0;
left: 0;
width: 750rem;
height: 750rem;
margin: 0 0 0 -50%;
z-index: -1;
background: linear-gradient(-45deg, #f5b4c8 0%, #c8bef5 100%);
border-radius: 400rem;
overflow: hidden;
}
@media screen and (min-width:960px) {
#page-top #project .inner div:last-child figure{
margin: 0 0 0 -75px;
}
}
#page-top #project .inner div:last-child figure img{
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.3;
}



#page-top footer{
margin: 0;
}



/* ==============================================
#page-project
============================================== */

#page-project #title{
}
@media screen and (min-width:960px) {
#page-project #title{
padding: 76px 0 0 0;
}
}
#page-project #title .inner{
position: relative;
padding: 0 30rem 40rem 30rem;
background: url("../images/cmn_icn_wave.svg") center bottom repeat-x;
background-size: 20rem 10rem;
}
#page-project #title .inner::after{
content: "";
display: block;
background: url("../images/cmn_icn_ship.svg") center bottom -15rem no-repeat;
background-size: 44rem auto;
width: 44rem;
height: 50rem;
position: absolute;
bottom: 10rem;
right: 30rem;
}
#page-project #title .inner h1{
font-size: 36rem;
line-height: 44rem;
font-weight: 300;
letter-spacing: 2rem;
padding: 30rem 0 10rem 0;
position: relative;
z-index: 100;
}
#page-project #title .inner h1::before{
content: "";
background: url("../images/cmn_icn_ttl.svg") no-repeat;
background-size: 60rem 120rem;
width: 60rem;
height: 120rem;
position: absolute;
top:8rem;
left: -30rem;
z-index: -1;
}
#page-project #title .inner h1 span{
font-size: 14rem;
line-height: 20rem;
letter-spacing: 1rem;
color: #fff;
text-align: center;
display: table;
background: #222;
height: 26rem;
border-radius: 13rem;
padding: 4rem 12rem 0 12rem;
margin: 8rem 0 0 0;
}



#page-project #article{
}
#page-project #article .inner{
padding: 15rem 30rem 0 30rem;
}
#page-project #article .inner h2{
font-size: 20rem;
line-height: 30rem;
padding: 30rem 0 0 0;
}
#page-project #article .inner p{
padding: 20rem 0 0 0;
}



#page-project #project{
}
@media screen and (min-width:960px) {
#page-project #project{
padding: 0 0 80px 0;
}
}
#page-project #project .inner{
width: 100%;
height: 520rem;
position: relative;
z-index: 100;
margin: 80rem 0 0 0;
}
#page-project #project .inner ul{
padding: 110rem 30rem 0 30rem;
}
@media screen and (min-width:960px) {
#page-project #project .inner ul{
padding: 110rem 160rem 0 160rem;
}
}
#page-project #project .inner ul li{
padding: 10rem 0 0 0;
}
#page-project #project .inner ul li a{
position: relative;
font-size: 15rem;
line-height: 20rem;
text-align: center;
display: block;
height: 60rem;
background: #fff;
border-radius: 4rem;
padding: 8rem 0 0 0;
filter: drop-shadow(0 4rem 4rem rgba(0,0,0,0.1));
}
#page-project #project .inner ul li a span{
font-size: 12rem;
line-height: 18rem;
color: #fff;
text-align: center;
display: block;
margin: 3rem auto 0 auto;
background: #222222;
width: 160rem;
height: 18rem;
border-radius: 9rem;
}
#page-project #project .inner ul li a::after{
content: "";
background: url("../images/cmn_arw-black.svg");
background-size: 4rem 8rem;
width: 4rem;
height: 8rem;
position: absolute;
bottom:8rem;
right: 8rem;
}
#page-project #project .inner figure{
position: absolute;
top:0;
left: 0;
width: 520rem;
height: 520rem;
margin: 0 0 0 -72.5rem;
z-index: -1;
background: linear-gradient(-45deg, #f5b4c8 0%, #c8bef5 100%);
border-radius: 260rem;
overflow: hidden;
}
@media screen and (min-width:960px) {
#page-project #project .inner figure{
margin: 0 0 0 65px;
}
}
#page-project #project .inner figure img{
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.3;
}



#page-project footer{
margin: 0;
}



/* ==============================================
#page-program
============================================== */

#page-program #title{
}
@media screen and (min-width:960px) {
#page-program #title{
padding: 76px 0 0 0;
}
}
#page-program #title .inner{
position: relative;
padding: 0 30rem;
}
#page-program #title .inner h1{
font-size: 36rem;
line-height: 44rem;
font-weight: 300;
letter-spacing: 2rem;
padding: 30rem 0 10rem 0;
position: relative;
z-index: 100;
}
#page-program #title .inner h1::before{
content: "";
background: url("../images/cmn_icn_ttl.svg") no-repeat;
background-size: 60rem 120rem;
width: 60rem;
height: 120rem;
position: absolute;
top:-10rem;
left: -30rem;
z-index: -1;
}



#page-program #article{
padding: 0 30rem;
}
#page-program #article .inner{
}
#page-program #article .inner h2{
font-size: 20rem;
line-height: 30rem;
letter-spacing: 1rem;
padding: 20rem 0 0 0;
}
#page-program #article .inner p{
padding: 10rem 0 0 0;
text-align: justify;
}
#page-program #article .inner h3{
font-size: 16rem;
line-height: 24rem;
letter-spacing: 1rem;
font-weight: 500;
padding: 25rem 0 0 0;
}
#page-program #article .inner h3 + ul{
}
#page-program #article .inner h3 + ul li{
font-size: 16rem;
letter-spacing: 1rem;
text-align: center;
border: solid 4rem #fff;
border-radius: 20rem;
padding: 40rem 0 44rem 0;
margin: 40rem 0 0 0;
position: relative;
}
#page-program #article .inner h3 + ul li::after{
content: "";
display: block;
background: url("../images/cmn_icn_ship.svg") center bottom -15rem no-repeat;
background-size: 44rem auto;
width: 44rem;
height: 50rem;
position: absolute;
top:-54rem;
left: 0;
right: 0;
margin: auto;
}
#page-program #article .inner h3 + ul li img{
width: auto;
height: 20rem;
display: block;
margin: 0 auto 15rem auto;
}



.slider{
margin: 40rem -30rem -20rem -30rem;
padding: 0 0 35rem 0;
overflow: hidden;
}
.slider div {
cursor: pointer;
}
.slick-slider {
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
border: none!important;
border-radius: 0!important;
}
.slick-slide {
float: left;
margin: 0 10rem;
text-align: center;
}
.slick-slide figure {
height: 232rem;
margin: 0 0 10rem 0;
}
@media screen and (min-width:1500px) {
.slick-slide figure {
height: 510px;
}
}
.slick-slide img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 20rem;
filter: drop-shadow(0 2rem 2rem rgba(0,0,0,0.2));
}
.slick-prev,
.slick-next {
display: none!important;
}
.slick-dots {
position: absolute;
bottom: 0;
display: block;
width: 100%;
padding: 0;
text-align: center;
}
.slick-dots li {
position: relative;
display: inline-block;
width: 16rem;
height: 16rem;
}
.slick-dots li button {
display: block;
width: 6rem;
height: 6rem;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
.slick-dots li button:before {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
width: 6rem;
height: 6rem;
background: #fff;
border-radius: 3rem;
content: ' ';
}
.slick-dots li.slick-active button:before {
background-color: #222222;
}



/* ==============================================
#page-alumni
============================================== */

#page-alumni #title{
}
@media screen and (min-width:960px) {
#page-alumni #title{
padding: 76px 0 0 0;
}
}
#page-alumni #title .inner{
position: relative;
padding: 0 30rem;
}
#page-alumni #title .inner h1{
font-size: 36rem;
line-height: 44rem;
font-weight: 300;
letter-spacing: 2rem;
padding: 30rem 0 10rem 0;
position: relative;
z-index: 100;
}
#page-alumni #title .inner h1::before{
content: "";
background: url("../images/cmn_icn_ttl.svg") no-repeat;
background-size: 60rem 120rem;
width: 60rem;
height: 120rem;
position: absolute;
top:35rem;
left: -30rem;
z-index: -1;
}
@media screen and (min-width:960px) {
#page-alumni #title .inner h1 br:nth-child(2){
display: none;
}
}



#page-alumni #article{
position: relative;
height: 840rem;
z-index: 100;
margin: 20rem 0 0 0;
}
@media screen and (min-width:960px) {
#page-alumni #article{
height: 860px;
margin: 20rem 0 140px 0;
}
}
#page-alumni #article::before{
content: "";
position: absolute;
top:0;
left: 0;
width: 840rem;
height: 840rem;
margin: 0 0 0 -235rem;
z-index: -1;
background: #fff;
border-radius: 50%;
}
@media screen and (min-width:960px) {
#page-alumni #article::before{
margin: 0 0 0 -130px;
}
}
#page-alumni #article::after{
content: "";
display: block;
background: url("../images/cmn_icn_ship.svg") center bottom -15rem no-repeat;
background-size: 44rem auto;
width: 44rem;
height: 50rem;
position: absolute;
top:-24rem;
right: 20rem;
margin: auto;
transform: rotate(20deg);
}
@media screen and (min-width:960px) {
#page-alumni #article::after{
top:-26rem;
right: 186px;
}
}
#page-alumni #article .inner{
padding: 0 30rem;
}
#page-alumni #article .inner h2{
font-size: 30rem;
line-height: 40rem;
letter-spacing: 2rem;
text-align: center;
padding: 70rem 0 0 0;
}
#page-alumni #article .inner h2 span{
display: block;
text-align: center;
font-size: 16rem;
font-weight: 500;
}
#page-alumni #article .inner figure{
text-align: center;
padding: 30rem 0 0 0;
}
#page-alumni #article .inner figure img{
width: auto;
height: 200rem;
}
#page-alumni #article .inner p{
padding: 30rem 0 0 0;
text-align: justify;
}
#page-alumni #article .inner h3{
font-size: 15rem;
font-weight: 500;
padding: 30rem 0 0 0;
}
#page-alumni #article .inner ul{
padding: 10rem 0 0 0;
}
#page-alumni #article .inner .button{
padding: 15rem 0 0 0;
}
#page-alumni #article .inner .button a{
font-size: 14rem;
line-height: 20rem;
letter-spacing: 1rem;
color: #fff;
text-align: center;
display: block;
height: 44rem;
background: linear-gradient(-90deg, #f5b4c8 0%, #c8bef5 100%);
border-radius: 4rem;
filter: drop-shadow(0 4rem 4rem rgba(0,0,0,0.1));
padding: 12rem 0 0 0;
}



/* ==============================================
#page-information
============================================== */

#page-information #introduction{
}
@media screen and (min-width:960px) {
#page-information #introduction{
padding: 76px 0 0 0;
}
}
#page-information #introduction .inner{
position: relative;
padding: 0 30rem;
}
#page-information #introduction .inner h1{
font-size: 36rem;
line-height: 44rem;
font-weight: 300;
letter-spacing: 2rem;
padding: 30rem 0 10rem 0;
position: relative;
z-index: 100;
}
#page-information #introduction .inner h1::before{
content: "";
background: url("../images/cmn_icn_ttl.svg") no-repeat;
background-size: 60rem 120rem;
width: 60rem;
height: 120rem;
position: absolute;
top:-10rem;
left: -30rem;
z-index: -1;
}



#page-information #list{
padding: 25rem 0 0 30rem;
}
#page-information #list .inner{
}
#page-information #list .inner ul{
filter: drop-shadow(0 4rem 4rem rgba(0,0,0,0.1));
}
#page-information #list .inner ul li{
padding: 10rem 0 0 0;
}
#page-information #list .inner ul li a{
display: block;
background: #fff;
border-radius: 4rem 0 0 4rem;
padding: 12rem 14rem 10rem 14rem;
}
#page-information #list .inner ul li a span{
font-size: 11rem;
line-height: 15rem;
font-weight: 700;
display: block;
}



#page-information #title{
padding: 0 30rem;
}
#page-information #title .inner{
}
#page-information #title .inner p::before{
content: "";
background: url("../images/cmn_icn_ttl.svg") no-repeat;
background-size: 60rem 120rem;
width: 60rem;
height: 120rem;
position: absolute;
top:-25rem;
left: -30rem;
z-index: -1;
}
#page-information #title .inner p{
font-size: 20rem;
line-height: 30rem;
font-weight: 500;
position: relative;
z-index: 100;
padding: 20rem 0 0 0;
}
#page-information #title .inner h1{
font-size: 24rem;
line-height: 32rem;
padding: 10rem 0 0 0;
position: relative;
}
#page-information #title .inner h1 span{
font-size: 11rem;
line-height: 20rem;
font-weight: 700;
display: block;
}
#page-information #title .inner h1 small{
font-size: 16rem;
line-height: 24rem;
font-weight: 500;
display: block;
padding: 8rem 0 0 0;
}



#page-information #article{
padding: 0 0 0 30rem;
margin: 35rem 0 0 0;
position: relative;
}
#page-information #article::before{
content: "";
display: block;
background: url("../images/cmn_icn_ship.svg") center bottom -15rem no-repeat;
background-size: 44rem auto;
width: 44rem;
height: 50rem;
position: absolute;
top:-50rem;
right: 30rem;
margin: auto;
}
#page-information #article .inner{
background: #fff;
border-radius: 20rem 0 0 20rem;
padding: 10rem 30rem 30rem 30rem;
}
#page-information #article .inner h2{
font-size: 20rem;
line-height: 30rem;
padding: 48rem 0 0 0;
}
#page-information #article .inner p{
padding: 16rem 0 0 0;
}
#page-information #article .inner figure{
padding: 24rem 0 8rem 0;
}
#page-information #article .inner figure img{
border-radius: 4rem;
}