@charset "UTF-8";

/* Index */
body {
    width: 100%;
    height: 100%;
    letter-spacing: 0.1em;
}
.about {
    letter-spacing: 0.2em
    font-family: 'Quicksand',sans-serif;
    margin-top: 7em;
}
.about p {
    padding-top: 1em;
}
.btn-xl{
    padding:1.25rem 2.5rem
}
.content-section {
    padding-top: 7.5rem;
    padding-bottom: 3.5rem;
}
.masthead {
    min-height:30rem;
    position:relative;
    display:table;
    width:100%;
    height:auto;
    padding-top:8rem;
    padding-bottom:8rem;
    background:linear-gradient(90deg,rgba(255,255,255,.1) 0,rgba(255,255,255,.1) 100%),url(../images/bg-masthead2.jpg);
    background-position:center center;background-repeat:no-repeat;background-size:cover
}
.masthead h1{
    font-size:4em;
    margin:0;
    padding:0
}
.masthead h2{
    font-size:3em;
    margin:0;
    padding:0;
    font-family: 'Sawarabi Mincho', sans-serif;
}
.masthead h3{
    font-family: 'Noto+Serif', sans-serif;
}
hr.small {
    max-width: 100px;
}
.portfolio-item {
    display: block;
    position: relative;
    overflow: hidden;
    max-width: 550px;
    margin: auto auto 1rem;
}
.caption {
    display: flex;
    height: 100%;
    width: 100%;
    background-color: fade-out($gray-900, 0.8);
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
}
.caption-content {
    color: white;
    margin: auto 2rem 2rem;
}
.caption-content h2 {
    font-size: 1.3em;
}
.caption-content p {
    font-size: 0.9rem;
}
.ttl {
    margin-top: 7em;
    font-size: 20px;
    padding-bottom: 5px;
    border-bottom: 1px solid #ccc;
}
@media screen and (max-width: 480px) {
    .mobile-none {
        display: none
    }
    .masthead h2 {
        font-size: 23px
    }
    .masthead h3 {
        font-size: 18px
    }
    .br-sp {
        display:block;
    }
    .caption-content h2 {
        font-size: 1.4em;
    }
}
@media screen and (min-width: 650px){
    .br-sp {
        display:none;
    }
}
@media screen and (min-width: 992px) {
    .body {
        max-width: none;
        margin: 0;
    }
    .masthead{
        height:100vh
    }
    .masthead h1{
        font-size:5.5rem
    }
}
.topics dl {
    padding: 15px 0;
    border-bottom: 1px solid #ccc;
}
.topics dt {
    padding-bottom: 5px;
}
@media screen and (min-width: 768px) {
    .topics dt {
        clear: left;
        float: left;
        width: 10%;
    }
    .topics dd {
        margin-left: 11%;
    }
}

/* Header */
.dropdown:hover .dropdown-menu {
    display: block;
}
.dropdown-border{
    border-color:#FFFFFF;
}
@media screen and (max-width: 480px) {
    .dropdown-border{
        left: 35%;
        transform: translateX(35%);
    }
}

/* Privacy */
.txt {
    display: inline-block;
    text-align: left;
}
.indent1 {
    margin-left:2.25em;
}
.indent2 {
    margin-left:5.25em;
    text-indent: -3.25em;
}
.indent3 {
    margin-left:5em;
}
.indent4 {
    margin-left:7em;
    text-indent: -1em;
}
.indent5 {
    margin-left:3.5em;
    text-indent: -1.25em;
}
.textcenter {
    text-align:center;
}
.bordertopnone {
    border-top:none;
}
.borderbottomnone {
    border-bottom:none;
}
.foo {
    letter-spacing: 0.3em;
    font-family: 'Sawarabi Mincho', sans-serif;
}
.box_heading {
    background-color:#edeff1;
    text-align:center;
    padding: 2em 0; 
}
@media (max-width: 480px) {
    .box_heading h1 {
        font-size: 20px;
    }
}