/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/

/*スマホ他サイズ320px以下のときの TOP*/
@media screen and (max-width:800px){

    /*　メニュー表示（縮小表示）　*/
    /*.menu-btn img{
        display:block;
    }*/
   
    .header-navi{
        display:none;
        position:absolute;
        top:30px;
        left:0px;
        padding:0px 0px;
        flex-direction: column;
        z-index:100;
    }

    /* メニュー表示方法と動作 */
    .header-navi li{
        height:30px;
        width:150px;
        text-align:left;
        background-color: black;
        border:1px gray solid;
    }

    .header-navi li a{
        font-size: 20px;
    }
    
    /*メニュー表示*/
    /*.menu-btn:hover + .header-navi,.header-navi:hover{
        display:block;
    }*/
    
    /*.menu-btn{*/
        /*width:30px;
        height:30px;*/
        /*width:32px;
        height:32px;
        z-index:94;
    }*/

    .mobile_buttonsize{
        /*width:30px;
        height:30px;*/
        width:32px;
        height:32px;
    }
    
    #img_0{
        background-position: top center;
        background-size: 15% auto;
    }
    
    #img_1 p{
        display:none;
    }
    
    #img_2{
        background-image: url(../img/top_mobile/img_1.jpg);
    }
    
    #img_3 p{
        display:none;
    }
    
    #img_4{
        background-image: url(../img/top_mobile/img_2.jpg);
    }
    
    #img_5 p{
        display:none;
    }
    
    #img_6{
        background-image: url(../img/top_mobile/img_3.jpg);
    }

    #img_7 p{
        display:none;
    }
    
    #img_8{
        background-image: url(../img/top_mobile/img_4.jpg);
   }
   
/*   #details-rows{
       flex-direction: column;
   }*/

   /* 詳細画面 */
   .detail_title{
       position:relative;
       z-index:50;
   }
   
   #details-radio{
       display:block;
   }
   
   /*#details-rows{
       display:none;
       flex-direction: row;
       justify-content:center       
   }*/
   
   .detail-loupe{
       display:none;
   }

/*コンタクト画面*/
    .contact-wrapper{
/*        width:100%;*/
        padding-top:60px;
        padding-bottom: 100px;
    }

    .contact-base{
        width:90%;
        flex-direction: column;
        padding-left: auto;
        text-align: center;
    }
    
    .contact-base .mail_invi{
        width:60%;
        text-align: left;
    }
    
    /*メール・表題と注意事項*/
    .contact-base .mail_infobase{
        width:100%;
        height:100%;
        display:flex;
        flex-direction: column;
    }

    .contact-base .mail_infobase .infor{
        text-align:left;
        font-size: 12px;
        width:100%;
    }
    
    .mail_work{
        display:flex;
        flex-direction: column;
    }

    .mail_work .base{
        position:relative;
        width:100%;
        display:flex;
        flex-direction: column;
    }
    
    .mail_work .base-a{
        position:relative;
        width:100%;
        display:flex;
        flex-direction: column;
    }
    
    .mail_midasi{
        position:relative;
        width:100%;
        text-align: left;
        display: table;
    }

    .mail_midasi p{
        position:relative;
        display: table-cell;
        vertical-align: middle;
        color:orange;
    }

/*    .mail_atena{
        background-color: red;
        position:relative;
        display:flex;
        flex-direction: row;
        flex-wrap: nowrap;
        width:100%;
        height:90%
    }*/

    
    .mail_atena{
        display:flex;
        flex-direction: row;
        flex-wrap: nowrap;
        width:100%;
        height:90%
    }

    .mail_atena > input[type="text"]{
        position:relative;
        width:45%;
        font-size:100%;
    }

    .mail_atena > input[type="email"]{
        position:relative;
        width:100%;
        font-size:100%;
    }    
    .mail_atena textarea{
        position:relative;
        font-size:100%;
        width:100%;
        height:100%;
        text-align: left;
        resize:none;
    }
    
/*    .mail_atena > input{
        position:relative;
        flex-basis: 50%;
        height:100%;
        text-align: left;
    }*/

