@charset utf-8;



/** ================================================================================================



	Star Brides 2019 SUMMER Issue.01 CSS

	@vertion 1.0   2019.7.11 New



==================================================================================================== **/



@import url('https://fonts.googleapis.com/css?family=EB+Garamond:400,400i,700,700i|Noto+Sans+JP:300,400,700|EB+Garamond:400,500&&display=swap');
@import url(common.css);


/** ===========================================================================


	TOPページ用調整


================================================================================ **/










/** ============================================================================


	TOPページarticle common


================================================================================ **/



	.sbIndexArticle {

	}

	.sbIndexArticle > header {
		display:block;
		position:relative;
		margin:0;
		padding:20px 0 0 0;
		background-color:#ffffff;
	}

	.sbIndexArticle > header h1 {
display:none;
		margin:0;
		padding:0;
		text-align:center;
	}

	.sbIndexArticle > header h1 img {
		max-width:300px;
		vertical-align:bottom;
	}


	.sbIndexArticle > header p {
		margin:0;
		padding:0;

		text-align:center;
		line-height:2;
		font-size:16px;
		font-weight:300;
	}

	.sbIndexArticle > header p.pc { display:block; }
	.sbIndexArticle > header p.sp { display:none; }



/** --------------------------------------------------------


	横移動タイル


------------------------------------------------------------ **/



	/* 表紙 */

	.sbIndexArticle .movingSammary {
		display:block;
		position:relative;
		margin:20px 0 0 0;
		padding:0;
	}

	.sbIndexArticle .movingSammary .face {
		display:block;
		position:absolute;
		left:50px;
		top:5px;
		width:auto;
		height:calc( 100% - 10px );
		margin:0;
		padding:0;
		z-index:100;
	}

	.sbIndexArticle .movingSammary .face img {
		width:auto;
		max-width:none;
		height:100%;
		vertical-align:bottom;
	}


	/* 動くタイル */

	.sbIndexArticle .movingSammary .moving {
		display:block;
		position:relative;
		width:100%;
		margin:0;
		padding:0 0 40%;
		overflow:hidden;
	}

	.sbIndexArticle .movingSammary .boxes {
		display:block;
		position:absolute;
		left:0;
		top:0;
		width:200%;
		margin:0;
		padding:0;
	}

	.sbIndexArticle .movingSammary .boxes > ul {
		display:flex;
		flex-direction:row;
		flex-wrap:nowrap;
		justify-content:flex-start;
		margin:0;
		padding:0;
	}

	.sbIndexArticle .movingSammary .boxes > ul > li {
		display:block;
		position:relative;
		width:10%;
		margin:0;
		padding:5px;
		box-sizing:border-box;
	}



	/* Inside BOX ---------------------- */

	.sbIndexArticle .movingSammary .boxes dl {
		display:block;
		position:relative;
		width:100%;
		margin:0;
		padding:0 0 100% 0;
		box-sizing:border-box;
		overflow:hidden;
	}

	.sbIndexArticle .movingSammary .boxes dt,
	.sbIndexArticle .movingSammary .boxes dd {
		display:block;
		position:absolute;
		left:0;
		top:0;
		width:100%;
		height:100%;
		margin:0;
		padding:0;
		box-sizing:border-box;
	}

	.sbIndexArticle .movingSammary .boxes dd.shadow {
		background-color:rgba(0,0,0,0.2);
	}

	.sbIndexArticle .movingSammary .boxes dd.text {
		padding:45% 5% 0;
		color:#ffffff;
		font-family:'EB Garamond', 'Noto Sans JP', 'Yu Gothic Medium', 'Hiragino Kaku Gothic Pro', Meiryo, sans-serif;
		font-size:14px;
		font-weight:400;
		letter-spacing:0.1em;
		text-align:center;
		line-height:1.5;
		background-color:rgba(255, 197, 219, 0.6);
		transition:all 0.3s linear;
	}
	.sbIndexArticle .movingSammary .boxes dd.text strong {
		font-size:16px;
		font-weight:400;
	}

	.sbIndexArticle .movingSammary .boxes dd.text span {
		letter-spacing:0;
	}

	/* Hover ---------------------------- */

	.sbIndexArticle .movingSammary .boxes li.over dd.text {
		opacity:1;
	}

	.sbIndexArticle .movingSammary .boxes li.over dd.text span {
		display:inline;
	}

	/* 互い違いにテキストを消す */
	.sbIndexArticle .movingSammary .boxes li.htext dd.text {
		display:none;
	}




	/** SP Responseve -------------------------------------- **/

	@media all and (max-width: 767px) {



		.sbIndexArticle .movingSammary .face {
			height:calc( 100% - 10px );
			left:20px;
			top:5px;
		}

		.sbIndexArticle .movingSammary .moving {
			margin:5px 0 0 0;
		}

		.sbIndexArticle .movingSammary .moving {
			padding:0 0 120%;
		}


		.sbIndexArticle .movingSammary .boxes {
			width:600%;
			margin:0;
			padding:0;
		}

	}

















