*{
    margin: 0;                 /*全体の設定*/
    padding: 0;
    box-sizing: border-box;
}

html{                          /*今までのＨＰの書式ハンバーガーには関係ない*/
    font-size: 20px;
    font-family:'ヒラギノ角ゴ','游ゴシック','メイリオ','Arial','Courier','Meiryo',sans-serif;  
             /*「'」をつけていないせいか、游ゴが反応しなかったのか？これが数字無反映の原因→ヒラギノ角ゴ ProN W3",游ゴシック,Meiryo,sans-serif*/
    color:#ffffff;
    scroll-behavior: smooth;   /*ページ内リンクをスルスルっと動かす*/
}

body {                         /*（記）ソエルの後ろの写真全部必要*/
    margin: 0 0 0 0;           /*（記）上でマージン０と設定しているのでいらないと思うのだが一応*/
    background-image: url(../images/005.jpg);  
    background-size: cover;
    background-attachment: fixed;
}

p,li,td{
    line-height:1.7;
}

/*上の帯のソエルロゴと電話の並び*/
.ue {
    display: flex;
    justify-content: space-between;
    color: white; 
    margin: 0 auto;                    /*横幅はオート*/
    padding-left: 3%;                  /*外枠の間隔*/
    padding-right: 3%;                 /*外枠の間隔*/
    padding-top: 10px;                 /*上を少し空けた*/
    /*  background-color:#86371841;     横を1200と限定したので色を消した */
    max-width: 1200px;
}

h2, h3{
    font-family:'Yu Mincho','游明朝',serif;                /*ロゴ、℡、ホットペッパーの字体*/
}

/*-------上のソエルの太陽のマークの丸設定と画像を明るく設定---*/
img.example4{
    border-radius: 50%;                 /*画像が四角なのでそれを丸に設定*/
    filter: brightness(1.8);            /*画像が暗かったので、それを明るく加工の設定*/
}
/*-------左上のソエルのリンクロゴの設定----------------------*/
a:link{
    color:white;
    text-decoration: none;   
}
a:visited{
    color:white;
}

/*------上のホットペッパーのボタンの設定--------------------*/
.btn{
    border-radius: 10px;
    background-color: rgb(216, 79, 79);
    padding:1px;
    text-decoration:none;
}

.tel{
   padding-top: 13px;                  /*電話番号のポジションが上にあがっていたのでパディングで中央へ*/
}

/*画像の上にマウスを持っていくと少し明るくなる仕掛け*/
a:hover{
    opacity:0.8;
    filter:alpha(opacity=100);
    -ms-filter: "alpha( opacity=100 )";
}

/*下のナビ*/
.st-nav ul{
    display: flex;
    list-style-type: none;
    justify-content: center; 
    gap: 105px;
    font-size: 22px;
    padding-top: 10px;
}

/*homeの中心の文言コンセプトの短文*/
.mess{
    
    text-align: center;
    padding-bottom: 35px; /*conceptの隠れ家・・・の文の下のスペース75→35へ*/
}

/*bodyの幅とかの設定*/
main{
    margin: 60px auto 90px auto;
    max-width: 1100px;
}

/*bodyの見出しとかの文字の設定*/
main h2{
    
    margin: 60px 0 20px 0;
    border-bottom: 2px solid #ffffff;
    padding: 0 0 5px 0;
    color :#ffffff;
    font-size: 2.5rem;
    text-align: center;
}
/*newsの見出しの文字*/
#news h3{  
    font-family: 'ヒラギノ角ゴ','メイリオ','Arial','Courier',sans-serif; /* "ヒラギノ角ゴ ProN W3",游ゴシック,Meiryo,sans-serif; */ 
}

/*住所とか定休日とかのお知らせのところの設定*/
.shop-info{
    
    background-color: rgba(75, 36, 19, 0.692);
    width:100%;
}
.shop-info th, .shop-info td{
    padding: 20px
}
.shop-info th{
    width:140px;
    text-align: left;
    vertical-align: top;
}

/*地図のサイズ*/
.map iframe{
    width:100%;
    height:310px; 
}

/*椅子の写真の位置*/
#saron {  
    text-align: center;     
}
/*椅子の写真のサイズと枠設定*/
img.example1{
    width: 850px;
    height: 180px;  
    border: 6px solid #ffffff49;   /*写真の枠*/
}

/*partnershipの写真の並び方*/
.items{
    display: grid;
    grid-template-columns: 1fr 1fr;
    text-align: center;
}

/*partnershipの写真のサイズとフィットと白透明枠*/
img.saiz1{
    width: 400px;
    height: 180px;  
    object-fit: cover;
    border: 6px solid #ffffff49; 
}

