@charset "UTF-8";


body {margin: 0;
     	font-family: '????',
        'Hiragino kaku Gothic Pro',
        sans-serif;
}

/*=======PC大きい画面の設定 =============*/

@media(min-width: 768px){
   
    header {
        position: absolute;
        top: 0;
        left: 0;
        z-index:100;
        width: 100%;
        background-color: rgba(255,255,255,1.0);
        
    }
        
    /*ヘッダーを画面上部に固定*/
        
    .head-fixed{
        position: fixed;
    }
 
 
 
    header{
        height: 60px;
        padding-top:15px;
    }
    
    
    header .container{
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
        
    }
    
/* ヘッダーA: サイト名 */
.headA{
    display: inline-block;
    line-height: 60px;
    padding-left: 20px;
    padding-right: 20px;
    /*background-color: #2c3850;*/
    color: #65646E;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    text-decoration: none;
    
}  
    
    
/* ヘッダーB: ナビケーションメニュー*/
    
.headB ul{
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.headB a{
    display: block;
    padding: 16px;
    color: #65646E;
    font-size: 16px;
    text-decoration: none;
}

.headB a:hover{
    background-color: rgba(0,0,0,0.4);
    color: #fff;  
    
}  
    
 .headC{
        display: none;
    }
    
  .headB{
        display: block !important;
    }
     
    
    
    .conA{
        display: flex;
        align-items: center;
        justify-content: center;
        height: 70vh;
       min-height: 300px;
       background-image: linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.2)),url(../img/sub_img01_01.jpg);
        background-position: center;
        background-size: cover;
        color:#fff;
        text-align:center;
    }
    
    .conA h2{
        font-size: 50px;
        font-family: 'Montserrat', sans-serif;
        
    }
   
    .conA p{
        font-size: 26px;
    }  
    
main{
  width: 1000px;
  height: auto;
  margin: 30px auto;
  padding-left: 50px; 
  padding-right: 50px;
  background: #fff;
  border-top: none;
    
}

.aboutme{
    
    text-align: center;
    width: 800px;
    height: auto;
    margin: 0 auto;
    margin-bottom: 40px;
}


.nameA h1{
    margin-top: 20px;
    margin-left: 80px;
    font-size: 40px;
    color: #3e3e3f;
    font-family: "Times New Roman";
    border-left: none;
    text-align: left;
}



  
.imgbox{
   width: 850px;
   height: 310px;
   margin: 0px auto;
   margin-top: 20px;
   margin-bottom: 0px;
  background: #fff; 
}

.photo {
  float: left;
  margin-left: 0px;
  width: 250px;
  height: 260px;
  border: 1px solid #ccc;
  /*border-bottom: none;*/
}

.photo img{
  width: 260px;
 
 
} 

.word {
	float: left;
	width: 550px;
	height: 220px;
	padding: 20px;
	/*background:#3e3e40;*/
	background: #fff;
	border: 1px solid #ccc;
}

.word p{
   margin-top: 50px;
   font-size: 17px;
   color: #3e3e3f;
   font-family: "Times New Roman";
   line-height: 160%;
   text-align: left;
  

}   
  
.messagebox{
    width: 800px;
    height: auto;
    margin: 0 auto;
    margin-bottom: 50px;
    padding: 30px 30px;
    border: 1px solid #ccc;
   background: #fff; 
   font-family: 'Montserrat', sans-serif;
}  

  
.messagebox h2{
    margin-top: 0px;
    font-size: 24px;
    font-family: 'Times New Roman';
}  


.messagebox p{
    margin-top: 0px;
    font-size: 16px;
   line-height : 180%;
     color: #3e3e3f;
   font-family: 'Montserrat', sans-serif;
   text-align: left;
}


.skill{
    width:800px;
    height: auto;
    margin: 0 auto;
    margin-bottom: 50px;
    padding: 30px 30px;
    border: 1px solid #ccc;
   background: #fff; 
   font-family: 'Montserrat', sans-serif;
}  



.skill p{
    margin-top: 0px;
    font-size: 15px;
   line-height : 200%;
     color: #3e3e3f;
   font-family: 'Montserrat', sans-serif;
   text-align: left;
}

/*====　卓球非表示　=====*/
    
.tabletennis{
    display: none;
    width: 700px;
    margin-top: 50px;
    margin-bottom: 60px;
    margin-left: 15px;
    padding: 20px 30px;
    border: 1px solid #ccc;
    text-align: center;
    }

.tabletennis video{
    width: 600px;
    height: auto;
}
    
 .tabletennis p{
     font-size: 16px;
     color: #3e3e3f;
    }
    
    
iframe{
    width: 560;
    height: 315;
    }
    
    
/*フッター*/
  footer{

        margin-top: 40px;
        height: 220px;
        padding-top:30px;
        color: #fff;
        background-color: #ccc;
    }
    
     
    .footA h2{
        font-size: 26px;
        color: #fff;
        text-align: center;
        font-family: 'Montserrat', sans-serif;
    }
    .footC p{
        font-size: 18px;
        color: #fff;
        text-align: center;
        font-family: 'Montserrat', sans-serif;
    }
}


