@charset "UTF-8";

/* すべてのWebページに適用される ============================================================== */
body { /* フォントファミリー */
	font-family: "メイリオ", Meiryo, "游ゴシック","Yu Gothic",YuGothic,"ヒラギノ角ゴ Pro W3",
	 "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
        color: rgb(76,73,72);
        background-image: url("../img/all/gd.png");
        background-position: bottom center;
        background-repeat: repeat-x;
}
	 

/* --------------------------------------------------------------------------
    ボックスモデルはborder-box  教科書p163
---------------------------------------------------------------------------- */
html * {
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; 
	-o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}
	
/* --------------------------------------------------------------------------
    余白はゼロ 
---------------------------------------------------------------------------- */
html,body,div,dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,
blockquote,th,td,p { margin: 0; padding: 0; }

/* --------------------------------------------------------------------------
    表の線　線は１重に　教科書p198 
---------------------------------------------------------------------------- */
table { 
    border-collapse:collapse; 
    border-spacing:0;
    width: 100%;/* 枠線同士の隙間:0 */}


/* --------------------------------------------------------------------------
    ↓この下に、CSSを書き足しましょう↓ 
---------------------------------------------------------------------------- */
.wrapper{
    max-width: 960px;
    width:100%;
    margin: 0 auto;
}

img{
    max-width: 100%;
    height: auto;
}

table {width: 100%}

/* --------------------------------------------------------------------------
    ヘッダー
---------------------------------------------------------------------------- */
.header{
    width: 100%; /* 横幅 */
    background-color: white;/* 背景色白 */
    position: fixed;/* 固定 */
    top: 0;/* 上にくっつく */
    z-index: 999; /* 画面一番上 */
}
 
.header-inner{
    max-width: 960px; /* 最大横幅 */
    margin: 0 auto; /* 画面中心にもってくる */
}


.first{
    display: flex;  /* フレックスボックス を使用 教科書p200 */
    justify-content: flex-start; /* フレックスボックスの中身　左揃え */
    align-items: center; /* 縦方向中央揃え */
}
 
/* フレックスボックス　最初の要素だけ右揃え */
.first >:last-child {
  margin-left: auto; /* 右側余白自動調整 */
}

.logo{
    width: 65%;
    padding-left: 5px;
}
.tel3{
    margin-right: 30px;
    text-align: right;
}

.telIcon {
	display: none;
}
.telNo a {
	font-size: 22px;
	color:rgb(242,145,0);
	text-decoration: none;
	pointer-events: none;
}
.businessHour {
	letter-spacing: 0.3em;
}


/* --------------------------------------------------------------------------
    メニュー
---------------------------------------------------------------------------- */
/* リストの・を出さない */
.menu li { list-style-type:none;}

.menu{
    display: flex;  /* フレックスボックス を使用 教科書p200 */
    margin-top: 5px;
}
 
.menu li{
    margin: 0 auto; /* 画面中心にもってくる */
}
 
.menu li a{
    display:block;  /* 表示形式をブロックボックスにする */
    width: 185px;
    line-height: 32px;
    text-decoration: none; /* リンクの下線を消す */
     color: rgb(0,51,0);
    background-color: rgb(255,251,205);
    font-size: 17px;
    text-align: center;
    vertical-align: middle;
}
 
.menu li a:hover{
    color: rgb(255,251,205);  /* 文字色 */
    background-color: rgb(242,145,0);/* 背景色 */
}

ul.menu__second-level {
    visibility: hidden;/*非表示*/
    z-index: 1;
}

.menu > li.menu__single {
    position: relative;
}

li.menu__single ul.menu__second-level {
    position: absolute;
    top: 40px;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
}

li.menu__single:hover ul.menu__second-level {
    top: 32px;
    visibility: visible;
    opacity: 1;
}