img.saiz2{
    width: 400px;
    height: 180px;  
    object-fit: cover;
    border: 6px solid #ffffff49; 
}

img.saiz3{
    width: 400px;
    height: 180px;  
    object-fit: cover;
    border: 6px solid #ffffff49; 
}

img.saiz4{
    width: 400px;
    height: 180px;  
    object-fit: cover;
    border: 6px solid #ffffff49; 
}


.gotop{
    text-align: center;

} 

/*下の℡とラインの並び*/
.sita {
    display: flex;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 0.3%;
}

/*左下の電話番校の文字*/
.sitatel h2{

    color:black;
    text-shadow: 0 0 10px #ffffff;  /*文字を光らせる仕掛け*/
}

.sitaline h2{
    color:black;
    text-shadow: 0 0 10px #ffffff;  /*文字を光らせる仕掛け*/
    font-size: 25px;
}

.sitaline a:link{
    color:black;
    text-decoration: none;   
}

.sitaline a:visited{
    color:black;
}


.sitatel a:link{
    color:black;
    text-decoration: none;   
}

.sitatel a:visited{
    color:black;
}

/*インスタ、フェイスブックの画像の角丸設定*/
img.example2{
    border-radius: 8px 8px 8px 8px;
}
img.example3{
    border-radius: 8px 8px 8px 8px;
}
img.line-e{
    border-radius: 8px 8px 8px 8px;
}

/*下の帯とナビ*/
.copyright{
    margin-top: 20px;
    margin-bottom: 0px;
    padding-top: 5px;
    padding-bottom: 13px;
    background-color: rgba(75, 36, 19, 0.788);
    color: #ffffff;
    text-align: center;
    font-size: 12px;
}


/*-----------------ここから個別の設定-------------------*/

/*その他のヒーロー画面の設定*/
.hero{
    padding:100px 0;
    font-size: 65px;
    font-family: 'Yu Mincho','游明朝',serif;
    text-shadow: 0 0 10px #ffffff;  /*文字を光らせる仕掛け*/
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    color: #0e0d0d;
    text-align: center;
    border-top: 5px solid #ffffff; 
}

/*ここからnews個別*/

.hero.news{
    background-image: url(../images/access1.jpg);
}

.bunn{
    background-color:rgba(100, 146, 134, 0.377) ;
    padding:40px 40px ;
}

.bunn h3{
    border-bottom: 2px solid #ffffff;
    font-family:'ヒラギノ角ゴ','メイリオ','Arial','Courier',sans-serif;  /*"ヒラギノ角ゴ ProN W3",游ゴシック,Meiryo,sans-serif;*/
}

/*ここからaccess個別*/

.hero.access{
    background-image: url(../images/access2.jpg);
}

/*道順の茶色の中。間隔とかの調節　*/
.mitizyun{
    background-color:rgba(145, 72, 41, 0.637)  ;
    padding:30px 20px;
}

.mitizyun h3{
    font-family: 'ヒラギノ角ゴ','游ゴシック','メイリオ','Arial','Courier',sans-serif; /*"ヒラギノ角ゴ ProN W3",游ゴシック,Meiryo,sans-serif;*/
}
/* 横並び （回り込み）できるp.230*/

p.mitizyun-e {
    clear: both;
}

p.mitizyun-e img {
    float: left; margin: 20px;
}

.miti{
    width: 350px;
    height: 250px;  
    object-fit: cover;
    border: 6px solid #ffffff49; 
}
  /*access.htmlの回り込みの最後に<br clear="left">をつけて回り込みを解消した。*/

  .otoiawase{
    
    font-family:"Yu Mincho","游明朝",serif;
    text-shadow: 0 0 50px #f32b08;  /*文字を光らせる仕掛け*/
}


/*ここからconcept個別*/

.hero.concept{
    background-image: url(../images/access3.jpg) ;
}

p.conbun{
    text-align: center;   /*コンセプトに後から付け加えた文書の設定*/
}

main.concept{
    background-color: rgba(131, 110, 65, 0.596) ;
    padding: 30px;
}

.mess h3{
    font-family: 'ヒラギノ角ゴ','游ゴシック','メイリオ','Arial','Courier',sans-serif; /*"ヒラギノ角ゴ ProN W3",游ゴシック,Meiryo,sans-serif;*/
}

/*ここからmenu個別*/

.hero.menu{
    background-image: url(../images/access4.jpg);
}

