/* 全ページ共通のcss設定 */

body {

    font-family: 'Noto Sans JP', sans-serif;

    font-size: 1rem;

    color: #000000;

}

/* IEだけに適応 */

_:lang(x)::-ms-backdrop, .selector {

    font-family: "Segoe UI", Meiryo, sans-serif;

}



body a {

    color: #000000;

    transition: color 0.3s ease-out;

}

body a:hover {

    color: #666;

    text-decoration: none;

}

body a:active {

    color: #000000;

    text-decoration: none;

}



.container {

    max-width: 1020px;

}



/* headerエリア */

header {

    background-color: #fff;

    border-top: 10px solid #6fba2c;

    position: fixed;

    height: 100px;

    transition: .5s;

    width: 100%;

    z-index: 2;

}

/* スクロール時のheaderエフェクト */

header.transform {

    box-shadow: 0px 10px 10px -5px rgba(0,0,0,0.2);

}

#nav_brand {

    line-height: 1rem;

    text-align: center;

}



#nav_brand .company_name_jp {

    font-size: 1.125rem;

}

#nav_brand .company_kabu {

    font-size: 0.75rem;

}

#nav_brand .company_name_en {

    font-size: 0.75rem;

    letter-spacing: 0.125rem;

}



#nav_link {

    height: 90px;

}

#nav_link > div {

    margin-right: 30px;

}

#nav_link > div.menu_link {

    padding: 3px 0;

}

#nav_link > div.sns_icon_img{

    margin-left: 35px;

    margin-right: 0px;

}

#nav_link > div.sns_icon_img img {

    max-height: 35px;

}

#nav_link div.menu_link:hover {

    background-image: repeating-linear-gradient(272deg, #6fba2c, #6fba2c 4px, transparent 4px, transparent 9px, #6fba2c 9px);

    background-size: 100% 2px;

    background-position: 0 100%;

    background-repeat: no-repeat; 

}

#nav_link div.menu_link.current {

    background-image: repeating-linear-gradient(272deg, #6fba2c, #6fba2c 4px, transparent 4px, transparent 9px, #6fba2c 9px);

    background-size: 100% 2px;

    background-position: 0 100%;

    background-repeat: no-repeat; 

    color: #666;

}



/* 見出し設定 */

h1 {

    font-size: 3rem;

    font-family: 'Noto Serif JP', sans-serif;

    margin-top: 85px;

    margin-bottom: 20px;

}

/* h1サブタイトル */

h1 span {

    background-color: #6fba2c;

    border-radius: 15px;

    color: #fff;

    display: block;

    font-size: 1.125rem;

    font-family: 'Noto Sans JP', sans-serif;

    line-height: 30px;

    letter-spacing: 0.25rem;

    margin-top: 10px;

    padding-left: 20px;

    width: 100%;

}



/* 共通設定 */

div.photo_area {

    text-align: center;

}

div.photo_area img {

    border-radius: 10px;

}



/* index.htmlのmainエリア */

main {

    background-image: url('../images/bg_soba_flower.png');

    background-repeat: no-repeat;

    background-position: 95% 100%;

    border-bottom: #eee 10px solid;

    padding-top: 100px; /* header固定分の余白 */

    padding-bottom: 50px;

}

#main_logo_area {

    background: url('../images/main_mainimg.jpg');

    border-radius: 10px;

    height: 376px;

    display: grid;

    place-content: center;

    gap: 1ch;

}



#main_promo_area {

    min-height: 455px;

    background-image: url('../images/main_illust1.png'), url('../images/main_illust2.png');

    background-repeat: no-repeat,no-repeat;

    background-position: center left, top right;

    text-align: center;

}

#promo_text1,

#promo_text2 {

    font-family: 'Noto Serif JP', sans-serif;

}

#promo_text1 {

    font-size: 2.25rem;

    margin-top: 2rem;

}

#promo_text2 {

    font-size: 1.875rem;

    letter-spacing: 0.375rem;

}

#promo_text3 {

    font-size: 1.125rem;

    line-height: 3rem;

}



#main_menu_area > div {

    margin-top: 40px;

    max-width: 300px;

    padding: 10px;

}



#main_menu_area .menu_square {

    border: 10px solid #eee;

}

#main_menu_area .menu_square_jp {

    background-image: repeating-linear-gradient(272deg, #6fba2c, #6fba2c 4px, transparent 4px, transparent 9px, #6fba2c 9px);

    background-size: 100% 2px;

    background-position: 0 100%;

    background-repeat: no-repeat; 



    margin-top: 10px;

    padding-bottom: 5px;

    text-align: left;

}

#main_menu_area .menu_square_en {

    color: #6fba2c;

    font-size: 0.875rem;

    letter-spacing: 0.1rem;

    margin: 3px 5px;

    text-align: right;

}



#main_menu_area > div:hover img {

    opacity: 0.7;

    filter: alpha(opacity=70);

    -ms-filter: "alpha(opacity=70)";

}



#main_menu_area > div:hover .menu_square_jp {

    background-image: repeating-linear-gradient(272deg, #ec6d56, #ec6d56 4px, transparent 4px, transparent 9px, #ec6d56 9px);

    color: #666;

}

#main_menu_area > div:hover .menu_square_en {

    color: #ec6d56;

}

#main_menu_area > div img {

    transition: opacity 0.5s ease-out;

}