/*====== モバイル画面の設定 ============-*/

@media(max-width:767px){

/*ヘッダー*/
header {
    position: absolute;
    top: 0;
    left: 0;
    z-index:100;
    width: 100%;
    background-color: rgba(255,255,255,1.0);
}

/*ヘッダーを画面上部に固定*/
 .head-fixed{
    position: fixed;
}
    

/*ヘッダーA：サイト名*/
.headA{
    display: inline-block;
    line-height: 60px;
    padding-left: 20px;
    padding-right: 20px;
    color: #65646E;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    text-decoration: none;
    
}


/*ヘッダーB: ナビケーションメニュー*/
.headB ul{
    margin: 0;
    padding: 0;
    list-style: none;
}

.headB a{
    display: block;
    padding: 16px;
    color: #65646E;
    font-size: 16px;
    text-decoration: none;
}

.headB a:hover{
    background-color: rgba(0,0,0,0.3);
    color: #fff;
}

 header .container-small{ 
         display: flex;
         align-items: center;
         justify-content :space-between;
         /*width: auto;*/
    }

    
    .headC{
        display: inline;
        margin-right: 10px;
        margin-top: 5px;
        padding:0;
        border:none;
        outline: none;
        background: none;
        font-size: 30px;
        color: #65646E;
       /*opacity: 0.5;*/
        cursor: pointer;
    }
    
    .headC p{
        font-size: 15px;
        margin-top: 2px;
        margin-bottom: 2px
    }
    
    .headC:hover{
        opacity: 0.3;
    }
    
    .headB{
        display: none;
    }


/*コンテンツA:ヒーローイメージ*/
.conA{
    display:flex;
    align-items: center;
    justify-content: center;
    height: 45vh;
    min-height: 250px;
    background-image: linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.2)),url(../img/sub_img01.jpg);
    background-position: center;
    background-size: cover;
    color: #fff;
   /* color: var(--text-bright-color);*/
    text-align: center;
        
}

.conA h2{
    margin-top: 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: 9vw;
    letter-spacing: 0.2em;
    margin-left: 0.2em;
}

.conA p{
    margin-top: 20px;
    margin-bottom: 0;
    font-size: 18px;
}
  


main{
  width: 100%;
  height: auto;
  margin: 0 auto;
  background: #fff;
  border-top: 1px solid #ccc;
  
}
.nameA h1{
    margin-top: 20px;
    margin-left: 20px;
    padding-left: 10px;
    font-size: 25px;
     color: #65646E;
   font-family: 'Times New Roman', serif;
    border-left: 10px solid #65646E;
}  

.imgbox{
   width: 100%;
   height: 150px;
   margin: 0 auto;
   margin-top: 30px;
   margin-bottom: 20px;
   background: #fff; 
}


.photo {
  float: left;
  margin-left: 5%;
  width: 35%;
  height: 140px;
  width: 140px;
  border: 1px solid #ccc;
  /*border-bottom: none;*/
}

.photo img{
  width: 100%;
  
 
} 

.word {
	float: left;
	width: 53%;
	height: 140px;
	padding-left: 5px;
    padding-right: 5px;
	/*background:#3e3e40;*/
	background: #fff;
	border: 1px solid #ccc;
}

.word p{
   font-size: 11px;
   color: #000;
   font-family: "Times New Roman";
   line-height: 1.6;
    color: #65646E;
  

}   
  

.messagebox{
    width:90%;
    height: auto;
    margin:30px auto;
    border: 1px solid #ccc;
    background: #fff; 
}  



.messagebox p{
   margin: 12px ;
    font-size: 15px;
    color: #65646E;
    font-family: 'Montserrat', sans-serif;
   line-height : 1.8;
}  

.skill{
    width:90%;
    height: auto;
    margin: 30px auto;
    border: 1px solid #ccc;
    background: #fff; 
}  


.skill p{
   margin: 12px ;
    font-size: 15px;
    color: #65646E;
    font-family: 'Montserrat', sans-serif;
   line-height : 1.8;
}  



/*====　卓球非表示　=====*/
    

.tabletennis{
    display: none;
    width: 80%;
    height: auto;
    margin: 30px auto;
    padding: 20px;
    border: 1px solid #ccc;
    text-align: center;
    }
    
 .tabletennis p{
     line-height: 1.8;
     font-size: 15px;
     color: #65646E;
    }

.tabletennis video{
    width: 300px;
    height: auto;
}



/*フッター*/
footer{
    height: 180px;
    padding-top: 40px;
    color: #fff;
    background:#9d9f99;
    border-top: 1px solid #ccc;
    text-align: center;
}


  
    
    
    .footA h2{
    margin-top: 10px;
    margin-bottom: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    letter-spacing: 0.2em;
    }    
    
    .footC p{
        font-size: 16px;
        text-align: center;
        font-family: 'Montserrat', sans-serif;
        margin-bottom: 20px;
    }
}