.katt{
    background-color:rgba(37, 37, 37, 0.822) ;
    
}
.katt h3{
    border-bottom: 2px solid #ffffff;
    margin-bottom: 40px;
    margin-left: 40px;
    margin-right: 40px;
    font-family:'ヒラギノ角ゴ','メイリオ','Arial','Courier',sans-serif;   /*"ヒラギノ角ゴ ProN W3",游ゴシック,Meiryo,sans-serif;*/
}

.katt dl {
    display: table;
    width: 100%;
    padding-top:1rem; 
    padding-bottom: 1rem;
    padding-left:6rem;
    padding-right:6rem;
}
.katt dt{
    display: table-cell;
   
}
.katt dd{
    text-align: right;
    display: table-cell;
}

.katt dd:after{
    display: inline-block;
    content: "";
    width: 1em;        
    font-size: 0.7em;   
}
.katt dd.from:after {
    content: "〜";
}

/*ここからgallery個別*/

.hero.gallery{
    background-image: url(../images/access5.jpg);
}

.gallery-e{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    text-align: center;     
    gap: 30px; 
}
img.ee1{
    width: 350px;   /*ギャラリーの写真のサイズ*/
    height: 450px;  
    object-fit: cover;
    border: 6px solid #ffffff49; 
}


/*ここからrecruit*/

.hero.recruit{
    background-image: url(../images/access6.jpg)
}

/*.bosyuu{
    background-color:rgba(116, 105, 89, 0.651); 
    padding:40px 40px ;
}*/

main.bosyuu{
    background-color:rgba(116, 105, 89, 0.651); 
    padding:30px  ;

}

.bosyuu h3{
    border-bottom: 2px solid #ffffff ;
    font-family: sans-serif;
}

.youkou{
    border-collapse: collapse;
}
.youkou th, .youkou td{
    border: 1px solid #ffffff ;
    padding: 20px
}
.youkou th{
    width:130px;
    text-align: left;
    vertical-align: top;
}

td{
    line-height:1.7;
}

.youkou{
    
    /* background-color: rgba(12, 12, 12, 0.774);*/
     width:100%;
 }

 .bosys{
    display: grid;
    grid-template-columns: 1fr 1fr;
    text-align: center;
}

img.bosy1{
    width: 400px;
    height: 200px;  
    object-fit: cover;
    border: 6px solid #ffffff49; 
}

img.bosy2{
    width: 400px;
    height: 200px;  
    object-fit: cover;
    border: 6px solid #ffffff49; 
}

img.bosy3{
    width: 400px;
    height: 200px;  
    object-fit: cover;
    border: 6px solid #ffffff49; 
}

img.bosy4{
    width: 400px;
    height: 200px;  
    object-fit: cover;
    border: 6px solid #ffffff49; 
}

img.bosy5{
    width: 400px;
    height: 200px;  
    object-fit: cover;
    border: 6px solid #ffffff49; 
}

img.bosy6{
    width: 400px;
    height: 200px;  
    object-fit: cover;
    border: 6px solid #ffffff49; 
}



/*------------------------ここからハンバーガーメニューの設定-------------------------------*/


nav{
    display: flex;                   /*横並び*/
    justify-content: space-around;   /*横の間隔がいい感じに空く*/
    align-items: center;             /*縦軸に対して中央に寄せる*/
    min-height: 5vh;                 /*青帯の高さ幅*/
    /*  background-color:#86371841;   上の帯と合わせるためにこちらも色消した */
}
     
.logo{
    color: white;                  /*ロゴの文字の色、白*/
    font-size: 22px;                 /*サイズ*/ 
}

.nav-links{
    display: flex;
    justify-content: space-around;     /*上と同じ良い感じに間隔開ける*/
    width: 65%;                        /*横全体に対してのナブの割合*/
    transition: all 0.5s ease-in-out;  /*後から付け足した、帯が右からでたり消えたりするのを緩やかにする。*/  
}

.nav-links li{
    list-style: none;                  /*黒ポッチ無くす*/
}

.nav-links a{
    text-decoration: none;             /*下線無くす*/
    color: white;
    font-weight:bold;                  /*字の太さのサイズ*/
}

.burger{                               /*後から追加した。3本線*/
    display: none;                     /*3本線を今は見せない様にする、消す*/
    cursor: pointer;                   /*カーソルポインターでクリック出来るようにしておく*/

    font-size: 12px;                   /*MENUのロゴサイズ*/

}
.burger div{                           /*バーガーの三本線*/
    width: 25px;                       /*横幅*/
    height: 3px;
    background-color: white;
    margin: 5px;                       /*これで間隔空いて三本線に見える*/
    transition: all 0.5s ease-in-out;  /*最後の最後に付け加えた。×をゆるやかに表現する*/
}

