/* -- template */

a { color: rgb(211, 32, 85); }
a:hover { color: rgb(253, 119, 148); }
a:active { color: rgb(253, 119, 148); }

.bg-theme-light {
  background-color: rgb(224, 137, 156);
}

.text-primary {
  color: rgb(253, 119, 148) !important;
}

.btn-primary {
    color: rgb(255,255,255);
    background-color: rgb(211, 32, 85);
}
  
.btn-primary:hover {
    background-color: rgb(253, 119, 148);
}
  
.btn-primary:focus {
    background-color: rgb(253, 119, 148);
    color: white;
}
  
.btn-primary:active {
    background-color: rgb(253, 119, 148) !important;
}

.btn-secondary {
  color: rgb(255,255,255);
  background-color: rgb(255, 121, 161);
}

.btn-secondary:hover {
  background-color: rgb(255, 194, 212);
}

.btn-secondary:focus {
  background-color: rgb(255, 194, 212);
  color: white;
}

.btn-secondary:active {
  background-color: rgb(255, 194, 212) !important;
}

.featured-text {
  border-color: rgb(253, 119, 148) !important;
}
  
#mainNav .nav-link {
    -webkit-transition: none;
    transition: none;
    padding: 2rem 1.5rem;
    color: rgba(253, 119, 148, 0.5);
    font-weight: bold;
  }
  #mainNav .nav-link:hover {
    color: rgba(211, 32, 85, 0.75);
  }
  #mainNav .nav-link:active {
    color: white;
  }
  #mainNav .navbar-toggler {
    color: rgb(253, 119, 148);
    border-color: rgb(253, 119, 148);
  }
  #mainNav .navbar-brand {
    color: rgb(211, 32, 85);
  }
  #mainNav.navbar-shrink {
    background-color: #fff;
  }
  #mainNav.navbar-shrink .navbar-brand {
    color: rgb(211, 32, 85);
  }
  #mainNav.navbar-shrink .nav-link {
    color: rgb(211, 32, 85);
    padding: 1.5rem 1.5rem 1.25rem;
    border-bottom: 0.25rem solid transparent;
  }
  #mainNav.navbar-shrink .nav-link:hover {
    color: rgb(253, 119, 148);
  }
  #mainNav.navbar-shrink .nav-link:active {
    color: rgb(211, 32, 85);
  }
  #mainNav.navbar-shrink .nav-link.active {
    color: rgb(211, 32, 85);
    outline: none;
    border-bottom: 0.25rem solid rgb(248, 112, 141);
  }
  
.masthead{
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.3)), color-stop(75%, rgba(255, 255, 255, 0.7)), to(#161616)), url("../img/bg-masthead.jpg");
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.7) 75%, #161616 100%), url("../img/bg-masthead.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;
}

.about-section { padding-top: 3rem; }
.projects-section { padding-top: 3rem; }

.modal-dialog {
    position: relative;
    max-width: 800px;
    color: rgb(255,255,255);
}
.modal-dialog:before{
  content:"";
  display: block;
  padding-top: 75%; /* 高さを幅の75%に固定 */
}
.modal-content {
  position: absolute;
  top: 0;
  left: 0px;
  bottom: 0;
  right: 0px;
    /*background-color: rgb(17, 31, 58);*/
    background-color: rgb(255,255,255);
    background-repeat: no-repeat;
    background-size: contain;
}
.modal-content img {
    width: 600px;
    height: 600px;
}
/*
.modal-body .image_box {
    width: 600px;
    height: 600px;
    max-width: 800px;
    min-height: 450px;
    max-height: 600px;
}
*/

.btn-char{
  border: none;
  background-color: rgba(0,0,0,0);
  background-size: 56px;
  width: 56px; height: 56px;
  position: relative;
  display: inline-block;
}
.btn-char:hover {
  filter: brightness(130%);
}
.btn-char.btn-char-1{ background-image: url('../img/icon_na.png'); }
.btn-char.btn-char-2{ background-image: url('../img/icon_se.png'); }
.btn-char.btn-char-3{ background-image: url('../img/icon_mi.png'); }
.btn-char.btn-char-4{ background-image: url('../img/icon_ak.png'); }
.btn-char.btn-char-5{ background-image: url('../img/icon_yu.png'); }

.screenshots img {
  width: 160px;
}

.screenshots .screenshot {
  padding: 4px;
}

.contact-section .card {
  border-color: rgb(253, 119, 148);
}
.contact-section .card hr{
  border-color: rgb(253, 119, 148);
}