@charset "UTF-8";

/*=====================================================
*
*	lineup.css
*	Since 2014.12.9
*
========================================================*/

/*	1= style reset
-----------------------------------------------------*/
html,body { margin: 0; padding: 0; }

/*--text module-----*/
h1,h2,h3,h4,h5,h6,p,em,address,table {
	margin: 0;
	padding: 0;
	line-height: 1.5;	/* base line-height setteing */
	font-weight: normal;
	font-style: normal;
}

/*--list module-----*/
dl,dt,dd,
ul,ol,li {
	font-weight: normal;
	line-height: 1.5;
}

/*--form module-----*/
form,
fieldset,
legend   { margin: 0; padding: 0; }
fieldset { border: none; height: 100%; }

/*--etc-----*/
img   { vertical-align: bottom; background: transparent; }
a img { border: none; }



/*	2= tags define
-----------------------------------------------------*/
html>/**/body { overflow:-moz-scrollbars-vertical; }	/* for firefox */

html:first-child body {
	min-height: 100%;
	padding-bottom: 1px;
}	/* for opera */
html { background: #fff; }
body {
	color: #000;
	text-align: center; /* for win ie */
}	

a {
	/*\*/
   overflow: hidden;
	/**/
}	/* for firefox */


table { border-collapse: collapse; }
table th,
table td { padding: 4px 5px; }
table caption { text-align: left; }


/*	3= font size
-----------------------------------------------------*/
body {
	font-size: 100%;
	font-family: "ＭＳ Ｐゴシック", sans-serif;
}
html>/**/body {
	font-size: 16px;
	font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}	/* for modern browser below ie7 */

table { font-size:inherit; }

h1 { font-size: 112.5%; }

hr { margin: 25px 0; height: 1px; line-height: 1px; color: #777; }

small { display: block; text-align: center; line-height: 1.3; font-size: 56.25%; color: #777; } 


/*	4= structure define
-----------------------------------------------------*/
div#container { margin: 0 auto; text-align: left; }
div#main { padding: 20px 0; }

div.article { padding: 20px 10px 0; }

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

    div#container { width: 100%; margin: 0 0; }

}
@media screen and (min-width: 740px)  {

    div#container { width: 740px;}

}




/*	5= module
-----------------------------------------------------*/
div#container div#main .mt-image-right { position: relative; float: right; margin: 0 -10px 20px 20px; }
div#container div#main .mt-image-left { position: relative; float: left; margin: 0 20px 20px -10px; }
div#container div#main .mt-image-center { text-align: center; }

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

    div#container div#main .mt-image-right { margin: 0 0px 20px 20px; }
    div#container div#main .mt-image-left { margin: 0 20px 20px 0px; }
}

div#container div#main h1 {
	padding: 0 15px 17px;
	font-weight: bold;
	letter-spacing: 1px;
	background: url(../images/line07.gif) repeat-x left bottom;
}
div#container div#main div.article h2 { margin-bottom: 1.5em;  font-size: 16px; font-weight: bold; }

div.article img { margin: 2px; }
div.article p { margin-bottom: 1.5em; }
div.article p.photo,
div.article p.photo2 {
	overflow: visible;
}
div.article p.photo img,
div.article p.photo2 img { margin-bottom: 4px; }
div.article p.photo span.copyright,
div.article p.photo2 span.copyright{ display: block; width: 210px; text-align: center; line-height: 1.3; font-size: 56.25%; color: #777; }


/* LayoutPattern module ---------------*/

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

    .onlyPC { display: none !important; }
    .onlySP {}
    
    #main div.article .sp-box-wid100 {
        box-sizing: border-box;
        width: 100% !important;
    }
    #main div.article .sp-box-wid100 img { width: 100%; height: auto; }
    #main div.article .sp-box-wid50 {
        box-sizing: border-box;
        width: 49% !important;
        height: auto !important;
        margin-bottom: 5px !important;
    }
    #main div.article .sp-box-wid50 img { width: 100%; height: auto; }

}
@media screen and (min-width: 740px)  {

    .onlyPC {}
    .onlySP { display: none !important; }

}

/*thumb module*/
.thumbWrapper {
    position: relative;
    box-sizing: border-box;
    width: calc( 100% + 5px );
    margin: 30px -5px 30px 0;
    padding: 0;
    -js-display: flex;
	display: -webkit-box;
    display: -moz-box;
    display : -webkit-box;
	display : -ms-flexbox;
    display: -webkit-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -moz-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    -o-flex-direction: row;
    -moz-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    flex-wrap: wrap;  
    -webkit-align-content: flex-start;
    -ms-align-content: flex-start;
    -o-align-content: flex-start; 
    -moz-align-content: flex-start; 
    align-content: flex-start;
    align-items: flex-start;
    justify-content: center;
}
.thumbWrapper .thumb {
    position: relative;
    height: auto;
    margin: 0 5px 5px 0;
    padding: 0;
    text-align: center;
    vertical-align: top;
}

.thumb img {
    display: inline-block;
    height: auto;
    margin:  0;
    text-align: center;
    vertical-align: top;
}
.thumbWrapper .captionCopy {
    display: block;
    width: 100%;
    margin-top: 0px;
    line-height: 1.2 !important;
    letter-spacing: 0.04em;
    font-size: 65%;
    font-weight: 300;
    text-align: center;
}
@media screen and (max-width: 768px)  {

    .thumbWrapper .thumb img {
        max-width: calc((100vw - 40px) / 2 );
    }

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

    .thumbWrapper .thumb img {
        max-width: 350px;
    }

}
@media screen and (max-width: 400px)  {
    .thumbWrapper .thumb img,
    .article img {
        max-width: calc( 100vw - 20px);
    }

}