@charset "utf-8";
/*
Theme Name: ginza

*/

/* =Reset default browser CSS.
Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
html{
    font-size: 24px;
}
@media (max-width:576px){
    html{
        font-size: 16px;
    }  
}
.image1 {
  display: block;
}


a{word-break: break-all;
}
li{
    text-decoration: none;
    list-style: none;
}
body{
text-align: left;
font-size:16px;
line-height: 1.7;
color:  #2b2b2b;
font-family: 'Noto Serif', serif,"Noto Sans JP",Verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}

.clearfix:after{
  content: ".";
  display: block;
  height: 0;
  font-size:0;
  clear: both;
  visibility:hidden;
}



.alignleft{
	float: left;
    margin: 0px 15px 15px 0;
}


.alignright{
	float: right;
    margin: 0px 0px 15px 15px;
}

.aligncenter{
    display: block;
	margin: auto;
}

p{
    font-size: 24px;
    line-height: 1.7;
}

p.s{
    font-size: 20px;
    line-height: 1.7;
}
.kome{
    font-size: 16px;
    line-height: 1.7;
}
span.b{
    font-weight: bold;
}
span.g{
    color: #6E6239;
    font-weight: bold;
}

@media (max-width:576px){
    p{
        font-size: 16px;
        line-height: 1.5;
    }
    p.s{
        font-size: 16px;
    }
    .kome{
        font-size: 14px;
    }   
}




/*********** コピーライト*********** */

#copyright{
    background-color: #6E6239;
    color: #fff;
    text-align: center;
    padding-bottom: 80px;
    margin-bottom: 0;
}


/*********** gnav*********** */

.h1_area .menu{
position: fixed;
z-index: 999;
width:40px;
height: 40px;
right:380px;
top:20px;
}
header h1{
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1;
}

@media (max-width:576px){
    .h1_area .menu{
        right:10px;
        top:5px;
    }
    

}


.menuborder{
    position: absolute;
    display: block;
    width:32px;
      height:3px;
    background-color: #000;
  }
 .menuborder:nth-of-type(1) {
    top:0px;
  }
  .menuborder:nth-of-type(2) {top:10px;}
  .menuborder:nth-of-type(3) {top:20px;}
  
  .Close .menuborder:nth-of-type(1) {
    top:16px;
    transform: rotate(45deg);
    }
    .Close .menuborder:nth-of-type(2) {
    opacity: 0;
    }
    .Close .menuborder:nth-of-type(3) {
    top:16px;
    transform: rotate(-45deg);
    }
    
    .gnav{
      position: fixed;
      opacity: 0;
      /* line-height: 0; */
      height:0;
      overflow: hidden;
      z-index: 999999;
      background-color: #FDF7CE;
      width:100%;
      transition: all 0.5s ease-in-out;
      top:45px;
      right: 0px;
      padding-top: 1rem;
    }
  .gnav .border-bottom{
      border-bottom: 1px solid#E8C100 !important;
      
  }
  
  
  @media(min-width:992px){
      .gnav{
          width:33%;
      }
  }
  
    
    .gnav li {
        text-align: left;
        padding:.3em 0;
    }
   
    .gnav li a{
        font-size: 1rem;
        color: #141414;
    }
  
    @media(max-width:567px){
  .gnav .row{
      transform: translateX(10px);
  }
  
      .gnav li a{
          font-size: 1rem;
          color: #141414;
      } 
      .gnav.open{
          padding-left: 10px;
      }
    }


    .gnav{
        position: fixed;
        opacity: 0;
        /* line-height: 0; */
        height:0;
        overflow: hidden;
        z-index: 999999;
        background-color: #FDF7CE;
        width:100%;
        transition: all 0.5s ease-in-out;
        top:45px;
        right: 0px;
        padding-top: 1rem;
      }
    .gnav .border-bottom{
        border-bottom: 1px solid#E8C100 !important;
        
    }
    
    
    @media(min-width:992px){
        .gnav{
            width:33%;
        }
    }
    
      
 .gnav li {
    text-align: left;
    padding:.3em 0;
    }
     
.gnav li a{
          font-size: 1rem;
   color: #141414;
      }
    
   @media(max-width:567px){
    .gnav .row{
        transform: translateX(10px);
    }
    
    .gnav li a{
            font-size: 1rem;
            color: #141414;
        } 
  .gnav.open{
            padding-left: 10px;
       }
     }
      
      .gnav.open{
        /* overflow-y: scroll; */
        opacity: 1;
        line-height: 1.5;
        height:100%;
        }
        .gnav h2{
            font-size: 1.4rem !important;
        }



