@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
}

img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

body{
  font-family:"Noto Sans JP", sans-serif;
}
header {
  background: #afeeee;
}

header h1 {
  text-align: center;
  padding: 1rem;
}

header h1 a{
  color:inherit;
  text-decoration:none;
}

header h1 a:active{
  color:inherit;
}

nav ul {
  padding-bottom: 1rem;
  text-align: center;
}

nav ul li {
  display: inline-block;
  margin: 0 10px;
}

nav ul li a {
  font-weight: bold;
  color: #fff;
}
main {
  padding: 1rem;
  max-width: 1200px;
  margin: 0 auto;

}

.main-visual{
  display:block;
  width:90%;
  max-width:1200px;
  margin:30px auto;
  height:auto;
}

section {
  background: #FFF;
    padding: 20px;
}

.container{
  display: flex;
  gap: 20px;
   flex-direction: row-reverse;
}

.column-img {
  flex: 1;
}

.column-text {
  flex: 2;
}


footer {
  background: #afeeee;
    color: #FFF;
  text-align: center;
  padding: 1rem;
  width: 100%;
}

.profile img{
 width:100%;
  max-width:600px;
  height:auto;
  display:block;
  margin-top:40px;
  margin-bottom:40px;
}

.profile {
  display:flex;
  flex-direction:column;
  align-items:center;
}

.profile-info {
  width:100%;
  max-width:600px;
  margin:20px auto;
  padding:20px;

  background-color:#f5f5f5;
  border-radius:15px;

  text-align:left;
}


video{
  width:90%;
  max-width:700px;
  height:auto;
  display:block;
  margin:20px auto;
}

.work {
  text-align:center;
}

.work-info {
  width:80%;
  max-width:600px;
  margin:20px auto;
  padding:20px;

  background-color:#f5f5f5;
  border-radius:15px;

  text-align:left;
}

.highlight {
  color:#87cefa;
  font-weight:bold;
}

.back-to-top{
  position:foxed;
  bottom:20px;
  right:20px;

  width:50px;
  height:50px;

  background-color:#6da9d2;
  color:white;

  text-decoration:none;
  border-radius:50%;

  display:flex;justify-content:center;
  align-items:center;

  font-size:24px;
  font-weight:bold;

  box-shadow:0 4px 10px rgba(0,0,0,0,.2);

  transition:0.3s;
}

.back-to-top:hover{
  background-color:#4e90bd;
  transform:scale(1.1);
}
html{scroll-behavior:smooth;}

.slider{
  width:90%;
  max-width:800px;
  margin:50px auto;
  position:relative;
}

.slides{
  width:100%;
  position:relative;
  overflow:hidden;
}

.slide{
  width:100%;
  height:auto;
  display:none;
}

.slide.active{
  display:block;
}

.prev,
.next{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(0,0,0,0.5);
  color:white;
  border:none;
  padding:10px 15px;
  cursor:pointer;
  font-size:20px;
}

.prev{
  left:10px;
}

.next{
  right:10px;
}