/*    .mail_address{
        position:relative;
        width:100%;
        text-align: left;
    }*/

    .mail_atena input{
        flex-basis: 100%;
        position:relative;
        width:100%;
        font-size:100%;
    }

    .mail_atena textarea{
        position:relative;
        font-size:100%;
        width:100%;
        height:150px;
        text-align: left;
        resize:none;
    }

    #send_mail{
        width:38%;
        padding-top:10px;
        height:50px;
        text-align:center;
        display: table;
        background-color: goldenrod;
        cursor: default;
    }

    .submit-button{
        font-size:20px;
        border:none;
        background-color: goldenrod;
        color:white;
        width:50%;
        height:100%;
    }
    
    #send_mail p{
        display: table-cell;
        vertical-align: middle;
        font-size:24px;
    }
    

    .mail_blank{
        width:38%;
        height:100%;
        text-align: left;
    }
    
    .mail_invi div .tategaki{
        -webkit-writing-mode: horizontal-tb;
        -ms-writing-mode: lr-tb;
        writing-mode: horizontal-tb;
        font-size: 26px;
        text-indent: 1en;
        text-align:left;
    }
   
}


@media screen and (min-width:800px){
    /*　メニュー表示（通常表示）　*/
    
    .header-navi{
        position:absolute;
        padding:0px 0px;
        flex-direction: row;
    }

    /* メニュー表示方法と動作 */
    .header-navi li{
        /*height:20px;
        padding-top:8px;
        line-height:16px;*/
        height: 15px;
        line-height: 15px;
    }

    .header-navi li a{
        font-size: 20px;
        color:white;
    }
    
    #main_images p.moji_0{
        color:black;
    }

    #main_images p.moji_7{
        color:white;
    }

    #img_0{
        background-position: top right;
        background-size: 80px auto;
    }
    
    #img_1 p{
        /*display: box;*/
    }
    
    #img_2{
        background-image: url(../img/top_basic/slide01.jpg);
    }
    
    #img_3 p{
        /*display: box;*/
    }
    
    #img_4{
        background-image: url(../img/top_basic/slide02.jpg);
    }
    
    #img_5 p{
        /*display: box;*/
    }
    
    #img_6{
        background-image: url(../img/top_basic/slide03.jpg);
    }


   
/*    #details-rows{
       flex-direction: row;
   }*/

   /* 詳細画面 */
   .detail_title{
       position:absolute;
       z-index:50;
   }
   
   #details-radio{
       display:none;
   }

   #details-rows{
       display:block;
       flex-direction: row;
       justify-content:center       
   }
   
   .detail-loupe{
       display:block;
   }
   
   .pc-select{
       border:2px solid black;
   }
   
/*コンタクト画面*/

    .contact-base{
        flex-direction: row;
        width:70%;
        min-width:600px;
        height:600px;
    }
    
/*    .mail_work{
        background-color: red;
        height:800px;
    }*/
    
    .mail_work .base{
        display:flex;
        flex-direction: row;
        height:15vh
    }
    
    .mail_work .base2{
        display:flex;
        flex-direction: row;
        height:18%
    }
    .mail_midasi{
        width:24%;
        height:90%;
    }

    .mail_invi div .tategaki{
        -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
        font-size: 26px;
        text-indent: 1en;
        text-align:left;
    }
    
    /*メール・表題と注意事項*/
    .contact-base .mail_infobase{
        width:90%;
        height:70vh;
        display:flex;
        flex-direction: column;
    }

    .contact-base .mail_infobase .infor{
        text-align:left;
        height:16vh;
    }

    .mail_work{
        display:flex;
        flex-direction: column;
        height:100vh
    }

/*    .mail_work .base-a{
        width:100%;
        display:flex;
        flex-direction: row
    }*/

    .mail_midasi{
        text-align: left;
        display: table;
    }

    .mail_midasi p{
        display: table-cell;
        vertical-align: middle;
        color:orange;
    }

    .mail_atena{
        display:flex;
        flex-direction: row;
        flex-wrap: nowrap;
        width:100%;
        height:90%
    }

    .mail_atena > input[type="text"]{
        border:1px solid black;
        position:relative;
        width:45%;
        font-size:100%;
    }

    .mail_atena > input[type="email"]{
        position:relative;
        width:100%;
        font-size:100%;
    }    
    .mail_atena textarea{
        position:relative;
        font-size:100%;
        width:100%;
        height:100%;
        text-align: left;
        resize:none;
    }

    
    #send_mail{
        width:38%;
        margin-top:10px;
        height:60px;
        text-align:center;
        display: table;
        background-color: goldenrod;
        cursor: default;
    }

    .submit-button{
        font-size:20px;
        border:none;
        background-color: goldenrod;
        color:white;
        width:50%;
        height:100%;
    }

    .mail_blank{
        width:38%;
        height:90%;
        text-align: left;
    }
}

/********************
    ヘッダー
*********************/