.h1_area{
    position: relative;
}


.h1_area ul{
    position: absolute;
    width:100%;
    bottom:0px;
}

.h1_area ul li{
    text-align: center;
    
}


.container{
    max-width: 750px;
}

.wrap{
    padding-left: 62.5px;
    padding-right: 62.5px;
}

@media (max-width:579.5px){
    .wrap{
        padding-left: 15px;
        padding-right: 15px;
    }
}

/*********** サービスエリア*********** */

a.link{
    color: #8C6239;
    font-weight: bold;
    font-size: 24px;
    text-decoration: underline;
}

#topService{

    background: url(images/bg_riten.png) repeat-y top center/100%;
padding-top: 20px;
    padding-bottom: 0px;
}
@media (max-width:579.5px){
    #topService{
background: url(images/bg_riten.png) repeat-y top center/100%;
    padding-top: 20px;
    }
}

.kiran {
    display: inline-block;
    position: relative;
    overflow: hidden;
}

.kiran::after {
    content: "";
    height: 100%;
    width: 30px;
    position: absolute;
    top: -180px;
    left: 0;
    background-color: #fff;
    opacity: 0;
    transform: rotate(45deg);
    animation: kiran-animation 2s ease-in-out infinite;
}

@keyframes kiran-animation {
    0% {
        transform: scale(0) rotate(45deg);
        opacity: 0;
    }
    80% {
        transform: scale(0) rotate(45deg);
        opacity: 0.5;
    }
    81% {
        transform: scale(4) rotate(45deg);
        opacity: 1;
    }
    100% {
        transform: scale(50) rotate(45deg);
        opacity: 0;
    }
}

/*********ブライダルシェービングとは *************/
.bg-shave{
    padding-top: 20px;
    background-image: none;
    background: url(images/bg_shaving.png)no-repeat top center/100%;   
    padding-bottom: 15px;
}

#top01 h2{
text-align: center;    
color: #6E6239;
font-size: 50px;
font-weight: bold;
}
.comparison{
    background: url(images/01/01_back.png)top center/100%;   
    
}
.comparison p{
     color:#FFFFFF;
    
}



#shaving h2{
text-align: center;    
color: #6E6239;
font-size: 50px;
font-weight: bold;
margin-bottom: .5em;
}

#shaving h2 span{
    font-size: .5em;
    color: #fff;
}


#shaving h3{
    text-align: center;    
    color: #010101;
    font-size: 41.8px;
    margin-bottom: 2em;
    line-height: 0.7;
}

#shaving .text {
    border-bottom: 2px solid #fff;
    margin-bottom: 24px;
    
}

#shaving .text p{
    line-height: 1.4;
}

#shaving h3 span{
    position: relative;
    display: block;
}
#shaving h3 span b{
    position: relative;
    top:10px;
    display: inline-block;
        font-weight: bold;
        font-size: 1.8em;
        color:#6E6239;
        padding-top: 10px;
    }

@media (max-width:576px){
       .bg-shave{
        padding-top: 15px;
        background: url(images/bg_shaving_sp.png)no-repeat top center/100%;    
        }
        #shaving h2{
            font-size: 24px;
            margin-bottom: 10px;
        }
        #shaving .text {
            margin-bottom: 16px;
         
        }
        #shaving .text p{
            line-height: 1.4;
            margin-bottom: 5px;
        }

        #shaving h3{
            font-size: 24px;
            margin-bottom: 48px;
        }


    }
    




    .bg-shav2{
        padding-top: 10px;
        background: url(images/bg_smark.png)repeat-x left bottom/100%;
        padding-bottom: 30px;
    }



.check p{
    position: relative;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 16px;
    font-size: 30px;
    padding-left: 40px;
    line-height: 1.5;
    font-weight: bold;
    
}

.check p:before{
    content: "";
    position: absolute;
    width:29px;
    height:29px;
    background: url(images/aic_check.png) no-repeat center/100%;
    left:0;
    top:10px;
    line-height: 1.5;
}




