@charset "utf-8";

/* ===================================================================
css information

File Name  : layout.css
Author     : 
Style Info : 
=================================================================== */

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

/beginner/index.php

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

.biginner {  }

/**a.detailLinks { display:block; width:300px; height:50px; text-align:center; margin:20px auto 0px auto; font-size:140%;  border-radius:.3em; line-height:50px; box-shadow:1px 1px 3px #000; text-shadow:none; text-decoration:none;background-color:#666; color:#E1BF11; }
a.detailLinks:hover { background-color:#E1BF11;  color:#333; }**/

@media screen and (max-width:700px) {

.biginner {  }
/**a.detailLinks { display:block; width:auto; height:50px; text-align:center; margin:20px auto 0px auto;  font-size:140%;}**/

}

.clm2_2_2 { text-align:center; margin-top:15px; margin-bottom:15px; }
.clm2_2_2 li { display:inline-block; vertical-align:top; margin:0 5px 0 0px; width:-webkit-calc( 50% - 10px ); width:calc( 50% - 10px ); }
.clm2_2_2 li:nth-child(2n) { margin: 0 0px 0 5px; }
.clm2_2_2 li img:nth-child(1) { width:100%; height:auto; }

#container img { border:1px solid #ddd; box-sizing:border-box; }
#container a img { border:none; }


.clm3 { display: -webkit-box;
  display: -ms-flexbox;
  display: flex; justify-content: center; padding: 0 10px;}
.clm3 li { padding-right: 50px; position: relative; box-sizing: border-box; width: 33.333%;}
.clm3 li:after { content: ""; display: block; position: absolute; right: 10px; top:50%; transform: translateY(-50%);
width: 0;
height: 0;
border-style: solid;
border-width: 15px 0 15px 26.0px;
border-color: transparent transparent transparent #fe00ed;}
.clm3 li img { width: 100%; height: auto;}
.clm3.clm3Fix li:last-of-type:after { display: none;}

 @media screen and (max-width:700px){ 
   .clm3 { flex-direction: column;}
     .clm3 li { width: 100%; padding: 0 50px 50px 50px;}
     .clm3 li:after { content: ""; display: block; position: absolute; right: auto; left: 50%; top:auto; bottom: 10px; transform: translateY(0%) translateX(-50%);
width: 0;
height: 0;
border-style: solid;
border-width: 26.0px 15px 0 15px;
border-color: #fe00ed transparent transparent transparent;}
}