@charset "utf-8";

body {max-width: 850px;	margin: 0 auto;
	font-family:"メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
	background:white;}

.row {width: 100%;}



a{color:gray;
font-size:0.9em;}


hr {
 -moz-border-bottom-colors: none;
 -moz-border-left-colors: none;
 -moz-border-right-colors: none;
 -moz-border-top-colors: none;
 border-color: #999;
 border-image: none;
 border-style: dotted;
 border-width: 1px 0 0;
 clear: both;
 height: 0;
 margin: 22px 0 21px;
}

.page_wrap {margin: 0 auto 2px}

header {background: #f3f3f3; clear:both; padding: 20px 0 40px}

p {color: #333}


#container{width:100%;margin:0.75em;
background:pink;
}

/* タイトル */
h1,h2,h3,h4 {font-family:verdana,"ヒラギノ丸ゴ ProN W4","Hiragino Maru Gothic ProN","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif; font-weight: normal; color: navy; margin: 0px 0}

/* sections */
.section_light {background: #FFF; border-top: 1px dotted #999; border-bottom: 1px dotted #999; padding: 20px 0; clear:both}
.section_light h1 {text-align: center; border-bottom: 1px dotted #999; padding-bottom: 20px; margin: 0 0 20px 0}

.section_dark {background: #262626; border-top: 0; border-bottom: 1px dotted #999; padding: 20px 0 40px}
.section_dark h2 {color: #999999; margin: 0 0 20px 0; font-size: 22px; text-align: center}

.section_main {padding: 20px 0}
.section_main h2 {padding: 0 0 20px}

/* END Frontpage sections */
/* nav bar vertical */
/* gallery menu */


#logo {
width : 100% ;
max-width: 400px; /* 最大幅 */
min-width: 220px; /* 最小幅 */
display: block;
margin: 0 auto; /* 画像をセンター合わせ*/
margin-bottom:-20px;
background: ;
}

#logo2 {
position:absolute;
top:0px;
right:0px;
width : 50% ;
max-width: 400px; /* 最大幅 */
min-width: 220px; /* 最小幅 */
display: block;
margin: 0 auto; /* 画像をセンター合わせ*/
margin-bottom:-20px;
background: ;
}

/* Masonry */
.centered { margin: 0 auto; }

/* box */
.box {background:white;
height:105px;
margin: 5px;
padding: 5px;
border: 0;
box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
line-height: 0em;
float: left;
text-align: center; 
}



.box p {font-size: 12px; margin: 0; padding: 12px 0}


.box h2 {
font-size: 14px;
font-weight: 200;
}

.box h4 {
margin-top: 10px; font-size: 12px;padding: 0px;
}

.box img,.tumblelog img {
display: block;
width: 100%;
}


.box_comment {background: #fafafa; border-bottom: 2px solid #CCC; padding: 4px; soverflow: hidden;}
.box_comment p {font-size: 12px; padding: 0px; margin:0;}

.rtl .box {
float: right;
text-align: right; 
direction: rtl;
}


/* アイコンの大きさ */

/*Sタイプ*/
.col0 {width: 90px;
height:110px;  background:;position:relative;}
.col0 p{font:10px;margin-top:3px;font-weight: bold;}
/*Mタイプ*/
.col1 {width: 80px;
height:95px;  background:;position:relative;}
.col1 p{font:10px;margin-top:4px;font-weight: bold;}
/*Sタイプ*/
.col2 {width: 60px;
height:70px;  background:;position:relative;}
.col2 p{font:10px;margin-top:3px;font-weight: bold;}

/*文字だけ　1行 */
.coln1 {line-height: 25px;height:25px; width:auto;  background: whitesmoke;}
.coln1 a{
font-size:0.9em;line-height:0.5em;}
}
.coln1:hover{
color:#000;
text-decoration:none; background: #fff;
}

/*文字だけ　2行 */
.coln2 {line-height: 18px;height:35px; width:auto;  background: whitesmoke;text-align: center; }
.coln2 a{
font-size:0.9em;line-height:0.5em;}
}
.coln2 a:hover{
color:#0f0;
text-decoration:none; background: #f0f;
}
/*文字だけ　3行 */
.coln3 {line-height: 17px;height:50px; width:auto;  background: whitesmoke;text-align: center; }
.coln3 a{
font-size:0.9em;line-height:0.5em;}
}
.coln3:hover{
color:#000;
text-decoration:none; background: #fff;
}
/*文字のみのアイコン*/
.col6 {width: 80px;
height:38px;  background:;}
.col6 :hover{
background: #000;
}
/*文字のみのアイコン2行*/
.col7 {width: 80px;
height:95px;  background:;}
.col7 :hover{
background: #000;
}

.col0 img { max-width: 108px; }
.col1 img { max-width: 142px; }
.col2 img { max-width: 197px; }
.col3 img { max-width: 268px; }
.col4 img { max-width: 380px; }
.col5 img { max-width: 480px; }

/*ボタン（検索・消去）*/
.button {
    background: none repeat scroll 0 0 #fff;
    border: 10px solid #777;
    border-radius: 5px;
    color: #333;
    cursor: auto;
    display: inline-block;
    font-weight: bold;
    line-height: normal;
    margin-bottom: 20px;
    padding: 6px 24px;
    text-decoration: none;
}


/* fluid masonry */

.box_fluid {
  margin-bottom: 1.4%;
  padding: 0;
  background: #fff;
  box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
  font-size: 100%;
  line-height: 1.4em;
  float: left;
}

.box_fluid_inner {padding: 0 15px 0}

.col_fluid {width: 32%}
.col_fluid img {width: 100%}



/*================================================
 *  トピックパス（パンくずリスト）
 ================================================*/
#topicpath {
	font-size:12px;
	margin-bottom:20px;
	padding:2px;
	background:#fff;
}

/* MI Slider */


/* Move classes and animations */

.mi-slider ul:first-child li,
.no-js .mi-slider ul li {
	-webkit-animation: scaleUp 350ms ease-in-out both;
	animation: scaleUp 350ms ease-in-out both;
}

@-webkit-keyframes scaleUp {
	0% { -webkit-transform: translateX(0) scale(0); }
	100% { -webkit-transform: translateX(0) scale(1); }
}

@keyframes scaleUp {
	0% { transform: translateX(0) scale(0); }
	100% { transform: translateX(0) scale(1); }
}

.mi-slider ul:first-child li:first-child {
	-webkit-animation-delay: 90ms;
	animation-delay: 90ms;
}

.mi-slider ul:first-child li:nth-child(2) {
	-webkit-animation-delay: 180ms;
	animation-delay: 180ms;
}

.mi-slider ul:first-child li:nth-child(3) {
	-webkit-animation-delay: 270ms;
	animation-delay: 270ms;
}

.mi-slider ul:first-child li:nth-child(4) {
	-webkit-animation-delay: 360ms;
	animation-delay: 360ms;
}

/* moveFromRight */

.mi-slider ul.mi-moveFromRight li {
	-webkit-animation: moveFromRight 350ms ease-in-out both;
	animation: moveFromRight 350ms ease-in-out both;
}

/* moveFromLeft */

.mi-slider ul.mi-moveFromLeft li {
	-webkit-animation: moveFromLeft 350ms ease-in-out both;
	animation: moveFromLeft 350ms ease-in-out both;
}

/* moveToRight */

.mi-slider ul.mi-moveToRight li {
	-webkit-animation: moveToRight 350ms ease-in-out both;
	animation: moveToRight 350ms ease-in-out both;
}

/* moveToLeft */

.mi-slider ul.mi-moveToLeft li {
	-webkit-animation: moveToLeft 350ms ease-in-out both;
	animation: moveToLeft 350ms ease-in-out both;
}

/* Animation Delays */

.mi-slider ul.mi-moveToLeft li:first-child,
.mi-slider ul.mi-moveFromRight li:first-child,
.mi-slider ul.mi-moveToRight li:nth-child(4),
.mi-slider ul.mi-moveFromLeft li:nth-child(4) {
	-webkit-animation-delay: 0ms;
	animation-delay: 0ms;
}

.mi-slider ul.mi-moveToLeft li:nth-child(2),
.mi-slider ul.mi-moveFromRight li:nth-child(2),
.mi-slider ul.mi-moveToRight li:nth-child(3),
.mi-slider ul.mi-moveFromLeft li:nth-child(3) {
	-webkit-animation-delay: 90ms;
	animation-delay: 90ms;
}

.mi-slider ul.mi-moveToLeft li:nth-child(3),
.mi-slider ul.mi-moveFromRight li:nth-child(3),
.mi-slider ul.mi-moveToRight li:nth-child(2),
.mi-slider ul.mi-moveFromLeft li:nth-child(2) {
	-webkit-animation-delay: 180ms;
	animation-delay: 180ms;
}

.mi-slider ul.mi-moveToLeft li:nth-child(4),
.mi-slider ul.mi-moveFromRight li:nth-child(4),
.mi-slider ul.mi-moveToRight li:first-child,
.mi-slider ul.mi-moveFromLeft li:first-child  {
	-webkit-animation-delay: 270ms;
	animation-delay: 270ms;
}

/* Animations */

@-webkit-keyframes moveFromRight {
	0% { -webkit-transform: translateX(600%); }
	100% { -webkit-transform: translateX(0%); }
}

@-webkit-keyframes moveFromLeft {
	0% { -webkit-transform: translateX(-600%); }
	100% { -webkit-transform: translateX(0%); }
}

@-webkit-keyframes moveToRight {
	0% { -webkit-transform: translateX(0%); }
	100% { -webkit-transform: translateX(600%); }
}

@-webkit-keyframes moveToLeft {
	0% { -webkit-transform: translateX(0%); }
	100% { -webkit-transform: translateX(-600%); }
}

@keyframes moveFromRight {
	0% { transform: translateX(600%); }
	100% { transform: translateX(0); }
}

@keyframes moveFromLeft {
	0% { transform: translateX(-600%); }
	100% { transform: translateX(0); }
}

@keyframes moveToRight {
	0% { transform: translateX(0%); }
	100% { transform: translateX(600%); }
}

@keyframes moveToLeft {
	0% { transform: translateX(0%); }
	100% { transform: translateX(-600%); }
}

.mi-slider {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}


/* Media Queries */

 /*デバイスの横幅が910pxまでの場合*/
@media screen and (max-width: 910px){
	.mi-slider nav {
max-width: 90%;
	}
	.mi-slider nav a {
font-size: 12px;
padding: 40px 10px 30px 14px;
	}
}

 /*デバイスの横幅が768pxまでの場合*/
@media screen and (max-width: 768px){

}

 /*デバイスの横幅が740pxまでの場合*/
@media screen and (max-width: 740px){
	.mi-slider {
height: 300px;
	}
	.mi-slider nav {
top: 220px;
	}
}

 /*デバイスの横幅が490pxまでの場合*/
@media screen and (max-width: 490px){ 

#logo {
width : 105% ;
}

 /*デバイスの横幅が380pxまでの場合*/
@media screen and (max-width: 380px){ 

}


 /*デバイスの横幅が590pxまでの場合*/
@media screen and (max-width: 590px){ 

}