.nav-active{
    transform: translateX(0%)!important;    /*ボタンを押すと右から出てくる仕掛け*/
}

@media screen and (max-width:1024px){       /*1024ｐｘを下回った時に適用*/
    .nav-links{
        width: 78%;                         /*ナビ全体の幅を広げて、きつきつをなくす。65を78へ。*/
    }
}

@media screen and (max-width:768px){        /*この時にハンバーガーを表示*/
                                            
    .wrapper {                    /*　★　右に行けなくする、スクロール解除の設定。bodyでは反映されない。ネットで調べ解決*/
        position: relative;       /*　★　あまり効果ないみたいだが一応これも設定*/
        overflow-x: hidden;       /*　★　モバイルには反映されなかったが、div wrapperで反映される。*/
    }

    .ue{
        display: none;                       /*モバイルサイズでは上のソエルロゴと電話番号を消す。*/
    }

    .nav-links{
        position: absolute;                  /*絶対値、ナブリンクを上から右半分に移動させる*/
        right: 0;
        height: 88vh;                        /*ナブリングの長さ92→88*/
        top: 6vh;                          /*上から5.5→6→6.5→6下の右から出てくる。*/
        background-color:#49352dc2 ;       /*横から出てくる帯の色*/
        flex-direction: column;              /*縦並びで均等*/
        align-items: center;                 /*文字の横幅が真ん中に*/
        width: 50%;
        transform: translateX(100%);         /*右の青の箱もさらに右端にやって消す。画面外にやる*/

        z-index: 100;                        /*ナブリングの帯を画像より手前にする。*/
    }

    .nav-links li{
        opacity: 0;                          /*ナブリング（文字）を消す*/
    }

    .burger{
        display: block;                      /*上でnoneで消していた三本線を出現させる。*/
    }





/*---------ここから今までのモバイル設定--------------*/

/*  body{

        margin: 0 0 0 0;           （記）上でマージン０と設定しているのでいらないと思うのだが一応

        background-image: url(../images/008.jpg);  （記）サイズを携帯用の画像にした。
        background-size: cover;　　（記）アイフォンでは効かない。: 100% auto; でiponの画面に綺麗に入ったが固定ができない。
        background-attachment: fixed;  （記）スクロールした時、背景を固定する呪文。アイフォンでは効かない。
        　
        ↓アイフォンでは画像が巨大化またはスクロールして、不具合なので下記に設定し直した。↓

    }  */


    body:before{
        content: "";
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 100vh;
        background: url(../images/008.jpg) center no-repeat;
        background-size: cover;
    }


    .st-nav ul{              /*下のナビの設定*/
        flex-wrap: wrap;
        gap: 21px;           /*ナビの幅とサイズ１行に*/
        font-size: 25px;
    }

    main{
        padding: 0 4%;
    }


    main h2{
        font-size: 1.6rem;
        border-bottom: 1px solid #ffffff;
    }
    .mess{
        text-align: left;
    }
    p.conbun{
        text-align: left;   /*コンセプトに後から付け加えた文書の設定*/
    }
    .katt h3{
        font-size: 20px;
        border-bottom: 1px solid #ffffff;
    }
    
    .katt dl {
        display: table;
        width: 100%;
        padding-top:1rem; 
        padding-bottom: 1rem;
        padding-left:0.3rem;
        padding-right:0.3rem;
        font-size:15px;
    }
    .katt dt{
        display: table-cell;   
    }
    .katt dd{
        text-align: right;
        display: table-cell;
    }

/*index html*/
    .hero.index{
        padding: 28vh 0;
    }

/*newsの下の線*/
    .bunn h3{
        border-bottom: 1px solid #ffffff;
    }

/*menu.html*/
    .items{
        grid-template-columns: 1fr ;
        place-content: center;  /*真ん中にするの、これでした。ネットから。*/

    }   /*ラリアんスとかのならびを２→１へ*/

/*ギャラリーの写真を一列*/
    .gallery-e{
        grid-template-columns: auto;  /*オートに変更*/
        place-content: center;  /*真ん中にするの、これでした。ネットから。*/
    }  


/*椅子のモバイル横幅*/
    img.example1{
        
        width:100%;
        height:auto;  

    }

/*indexのヒーロー文字サイズ*/
    #heading .box .boxString h2{
        font-size: 30px ;
    }
/*indexのヒーロー画像の上下幅*/
    #heading .box{
       padding:155px 0;

       border-top: 1px solid #ffffff;  /*上のライン*/
    }

/*その他のヒーローの文字サイズ*/
    .hero{
       font-size: 50px;   

       border-top: 1px solid #ffffff;  /*上のライン*/
    }