@media (max-width:576px){
  .check{
    margin-bottom: 40px;
  }
    .check p{
        font-size: 16px;
        margin-bottom: 16px;
        padding-left: 20px;
    }
    .check p:before{
        width:15px;
        height:15px;
        background: url(images/aic_check.png) no-repeat center/100%;
        left:0;
        top:5px;
    }
}


/*********PREMIUM BARBERとは？ *************/
#about03{
    background: url(images/03/03_back.png)repeat-y top center/100%;
    background-color:#000000;   
}

/*********施術箇所 *************/
#sezyutulink ul{
    text-align: center;
display: flex;
flex-wrap: wrap;
padding:0 3px ;
  
    }
.spfl{
    float: left;    
}
    
    

    /* 追加修正 */
    #sezyutulink ul li{
        padding:5px 5px;
        line-height: 1.5em;
				cursor: pointer;
  
      flex:0 0 33.3333%;
        
    }
    #sezyutulink ul li .wrap{
        padding: 10px 0;
        font-size: 10px;
        border: 1px solid #000000;
        color: #000000;
        position: relative;
        box-sizing: border-box;
        letter-spacing: 1.4px;
        text-align: center;
        font-weight: bold;
    }

    #sezyutulink ul li.active .wrap {
      background: #000000;
      color: #fff;
    }





@media(min-width:750px){
        #sezyutulink ul li .wrap{ 
            font-size: 20px;
            padding:15px;
            
        }
        #sezyutulink ul li .wrap{ 
            font-size: 24px;
            padding: 10px 0;
                  
        }

    }


    #sezyutulink ul li .wrap:hover{
      background: #000000;
        text-decoration: none;
        color: #fff;
    }
    
    
    .sezyutuBox h3{
        font-size: 36px;
        font-weight: bold;
        color: #000000;
        border-bottom: 2px solid #000000;
        display: inline-block;
        padding-bottom: 10px;
    }

    .sezyutuBox table{
        margin-bottom: 1rem;
    }
    .sezyutuBox table th,.shopBox table td{
        font-size: 16px;
    }

    .sezyutuBox table th{
        white-space: nowrap;
    }

    .sezyutuBox{
        display: none;
        margin-bottom: 0;
        }
        .sezyutuBox p{
            margin-bottom: 0;
        }

    @media(max-width:750px){
        .sezyutuBox{
            padding-bottom: 100px;
    #sezyutulink ul li{
        line-height: 1.5em;
         
    }

        }


        }





        
@media(min-width:750px){
    .sezyutuBox table th,.shopBox table td{
        font-size: 20px;
    }

}

/*********メニュー *************/
#sezyutu02{
    background: url(images/05/05_back.png)repeat-y top center/100%;
    background-color:#000000;   
}
.op{
    background-color:#FFFFFF!important;   
}

/*********店舗一覧 *************/


#shoplink ul{
    text-align: center;
display: flex;
flex-wrap: wrap;
padding:0 3px ;
  
    }
.spfl{
    float: left;    
}
    
    

    /* 追加修正 */
    #shoplink ul li{
        padding:5px 5px;
				cursor: pointer;
      	flex:0 0 33.3333%;
        
    }
    #shoplink ul li .wrap{
        padding: 10px 0;
        font-size: 12px;
        border: 1px solid #8C6239;
        color: #8C6239;
        position: relative;
        box-sizing: border-box;
        letter-spacing: 1.4px;
        text-align: center;
        font-weight: bold;
    }

    #shoplink ul li.active .wrap {
      background: #8C6239;
      color: #fff;
    }





@media(min-width:750px){
        #shoplink ul li .wrap{ 
            font-size: 24px;
            padding:15px;
            
        }
        #shoplink ul li .wrap{ 
            font-size: 24px;
            padding: 10px 0;
                  
        }

    }


    #shoplink ul li .wrap:hover{
      background: #8C6239;
        text-decoration: none;
        color: #fff;
    }
    
    
    .shopBox h3{
        font-size: 36px;
        font-weight: bold;
        color: #8C6239;
        border-bottom: 2px solid #8C6239;
        display: inline-block;
        padding-bottom: 10px;
    }

    .shopBox table{
        margin-bottom: 1rem;
    }
    .shopBox table th,.shopBox table td{
        font-size: 16px;
    }

    .shopBox table th{
        white-space: nowrap;
    }

    .shopBox{
        display: none;
        margin-bottom: 0;
        }
        .shopBox p{
            margin-bottom: 0;
        }

    @media(max-width:750px){
        .shopBox{
            padding-bottom: 100px;
        }


        }


