@charset "UTF-8";
/* CSS Document */
body{
background: linear-gradient(to right, #fefbde 0%, #fefbde 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 100%);
}
.sp_back{
display: none;
}

h2{
background-image: url("../image/04_campuslife/04_title_header.png");
}

.title{
display: block;
position: relative;
width: 700px;
height: 92px;
margin: 150px auto 0px;
background-image: url("../image/04_campuslife/intro.svg");
background-repeat: no-repeat;
background-size: 100%;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
}
.flake00{
display: block;
position:absolute;
width: 180px;
height: auto;
z-index: 5;
margin:0px auto 0px auto;
top: 90px;
right: -10px;
}
.flake01{
display: block;
position:absolute;
width: 280px;
height: auto;
z-index: 5;
margin:0px auto 0px auto;
top: 90px;
left: -40px;
}

.slide_box{
padding: 6% 0;
margin: 0 calc(50% - 50vw);
width: 100vw;
position: relative;
z-index: 10;
}
.slide_box .slide{
display: block;
width: 100%;
}
.slide_box .slide .slide__item {
    margin-right: 10px;
    margin-left: 10px;
}

p,
.year p{
font-size: 16px;
text-align: center;
display: block;
margin: 0px auto;
width: 100%;
}

.day{
margin: 80px auto;
display: block;
width: 100%;
height: auto;
position: relative;
background-color: #fffbf3;
padding-bottom: 280px;
}
.day .kira_top{
width: 200px;
position: absolute;
left: 50%;
  transform: translateX(-50%);
top: -10px;
}
.day .kira_bottom{
width: 200px;
position: absolute;
left: 50%;
  transform: translateX(-50%);
bottom: -10px;
}
.day .title_day{
width: 300px;
height: 90px;
display: block;
position: relative;
margin: 0px auto;
top: 80px;
}
.day .day_intro{
display: block;
position: relative;
width: 600px;
height: 95px;
margin: 100px auto 0px;
background-image: url("../image/04_campuslife/intro2_sp.svg");
background-repeat: no-repeat;
background-size: 100%;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
}
.day .flake02{
display: block;
position:absolute;
width: 130px;
height: auto;
z-index: 5;
margin:0px auto 0px auto;
top: 330px;
right:300px;
}
.day ul{
width: 730px;
height: auto;
margin: 0px auto;
list-style: none;
display: flex;
justify-content: center;
flex-wrap: wrap;
position: relative;
padding: 30px 0 0px 0;
}
.day ul li{
display: block;
position: relative;
width: 350px;
height:260px;
margin:0px auto 0px;
background-repeat: no-repeat;
background-size: 100%;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
}
.day ul .sche1{
background-image: url("../image/04_campuslife/shce01.png");
margin-right: 30px;
}
.day ul .sche2{
background-image: url("../image/04_campuslife/shce02.png");
margin-top: 180px;
margin-bottom: -160px;
}
.day ul .sche3{
background-image: url("../image/04_campuslife/shce03.png");
margin-right: 30px;
}
.day ul .sche4{
background-image: url("../image/04_campuslife/shce04.png");
margin-top: 180px;
margin-bottom: -160px;
}
.day ul .sche5{
background-image: url("../image/04_campuslife/shce05.png");
margin-right: 30px;
}
.day ul .sche6{
background-image: url("../image/04_campuslife/shce06.png");
margin-top: 180px;
margin-bottom: -160px;
}



.year{
margin: 80px auto 80px auto;
display: block;
width: 100%;
height: auto;
position: relative;
}
.year h3{
display: block;
position: relative;
width: 700px;
height: 156px;
margin: 150px auto 30px auto;
background-image: url("../image/04_campuslife/title2_sp.svg");
background-repeat: no-repeat;
background-size: 100%;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
}

.year ul{
width: 770px;
height: auto;
margin: 0px auto;
list-style: none;
display: flex;
justify-content: center;
flex-wrap: wrap;
position: relative;
padding: 30px 0 0px 0;
}
.year ul li{
display: block;
position: relative;
width: 350px;
height:304px;
margin: 20px 10px;
}
.year .kira{
width: 200px;
margin: 100px auto 0px auto;
display: block;
}



.other{
margin: 0px auto;
display: block;
width: 870px;
height: auto;
padding: 0 0 180px 0;
position: relative;
}
.other h3{
display: block;
position: relative;
width: 700px;
height: 156px;
margin: 0px auto 0px auto;
background-image: url("../image/04_campuslife/title4.png");
background-repeat: no-repeat;
background-size: 100%;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
}

.other ul{
width: 870px;
margin: 0px auto;
list-style: none;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.other ul li:hover{
opacity: 0.6;
}
.other ul .other1{
width: 200px;
height: auto;
margin: 40px 60px;
display: block;
}
.other ul .other2{
width: 200px;
height: auto;
margin: 40px 60px;
display: block;
}
.other ul .other3{
width: 280px;
height: auto;
margin: 0px 5px;
display: block;
}
.other ul .other4{
width: 280px;
height: auto;
margin: 0px 5px;
display: block;
}
.other ul .other5{
width: 280px;
height: auto;
margin: 0px 5px;
display: block;
}

/* =====================

/* ============================================== スマートフォン ============================================================================================================================================== */
@media screen and (max-width: 769px) {
body{
background: linear-gradient(to right, #fefbde 0%, #fefbde 38%, rgba(0,0,0,0) 38%, rgba(0,0,0,0) 100%);
}
.sp_back{
display: block;
width: 100%;
height: 80px;
background-color: #ffffff;
position: absolute;
}

h2{
background-image: url("../image/04_campuslife/04_title_header_sp.png");
}


.title{
display: block;
position: relative;
width: 85%;
height: 0px;
padding-top: 31%;
margin: 0px auto 0px;
background-image: url("../image/04_campuslife/intro_sp.svg");
background-repeat: no-repeat;
background-size: 100%;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
}
.flake00{
display: none;
}
.flake01{
display: none;
}

.slide_box{
display: block;
padding: 0;
margin: 8% 0 5% 0;
width: 100%;
height: 200px;
position: relative;
overflow: hidden;
z-index: 10;
}
.slide_box .slide{
display: block;
width: 1200px;
position: absolute;
top: 0px;
}
.slide_box .slide .slide__item {
    margin-right: 10px;
    margin-left: 10px;
}
.year p,
p{
width: 85%;
font-size: 16px;
text-align: justify;
display: block;
margin: 0px auto;
line-height: 32px;
}




.day{
margin: 80px auto;
display: block;
width: 100%;
height: auto;
position: relative;
background-color: #fffbf3;
padding-bottom: 110px;
}
.day .kira_top{
width: 200px;
position: absolute;
left: 50%;
  transform: translateX(-50%);
top: -10px;
}
.day .kira_bottom{
width: 200px;
position: absolute;
left: 50%;
  transform: translateX(-50%);
bottom: -10px;
}
.day .title_day{
width: 60%;
height: 90px;
display: block;
position: relative;
margin: 0px auto;
top: 60px;
}
.day .day_intro{
display: block;
position: relative;
width: 85%;
height: 0px;
padding-top: 39%;
margin: 80px auto 0px;
background-image: url("../image/04_campuslife/intro2.svg");
background-repeat: no-repeat;
background-size: 100%;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
}
.day .flake02{
display: block;
position:absolute;
width: 70px;
height: auto;
z-index: 5;
margin:0px auto 0px auto;
top: -30px;
right:5%;
}
.day ul{
width: 100%;
height: auto;
margin: 0px auto;
list-style: none;
display: flex;
justify-content: center;
flex-wrap: wrap;
position: relative;
padding: 20px 0 0px 0;
}
.day ul li{
display: block;
position: relative;
width: 90%;
height:0px;
padding-top: 81%;
margin:0px auto;
background-repeat: no-repeat;
background-size: 100%;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
}
.day ul .sche1{
background-image: url("../image/04_campuslife/shce01sp.png");
margin:0px auto;
}
.day ul .sche2{
background-image: url("../image/04_campuslife/shce02sp.png");
margin:0px auto;
}
.day ul .sche3{
background-image: url("../image/04_campuslife/shce03sp.png");
margin-right: 30px;
}
.day ul .sche4{
background-image: url("../image/04_campuslife/shce04sp.png");
margin:0px auto;
}
.day ul .sche5{
background-image: url("../image/04_campuslife/shce05sp.png");
margin:0px auto;
}
.day ul .sche6{
background-image: url("../image/04_campuslife/shce06sp.png");
margin:0px auto;
}




.year{
margin: 0px auto 80px auto;
display: block;
width: 100%;
height: auto;
position: relative;
}
.year h3{
display: block;
position: relative;
width: 85%;
height: 0px;
padding-top: 45%;
margin: 0px auto 10px auto;
background-image: url("../image/04_campuslife/title2.svg");
background-repeat: no-repeat;
background-size: 100%;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
}

.year ul{
width: 100%;
height: auto;
margin: 0px auto;
list-style: none;
display: flex;
justify-content: center;
flex-wrap: wrap;
position: relative;
padding: 30px 0 0px 0;
}
.year ul li{
display: block;
position: relative;
width: 90%;
height:auto;
margin: 10px auto;
}
.year .kira{
width: 200px;
margin: 100px auto 0px auto;
display: block;
}



.other{
margin: 0px auto;
display: block;
width: 100%;
height: auto;
padding: 0 0 180px 0;
position: relative;
}
.other h3{
display: block;
position: relative;
width: 100%;
height: 0px;
padding-top: 24%;
margin: 0px auto 30px auto;
background-image: url("../image/04_campuslife/title4sp.png");
background-repeat: no-repeat;
background-size: 100%;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
}

.other ul{
width: 100%;
margin: 0px auto;
list-style: none;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.other ul li:hover{
opacity: 0.6;
}
.other ul .other1{
width: 40%;
height: auto;
margin: 10px 10px;
display: block;
order: 1;
}
.other ul .other2{
width: 40%;
height: auto;
margin: 10px 10px;
display: block;
order: 2;
}
.other ul .other3{
width: 320px;
height: auto;
margin: 20px auto;
display: block;
order: 3;
}
.other ul .other4{
width: 320px;
height: auto;
margin: 20px auto;
display: block;
order: 4;
}

.other ul .other5{
width: 320px;
height: auto;
margin: 20px auto;
display: block;
order: 5;
}

}