@charset "utf-8";

html * {
   box-sizing: border-box;
}

html,body {
     font-size: 15px;
}

body { filter: progid: DXImageTransform.Microsoft.Gradient
    (gradientType=1,startColorStr=#ccffcc,endColorStr=#ffcccc); 
    
    background-attachment: fixed;
    font-family: sans-serif;      
    background-repeat: repeat; margin: 0;
 }
/*グーグル指定のレスポンシブ巾の要素*/
div.fullWidth {
  width: 100%;
}

.take { background: url(j-0-tt.jpg); }
.midori { background: url(j-0-cat.jpg); }
.maiko { background: url(j-0-maiko.jpg); }    
.omote { background: url(j-0-omote.jpg); }
.komachi { background: url(0-kk-back.jpg); }

caption { font-size: 2.2rem; "MU UI Gothic"; color: black; }

a { text-decoration: none; }
a img { border-style: none; }

a:link {
     color: dodgerblue;
}
a:visited {
     color: limegreen;
}
a:hover{ 
    opacity:0.5; 
    background: yellow;           
}
a:active {
     color: orchid;
}

p { 
    line-height: 1.5; 
    margin:0;
    align: left;
 }

p.lead{
    font-size: 26px;
    font-color: red;
    font-weight: normal;
}

/*フォントカラーバリエーション*/
.red { color: red; }
.green { color: green; }
.blue { color: blue; }
.gray { color: gray; }
.steelblue { color: steelblue; }
.olivedrab { color: olivedrab; }

   
h1 { 
     color: fuchsia; font-weight: normal;
   } 
h2 { 
     color: green; font-weight: normal; 
   }
h3 {
   color: blue; font-weight: normal;
   }
h4 { 
     color: olivedrab; font-weight: bolder; 
   } 
h5 {
     color: gray; font-weight: bolder;
  }
h6 {
     color: darkred; font-weight: normal;
  }


header{
   text-align: left;
   display: flex;
}

.header-container {
     display: flex;  
     margin: 0 auto;
     margin-bottom: 10px;

     border-top: 12px solid palegreen;
     border-right: 8px solid powderblue;
     border-left: 8px solid powderblue;
     border-bottom: 18px solid lightgray;
     border-radius: 26px;

     padding: 10px 6px 6px 10px;
     width: 780px;
     background-color: lightyellow;      
     font-size: 1.1rem;
}

.header-container2 {
     display: flex;  
     margin: 0 auto;
     margin-bottom: 10px;

     border-top: 12px solid palegreen;
     border-right: 8px solid powderblue;
     border-left: 8px solid powderblue;
     border-bottom: 18px solid lightgray;
     border-radius: 26px;

     padding: 10px 6px 6px 10px;
     width: 600px;
     background-color: lightyellow;
     font-size: 1.1rem;      
}

.header-container3 {
     display: flex;  
     margin: 0 auto;
     margin-bottom: 10px;

     border-top: 12px solid palegreen;
     border-right: 8px solid powderblue;
     border-left: 8px solid powderblue;
     border-bottom: 18px solid lightgray;
     border-radius: 26px;

     padding: 10px 6px 6px 10px;
     width: 860px;
     background-color: lightyellow;      
     font-size: 1.1rem;
}



main {
    display: flex;
    font-size: 1.1rem;
}

@media screen and (min-width: 768px)
{
     .main {
             font-size: 15px;
        }
}


.main-container {
     display: flex;
     margin: auto;
     margin-bottom: 10px;     

     border-top: 10px solid skyblue;
     border-right: 8px solid aquamarine;
     border-left: 8px solid aquamarine;
     border-bottom: 18px solid #dcdcdc;
     border-radius: 26px;
     padding: 9px;     
     width: 780px;
     background-color: honeydew;   
     text-align: left; 
}

@media screen and (min-width: 768px)
{
     .main-container {
             font-size: 15px;
        }
}

.main-container2 {
     display: flex;
     margin: auto;
     margin-bottom: 10px;     
     border-top: 10px solid skyblue;
     border-right: 8px solid aquamarine;
     border-left: 8px solid aquamarine;
     border-bottom: 18px solid #dcdcdc;
     border-radius: 26px;
     padding: 9px;     
     width: 600px;
     background-color: honeydew;   
     text-align: left; 
}
@media screen and (min-width: 768px)
{
     .main-container2 {
             font-size: 15px;
        }
}

.main-container3 {
     display: flex;
     margin: auto;
     margin-bottom: 10px;     

     border-top: 10px solid skyblue;
     border-right: 8px solid aquamarine;
     border-left: 8px solid aquamarine;
     border-bottom: 18px solid #dcdcdc;
     border-radius: 26px;
     padding: 9px;     
     width: 1020px;
     background-color: honeydew;   
     text-align: left; 
}

@media screen and (min-width: 768px)
{
     .main-container3 {
             font-size: 15px;
        }
}
.main-container4 {
     display: flex;
     margin: auto;
     margin-bottom: 10px;     

     border-top: 10px solid skyblue;
     border-right: 8px solid aquamarine;
     border-left: 8px solid aquamarine;
     border-bottom: 18px solid #dcdcdc;
     border-radius: 26px;
     padding: 9px;     
     width: 860px;
     background-color: honeydew;   
     text-align: left; 
}

@media screen and (min-width: 768px)
{
     .main-container4 {
             font-size: 15px;
        }
}


/*コンテント二重の場合あるので2ピクセルに*/
.content {
     display: flex;
     margin: auto;
     margin-bottom: 2px;     
     border-top: 2px solid lavender;
     border-right: 2px solid khaki;
     border-left: 2px solid khaki;
     border-bottom: 2px solid aquamarine;
     border-radius: 2px;
     padding: 2px;     
     width: 1020px;
     background-color: honeydew;   
     text-align: left; 
     font-size: 15px;    
}
/*透明の箱*/
.content2 {
     display: flex;
     margin: auto;
}

@media screen and (min-width: 768px)
{
     .content {
             font-size: 15px;
        }
}

@media screen and (min-width: 768px)
{
     .content2 {
             font-size: 15px;
        }
}



/*半巾左*/
.maincol {
   flex: 0 1 50%;
   padding: 10px;
}

/*半巾右*/
.sidebar {
   flex: 1 1 50%;
   padding: 10px;
}

/*全幅扱い*/
.sidebar2 {
   flex: 1 1 auto;
   padding: 10px;
}


/*画像の伸縮指定*/
.thumbnail img{
   width: 100%;
}


/*竹下通信表紙ストアリスト専用*/
.con {
    border: 1px solid gray;
    border-radius: 14px;
    margin: 4px;
    padding: 4px;
    width: 168px;
    height: 192px;   
}

.con:hover {
    background: cyan;
}

/*以下の6種BOXはbackgroundの色指定のみ*/

.abox1 {
     background: #fedbf4;   
 }

.abox2 {
     background: #fefaa7;
}

.abox3 {
     background: #ffdfb7;
}

.abox4 {
     background: #adffa6;   
}

.abox5{
     background: #dbfe17;
}

.abox6{
     background: #ccffff;
}

/*汎用箱でコン2と箱2でひと組*/
.con2 {
    border: 0 0 0;
    margin: 0 auto;
    padding: 5px;
    width: 340px;
}
.box2 {}


/*コン3と箱3でひと組*/
.con3 {
    border: 0 0 0;
    margin: 0 auto;
    padding: 0;
    width: 340px;
}
.box3 {}




nav{
    display: flex;
} 
.nav-container {
    margin: 0 auto;
    border: 8px solid khaki;
    padding: 6px 6px 6px 6px;
    width: 730px;
    background-color: azure;
    display: flex;
}

nav ul {
     display: flex;
     list-style: none;
     margin: 0;
}

nav li {
     flex: 1 0 auto;
}

nav li a {
     display: block;
     padding: 10px;
     text-decoration: none;
     text-align: center;
     font-size: 16px;
     color: navy;
}

nav li a:hover {
     background: yellow;
     border-radius: 10px 10px 0 0;
}


list{}
.list-contents { 
   display: flex;
   flex-flow: row wrap;
   justify-contents: space-between;
   list-style: none;
   margin: 4px;
   padding: 4px; 
}

.list-contents li {
   flex: 0 0 23%;
   display: flex;
   border-redius: 5px;

}


table { 
   background: white;
   border-collapse: collapse; 
   align: center;
   table-layout: fixed;
   width: 100%;
}

table, th, td { 
   border: 1px solid gray;
   padding: 8px 16px;
 }

thead {
     background: lightcyan;
}

tbody tr:nth-child(2n) {
   background: aliceblue; 
}



box{}
.box-container { 
   border: 1px solid gray; 
   justify-contents: space-between;
   list-style: none;
   margin: 5px;
   padding: 5px; 
   width: 155px;
   height: 190px;
   display: flex;
   background-color: lemonchiffon;
}

.box-container2 { 
   border: 1px solid gray; 
   justify-contents: space-between;
   list-style: none;
   margin: 5px;
   padding: 5px; 
   width: 155px;
   height: 190px;
   display: flex;
   background-color: beige;
}

.box-container3 { 
   border: 1px solid gray; 
   justify-contents: space-between;
   list-style: none;
   margin: 5px;
   padding: 5px; 
   width: 155px;
   height: 190px;
   display: flex;
   background-color: honeydew;
}

.box p {
  font-size: 16px;
  margin: 18px;
  text-align: left;
}


@media screen and (max-width: 440px)
{
     .con2 {
            width: 340px;
        }
}


@media screen and (max-width: 768px)
{
   .header-container{
         width: 590px;
        }
}


@media screen and (max-width: 768px)
{
    .main-container{
         width: 590px;
      }
}