/*
Theme Name: safer
Author: Shutaro TAMADA
Description: safer corporate website
Version: 1.0
*/


/* ================= 変数設定 =================*/
:root{
    /* 基本カラー */
    --color-main-1 : #99CED4;
    --color-main-2 : #F4666D;
    --color-main-3 : #BF0D6E;
    --color-main-4 : #29F296;

    /* 文字カラー */
    --color-baseText : #333333;
    --color-baseLink : #50868C;
    --color-baseLinkHover : #647173;
    --color-baseWhite : #ffffff;

    /* 背景カラー */
    --color-baseBack : #fbfbfb;
    --color-baseDark : #333333;
    --color-baseGray : #efecec;
    --color-baseGrayHover : #dad9d9;

    /* 基本フォント */
    --font-base : 'ヒラギノ角ゴシック','Hiragino Sans','Noto Sans JP',YuGothic,'Yu Gothic','メイリオ', Meiryo,sans-serif;
    
    /* サイズ */
    --header-height : 70px; /* ヘッダーの高さ */
    --mainMax-weight : 1200px;
    --articleMax-weight : 800px;
    --listMax-weight : 1000px;
}

/* ================= 共通 =================*/
html{
    background-color: var( --color-background);
    -webkit-font-smoothing: antialiased;
}
body{
    -webkit-text-size-adjust: 100%;
}
html,body{
    margin: 0; padding: 0;
    overflow-x:hidden;
    font-family: var(--font-base);
    touch-action: manipulation;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height);
    z-index: 0;
}

/*リンク下線消去*/
a, a:visited{
    color: var(--color-alink);
    text-decoration: none;
}
a:hover{
    color: var(--color-alink-hover);
}

/* 幅指定 */
.sf-max{
    width: 100%; max-width: 1400px;
    margin: 0 auto;
}

.animation{
    opacity: 0;
    transition: all 0.5s ease;
}
.animation-active{
    opacity: 1;
}


/* ================= header =================*/
header{
    position: fixed;
    top: 0; right: 0;
    z-index: 50;
    width: 100%; height: var(--header-height);
    border-bottom: solid 3px var(--color-main-1);
    background-color: var(--color-baseBack);
}
#sf-header-inner{
    position: relative;
    height: var(--header-height); 
}
header a.custom-logo-link{
    position: absolute;
    width: 100px; height: calc(var(--header-height) - 40px);
    top: 20px; left: 20px;
}
header a.custom-logo-link img{
    position: absolute;
    width: auto; height: 100%;
    top: 50%; left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
}
header a.sf-startButton{
    position: absolute;
    top: 25px; right: 20px;
    width: 140px; height: 20px;
    padding: 5px;
    border-radius: 15px;
    background-color: var(--color-main-1);
    color: var(--color-baseWhite);
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
}
header a.sf-startButton:hover,header a.sf-startButton:active,
header a.sf-startButton:focus{
    background-color: var(--color-baseLink);
}
header .menu-header-container ul{
    position: absolute;
    display: flex;
    gap: 15px;
    padding: 0; margin: 0;
    flex-wrap: nowrap;
    top: 25px; right: 185px;
    list-style: none;
}
header .menu-header-container ul li{
    height: 20px;
    padding: 5px;
    color: var(--color-baseText);
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
    text-align: center;
}
header .menu-header-container ul li a{
    color: var(--color-baseDark);
}
header .menu-header-container ul li a:hover,
header .menu-header-container ul li a:focus,
header .menu-header-container ul li a:active{
    color: var(--color-baseLink);
}

header #sf-menuButton{
    display: none;
}



/* ================= footer =================*/
footer{
    width: 100%;
    padding: 12.5px 0 20px 0;
    background-color: var(--color-baseDark);
}

#sf-footer-top{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: calc(100% - 40px );
    padding: 0 20px;
    gap: 20px;
}
#sf-footer-logo{
    display: flex;
    flex-wrap: wrap;
    width: 150px;
    justify-content: space-around;
    align-items: center;
}
#sf-footer-logo a{
    width: 100%;
    text-align: center;
}
#sf-footer-logo a img{
    width: 100px; height: auto;
}
#sf-footer-logo span{
    display: block;
    margin-top: 8px;
    color: var(--color-baseWhite);
    font-size: 12px;
    font-weight: 500;
}

