@charset "utf-8";

/*================================================== 
                    代表メッセージ
================================================== */

/*	
    top-message__visual
================================================== */
section#top-message{
}
div.top-message__visual{
    background: url(./img/message-visual.jpg) top center/cover no-repeat ;
    height: 35vw;
    width: 100%;
    margin:0 auto 8% auto;
    position: relative;
}
div.top-message__ttl{
    position: absolute;
    top: 20%;
    left: 0;
    border-bottom: 2px solid #000;
    width: 42%;
    padding-bottom: 50px;
}
div.top-message__ttl h1{
    color: #011a27;
    font-size: 3.5rem;
    font-family: "Noto Serif Japanese", serif;
    font-weight: 900;
    line-height:1;
    letter-spacing: 0.2rem;
    padding-left: 120px;
}
div.top-message__ttl h1 span{
    font-family: "Renner*";
    font-weight: 700;
    font-size: 2rem;
}
div.top-message__visual p{
    color: #011a27;
    position: absolute;
    top: 38%;
    left: 120px;
    font-size: 1.6rem;
    width: 480px;
    line-height: 2;
}
div.top-message__visual p b{
    display: block;
    font-family: "Noto Serif Japanese","メイリオ","ヒラギノ角ゴ Pro W3",serif;
    font-weight: 800;
    font-size: 2.6rem;
    padding-bottom: 2rem;
    line-height: 1.8;
}

@media screen and (max-width:1199px){
    div.top-message__ttl h1{
        padding-left: 3%;
    }
    div.top-message__visual p{
        position: absolute;
        left: 2%;
    }
}
@media screen and (max-width:999px){
    div.top-message__visual p{
        background-color: rgba(255,255,255,.4);
        padding: 1rem;
    }
}
@media screen and (max-width:767px){
    div.top-message__visual{
        background: none;
        height: auto;
        width: 100%;
        margin: 0 auto 8% auto;
        position: relative;
        }
        div.top-message__ttl{
        position:relative;
        border-bottom:none;
        width: 100%;
        padding: 0;
    }
    div.top-message__ttl h1{
        position: absolute;
        top: 25%;
        left: 0;
        font-size: 2.2rem;
        font-family: "Noto Serif Japanese","Sawarabi Mincho", serif;
        font-weight: 800;
        line-height:1;
        letter-spacing: 0.2rem;
        padding: 0 10px 20px 10px;
        border-bottom: 2px solid #000;
    }
    div.top-message__ttl h1 span{
        font-family: "Renner*";
        font-weight: 700;
        font-size: 1.6rem;
    }
    div.top-message__ttl div.smp{
        position: relative;
        width: 100%;
        padding-top: 60%;
        overflow: hidden;
        z-index: -10;
    }
    div.top-message__ttl div.smp img{
        position: absolute;
        top: 30%;
        left: 50%;
        -webkit-transform: translate(-50%, -20%);
        -ms-transform: translate(-50%, -20%);
        transform: translate(-50%, -20%);
        max-width: 180%;
        max-height: 180%;
    }
    div.top-message__visual p{
        position: static;
        font-size: 1.6rem;
        width: 100%;
        line-height: 1.8;
        padding: 5%;
        background-color: #f3f7fa;
    }
    div.top-message__visual p b{
        display: block;
        font-family: "Noto Serif Japanese","Sawarabi Mincho", serif;
        font-weight: 900;
        font-size: 2rem;
        padding-bottom: 1.6rem;
        line-height: 1.8;
    }    
}
@media screen and (max-width:374px){
    div.top-message__ttl h1{
        font-size: 1.8rem;
    }
}

/*
	top-message__contents
================================================== */
section.top-message__contents{
    margin-bottom: 8%;
    padding: 0 2%;
    box-sizing: border-box;
}
section.top-message__contents>div{
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}
section.top-message__contents h2{
    font-size: 2.5rem;
    font-family: "Noto Serif Japanese","Sawarabi Mincho", serif;
    font-weight: 900;
    text-align: center;
    padding-bottom:1em;
}
section.top-message__contents p{
    font-size: 1.6rem;
    padding-bottom: 2em;
    line-height: 1.8;
}
div.top-message__box{
    margin-bottom:5%;
}
p.top-signature{
    text-align: right;
    font-family: "Noto Serif Japanese","Sawarabi Mincho", serif;
    font-weight: 700;
}
p.top-signature img{
    vertical-align: bottom;
    width: 152px;
}

@media screen and (max-width: 767px){
    section.top-message__contents h2{
        font-size: 2rem;
        text-align: left;
        padding-bottom:1em;
    }
    section.top-message__contents p{
        padding-bottom: 1.6rem;
    }
}