/*

Theme Name: sansa

*/
    /**
    * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
    * http://cssreset.com
    */
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header, hgroup,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section {
    display: block;
    }
    body {
    line-height: 1;
    }
    ol, ul {
    list-style: none;
    }
    blockquote, q {
    quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    content: '';
    content: none;
    }
    table {
    border-collapse: collapse;
    border-spacing: 0;
    }
/* reset */

html,body{
			height: 100%;
		}
		
		body {
			background-color: #000;
			font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "メイリオ", Meiryo, serif;
			color: #000;
		}

		#wrap {
			background-position: center center;
			background-size: contain;
			-moz-background-size: contain;
			-webkit-background-size: contain;
			-o-background-size: contain;
			-ms-background-size: contain;	
		}

		#photo {
			background-position: center center;
		}

		#photo {
			width: 100%;
			height: 100%;
			background-repeat: no-repeat;
		}

		#photo {
			text-align: center;
		}

		.logo {
			display: none;
			margin-top: 40px;
		}

		ul {
			font-size: 8px;
			display: none;
			width: 100%;
			padding-top: 14px;
			text-align: center;
			list-style: none;
			margin-bottom: 28px;
		}

		li {
			padding: 4px;
			margin: 0 10px;
			cursor: pointer;
			color: #FFF;
			display: inline-block;
		}

		#photo2 {
			height: 100%;
		}

		.conceptText {
			font-size: 11px;
			line-height: 39px;
		}

		.contentbox {
			height: 74%;
			widows: 95%;
			max-width: 1000px;
			margin: 0 auto;
			background-color: rgba(255,255,255,0.7);
			font-size: 11px;
			line-height: 21px;
		}

		.contentbox h2 {
			padding-top: 24px;
			margin-bottom: 30px;
		}

.content01,.content02,.content03,.content04{
			height: 520px;
			display: none;
			width: 90%;
			max-width: 1000px;
			margin: 0 auto;
			background-color: rgba(255,255,255,0.7);
			line-height: 21px;
			opacity: 0;
			letter-spacing:0.1em;

}

		.content01 {
			font-size: 11px;
			line-height: 35px;
			letter-spacing: 0.1em;
		}
		
		.content01 h2 {
			margin-bottom:20px;
		}
		.content01,.content02,.content03,.content04{
			font-size: 11px;
			line-height: 21px;
			overflow: hidden;
		}

		.content01 > div,.content02 > div,.content03 > div,.content04 >div{
			overflow-y: auto;
			overflow-x: hidden;
			height: 460px;
		}

		.content01 h2,.content02 h2,.content03 h2 {
			padding-top: 24px;
		}
		
		.infoArticle {
			margin-bottom: 13px;
		}

		.content03 .snsLink {
			text-align: center;
		}

		.content03 .snsLink a {
			display: inline-block;
		}

		.content03 .snsLink span {
			display: inline-block;
		}
		
		.article {
			height: auto;
			text-align: center;
			margin: 0 auto;
		}

		.bottomBorder {
			margin: 33px auto 54px;
			width: 100%;
			max-width: 427px;
			border-top: 1px solid #000;
		}

		.article p {
			font-size: 12px;
			margin-bottom: 21px;
		}

		.article h3 {
			font-weight: normal;
			margin-bottom: 6px;
		}

		.article a {
			color: #4c4c4c;
			text-decoration: underline;
		}
		
		
		.menu-wrapper{
			width: 100%;
			padding-bottom: 30px;
		}
		
		.menu{
			margin: 30px 0;
		}
		
		
@media screen and (min-width: 601px) {

	.menu{
			display: table;
			padding: 0 30px;
			margin: 0 auto;
			width: 80%;
			max-width: 750px;
		}

		.menuCulum {
			width: 40%;
			display: table-cell;
			padding: 0 2.5%;
		}
		
		.content01 > div,.content02 > div,.content03 > div,.content04 >div{
			margin: 30px;
		}
		
}

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

		.menu{
			display: table;
			padding: 0 30px;
			width: 80%;
		}

		.menuCulum {
			width: 100%;
			padding: 0 2.5%;
		}
		
		.content01 > div,.content02 > div,.content03 > div,.content04 >div{
			margin: 30px 10px;
			padding: 5px;
		}
		
}
		.menuBlock {
			height: auto;
			margin-bottom: 21px;
		}

		.menuBlock h3 {
			text-align: left;
			font-weight: normal;
		}
		
		.menuBlock dl {
			width: 100%;
			text-align: left;
			display: table;
		}
		
		div.tb-row{
			display: table-row;
		}

		.menuBlock dt {
			width: 60%;
			max-width: 250px;
			display: table-cell;
			vertical-align: middle;
			padding: 0.4em 0;
			line-height: 1.2em !important;

		}
		
		.menuBlock dd {
			width: 40%;
			margin-right: 14px;
			display: table-cell;
			vertical-align: middle;
			text-align: right;

		}

		.menuBlock dd span {
			padding: 0 1em 0 0;
		}