#main_menu_area > div .menu_square_jp,

#main_menu_area > div .menu_square_en {

    transition: background-image 0.5s ease-out;

    transition: color 0.5s ease-out;

}

#main_sns_area {

    margin-top: 65px;

}

.sns_title {

    background-image: repeating-linear-gradient(272deg, #666, #666 4px, transparent 4px, transparent 9px, #666 9px);

    background-size: 100% 2px;

    background-position: 0 100%;

    background-repeat: no-repeat; 



    color: #666;

    letter-spacing: 0.1rem;

    padding: 15px;

    width: 290px;

    text-align: center;

}

.sns_box > div {

    padding: 25px;

}



/* SNSボタンリンク時のエフェクト(header＋mainエリア) */

#nav_link a:hover img,

.sns_box a:hover img {

    opacity: 0.7;

    filter: alpha(opacity=70);

    -ms-filter: "alpha(opacity=70)";

}

#nav_link a img,

.sns_box a img {

    transition: opacity 0.3s ease-out;

}





/* footerエリア */

footer {

    margin-top: 57px;

}

#footer_company_area div {

    padding: 0;

    letter-spacing: 0.1rem;

}

#footer_company_area > div {

    padding: 0;

    text-align: left;

}

#footter_logo img {

    max-width: 150px;

}

#footter_logo,

#footter_contact {

    margin-right: 20px;

}

#footter_contact {

    font-size: 0.75rem;

}

#footter_contact > div {

    margin-right: 27px;

}



#footer_company_area div.company_title {

    font-size: 1.5rem;

    font-weight: 500;

    margin-bottom: 0.5rem;

}

#footer_company_area span.footter_title {

    color: #824221;

    font-weight: 500;

    font-size: 0.875rem;

}

#footter_address {

    max-width: 250px;

    margin-right: 2rem;;

}

#footter_telmail > div:last-child {

    margin-top: 1rem;;

}



a.link_map {

    color: #6fba2c;

}

a.link_map:after {

    font-family: "Font Awesome 5 Free";

    content: '\f35d';

    font-weight: 900;

    padding-left: 0.5rem;

}

#footer_copyright_area {

    color: #666;

    font-size: 0.875rem;

    letter-spacing: 0.1rem;

    margin-top: 90px;

    margin-bottom: 35px;

}







/* 1020以下*/

@media screen and (max-width: 1020px) {

    /* header メニュー間隔調整 */

    #nav_link > div {

        margin-right: 18px;

    }

    #nav_link > div.sns_icon_img{

        margin-left: 28px;

    }



    /* footter文字サイズ調整 */

    footer {

        margin-top: 40px;

    }

    #footer_company_area div {

        letter-spacing: 0;

    }

    #footter_logo img {

        max-width: 125px;

    }

    #footter_logo,

    #footter_contact {

        margin-right: 0;

    }

    #footter_contact > div {

        margin-right: 10px;

    }

    

    #footter_address {

        max-width: 155px;

        margin-right: 0.5rem;;

    }



}



/* 767以下*/

@media screen and (max-width: 767px) {



    /* headerエリア */

    header {

      height: 122px;

    }

    #nav_brand {

        margin-top: 10px;

    }

    #nav_brand .company_name_en {

        font-size: 0.625rem;

        letter-spacing: 0.1rem;

    }

    #nav_link {

        font-size: 0.875rem;

        height: 50px;

    }

    #nav_link > div {

        margin: 0 15px;

    }



    /* 見出し設定 */

    h1 {

        text-align: center;

    }

    /* h1サブタイトル */

    h1 span {

        text-align: center;

    }



    /* mainエリア */

    main {

        padding-top: 122px; /* header固定分の余白 */

    }

    #main_logo_area {

        border-radius: 0px;

        height: 348px;

    }

    #main_promo_area {

        background-image: url('../images/main_mob_illust1.png'), url('../images/main_mob_illust2.png');

        background-repeat: no-repeat,no-repeat;

        background-position: bottom left -5px,top -1rem right -10px;

    }  

    #promo_text1 {

        font-size: 1.375rem;

        margin-top: 2rem;

    }

    #promo_text2 {

        font-size: 1.125rem;

        letter-spacing: 0;

    }

    #promo_text3 {

        font-size: 0.875rem;

        margin-top: 3rem;

        margin-bottom: 3rem;

        line-height: 3rem;

    }



    #main_menu_area .menu_square_jp {

        font-size: 0.875rem;

    }

    #main_menu_area .menu_square_en {

        font-size: 0.75rem;

    }



    /* footerエリア */

    footer {

        margin-top: 20px;

    }

    #footer_company_area > div {

        text-align: center;

    }

    #footter_logo img {

        max-width: 100px;

    }    

    #footer_company_area div.company_title {

        font-size: 1rem;

        margin-bottom: 0;

        margin-top: 1rem;

    }

    #footter_address {

        margin-right: 2rem;;

    }



    #footter_address,

    #footter_telmail {

        text-align: left;

    } 

   

    #footer_copyright_area {

        font-size: 0.75rem;

        letter-spacing: 0;

        margin-top: 20px;

        margin-bottom: 5px;

    }

}



/* 575以下*/

@media screen and (max-width: 575px) {

/* 見出し設定 */

h1 {

    font-size: 1.625rem;

}

/* h1サブタイトル */

h1 span {

    font-size: 1rem;

}





    

}