@media(max-width:576px){
        
    .google_map {
        position: relative;
        width: 100%;
        height: 0;
        padding-top: 15%; }
      
      .google_map iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 125px; }
        .shopimg{
            width:177px;
            height:125px;
        }

}



        
@media(min-width:750px){
    .shopBox table th,.shopBox table td{
        font-size: 20px;
    }

}


/*********よくある質問 *************/

#faq{
    padding-bottom: 24px;
    background-color: #FFFFFF;
}

#faq dl{
    margin-bottom: 20px;
}
#faq dl dt{
    position: relative;
    font-size: 24px;
    padding: 15px 15px 15px;
    background-color: #C69C6D;
    color: #000000;
    margin: 0;
    font-weight: bold;
}

#faq dl dd span,#faq dl dt span{
    font-size: 1.2em;

}

#faq dl dd{
    font-size: 24px;
    padding: 15px 15px 15px;
    background: rgba(255,255,255,0.2);
    color: #000;
    display: none;
}


 #faq dl dd p span{
 border-bottom:2px solid #6E6239;
}

#faq dl dd.show{
    display: block;
}

@media (max-width:576px){
    #faq dl{
        margin-bottom: 16px;
    }
    #faq dl dt{
        font-size: 16px;}
    #faq dl dd{
        font-size: 16px;}

}

/* #faq dl dt:before { content: ""; 
    font-size: 18px; 
    color: #fff; 
    background: #ffffff; 
    width: 2px; 
    height: 15px; 
    position: absolute; 
    right: 5%; 
    top: 40%; 
    text-align: center; 
    display: inline-block; 
    line-height: 1.3; 
    transition: all .6s ease-in-out;
  } */
  


/*   
  #faq dl dt.show:before {
    transform: rotate(90deg);
  }
  
  
    #faq dl dt:after { content: ""; 
      font-size: 18px; 
      color: #fff; 
      background: #ffffff; 
      width: 2px; 
      height: 15px; 
      position: absolute; 
      right: 5%; 
      top: 40%; 
      text-align: center; 
      display: inline-block; 
      line-height: 1.3;
    transform: rotate(90deg);
    } */
  

/*********禁忌事項 *************/

#kinkizikou{
    background-color:#000000;

}
#kinkizikou p{
    color:#FFFFFF;
}























    /*********** *******************/


/* 施術の流れ */
#flow{
    background: url(images/07/07_h2.png)repeat-y top center/100%;
    background-color:#000000;   
}













/* ヒロ銀座とは */
#about_ginza,#about_barbar{
    position: relative;
    padding-bottom: 20px;
    background: url(images/bg-1.png) repeat-y;
   }

   #about_ginza p,#about_barba p{
       font-size: 24px;
   }
   
#about_ginza .hiro{
    position: absolute;
    right:1px;
    top:1px;
}


#about_ginza .wrap{
    padding-right: 156px;

}


.space_box h3{
    background-color: #786E46;
    margin: 0;
    color: #fff;
    padding: 15px 0 15px  15px;
    font-size: 28px;
    margin-bottom: 15px;
    
}

.space_box {
    border-bottom:2px solid #786E46;
    border-left:2px solid #786E46;
    border-right:2px solid #786E46;
    margin-bottom: 56px;
    border-radius: 0 0 30px 30px;
    background-color: #fff;
    opacity: 0.8;    
   }

.space_box .box p{
    font-size: 24px;
    padding: 10px 10px;
}

.space_box .box.line{
    padding: 0px 15px;
}

.space_box .box.line p{
    font-size: 24px;
    padding: 0px 5px;
    border-bottom: 1px solid #786E46;
}


@media (max-width:576px){


    .space_box{
        margin-bottom: 48px;
    }
    .space_box h3{
        font-size: 18px;
    }

    .space_box .box.line p{
        font-size: 16px;
    }

    #about_ginza .wrap{
        padding-right: 20%;
    
    }

    #about_ginza,#about_barbar{
                padding-bottom: 15px;
       }
       #about_ginza p,#about_barba p{
        font-size: 16px;
    }
    .space_box .box p{
        font-size: 16px;}
        #about_ginza .hiro{
         width:20%;
            right:1px;
            top:1px;
        }
   
}
   




