@chrset "utf-8";
/* clearfix */
.cf {
	zoom: 1;
}
.cf:before, .cf:after {
	content: "";
	display: table;
}
.cf:after {
	clear: both;
}

/*/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
全ディバイス共通とスマートフォン向け
/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/*/

.wrap {
	overflow: hidden;
}

body {
  width: 100%;
  font-family: "ヒラギノ角ゴシックPro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"MS P ゴシック","MS PGothic",sans-serif;
  font-size: 0.9em;
  line-height: 1.5em;
  background-color: #F3F0EF;

  margin: 0px;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
          header 
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

header {
  text-align: center;
  margin-bottom: 5%;
  background-color: #ccc;
/*margin-top:-21px;*/
margin: 0 ;
}

header h1 {
  font-size: 2.0em;
  color: #fff;
  padding: 0.4em 0 0.4em 0;
  margin: 0 0 0.2em;
  line-height:30px;  
} 


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        グローバルナビ 
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
 
nav {
  width: 100%;
  background-color: #d5d5d5;
  /*background-color: #F3F1F1;*/

}

nav ul li {
  
}
/*
ul{
    list-style: none;
    display:flex;
    justify-content: center;
}
*/

ul li {
  display: block;
}
body,ul,li{
    margin:0px;
    padding:0px;
}

nav ul li a{  
   padding:10px 5px;
   margin:2.5px;
   text-align: center;
   /*color: #fdfcfc;  */
      color: #F6F5F5; 
   text-decoration: none;
}
 ul li a:link {  
 color: #fdfcfc;
}

ul li a:visited {  
 color: #878584;
 
}

ul li a:hover {  
 color: #B7B7B6;
}

ul li a:active {  
 color: #fff;
 
}


ul h1 a {
 color: #F6F5F5;
 text-decoration: none;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
            main 
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

 

/*article {
  width: 1200px;
  max-width: 769px;
  

*/  
  
}

.container {
  width: 100%;
  max-width: 640px;

}

.container {
  display:flex;
  flex-direction: column;
  margin-bottom: 5px;
/*  margin-left: -40px;*/
  padding: 5px 0 10px 0 ;
}

.item1 {
  width: 100%;
  text-align: center;
}

.item2 {
  width: 100%;
  text-align: center;
}

.item1 {

  padding-bottom: 25px;
  /*padding :30px;*/
  padding-right:px;
  /*margin-left : 20px; */
}


h2 {
  font-size: 21px;
  margin: 0;
}

.item {
  width: 100%;
  text-align: center;
  min-height: 0%;
}

.item img {
  max-width:400px;
  height:auto;
}

main {
  padding: 10px 10px 0px 10px;
}

main {
  border-bottom: 1px solid #ddd;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
            footer 
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#footer {
  width: 100%;
  max-width:%;
}
footer {
  margin-top: auto;
}

footer {
  text-align: center;
  color:#f6f6f6;
  background-color: #d5d5d5;
}
/*
footer .container {
  text-align: center;
  width: 100%;
  height:25%;

  bottom: 0;

}
*/

/*
#wrap{
    width: 100%;
    position: relative;
    min-height: 100%;
   
}
*/
footer .content {
  line-height: 5em;
  margin: 0 auto;
  min-height: calc(0vh - 70px);
  
  padding-bottom: 0px;  /* フッターの高さと同じ */
}


footer .inline-block_footer {
  display:inline-block;
  /*padding:20px;*/
}
/*
.item {
  padding: 50px 50px ;
}
*/
  

@media only screen and (min-width: 769px) {
  ul   {
    list-style: none;
     display:flex;
     justify-content: center;
     
     height:70px;
     align-items: center;
      
  }

  
 .container {
   display: flex;

  
   flex-direction: row;
    
   }
 
 .container {
   padding-top: 0px;
 }
 
 .container:nth-child(even) {
   flex-direction: row-reverse;
    justify-content: center;
 }
 
 .item1 {
   width: 100%;
   text-align: right;
 }

 .item2 {
   width: 100%;
   text-align: left;
 }
 
  .item1 {
    align-self: center;
    padding-left: 200px;
  }
  
  .item2 {
    align-self: center;
    padding-right: 200px;
  }
  
  .item1 {
    .item1 { 
      flex-basis:30%; 
      
    }
    
    .item1 .item2 {
    align-self: center;  
    }
    
  
    .item1:nth-child(odd) {
      padding-left: 100px;
    }
    
    .item2:nth-child(odd) {
      padding-left: 100px;
    }
    
    .item1:nth-child(even) {
      padding-right: 20px;
    }
    
    .item2:nth-child(even) {
      padding-right: 20px;
    }    
  
    .item {
      padding: 0px 0px ;
    }
  }
  
/* PC用　*/

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

  }
  
}