@charset "utf-8";
@import "common.css";
@import url(https://fonts.googleapis.com/earlyaccess/notosansarmenian.css);
/* CSS Document */

/*==================== 基本設定 ====================*/
html{}
body {font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;font-size:12px;line-height:1.5;letter-spacing: 0.5px;color:#000;overflow-x:hidden;}
table{font-size:1em;}
body *{-webkit-box-sizing: border-box;box-sizing: border-box;}
img{max-width: 100%;}

/****** ヘッド ******/
#head{width:100%;position:relative;border-top: 1px solid #B5774E;font-family:'Noto SansJP Medium';-moz-box-shadow: 0px 2px 10px 1px rgba(102,102,102,0.2);-webkit-box-shadow: 0px 2px 10px 1px rgba(102,102,102,0.2);-o-box-shadow: 0px 2px 10px 1px rgba(102,102,102,0.2);-ms-box-shadow: 0px 2px 10px 1px rgba(102,102,102,0.2);box-shadow: 0px 2px 10px 1px rgba(102,102,102,0.2);}
/** メインイメージ **/
#main_img{width:100%;height:100%;overflow:hidden;text-align: center;}
#main_img p{width:100%;height:100%;background-repeat:no-repeat;background-position:center top;}

/** ランプ **/
#head .lamp{position:absolute;bottom:30px;left:50%;margin-left:-490px;width:980px;height:12px;text-align:center;}
#head .lamp span{font-size:0;width:12px;height:12px;display:inline-block;margin:0 10px;background:url(../images/lamp_off.png);}
#head .lamp span:hover{cursor:pointer;}
#head .lamp span.active{background:url(../images/lamp_on.png);}
#head_inner{position:absolute;top:0;left:0;width:100%;height:100%;}

nav ul#main_navi li a{font-family: 'Noto Sans JP', sans-serif;text-decoration: none;color: #fff;text-align: center;}

/** コンテンツ **/
#contents{padding-bottom:100px;}

/****** 下部情報 ******/
#home_middle{width:980px;margin:0 auto;padding:96px 0 50px 0;}
/** バナー **/
#home_bnn{margin:0 auto;}
#home_bnn p{width:308px;margin-right:28px;}
#home_bnn p.tail{margin-right:0;}

/****** フッター ******/
#foot{background:#2E292E;}
#foot p{margin:0 auto;max-width:980px;color:#fff;text-align:center;}

/****** 共通箱 ******/
.w_box{-moz-box-shadow: 0px 2px 0px rgba(222,222,222,0.5);-webkit-box-shadow: 0px 2px 0px rgba(222,222,222,0.5);-o-box-shadow: 0px 2px 0px rgba(222,222,222,0.5);-ms-box-shadow: 0px 2px 0px rgba(222,222,222,0.5);box-shadow: 0px 2px 0px rgba(222,222,222,0.5);background:#fff;border: 1px solid #EDEDED;-webkit-border-radius:5px; -moz-border-radius:5px; -o-border-radius:5px; -ms-border-radius:5px; border-radius:5px;}


/****** 会社概要 ******/
#contents{
    background: rgb(255,245,251);
    background: -moz-linear-gradient(180deg, rgba(255,245,251,1) 0%, rgba(255,255,255,1) 100%);
    background: -webkit-linear-gradient(180deg, rgba(255,245,251,1) 0%, rgba(255,255,255,1) 100%);
    background: linear-gradient(180deg, rgba(255,245,251,1) 0%, rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fff5fb",endColorstr="#ffffff",GradientType=1);
}
.l_wrapper{padding-top:49px;max-width: 980px;margin: 0 auto;}

#company > div{max-width:980px;margin-right:auto;margin-left:auto;}
#contents h2,
#contents h3{font-style: normal;}

/** あいさつ **/
#company_greeting .mini{background:#fff;}
#company_greeting .img{background:#fff;text-align:center;}
.area_greeting .profile{line-height:17px;padding-top:10px;}

/** 会社情報 **/
#company_about table{width:100%;}

.area_shop ul{display: flex;}
.area_shop ul li{text-align:center;}
.area_menu > div ul li{padding-bottom: 10px;}
.area_menu > div ul li em{color: #ea1626;font-weight: normal;font-style: normal;}

/** 講習会・OEM **/
#company_lesson > div.box,#company_oem > div.box{display: flex;align-items: center;}
#company_lesson .img,#company_oem .img{width: 40%;text-align: center;}
#company_lesson .txt,#company_oem .txt{width: 60%;padding-right: 20px;}

/** お問い合わせ **/
#contact{margin:0 auto;border: 2px solid #950d1e;background:#fff;}
.area_contact .box{display: flex;justify-content: space-between;}
#contact h2{font-family: inherit;font-weight: normal;width: 100%;}
#contact .tel{font-size:26px;color: #950d1e;font-weight:bold;}
#contact .time{background: #fcecee;font-size: 12px;color: #930b1b;display: flex;justify-content: center;align-items: center;padding: 0 20px;width: 200px;}

/** バナー **/
.area_link ul{display: flex;justify-content: center;}


@media only screen and (min-width: 980px){
    .l_narrow,#top .logo .txt br{display: none;}
}
@media only screen and (max-width: 979px){
    .l_wide{display: none;}
}

@media only screen and (min-width: 768px){
    .sp{display: none;}

    /** ナビ **/
    h1{font-size:12px;}

    #head{height:703px;}
    #top{max-width:980px;height:138px;padding-top:29px;margin:0 auto;position:relative;}
    #top .tel{width:380px;height:94px;position:absolute;top:29px;right:0;text-align:right;font-size:10px;}

    header nav ul#main_navi{border-radius: 4px;max-width:980px;width: 100%;height:54px;margin:0 auto;display: flex;justify-content: space-between;overflow: hidden;}
    header nav ul#main_navi li{width: 100%;position: relative;}
    header nav ul#main_navi li::before{content: "";display: inline-block;background: rgba(250,232,231,0.4);width: 1px;height: 12px;position: absolute;left: 0;top: 50%;transform: translateY(-50%);}
    header nav ul#main_navi li:first-of-type::before{content: none;}
    header nav ul#main_navi li a{width: 100%; font-size: 15px;line-height: 45px;background: url(../images/bg_menu.png); border: 3px solid;display: inline-block;
        border-image-source: url(../images/bg_menu_line.png);border-image-slice: 0 0 100;border-image-width: 3px;border-image-outset:3px;border-image-repeat:round;}
    header nav ul#main_navi li a:hover{opacity: 0.8;}
    header nav ul#main_navi li:first-of-type a{border-radius: 4px 0 0 0;}
    header nav ul#main_navi li:last-of-type a{border-radius: 0 4px 0 0;}

    /** メインイメージ **/
    #main_img p span.pc img{height: 702px;vertical-align: bottom;object-fit: cover;}

    #contents section{margin-bottom: 40px;}
    #contents h2{font-size:24px;margin-bottom:20px;}
    #contents h3{font-size:18px;margin-bottom:15px;}

    /** あいさつ **/
    .area_greeting .face{width:300px;}
    .area_greeting .txt{width: 100%;max-width: calc(100% - 300px);padding-right: 50px;font-size: 14px;line-height: 22px;}
    .area_greeting .mini{font-size:13px;line-height:17px;padding:10px;}
    .area_greeting .box{display: flex;justify-content: space-between;}
    .area_greeting .box .message{margin-bottom: 40px;}

    /** 会社情報 **/
    .area_about .box{display: flex;}
    .area_about th{width:160px;}
    .area_about .map{width:400px;}
    .area_about .txt{width:530px;}

    .area_data,.area_menu{padding: 20px;margin-bottom: 30px;}
    .area_menu > div{display: flex;font-size: 14px;}
    .area_menu > div ul{width: 50%;}

    /** 会社情報 **/
    #company_about table{font-size:14px;}
    #company_about th,#company_about td{padding:10px 0;}

    .area_shop{padding: 20px;}
    .area_shop ul.photo li{width: 25%;max-width:234px;}

    /** 講習会・OEM **/
    #company_lesson .img,#company_oem .img{width:300px;}
    #company_lesson .txt,#company_oem .txt{width:640px;font-size:13px;}

    /** お問い合わせ **/
    #contact{max-width:746px;padding:20px 35px;}
    #contents #contact h2{font-size:18px;margin-bottom: 0;}
    #contact .tel{font-size:26px;}
    #contact .tel span{font-size:22px;}
    #contact p{font-size:16px;}
    #contact p span{font-size:12px;}
    
    /** バナー **/
    #home_bnn{max-width:980px;margin:0 auto;padding: 20px 0 30px;}
    .area_link ul{gap: 40px;}

    /****** フッター ******/
    #foot{height:51px;}
    #foot p{font-size:14px;line-height:18px;padding:17px 0 16px;}

}
@media only screen and (min-width: 768px) and (max-width: 1080px){
    .l_wrapper{padding-right: 30px;padding-left: 30px;}

    .area_shop ul{flex-wrap: wrap;}
    #head{height: 550px;}
    #main_img p span.pc img{height: 550px;}
    #top{padding-left: 12px;padding-right: 10px;}
    #top .tel{right: 10px;}
    header nav{padding: 0 10px;}
    header nav ul#main_navi li:nth-of-type(2) a{width: 140px;}
    header nav ul#main_navi li:nth-of-type(7) a{width: 130px;}
    
}
@media only screen and (min-width: 768px) and (max-width: 900px){
    .area_about .box{display: block;}
    .area_about .txt,.area_about .map{width: 100%;}
    .area_about .map{margin-top: 20px;}
    .area_about .map iframe{width: 100%;}
}

@media only screen and (max-width: 767px){
    .pc{display: none;}
    .sp{display: inline-block;}

    body{font-size: 14px;}

    #head{padding-top: 59px;}
    #head_inner{overflow: hidden;}
    #head_inner #top{padding: 0 20px;height: 60px;display: flex;align-items: center;}
    #head_inner #top h1{font-size: 10px;}
    #head_inner .logo img{height: 30px;}
    #head_inner .tel{display: none;}
    #head_inner .txt{font-size: 0;}

    #menubtn{width: 60px;height: 60px;background: url(../images/bg_menu.png);position: fixed;right: 0;top: 0;z-index: 1;display: flex;justify-content: center;align-items: center;cursor: pointer;}
    #menubtn::before,#menubtn::after{content: "";position: absolute;transition: all 0.3s linear;}
    #menubtn span,#menubtn::before,#menubtn::after{display: inline-block;width: 40px;height: 3px;background: #fff;}
    #menubtn::before{top: 18px;}
    #menubtn::after{bottom: 18px;}
    #menubtn.selected span{display: none;}
    #menubtn.selected::before{transform: rotate(45deg);top: 30px;}
    #menubtn.selected::after{transform: rotate(-45deg);bottom: 27px;}

    /** メインイメージ **/
    #main_img {width: 100%;height: 0;overflow: hidden;padding-top: 100%;padding-bottom: 6%;position: relative;}
    #main_img p {width: 100%;position: absolute;height: 100%;background-repeat: no-repeat;background-position: center top;top: 0;left: 0;right: 0;}
    header nav{position: fixed;width: 80%;height: 100vh;top: -1px;z-index: 1;background: url(../images/bg_menu.png);transform: translateX(-100%);opacity: 0;transition: all 0.5s ease-in;}
    header nav.open{transform: translateX(0);opacity: 1;}
    nav ul#main_navi li{border-bottom: 2px solid rgba(250,232,231,0.4);}
    nav ul#main_navi li a{display: block;font-size: 18px;line-height: 46px;}

    .l_wrapper{padding-right: 20px;padding-left: 20px;}

    #contents section{margin-bottom: 20px;}
    #contents h2{font-size:20px;margin-bottom:17px;}
    #contents h3{font-size:16px;margin-bottom:13px;}

    /** あいさつ **/
    .area_greeting .box .message{margin-bottom: 20px;}
    .area_greeting .face{max-width:300px;margin: 20px auto 0;}
    .area_greeting .mini{font-size:13px;line-height:17px;padding:10px;}
    .area_greeting .mini br{display: none;}
    .area_greeting .profile{font-size: 13px;}
    .brand.l_narrow{margin-top: 15px;}

    /** 会社情報 **/
    #company_about th,#company_about td{display: block;}
    #company_about td{padding-bottom: 10px;}

    .w_box{padding: 10px 0;}
    .w_box h3{padding: 0 10px;}

    .area_shop ul{flex-wrap: wrap;padding: 5px;}
    .area_shop ul li:nth-of-type(odd){width: 45%;padding: 5px;}
    .area_shop ul li:nth-of-type(even){width: 55%;padding: 5px;}

    #company_about .area_data,#company_menu{margin-bottom: 15px;}
    .area_data .box,#company_menu > div{padding: 0 10px;}

    #company_menu ul li h4{display: flex;flex-wrap: wrap;justify-content: space-between;}
    #company_menu ul li p{font-size: 13px;}

    .area_data .map{position: relative;padding-top: 75%;width: 100%;height: 0;overflow: hidden;}
    .area_data .map iframe{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

    #company_oem .in_txt{padding: 0 10px;font-size: 13px;}

    /** お問い合わせ **/
    #contact{padding:20px;}
    #contact .txt{margin-bottom: 10px;}
    #contact .time{padding: 10px;}

    /** バナー **/
    /****** フッター ******/
    #foot{display: flex;justify-content: center;align-items: center;height: 50px;}
    #foot p{font-size:10px;line-height:1;}
}
@media only screen and (max-width: 600px){
    .area_contact .box{display: block;}
    #contact .time{width: 100%;}
}
@media only screen and (max-width: 450px){

    #contents h2{margin-bottom:10px;}
    #contents h3{margin-bottom:5px;}

    #company_lesson > div.box,#company_oem > div.box{display: block;}
    #company_lesson .img,#company_oem .img{width: 100%;margin-top: 10px;}
    #company_lesson .img,#company_oem .img,#company_lesson .txt,#company_oem .txt{width: 100%;}
    #company_oem .txt{padding-right: 0;}

    /** お問い合わせ **/
    #contents #contact h2{font-size: 17px;margin-bottom: 0px;letter-spacing: 0;}

    /** バナー **/
    .area_link ul{display: block;text-align: center;}
    .area_link ul li:nth-of-type(2){margin-top: 10px;}

}