.menu__second-level li a{
    width: 400px;
    line-height: 100px;
    background-color: rgba(255,251,205,0.7);
    border-bottom: solid 2px rgb(242,145,0);
    text-align: center;
    font-size: 23px;
}
/* ≡　の指定  */
.navmenu {
    display: none; /* 768px以上は非表示 */
}

 
/* --------------------------------------------------------------------------
    フッター
---------------------------------------------------------------------------- */

.footer{
    margin-top: 50px;
    background-image: url("../img/all/footer-4.png");
    background-repeat: no-repeat;
    background-position: bottom center;
    height: 180px;
}

.footerinner{
    max-width: 960px;
    margin: 0 auto;
    padding-top: 70px;
    padding-left: 30px;
}

.footer-asahi{
    font-size: 1.2rem;
}

.footer-asahi2{
    font-size: 1rem;
}

.footer-text{
}

/* --------------------------------------------------------------------------
    アクセス
---------------------------------------------------------------------------- */
/*アクセス*/
.access{
    margin-top: 100px;
}
.access h3{
    border-top: dashed 2px rgb(255,233,174);
    padding: 20px 40px 20px;

}

.access-info{
    display: flex;
}

.access-text{
    margin: 0 auto;
}
.access-text p{
    padding: 20px 0;
}
.access-text img{
    margin: 0 5px 0 0;
    width: 20px;
    height: 20px;
}

/* グーグルマップを囲む div レスポンシブ*/
.google-map {
    margin-top:20px; /* 地図の上余白 */
    position: relative; /* 親ボックスとしてポジション使用 */
    width:50%; /* 横幅 */
    padding-top:30%; /*横に対する縦の％　縮んだ時に100％だと正方形になる。入れないと表示されない。*/
    height: 0;  /*流用できるように、Youtube動画の埋め込みの時の縦横比を入れています。HD動画（16対9）の場合100÷16×9=56.25 */
    overflow: hidden; /* はみ出た分隠す */
    margin: 0 auto;
}
 
/* グーグルマップの部分 */
.google-map iframe {
    position: absolute; /* 子ボックス ポジション絶対配置 親ボックスの左上が基準位置 */
    top: 0; /* 上からゼロ */
    left: 0; /* 左からゼロ */
    width: 100% !important; /* 横100％ ！絶対そうする */
    height: 100% !important; /* たて100％ ！絶対そうする */
}

/* 上に戻るボタン */
#pageTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

#pageTop i {
  padding-top: 6px
}

#pageTop a {
  display: block;
  z-index: 999;
  width: 100%;
  padding: 40px;
  background-image: url(../img/all/up-2.svg);
  background-repeat: no-repeat;
}

/* 767px以下の場合 ===================================== */
  