/** ----------------------------------------------------------------------------


	最新号コンテンツ


-------------------------------------------------------------------------------- **/



	#sbContents {
		width:calc( 100% - 100px );
		max-width:1500px;
		margin:50px auto 0;
	}

	#sbContents > ul {
		display:flex;
		flex-direction:row;
		flex-wrap:wrap;
		justify-content:center;

		margin:0;
		padding:0;
	}

	#sbContents > ul > li {
		position:relative;
		width:31.33%;
		margin:50px 0 0;
		padding:0 10px;
		box-sizing:border-box;
	}



	.sbContent {
	}

	.sbContent a:link,
	.sbContent a:visited,
	.sbContent a:hover,
	.sbContent a:active { color:#231815; }


	.sbContent dl {
		margin:0;
		padding:0;
	}

	.sbContent dt {
		margin:0;
		padding:0;
	}

	.sbContent dd {
		margin:20px 20px 0;
		padding:0;
	}

	.sbContent h3 {
		font-size:18px;
		font-weight:300;
		margin:0;
		padding:0;
	}

	.sbContent .arrowLink {
		font-size:14px;
		text-align:right;
	}

	.sbContent p.cate {
		margin:0;
		font-size:12px;
		color:#888888;
	}



	/** Responsive for Smart Phone --------------------------------------------- **/

	@media all and (max-width: 767px) {



		#sbContents {
			width:auto;
			max-width:none;
			margin:0;
			padding:20px 0 0 0;
		}

		#sbContents > ul {
			display:block;
		}

		#sbContents > ul > li {
			width:auto;
			margin:20px 20px 0;
			padding:0;
		}
        
        
    	.sbContent dl {
            display: flex;
            flex-direction: row;
            margin:0;
            padding:0;
        }

        .sbContent dt {
            width:50%;
            margin:5px 0 0 0;
            box-sizing: border-box;
        }

        .sbContent dd {
            width:50%;
            margin: 0;
            padding: 0 0 0 10px;
            box-sizing: border-box;
        }        

		.sbContent dd h3 {
            font-size:16px;
			font-weight:400;
		}

	}



/** ----------------------------------------------------------------------------


	Archives


-------------------------------------------------------------------------------- **/



	#sbArchives {

	}

	#sbArchives a         { text-decoration:none; }
	#sbArchives a:link    { color:#231815; }
	#sbArchives a:visited { color:#231815; }
	#sbArchives a:hover   { color:#582e85; }
	#sbArchives a:active  { color:#582e85; }


	#sbArchives > header {
		display:block;
		position:relative;
		text-align:center;
		margin:0;
		padding:0 0 10px;
	}
	#sbArchives > header::before {
		content:"";
		display:block;
		position:absolute;
		left:50%;
		bottom:0;
		width:40px;
		height:2px;
		margin:0 0 0 -20px;
		padding:0;
		background-color:#444444;
	}

	#sbArchives > header h1 {
		margin:0;
		padding:0;
		font-family:'EB Garamond', serif;
		font-weight:500;
		font-size:30px;
		letter-spacing:0.1em;
		line-height:1;
	}

	#sbArchives > header h1 strong {
		font-weight:500;
		font-size:35px;
	}

	#sbArchives > header h2 {
		font-weight:400;
		font-size:14px;
	}

	#sbArchives .issues {
		display:flex;
		flex-direction:row;
		flex-wrap:nowrap;
		justify-content:center;

		margin:20px 0 0 0;
	}

	#sbArchives .sbArchive {
		width:33.33%;
		margin:0 10px;
	}