header{
 
  /*height:40px;*/
  height:100px;
  width:100%;
  /*background-color:rgba(34,49,52,0.1);*/
   background-color:rgba(0,0,0,0.4);
  position:fixed;
  top:0px;
  z-index:98;
}

.header-bk{
  /*height:24px;
  padding-top:3px;
  padding-bottom:3px;*/
  height:100px;
  padding: 0 35px;
  box-sizing: border-box;
}

/* logoクラスのCSSを指定してください */
.logo{
 position:absolute;
 right:50px;
 top:50px;
}

.header-left{
  float:left;
  margin-top: 42px;
}

/*
.header-left img{
  width:24px;
  height:24px;
}
*/

/*.menu-btn{
        display:box;
        width:30px;
        height:30px;
        z-index:94;
}*/

.header-navi li a{
  font-size:16px;
  padding-right:25px;
  padding-left:25px;
  color:white;
  display: block;
}

.header-navi li + li {
  border-left: 1px solid #fff;
}

.header-navi li a:hover{
 opacity:0.5;
}

.header-right{
  float:right;
}

header #img_0{
    position:relative;
    padding:0px 0px;
    width:95vw;
    height:100vh;
    animation:img_opacity_in 1s linear 0s;
    background-image: url(../img/rogo_base.png);
/*    background-size: 8% auto;*/
    background-repeat: no-repeat;
    z-index:95;
}


@media screen and (min-width:800px){

    .img_0{
        position:relative;
        margin-right:0px;
        width:80px;
        height:100vh;
        background-image: url(../img/rogo_base.png);
        background-size: 80px auto;
        background-position: top right;
        background-repeat: no-repeat;
        z-index:95;
    }
}

@media screen and (max-width:800px){
  header {
    height:52px;
  }
  .header-bk {
    height:52px;
    padding: 0 10px;
  }
  .header-left {
    margin-top: 10px;
  }
}

/* メニュー */
.menu-icon {
  margin-top: 36px;
}
.menu-icon li{
  /*padding-right:2px;*/
  padding-right: 10px;
}
.menu-icon li:last-child {
  padding-right: 0;
}

.menu-icon li a img{
 /*padding-top:3px;*/
 width:24px;
 height:24px;
}

.selected{
 opacity:0.5;
}

.menu-icon li a img:hover{
 opacity:0.5;
}

.menu-icon li a img:hover{
 opacity:0.5;
}

.menu-icon a:active{
    body{
        animation-duration: 1s;
        animation-delay: 0s;
        animation-name:img_opacity_reverce;
        animation-fill-mode:both;
        animation-timing-function: linear;    
    };
}

.hamburger {
    display: none;
}

@media screen and (max-width:800px){
  .menu-icon {
    margin-top: 10px;
  }
  .menu-icon li a img{
    width:32px;
    height:32px;
  }
  .hamburger {
    display: block;
  }
  .hamburger__icon, .hamburger__icon:before, .hamburger__icon:after {
    background-color: #fff;
  }
  .hamburger__icon {
    margin-top: 14px;
  }
  .fat-nav li {
    font-size: 20px;
  }
}

/*
    フッター
*/


footer p{
  /*padding-left:20px;*/
  /*line-height:30px;*/
  line-height:100px;
  color:#fff;
  font-size:12px;
  font-family: Arial, Helvetica, "sans-serif";
}

footer{
  /*height:30px;*/
  height:100px;
  width:100%;
  padding: 0 35px;
  /*background-color:rgba(20,20,20,0.5);*/
  background-color:rgba(0,0,0,0.4);
  position:fixed;
  bottom:0px;
  z-index:98;
  box-sizing: border-box;
}

.footer-left{
  float:left;
}

@media screen and (max-width:800px){
  footer p{
    line-height:52px;
  }
  footer{
    height:52px;
    padding: 0 10px;
  }
}

/*
*    問い合わせ
*/
.contact-base{
   
    margin:0% auto auto auto;
    display:flex;
    max-width:680px;
/*    height:80vh;*/
}

@media screen and (min-width:800px){
    .contact-base .mail_invi{
        width:20%;
    }
}
    
.contact-base .mail_invi p{
    text-align:center;
    border-left:1px solid white;
    border-right:1px solid white;
}

@media screen and (max-width:800px){
    .thanks-wapper{
      padding-top: 50px;
    }

    .thanks-base{
        width:80%;
    }
}

@media screen and (min-width:800px){
    .thanks-wapper{
      padding-top: 100px;
    }

    .thanks-base{
        width:60%;
    }
}