@charset "UTF-8";
*{
margin: 0;
padding: 0;
}

body{

}

img{
max-width: 100%;
height: auto;
}

.container{
width: 1080px;
margin: 0 auto;
}

.section{
background-color: rgba(0,0,0,0.5);
height: 100px;

}

.card{
display: flex;
justify-content:space-between;
}

.card__image{
background-color: #fff;
width: 185px;
}

.card__text{
width: 55%;
}
html body{
margin: 0;
padding: 0;
height: 100%;
}
nav{
padding: 0;
}
nav ul{
display: flex;
justify-content: flex-end;
list-style-type: none;
}
nav li{
font-size: 50px;
padding: 0 30px;
padding-top: 10px;
}
body{
background-size: cover;
}
li a{
text-decoration: none;
color: #13cd38;
}

main{
/*width: 1180px;*/
}

@media screen and (max-width: 768px) {
.section{
background-color: rgba(0,0,0,0.5);
height: 450px;
}

  .card {
    flex-direction:column;
    text-align: center;
  }

  .card__text ul {
  display:block;
    flex-direction: column;
    gap: 10px;
  }
  
  .card__text li{
  display: inline-block;
  font-size: 50px;
  font-family: serif;
  }
  .card__image img {
  display:block;
  justify-content: center;
    width: 1000px;
    margin-bottom: 15px;
  }
}
.vertical-text{
color: #fff;
/*writing-mode: vertical-rl;
text-orientation:upright;*/
font-size: 50px;
background-color: rgba(0,0,0,0.5);
position: absolute;
top: 196px;
left: 130px;
font-family: serif;
}


.totono{
color: #ffd700;
-webkit-text-stroke:3px black;
font-family: sans-serif;
}

.hana{
width: 500px;
position: absolute;
left: 750px;
padding-top: 800px;
}
.main_visual{
background-color: #151732;
background-image: url("../images/ing-2865.jpg");
position: relative;
max-width: 100%;
min-height: 1000px;
background-size: cover;
background-position: center;
background-attachment: fixed;
display: flex;
flex-direction: column;
/*justify-content: center;*/
/*align-items:flex-start;*/
background-repeat: no-repeat;
}

h1{
padding: 40px;
padding-left: 0;
padding-top: 300px;
padding-bottom: 0px;
width: 800px;
max-width: 100%;
max-height: 100%;
position: absolute;
top:86px;
left: -60px;
}
/*main .glass{
width: 10px;
height: 10px;
}*/

.glass{
height: 1500px;
}

.glass img{
width: 300px;
overflow: hidden;
padding: 100px;
}
/*width: 10px;
height: 250px;
display: block;
padding: 50px;
min-width: 500px;
}*/

.glass_text{
font-family: serif;
}

aside h2{
position: absolute;
left: 500px;
color: #CCB641;
padding: 20px;
padding-top: 30px;
/*padding-left: 90px;*/
padding-bottom: 35px;
font-size: 50px;
}
.glass_text p{
color: #fff;
padding: 0 300px;
padding-top: 165px;
padding-bottom: 20px;
padding-left: 0;
padding-right: 800px;
font-size: 23px;
width: 510px;
text-align:justify;
line-height: 50px;
}

.setumei{
color: #fff;
font-size: 23px;
width: 510px;
position: absolute;
    left: 50px;
padding-top: 50px;
}
.container_2{
background-color: #241566;
background-size: 500px;
display: flex;
justify-content: space-between;
}

.section_2{
background-color: aliceblue;
background-image:url("../images/mizu.png");
position:relative;
background-repeat: no-repeat;
background-size: cover;
background-attachment:fixed;
height: 100%;
min-height: 1500px;
}

/*.container_3{
margin: 0 auto;
}*/

.card_2__image img{
width: 800px;
position: relative;
right: 100px;
top: 200px;

/*padding-right: 100px;
padding-top: 50px;*/
box-shadow: 15px 25px 10px 15px rgba(0,0,0,0.5);
}

.card_2{
display: flex;
justify-content:space-between;
}

.card_2__text{
padding: 90px;
font-family: serif;
}

.card_2__text h3{
text-align:justify;
padding-bottom: 50px;
color:  #CCB641;
font-size: 80px;
}
.card_2__text P{
background-color: rgba(0,0,0,0.5);
font-size: 23px;
color: #fff;
width: 500px;
text-align: center;
position:absolute;
  left: 300px;
  line-height: 60px;
}

.card_2__image h2{
width: 500px;
font-family: serif;
background-color: rgba(0,0,0,0.5);
position:relative;
left: 50px;
top:100px;
text-align: center;
color: #fff;
font-size: 60px;
}

.card_2__image p{
color: #fff;
position: relative;
top: 250px;
left: 80px;
width: 500px;
font-size: 30px;
text-align: center;
border: 5px solid #a55437;
background-color: #a55437;
/*height: 100px;*/
border-radius: 50px;
border-radius: 9999px;
}

nav a{
text-decoration: none;
}

a:hover{
color: #1B3373;
text-decoration: underline;
}

.section_3{
background-color: #241566;
}
.section_3 ul{
display:flex;
list-style: none;
}
footer ul{
display: block;
}

footer p{
text-align: center;
}