/* プレミアムバーバーとは */
#about_barbar .hiro{
    position: absolute;
    left:1px;
    top:100px;
}

#about_barbar .wrap{
    padding-left: 156px;

}

@media (max-width:576px){
    #about_barbar .hiro{
width:18%;
        left:1px;
        top:100px;
    }
    #about_barbar .wrap{
        padding-left: 20%;
    
    }

}

/********* ヒロ銀座のブライダルが選ばれる5つの理由 *************/
#feature{
    float: left;
    background-image: none;
    background-color: #fafffa;
}

#feature .bg-1{
    float: left;    
    background: url(images/bg_feature1.png) no-repeat center 40px;
    padding-top: 100px;
    } 
    #feature .bg-2{
        float: left;    
        background: url(images/bg_feature2.png) no-repeat center 40px;
        } 

@media (max-width:576px){
        #feature .bg-1{
         background: url(images/bg_feature1.png) no-repeat center 40px/100%;
        padding-top: 100px;
        } 
        #feature .bg-2{
            background: url(images/bg_feature2.png) no-repeat center 40px/100%;
           padding-top: 100px;
           } 


        }
        
        
        
/********* ヒロ銀座のコース *************/


h4.common{
    font-size: 32px;
    color: #000;
}
h4.common2{
    font-size: 32px;
    color: #ffffff;
    background-color: #6E6239;
    padding: .5em .5em .5em 8.3%;
    width:92.666%;

}


.T_box{
    background-color:rgba(255,255,255,0.7);
    padding: 1em;
    box-shadow: 7px 7px 7px 0px rgba(189, 171, 116, 0.75);
    margin-bottom: 36px;
}
.btn_open{
    display: inline-block;
    font-size: 32px;
    color: #6E6239;
    font-weight: bold;
    padding: .5em 4em;
    border: 2px solid #6E6239;
    background-color: #fff;
}

.btn_open:hover{
    background-color:#6E6239;
    color:  #fff;
}


@media (max-width:576px){
    h4.common{
        font-size: 18px;
    }
    h4.common2{
        font-size: 16px;
    }
    .btn_open{
        font-size: 16px;
    }

}

.closeArea{
    display: none;

}

.closeArea.open{
    display: block;
    margin-bottom: 24px;

}
table.menucontent{

border: 2px solid #6E6239;
}

table.menucontent th{
    display: block;
    border-top: 2px solid #6E6239;
    font-size: 24px;
    text-align: center;
    color: #6E6239;
    }
    
table.menucontent td{
        display: block;
         border-top: 2px solid #6E6239;
        padding: .5em 1em;
  
    }
    
table.menucontent td p{
   font-size: 24px;
   position: relative;
   padding-left: 1em;
}


table.menucontent td p.kome{
    font-size: 16px;
    position: relative;
    padding-left: 1em;
 }
 table.menucontent td p.kome:before{
    content: none;
 }

table.menucontent td p:before{
    content: "・";
    font-size: 24px;
    position: absolute;
    left:0;
}
@media (max-width:576px){
    table.menucontent td p{
        font-size: 16px;
        line-height: 1.5;
     }
     table.menucontent td p:before{
        font-size: 16px;
        line-height: 1.5;
    }
    

         }

/********* ヒロ銀座のオプションコース *************/
.corse01{
    width: 100%;
    background: url(images/bg_corse.png) repeat-y top center/100%;

}
/********* ヒロ銀座のオプションコース *************/

#option{
    background: url(images/bg_op.png) repeat-y top center/100%;
width: 100%;
}

#option h3.shaving{
    font-size: 30px;
    text-align: center;

}

#option .space_box h3{
    text-align: left;
}

#option .space_box p{
    padding: 0px 15px  10px;
}

@media (max-width:576px){
    #option h3.shaving{
        font-size: 18px;
        text-align: center;
    }

    #option .img1{
    padding-right: 20%;
}

}

/*********予約の流れ *************/

#flow .box{
    margin-bottom: 40px;
    background: url(images/bg_flow_1.png)repeat-y left top;
    padding: 20px 0 40px;
}
#flow .box.left{
    background: url(images/bg_flow_2.png)repeat-y left top;
}