/** ----------------------------------------------------------------------------


	Hashtags


-------------------------------------------------------------------------------- **/



	.sbIndexArticle #hashtags {
		display:block;
		position:relative;
		width:auto;
		max-width:800px;
		margin:100px auto 0;
		padding:0;
	}

	.sbIndexArticle #hashtags > header {
		display:block;
		position:relative;
		text-align:center;
		margin:0;
		padding:0 0 10px;
	}
	.sbIndexArticle #hashtags > header::before {
		content:"";
		display:block;
		position:absolute;
		left:50%;
		bottom:0;
		width:40px;
		height:2px;
		margin:0 0 0 -20px;
		padding:0;
		background-color:#444444;
	}

	.sbIndexArticle #hashtags > header h1 {
		margin:0;
		padding:0;
		font-family:'EB Garamond', serif;
		font-weight:500;
		font-size:30px;
		letter-spacing:0.1em;
		line-height:1;
	}

	.sbIndexArticle #hashtags > header h1 strong {
		font-weight:500;
		font-size:35px;
	}

	.sbIndexArticle #hashtags > header h2 {
		font-weight:400;
		font-size:14px;
	}

	.sbIndexArticle #hashtags ul {
		margin:20px 0 0 0;
		text-align:center;
	}

	.sbIndexArticle #hashtags li {
		margin:0 10px 10px 0;
	}



/** ============================================================================


	Responsive for tablet


================================================================================ **/



	@media all and (max-width: 1024px) and (min-width:768px) {



		.sbIndexArticle > header h1 img {
			max-width:250px;
		}

		.sbIndexArticle .movingSammary .face {
			height:calc( 100% - 10px );
			left:20px;
			top:5px;
		}

	}



/** ============================================================================


	Responsive for Smart Phone


================================================================================ **/



	@media all and (max-width: 767px) {

		.sbIndexArticle > header {
			padding:10px 0 0 0;
		}

		.sbIndexArticle > header p {
			margin:0 60px 0 20px;
			text-align:left;
			font-size:14px;
			font-weight:400;
			line-height:1.5;
		}

		.sbIndexArticle > header p.pc { display:none; }
		.sbIndexArticle > header p.sp { display:block; }

/*
		.sbIndexArticle > header p span {
			display:none;
		}

		.sbIndexArticle > header p br {
			display:none;
		}
*/

	/** 動くタイル ------------------------------------------------------------- **/

		.sbIndexArticle .movingSammary {
			margin:10px 0 0 0;
		}


		.sbIndexArticle .movingSammary .face {
			position:relative;
			height:auto;
			left:auto;
			top:auto;
			margin:0;
		}

		.sbIndexArticle .movingSammary .face img {
			width:100%;
			height:auto;
		}



		/* BOXES ----------------------------------------------- */

		.sbIndexArticle .boxes {
			margin:5px 0 0 0;
		}



	/** 最新号コンテンツ ------------------------------------------------------- **/




	/** Archives --------------------------------------------------------------- **/


		#sbArchives > header h1 {
			font-size:24px;
		}

		#sbArchives > header h1 strong {
			font-size:30px;
		}

		#sbArchives .issues {
			display:block;
			margin:0;
		}

		#sbArchives .sbArchive {
			width:auto;
			margin:40px 0 0 0;
			padding:0;
		}



	/** Hashtags --------------------------------------------------------------- **/

		.sbIndexArticle #hashtags {
			width:auto;
			max-width:none;
			margin:100px 40px 0;
		}


		.sbIndexArticle #hashtags > header h1 {
			font-size:24px;
		}

		.sbIndexArticle #hashtags > header h1 strong {
			font-size:30px;
		}

	}