/*上のロゴ℡を一行に*/
    .ue{
        flex-direction: column;
        align-items:center;
    }


/*下のロゴ℡を一行に*/
    .sita{
        flex-direction: column;
        align-items:center;
    }

/*下の℡のサイズ*/
    .sitatel h2{
        font-size: 18px;
    }
  
/*下のlineのサイズ*/
    .sitaline h2{
        font-size: 19px;
    }
   
/*accessの道順の後のtelのサイズ*/
    .otoiawase{
        font-size: 24px;     /*30→→26→→24*/
    }

/*ここ今いち。真ん中にならない*/
   
    .mitizyun-e .miti{
        grid-template-columns: 1fr;
       
        width:100%;        /*画像を真ん中にする3パック、1/3*/
        margin: auto;      /*画像を真ん中にする3パック、2/3*/
        display: block;    /*画像を真ん中にする3パック、3/3*/
    }




/*recruit*/

.bosys{
    grid-template-columns: 1fr ;

    place-content: center;  /*真ん中にするの、これでした。ネットから。*/

}   

.bosyuu h3{
    border-bottom: 1px solid #ffffff ;
}

main.bosyuu{

    padding-left: 7px;
    padding-right: 7px;
    
}



}




/*ＰＣサイズではtelのリンクはなし。の設定*/

@media(min-width: 769px){
    a[href^="tel:"]{
      pointer-events: none;
    }
}



@keyframes navLinksFade{                              /*右からシュシュと文字が出る仕掛け*/
    0%{
        opacity: 0%;
        transform: translateX(50px);        
    }
    100%{
        opacity: 1;
        transform: translateX(0); 
    }
}
 
.toggle .line1{                                        /*三本線をｘにする仕掛け*/
    transform : rotate(-45deg) translate(-5px,6px);
}

.toggle .line2{                                        /*真ん中は消す*/
    opacity : 0;
}
.toggle .line3{
    transform : rotate(45deg) translate(-5px,-6px);
}



/*----ここからindex.himlのヒーローのアニメーション設定-------*/


/*--- 全体のBOX定義 ----------------------------------------*/
.box {
    position   : relative;    /*相対位置、absolute（絶対位置）とセット*/
    padding    :287px 0;      /*画像の縦幅だった、300以上はかわらない*/
    max-width  : 100%;        /*画像をいれる横枠の箱サイズ*/
    height     : 250px;
    margin     : auto;
    overflow   : hidden;      /*オーバーしてはみ出たやつは非表示*/
   
    border-top: 5px solid #ffffff;  /*上のライン*/
    
  }
  
  /* --- 背景の指定 ------------------------------------------- */
  .box .bgImg {
    position   : absolute;     /*絶対位置。相対位置のセット*/
    top        : 0;
    left       : 0;
    bottom     : 0;
    right      : 0;
    opacity    : 0;
    animation  : bgAnime 28s infinite;   /* 4画像 × 各7s = 28s */
    
  }
  
  /* --- 段差で背景画像のアニメーションを実行 ----------------- */
  .box .src1 {
    background-image : url(../images/hero2.jpg);   /* 背景の画像を指定 */
    background-position: center;
    background-size: cover;
  }
  .box .src2 {
    background-image : url(../images/hero3.jpg);   /* 背景の画像を指定 */
    animation-delay  : 7s;
    background-position: center;
    background-size: cover;
  }
  .box .src3 {
    background-image : url(../images/hero4.jpg);   /* 背景の画像を指定 */
    animation-delay  : 14s;
    background-position: center;
    background-size: cover;
  }
  .box .src4 {
  background-image : url(../images/hero5.jpg);   /* 背景の画像を指定 */
  animation-delay  : 21s;
  background-position: center;
  background-size: cover;
}

@keyframes bgAnime {
   0% { opacity: 0; }                    /*opacity:0で透明　opacity:1で不透明（見える）*/
   7% { opacity: 1; }
  25% { opacity: 1; }
  32% { opacity: 0; }
 100% { opacity: 0; }
}

/* --- 前面の文字定義 ----- */
.box .boxString{
    position:absolute;                    /*⓵　4つセットで中央寄せ*/
    display: inline-block;
    font-family: serif;       /*なぜかこれは利いていない。上の<h2>のセリフが利いている。*/
    color:black;
    font-size: 45px;
    padding:20px;
    text-shadow: 0 0 10px #ffffff;
    top:50%;                              /*⓶*/
    left: 50%;                            /*⓷*/
    transform  : translate(-50%,-50%);    /*⓸*/
    z-index    : 11;
    width:100%;               /*width100%とtext-alignを入れたら枠に文字が長く入った。*/
    text-align: center;
}