@charset "utf-8";

/* @group Reset */
*{ margin: 0; padding: 0}
a {text-decoration : none}
ul,ol { list-style : none}
img {vertical-align : top}
/*  @end  */

/* @group Fluid-img  */
img { max-width : 100%}
/*  @end  */

/* @group HTLM  */
html{
font-family : verdana, sans-serif;
font-size : 100%;
line-height : 1.5
}
/*  @end  */


/*  @body  */
body { background-color : pink; }           /*　ページ全体のバックの色指定  */

/*  @end  */


/* @group Heading  */
h1,h2,h3,h4,h5,h6 { margin-bottom : 24px }

h1 {
font-size : 48px;
line-height : 1 } /* 48px */

h2 {
font-size : 36px;
line-height : 1.3333 } /* 48px */

h3 {
font-size : 24px;
line-height : 1 } /* 24px */

hgroup h4,h5,h6 { /* 原型＝”hgroup h2,h4,h5,h6”ミス？ */
font-size : 16px;   /* 16px */
line-height : 1.5 }  /* 24px */
/*  @end  */

hgroup h4{
color : deeppink;　　　　　　/*　ヘッダーの文字色指定  */
}

/* @group Header  */
header {
text-align : center;
padding-top : 24px;
background-color : white ;     /*　ヘッダーの背景色指定  */
}    

header h1 { margin-bottom : 24px}
header h2 { color : orange;
font-size : 24px;
 }

#lang a:hover {                   /* 　言語変更リンク指定　*/
color : blue;
background-color : lightblue;
}

/*  @end  */

/* @group Nav  */
nav {
margin-bottom: 24px;
background :lightpink ;

border : 1px solid deeppink;
border-radius : 5px;
}

nav ul { overflow : hidden}
nav ul li { width :  25%; float : left;
}

nav ul li a {
display : block;
color : deeppink;
padding : 12px  0}
nav ul li a:hover {
color : white;
background-color : deeppink}
/*  @end  */


/*  @group Contents  */
#contents {
width : 90%;
margin : 0 auto;
text-align : left}

#contents p {
margin-bottom : 24px;
text-align : left;
border : 1px solid deeppink;
border-radius : 5px;
}

#contents img {
margin-bottom : 24px;
box-shadow : 0 0 5px #2f1f1f}   /*　　コンテンツ内の画像の影　不要なら　#contents img ４行削除  */

#contents ul li video {
display : block;
margin-left : 0;
}

#contents ul li {
list-style-image : url(./image/pink-arrow-clear16px.png);
margin-left : 10px;
}




/*  @end  */


/*  @group   Aside */
#sub {
margin-bottom: 24px;
margin-left : 20px; 
}


#contents aside ul li {
list-style-image : url(./image/heart-clear16px.png);
list-style-position : outside;      /*  ←ここの1行　outside　なら不要 初期設定  */
}


#sub aside ul li a {
display : block;
color : deeppink;
padding : 12px  0;
}

#sub a:hover,#contents a:hover,footer a:hover  {  　/*  contents sub footer　兼用の　hover　指定  */
color : white;
background-color : lightcoral;
}
/*  @end  */

#contents img:hover {       /*   画像hover時の透明　指定   */
opacity: 0.6;                    /*   画像hover時の透明度(0〜1)*/
filter: alpha(opacity=60);     /* 　旧IE用コード                   */
}

/*  @group Footer  */
footer {
padding : 24px 0;
text-align: center;

}
/*  @end  */

/*  @group SNS  */
.sns {
margin-bottom : 9px ;
}
/*  @end  */

a:visited { color : green }  /*  全セクションの全訪問後指定  */

/*  768px  */
@media screen and (min-width : 768px) {
#contents { text-align: left}
}

/*  1024px  */
@media screen and (min-width : 1024px){
/*  @group Nav  */
nav ul {
width : 93.75%;  /*  960/1024  */
margin : 0 auto}
/*  @end  */

/*  @group Contents  */
#contents {
overflow: hidden;
width : 93.75% } /*  960/1024  */
#contents #main,
#contents #sub {
float : left;
margin : 0 1.0416667%}  /*10/960  */
#contents #main { width: 64.5833333%} /*  620/960*/
#contents #sub {width: 31.25%}  /*  300/960  */
/*  @end  */

/*  @group Footer  */
footer{
width: 91.796875%;  /*  940/1024  */
margin: 0 auto}
/*  @end  */