@charset "utf-8";

*{
	box-sizing: border-box;
	margin:0;
	padding:0;
	text-decoration:none;
	outline: none
}

#controlBar_bgndVideo{
	position: relative;
	bottom: -60px;
}

main{
	box-sizing: content-box;
	position: relative;
	z-index: 1;
}

a, a:link, a:visited{ 
	text-decoration:none;
	outline: none;
	color: #666;
}

a:hover{
	color: #fb82a3;
}

.underW768,
.underW400
{
	display: none;
}


.ffyg{
	font-family: "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Std W3", Osaka !important, 
}

.verticalmode{
	writing-mode: vertical-rl;
	text-orientation: upright;
}

header.top{
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;	
	padding: 12px;
	width: 100%;
	height: auto;
	background: rgba(255,255,255,0.88) url('/assets/labo/verticalwriting/images/titlebg.jpg') no-repeat 0 0;
	background-blend-mode:screen;
	background-size:  100% auto;
	border: #e7e7e7 solid;
	border-width: 0 0 1px 0;
		
	position: -webkit-sticky;
	position: sticky;
	z-index: 3;
	top: 0px;
}

#container > footer{
	background: rgba(0,0,0, .66) url('/assets/labo/verticalwriting/images/titlebg.jpg') no-repeat 0 0;
	background-blend-mode:multiply;
	background-size:  100% auto;
	
}

/* #SHVLOGO */

header.top h1#shvLogo{
	display: flex;
	flex-flow: row nowrap;
	justify-content: start;	
	
	/* padding-left: 32px; */
	height: 28px;
    color: #baa359;
    font-weight: normal;
    line-height: 28px;
	transition: all 0.6s ease-out;
}

header.top h1 span.en{
    font-size: 24px;
    font-family: 'Poiret One', cursive;
}

header.top h1 span.jp{
	position: relative;
	top: 2px;
	margin-left: 20px;
	font-size: 0.8rem;
	color: #2a607a;
}

header.top h1 svg{
	margin-right: 8px;
	width: 27px;
}

header.top h1 svg .cls-1 {
	transition: all 0.6s ease-out;
    fill: #fff;
}

header.top.scrolling h1#shvLogo{
	color: #615900;
}

header.top.scrolling h1 svg .cls-1 {
    fill: #2a607a;
}


header#fixedMenu.scrolling{
	box-shadow: 0 0px 4px rgba(26,26,26,0.2);
	background-image: none;
	background-color: rgba(255,255,255,.88);
}

header.top nav{
	height: 20px;
}

header.top nav ul{
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;	
	line-height: 28px;
}

header.top nav ul li{
	padding-left: 8px;
	padding-right: 8px;
	height: 20px;
	border-left: #b5b5b5 solid 1px;
	
	display: flex;
	white-space: nowrap;
}

header.top nav>ul>li:first-child{
	padding-left: 0;
	border-left: 0;
}

header.top nav ul li:last-child{
	padding-right: 0;
}

header.top a{
    padding: 0 4px;
	font-family: 'Quicksand', cursive;
	font-size: 14px;
	line-height: 20px;
	color: #666;
	letter-spacing: 2px;
}

header.top a:hover{
	color: #fff;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	background: rgba(48,70,101,0.1);
}

/* HEADLINE */

#headline{
	position: relative;
	z-index: 1;
}

#headline .textArea{
	position: absolute;
	top: 40px;
	right: 40px;
	z-index: 3;
	width: 100%;
	color: #000;
}

#headline .textArea .lead{
	padding-top: 0.4vw;
	font-size: 2.4vw;
	line-height: 2.4vw;
}

#headline h1{
	font-size: 6.6vw;/*1.6*/
	line-height: 7vw;
	font-family: adobe-song-std, "游明朝";
	font-style: normal;
	font-weight: 100;
	color: rgba(25,25,25,1);
	
}

#electric #headline h1{
	margin-left: 1.2vw;
	color: #fff;
	font-style: normal;
	font-weight: 300;
}

#electric #headline h1 .ind1vw{
	position: relative;
	top: -1vw;
}

#electric #headline .textArea .lead{
	
	display: inline-block;
	height: auto;
	color: #fff;
}

#headline #keyvisual img{
	width: 100%;
	height: auto;
	max-width: 100%;
}



.lower main{
	padding-top: 12px;
}

.top main{
	background: rgba(255,255,255,.8);
}



@media only screen and (max-width: 767px) {
	main{
	margin: -32vw auto 0;
	}
}

@media only screen and (max-width: 364px) {
	main{
	margin: -40vw auto 0;
	margin: 0 auto 0;
	}	
}

/* Layout 
#primary article{
	justify-content: center;
	
	margin-bottom: 16px;
	background: #fff;
	border: #e6e6e6 solid 1px;
	border-radius: 8px;
}
*/
	/*display: flex;
	flex-flow: row nowrap;
	justify-content: center;
    justify-content: start;

	position: absolute;
    z-index: 1;
	top: unset;
    bottom: 0px;
    left: 0;
    padding: 4px;
    width: auto;
	height: auto;
	box-sizing: content-box;*/

}

.wrapper.banner{
	display: flex;
	flex-flow: column;/*並びの方向　折り返しのありなし*/
	justify-content: center;
	align-items: center;
	align-content: center;

	margin-bottom: 8px;
	padding: 12px;
	width: 100%;
	height: auto;
	text-align: center;
	background: #fff;
	border: #e6e6e6 solid 1px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}

aside img{
	margin-bottom: 4px;
	height: 100px;
	width: 100px;
	object-fit: cover;
	border-radius: 4% 4% 50% 50%;
	border: #efefef solid 1px;
}

aside h2{
	margin-bottom: 4px;
	color: #565757;
	font-size: 14px;
	line-height: 18px;
	font-family: 'メイリオ';
}

.rdCircle{
	border-radius: 50%;
}

.rdU{
	border-radius: 4% 4% 50% 50%;
}

.rdDome{
	border-radius: 50% 50% 4% 4%;
}

.rdTwistL{
	border-radius: 4% 50% 4% 50% ;
}

.rdTwistR{
	border-radius: 50% 4% 50% 4%;
}

.rdSquea{
	border-radius: 4%;
}



aside p{
	font-family: "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Std W3", Osaka;
	font-size: 12px;
	line-height: 18px;
	font-weight: normal;
}

aside:hover p{
	color: #333;
}

/* BANNER */
.wrapper.banner#banner1{
	background: #abf5e2;
}
.wrapper.banner#banner2{
	background: #dcbdfd;
}
.wrapper.banner#banner3{
	background: #f9f4d5;
}
.wrapper.banner#banner4{
	background: #ffbdbf;
}
.wrapper.banner#banner5{
	background: #d2f4f9;
}

/* BANNER END */

footer #snsBox a{
	background: #f3f3f3;
}

@media only screen and (max-width: 1200px) {
	main{
		padding-left: 8px;
		padding-right: 8px;
		box-sizing: border-box;
	}
	
}