#flow .text_box{
    padding: 15px 24px 20px;
    background-color: rgba(255, 255, 255, 0.4);
    position: relative;
    width:66.6%;
    margin-left: 16.6%;
    margin-top: -8%;
    box-shadow: 7px 7px 5px 0px rgba(110,98,57,0.75);
}

#flow .text_box.left{
margin-left: 8.333%;
}




@media (max-width:576px){
    #flow .box{
        margin-bottom: 16px;
        padding: 16px 0 20px;
    }

    #flow .text_box p{
        font-size: 16px;
    }

}

/*********インスタ *************/
#voice_area{
background: url(images/bg_inst.png) repeat-y top center/100%;
}

a.instabttom:before{
  content: "";
  background: url(images/insta_aic.png) no-repeat center;
  display: inline-block;
  width:54px;
  height:55px;
  position: absolute;
  background-size: 45%;
  top:-15px;
  left:-40px;
}


/*********よくある質問 *************/

#faq{
    background-color: #FFFFFF;
    padding-bottom: 24px;
}

#faq dl{
    margin-bottom: 20px;
}
#faq dl dt{
    position: relative;
    font-size: 24px;
    padding: 15px 15px 15px;
    background-color: #C69C6D;
    color: #000000;
    margin: 0;
    font-weight: bold;
		cursor: pointer;
}

#faq dl dd span,#faq dl dt span{
    font-size: 1.2em;

}


#faq dl dd{
    font-size: 24px;
    padding: 15px 15px 15px;
    background: rgba(255,255,255,0.2);
    color: #000;
    border-radius: 0 0 20px 20px;
    display: none;
}


 #faq dl dd p span{
 border-bottom:2px solid #6E6239;
}

#faq dl dd.show{
    display: block;
}

@media (max-width:576px){
    #faq dl{
        margin-bottom: 16px;
    }
    #faq dl dt{
        font-size: 16px;}
    #faq dl dd{
        font-size: 16px;}

}







/* #faq dl dt:before { content: ""; 
    font-size: 18px; 
    color: #fff; 
    background: #ffffff; 
    width: 2px; 
    height: 15px; 
    position: absolute; 
    right: 5%; 
    top: 40%; 
    text-align: center; 
    display: inline-block; 
    line-height: 1.3; 
    transition: all .6s ease-in-out;
  } */
  


/*   
  #faq dl dt.show:before {
    transform: rotate(90deg);
  }
  
  
    #faq dl dt:after { content: ""; 
      font-size: 18px; 
      color: #fff; 
      background: #ffffff; 
      width: 2px; 
      height: 15px; 
      position: absolute; 
      right: 5%; 
      top: 40%; 
      text-align: center; 
      display: inline-block; 
      line-height: 1.3;
    transform: rotate(90deg);
    } */
  

/* * * * * * * 禁忌事項* * * * *  */

 #ban{
        background-color: #eeeeee;
        padding-bottom: 100px;
      
}

#ban h2{
    color: #6E6239;
    font-size: 40px;
    font-weight: bold;
}


#ban .text-box{
    position: relative;
    background-color: #fff;
    padding: 24px;
    box-shadow: 15px 15px 0px -5px #6E6239;
    
}
hr.custom-line {
    border: none;
    height: 2px;
    background-color: #6E6239;
}

@media (max-width:576px){
    #ban h2{
        font-size: 24px;
    }
    #ban .text-box{
  
        padding: 16px;
        
    }

}



/* フッターボタン */
.fixed-bottom {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
}

.fixed-bottom a{
    display: block;
}


.fixed-bottom .col-5{
    display: flex;
    align-items: flex-end;
}
#bottomBtn{
    display: none;
}




footer{
    padding-top: 1rem;
    background-color: #6E6239;
}

footer ul li{
    display: inline-block;
}

footer ul li a{
    color: #fff;
}


.footnavi {
    padding-top: 1rem;
}

.footnavi li{
    position: relative;
}

.footnavi li:before{
    content: "";
    position: absolute;
    border-top:5px solid transparent;
    border-bottom:5px solid transparent;
    border-left:5px solid #6E6239;
    border-right: 5px solid transparent;
    top:30%;
    
}
.footnavi li a{
    
    padding-left: 1em;
    color: #000;

}


p.ex{
    font-size: 28px;
    color: #fff;
    background-color: #6E6239;
    padding-left: 15px;
}


/* 
まずは２つの手順でコースをチェック */
#timing{
    background: url(images/bg_timing.png) repeat-y center top/90%;
}