@media screen and (max-width: 767px){
    
/* --------------------------------------------------------------------------
    メニュー
---------------------------------------------------------------------------- */
      
/* メニューの方の指定 ---------------------------- */
    .menu {
        display: block; /* フレックスボックスを解除 */
        position: fixed; /* ポジション固定 */
        top: -999px; /* 上 */
        left:0; /* 左から0px  */
        z-index: 999; /* 画面の重なり */
        width: 100%; /* 横幅 メニューの横幅 */
        height: 100%; /* 高さ100％ */
        background-color:rgba(255,251,205,0.7); /* 背景色 */
    }
  
/* メニュー個別 */
    .menu li {
        border-right: none; /* 区切り線 右 */
/*    border-bottom: solid 1px rgb(242,145,0);  区切り線 下 */
        margin: 0; 左の余白０に変更 
        text-align: center; /* 文字揃え */
    }
      
    .menu li a {
     color: rgb(0,51,0);  /* 文字色 */
        border-bottom: solid 3px rgb(242,145,0);
        background-color: rgba(255,251,205,0.7); /* 背景色 */
        border-left: none; /* ボーダー左側 消す */
        padding: 1em; /* 余白 */
        width: 100%;
    }
    
    ul.menu__second-level {
        display: flex;
        visibility: visible;/*常に表示*/
    }
    
    li.menu__single ul.menu__second-level {
        position: static;
        flex-wrap: wrap;
    }
    
    .menu__second-level li {
        width: 50%;
        border-bottom:solid 3px rgb(242,145,0);
        border-collapse:collapse;
        border-spacing:0;
    }
    
    li.a1{
        border-left: solid 3px rgb(242,145,0);
    }
    
    .menu__second-level li a{
        border-bottom: none;
        width: 100%;
        line-height: 30px;
        background-color: rgba(255,251,205,0.7);
        text-align: center;
        font-size: 15px;
    }
    
    li a.sn{
        padding: 0;
        background-color: rgb(255,233,174);
     color: rgb(0,51,0);
        border-bottom: none;
    }
    
    li a.sn:hover{
    background-color: rgb(255,233,174);
     color: rgb(0,51,0);
}

/* ≡　の指定 ---------------------------- */
    .navmenu {
            display: block; /* 640px以下は表示 */
            color: rgb(255,251,205); /* 文字色 */
            text-align: center; /* 文字揃え */
            background-color: rgb(242,145,0); /* 背景色 */
            position: fixed; /* 絶対配置 */
            right:0; /* 右から0px  */
            top:0; /* 上から0px  */
            z-index: 9999; /* 画面の重なり一番上 */
            font-size: 100%; /* 文字サイズを好みで大きく */
            width: 50px; /* 横幅 */
            line-height: 20px; /* 高さ */
            }
    .navmenu:before{ content:url(../img/all/menu.svg); } /* ≡　表示 */
      
    input[type="checkbox"].on-off{
            display: none; /* 通常は非表示 */
            }
   
    input[type="checkbox"].on-off ~ .menu{ /*  ~ ul 後ろにある .navに適用 */
              overflow: hidden; /* display: none;では高さが出ない */
              transition: all 0.8s ease-out /* 変わるまでの時間を設定 ease-out ゆっくり終わる */
            }
   
    input[type="checkbox"].on-off:checked ~ .menu{ /* :checkedは疑似クラス チェックボックスがオンの状態の時 */
        top: 0; /* マイナスにしていた上を0に戻す */
     }
     .navmenu { cursor: pointer; } /* マウスカーソルの形状 ポインター */
       
       
     /* チェックボックスオンの時 */
    input[type="checkbox"].on-off:checked ~ .navmenu:before{
    content: url(../img/all/menu-2.svg); /* ×　表示 */
    }
    
    /* --------------------------------------------------------------------------
    ヘッダー
---------------------------------------------------------------------------- */
    .first{
        display: block;
    }
    
    .tel3{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 95%;
        margin: 15px auto 5px;
    }
    .phoneSection {
        height: 4.8vw;
        display: flex;
        align-items: center;
    }
    .telIcon {
        display: flex;
        height: 100%;
        margin-right: 5px;
        align-items: center;
    }
    .telIcon img {
        height: 80%; /* 電話アイコンのサイズ */
    }
    .telNo a {
        color:rgb(242,145,0);
        text-decoration: none;
        pointer-events: auto;
        font-size: 4.5vw;
    }
    .businessHour {
        letter-spacing: 0.3em;
        font-size: 3.2vw;
    }
    .logo{
        width: 75%;
        padding-left: 5px;
    }
/* --------------------------------------------------------------------------
    フッター
---------------------------------------------------------------------------- */

    .footer{
        margin-top: 100px;
    }
    .footer-asahi{
    font-size: 0.9rem;
}

.footer-asahi2{
    font-size: 0.7em;
}

    .footer-text{
        padding-top: 20px;
        padding-left: 0;
    }
    


/* --------------------------------------------------------------------------
    アクセス
---------------------------------------------------------------------------- */
    .access-info{
        display: block;
    }
    
    .google-map{
        width: 70%;
    }

    .access-text{
        width: 70%;
        margin: 0 auto;
    }

    .access-text p{
        padding:5 0;
    }
    
    
    
    #pageTop a {
  padding: 30px;
}
}/*  @media screen and (max-width: 767px)---------------------------- */
/* 767px以下の場合 ここまで ===================================== */