.menu-footer-container ul{
    display: flex;
    gap: 0 15px;
    padding: 0; margin: 0;
    flex-wrap: nowrap;
    list-style: none;
}

.menu-footer-container ul li{
    height: 20px;
    padding: 2.5px 5px;
    color: var(--color-baseWhite);
    font-size: 12.5px;
    font-weight: 500;
    text-align: center;
}

#sf-footer-bottom{
    width: calc(100% - 40px);
    color: var(--color-baseWhite);
    font-size: 12.5px;
    font-weight: 500;
    text-align: right;
}

/* ================= main =================*/
main{
    margin-top:  var(--header-height);
}

/* ================= 検索フォーム =================*/
.sf-searchForm{
    display: flex;
}
.sf-searchForm input{
    width: calc(100% - 80px); height: 27.5px;
    padding: 10px;
    font-size: 15px;
    border-radius: 12.5px;
    border: solid 2.5px var(--color-baseDark);
    outline: none;
}
.sf-searchForm button{
    width: 70px; height: 51.5px;
    margin: 0 0 0 10px;
    padding: 0;
    background-color: var(--color-baseLink);
    color: var( --color-baseWhite);
    border: none;
    outline: none;
    border-radius: 12.5px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
}

.sf-error{
    width: calc(100% - 25px); 
    padding: 12.5px;
    border-radius: 12.5px;
    background-color: var(--color-baseGray);
}
.sf-error h2{
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    margin: 20px 0 5px 0;
}
.sf-error p{
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    margin: 10px 0 20px 0;
}




/* スマートフォン対応 */
@media (max-width : 850px),(max-height : 400px) {
    header a.sf-startButton{
        right: 65px;
    }

    header .menu-header-container ul li a{
        color: var(--color-baseWhite);
    }
    header .menu-header-container ul li a:hover,
    header .menu-header-container ul li a:focus,
    header .menu-header-container ul li a:active{
        color: var(--color-baseGray);
    }

    header #sf-menuButton, #sf-menuButton span{
        display: inline-block;
        transition: all 0.5s ease;
        box-sizing: border-box;
    }
    #sf-menuButton {
        position: absolute;
        top: 25px; right: 18px;
        width: 32px; height: 30px;
        background: none;
        border: none;
        appearance: none;
        cursor: pointer;
    }
    #sf-menuButton span {
        position: absolute;
        left: 0; 
        width: 100%; height: 4px;
        background-color: var(--color-baseLink);
        border-radius: 4px;
    }
    #sf-menuButton span:nth-of-type(1) {
        top: 0;
        transition: all 0.2s ease;
    }
    #sf-menuButton span:nth-of-type(2) {
        top: 13px;
        transition: all 0.2s ease;
    }
    #sf-menuButton span:nth-of-type(3) {
        bottom: 0;
        transition: all 0.2s ease;
    }
    .buttonActive span:nth-of-type(1) {
        transform: translateY(12.7px) rotate(-315deg);
    }
    .buttonActive span:nth-of-type(2) {
        opacity: 0;
    }
    .buttonActive span:nth-of-type(3) {
        transform: translateY(-12.7px) rotate(315deg);
    }

    #sf-header-nav{
        display: block;
        position: fixed;
        width: calc(100% - 80px); height: 0;
        top: var(--header-height); right: 0;
        background-color: var(--color-main-1);
        padding: 0 40px 0 40px;
        overflow-y: scroll;
        overflow-x: hidden;
        transition: all 1s ease;
    }
    .sf-header-nav-open{
        height: calc(100svh - var(--header-height))!important; height: calc(100vh - var(--header-height))!important;
    }
    #sf-header-nav li{
        width: 100%;
        margin: 15px 0;
    }
    #sf-header-nav li a{
        font-size: 20px;
    }

    .menu-footer-container ul{
        flex-wrap: wrap;
    }
    #sf-footer-bottom{
        width: 90%;
        margin: 10px auto;
        text-align: center;
        font-size: 10px;
    }
    
}

@media print{
    .animation{
        opacity: 1;
    }
}