.bg-tejyun{
    background: url(images/bg_tejyun2.png) no-repeat right center/100%;
}


ul.courseTab li{
    background: url(images/btn_course01_w.png) no-repeat center ;
    width:auto;
    height: 100px;
    padding: 1rem;
}
ul.courseTab li.link{
    background: url(images/btn_course01.png) no-repeat center;
}

ul.courseTab li:nth-child(2){
    background: url(images/btn_course02_w.png) no-repeat center;
}

ul.courseTab li:nth-child(3){
    background: url(images/btn_course03_w.png) no-repeat center;
}
ul.courseTab li:nth-child(4){
    background: url(images/btn_course04_w.png) no-repeat center;
}
ul.courseTab li:nth-child(5){
    background: url(images/btn_course05_w.png) no-repeat center;
}
ul.courseTab li:nth-child(6){
    background: url(images/btn_course06_w.png) no-repeat center;
}







ul.courseTab li.link:nth-child(2){
    background: url(images/btn_course02.png) no-repeat center;
}

ul.courseTab li.link:nth-child(3){
    background: url(images/btn_course03.png) no-repeat center;
}
ul.courseTab li.link:nth-child(4){
    background: url(images/btn_course04.png) no-repeat center;
}
ul.courseTab li.link:nth-child(5){
    background: url(images/btn_course05.png) no-repeat center;
}
ul.courseTab li.link:nth-child(6){
    background: url(images/btn_course06.png) no-repeat center;
}




ul.courseTab li:nth-child(2){
    background: url(images/btn_course02_w.png) no-repeat center;
}
ul.courseTab li:nth-child(3){
    background: url(images/btn_course03_w.png) no-repeat center;
}
ul.courseTab li:nth-child(4){
    background: url(images/btn_course04_w.png) no-repeat center;
}
ul.courseTab li:nth-child(5){
    background: url(images/btn_course05_w.png) no-repeat center;
}
ul.courseTab li:nth-child(6){
    background: url(images/btn_course06_w.png) no-repeat center;
}


ul.courseTab li.link:nth-child(2){
    background: url(images/btn_course02.png) no-repeat center;
}

ul.courseTab li.link:nth-child(3){
    background: url(images/btn_course03.png) no-repeat center;
}
ul.courseTab li.link:nth-child(4){
    background: url(images/btn_course04.png) no-repeat center;
}

ul.courseTab li.link:nth-child(5){
    background: url(images/btn_course05.png) no-repeat center;
}
ul.courseTab li.link:nth-child(6){
    background: url(images/btn_course06.png) no-repeat center;
}









@media (max-width:576px){


    ul.courseTab li{
        background: url(images/btn_course01_w.png) no-repeat center /100%;
        width:auto;
        height: 100px;
        padding: 1rem;
        flex: 0 0 31%;
        max-width: 31%;
    }
    
    
    ul.courseTab li.link{
        background: url(images/btn_course01.png) no-repeat center/100%;
    }
    
    ul.courseTab li:nth-child(2){
        background: url(images/btn_course02_w.png) no-repeat center/100%;
       
    }
    
    ul.courseTab li:nth-child(3){
        background: url(images/btn_course03_w.png) no-repeat center/100%;
    }
    ul.courseTab li:nth-child(4){
        background: url(images/btn_course04_w.png) no-repeat center/100%;
       
    }
    ul.courseTab li:nth-child(5){
        background: url(images/btn_course05_w.png) no-repeat center/100%;
       
    }
    ul.courseTab li:nth-child(6){
        background: url(images/btn_course06_w.png) no-repeat center/100%;
       
    }
    



    ul.courseTab li.link:nth-child(2){
        background: url(images/btn_course02.png) no-repeat center/100%;
    }
    ul.courseTab li.link:nth-child(3){
        background: url(images/btn_course03.png) no-repeat center/100%;
    }   
    ul.courseTab li.link:nth-child(4){
        background: url(images/btn_course04.png) no-repeat center/100%;
    }
    ul.courseTab li.link:nth-child(5){
        background: url(images/btn_course05.png) no-repeat center/100%;
    }
    ul.courseTab li.link:nth-child(6){
        background: url(images/btn_course06.png) no-repeat center/100%;
    }

    



}


.content div,.content2 div{
    display: none;
}


/* タイミングをチェック */

