@charset "UTF-8";
html{
    font-size:100%; /*ユーザー設定の文字サイズを正しく反映*/
    scroll-behavior: smooth;
}

*{
    box-sizing:border-box; /*余白や線を幅や高さに含める*/
}

img{
    max-width:100%; /*画像が親要素からはみ出すのを防ぐ*/
    height:auto;
}

@media screen and (min-width: 1024px){
    body{
        color: #333;
        background-color:#fff;
        margin:0;
        padding:0;
        font-family: "游ゴシック Medium","Yu Gothic Medium","游ゴシック体",YuGothic,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
        line-height: 1.7;
        letter-spacing: .04rem;
        -webkit-text-size-adjust: 100%;
        -webkit-font-smoothing: antialiased;
    }
    
    header{
        position: fixed; /*** 画面上部に固定 ***/
        height: 5.6rem;
        width: 100%;
        padding: 0;
        display: flex;
        justify-content: space-between;  /*両端に配置*/
        align-items: center;  /*ロゴ、メニューの文字を垂直中央に並べる*/
        z-index: 10;
    }
    
    header .company-logo {
        position: fixed;
        text-decoration: none;
        height: 6rem;
        width: 16rem;
        padding-left: 6rem;
        padding-top: 1.4rem;
        padding-bottom: 2rem;
        display: block;
        background-image: url('../image/sinalgae_logo_horizontal.png');
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-size: 13rem;
        font-size: 0.9rem;
    }

    header nav {
        flex: 1;
        margin-top: 1rem;
        margin-right: 14rem;
    }
    
    header nav ul{
        list-style: none;
        display: flex;
        justify-content: flex-end;
    }

    header nav li {
        width: 7rem;
    }
    
    header nav a {
        text-decoration: none;
        font-weight: 600;
        color:#333;
        line-height: auto;
        position: relative;
    }
    
    header nav a::after {
        content: '';
        /*絶対配置で線の位置を決める*/
        position: absolute;
        bottom: -0.3rem;
        left: 0;
        /*線の形状*/
        width: 100%;
        height: 0.14rem;
        background:#ed7626;
        /*アニメーションの指定*/
        transition: all .3s;
        transform: scale(0, 1);/*X方向0、Y方向1*/
        transform-origin: center top;/*上部中央基点*/
    }
    
    header nav a:hover::after {
        transform: scale(1.3, 1);/*X方向にスケール拡大*/
    }

    header .contact-button {
        position: fixed;
        font-weight: 600;
        text-decoration: none;
        background-color: #2781A0;
        border-radius: 4rem;
        height: 4rem;
        width: 15rem;
        box-sizing: border-box;
        padding: 1.2rem 0.6rem 0.5rem 0.1rem;
        right: -2rem;
        margin-top: 0.6rem;
        text-align: center;
        color: #FFFFFF;
        display: block;
        background-image: url('../image/mail_button.png');
        background-repeat: no-repeat;
        background-position: 7% 50%;
        background-size: 2.6rem;
    }

    main {
        padding-top: 7rem;
        text-align: center;
    }

    footer {
        height: 6rem;
    }
    
    footer .company-info{
        text-align: center;
    }
    
    footer .copyright {
        font-size: 0.8rem;
        bottom: 0;
        margin-top: 4rem;
    }
}

@media screen and (max-width: 1023px){
    body{
        color: #333;
        background-color:#fff;
        margin:0;
        padding:0;
        font-family: "游ゴシック Medium","Yu Gothic Medium","游ゴシック体",YuGothic,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
        line-height: 1.7;
        letter-spacing: .04rem;
        -webkit-text-size-adjust: 100%;
        -webkit-font-smoothing: antialiased;
    }
    
    header{
        height: 6rem;
        width: 100%;
        display: flex;
        justify-content: space-between;  /*両端に配置*/
        align-items: center;  /*ロゴ、メニューの文字を垂直中央に並べる*/
        position: absolute;
        z-index: 10;
    }
    
    header .company-logo {
        position: fixed;
        text-decoration: none;
        height: 6rem;
        width: 16rem;
        padding-left: 6rem;
        padding-top: 1.4rem;
        padding-bottom: 2rem;
        display: block;
        background-image: url('../image/sinalgae_logo_horizontal.png');
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-size: 13rem;
        font-size: 0.9rem;
    }

    header .contact-button {
        position: fixed;
        font-weight: 600;
        text-decoration: none;
        background-color: #2781A0;
        border-radius: 4rem;
        height: 4rem;
        width: 15rem;
        box-sizing: border-box;
        padding: 1.2rem 0.6rem 0.5rem 0.1rem;
        right: -2rem;
        margin-top: 0.6rem;
        text-align: center;
        color: #FFFFFF;
        display: block;
        background-image: url('../image/mail_button.png');
        background-repeat: no-repeat;
        background-position: 7% 50%;
        background-size: 2.6rem;
    }

    header nav {
        position: fixed;
        bottom: 0;
        width: 100%;
        background-color: #f6f5f5;
        height: 7rem;
    }
    
    header nav ul{
        list-style: none;
        display: flex;
        justify-content: space-around;
        text-align: center;
        height: 100%;
        margin: auto;
    }

    header nav li{
        display: flex;
        width: 100%;
        margin: 0;
        vertical-align: bottom;
    }
    
    header nav a {
        text-decoration: none;
        font-weight: 600;
        font-size: 1.4rem;
        color:#333;
        display: block;
        width: 100%;
        box-sizing: border-box;
        background-repeat: no-repeat;
        background-position: 50% 30%;
        background-size: 2.6rem;
        padding-top: 4rem;
    }

    header nav .home{
        background-image: url('../image/home_icon_gray.png');
    }

    header nav .company{
        background-image: url('../image/company_icon_gray.png');
    }

    header nav a:hover {
        color: #2781A0;
        background-repeat: no-repeat;
        background-position: 50% 30%;
        background-size: 2.6rem;
    }

    header nav .home:hover {
        background-image: url('../image/home_icon_blue.png');
    }

    header nav .company:hover {
        background-image: url('../image/company_icon_blue.png');
    }

    header .contact-button {
        position: fixed;
        font-weight: 600;
        text-decoration: none;
        background-color: #2781A0;
        border-radius: 4rem;
        height: 4rem;
        width: 15rem;
        box-sizing: border-box;
        padding: 1.2rem 0.6rem 0.5rem 0.1rem;
        right: -2rem;
        margin-top: 0.6rem;
        text-align: center;
        color: #FFFFFF;
        display: block;
        background-image: url('../image/mail_button.png');
        background-repeat: no-repeat;
        background-position: 7% 50%;
        background-size: 2.6rem;
    }

    main {
        padding-top: 7rem;
        text-align: center;
    }

    footer {
        height: 6rem;
        margin-bottom: 7rem;
    }
    
    footer .company-info{
        text-align: center;
    }
    
    footer .copyright {
        font-size: 0.8rem;
        bottom: 0;
        margin-top: 4rem;
    }
}