ul.timeTab li{
    background: url(images/btn_time01_w.png) no-repeat center ;
    width:auto;
    height: 100px;
    padding: 1rem;
}


ul.timeTab li.link{
    background: url(images/btn_time01.png) no-repeat center;
}

ul.timeTab li:nth-child(2){
    background: url(images/btn_time02_w.png) no-repeat center;
}

ul.timeTab li:nth-child(3){
    background: url(images/btn_time03_w.png) no-repeat center;
}

ul.timeTab li.link:nth-child(2){
    background: url(images/btn_time02.png) no-repeat center;
}

ul.timeTab li.link:nth-child(3){
    background: url(images/btn_time03.png) no-repeat center;
}




@media (max-width:576px){

    p.ex{
        font-size: 20px;}

    ul.timeTab li{
        background: url(images/btn_time01_w.png) no-repeat center /100%;
        width:auto;
        height: 100px;
        padding: 1rem;
        flex: 0 0 31%;
        max-width: 31%;
    }
    
    
    ul.timeTab li.link{
        background: url(images/btn_time01.png) no-repeat center/100%;
    }
    
    ul.timeTab li:nth-child(2){
        background: url(images/btn_time02_w.png) no-repeat center/100%;
       
    }
    
    ul.timeTab li:nth-child(3){
        background: url(images/btn_time03_w.png) no-repeat center/100%;
    }
    
    ul.timeTab li.link:nth-child(2){
        background: url(images/btn_time02.png) no-repeat center/100%;
    }
    
    ul.timeTab li.link:nth-child(3){
        background: url(images/btn_time03.png) no-repeat center/100%;
    }

}


.title01{
    text-align: center;
    font-size: 32px;
    color: #6E6239;
    margin-bottom: 1.5rem;
}

.title01 span{
    position: relative;
    display: inline-block;
}

.title01 span:before{
    content: "";
    background:url(images/aic_title01_left.png)no-repeat center/100% ;
    width:71px;
    height: 34px;
    position: absolute;
    left:-80px;
}

.title01 span:after{
    content: "";
    background:url(images/aic_title01_right.png)no-repeat center/100% ;
    width:71px;
    height: 34px;
    position: absolute;
    right:-80px;
}



@media (max-width:576px){

    .title01{
        font-size: 20px;
   }

   
.title01 span:before{
    content: "";
    background:url(images/aic_title01_left.png)no-repeat center/100% ;
    width:35px;
    height: 17px;
    position: absolute;
    left:-40px;
}

.title01 span:after{
    content: "";
    background:url(images/aic_title01_right.png)no-repeat center/100% ;
    width:35px;
    height: 17px;
    position: absolute;
    right:-40px;
}

}

#stage {
position: relative;
max-width:600px;
margin: 0 auto;
background:#ddd;
}
.pic {
position: absolute;
}
.pic img {
width: 100%;
height: auto;
opacity:0;
-moz-animation: imgTrans 40s infinite;
-webkit-animation: imgTrans 40s ease-in infinite;
animation: imgTrans 40s infinite;
}
#photo1 img {
-moz-animation-delay: 0s;
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
#photo2 img {
-moz-animation-delay: 8s;
-webkit-animation-delay: 8s;
animation-delay: 8s;
}
#photo3 img {
-moz-animation-delay: 16s;
-webkit-animation-delay: 16s;
animation-delay: 16s;
}
#photo4 img{
-moz-animation-delay: 24s;
-webkit-animation-delay: 24s;
animation-delay: 24s;
}
#photo5 img {
-moz-animation-delay: 32s;
-webkit-animation-delay: 32s;
animation-delay: 32s;
}
#photo6 img {
-moz-animation-delay: 32s;
-webkit-animation-delay: 32s;
animation-delay: 32s;
}
#photo7 img {
-moz-animation-delay: 32s;
-webkit-animation-delay: 32s;
animation-delay: 32s;
}
#photo8 img {
-moz-animation-delay: 32s;
-webkit-animation-delay: 32s;
animation-delay: 32s;
}


@-webkit-keyframes imgTrans {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0; }
100% { opacity:0; }
}
@-moz-keyframes imgTrans {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0; }
100% { opacity:0; }
}
@keyframes imgTrans {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0; }
100% { opacity:0; }
}

img{
	display: inline-block;
}
#top01 h2{
		margin-bottom: 0 !important;
}