.fs-preview-header { display: none; }

/*----------------------------
    ▼about
-----------------------------*/
@keyframes fadeOut {
0% {
        opacity: 1;
    -webkit-transform: scale(1,1);
    transform: scale(1,1);
}
100% {
    opacity: 0;
    -webkit-transform: scale(1.5,1.5);
    transform: scale(1.5,1.5);
    visibility: hidden;
    }
}

/*----------------------------
    ▼Contents
-----------------------------*/
#Contents{
    width: 100% !important;
}
/*----------------------------
    ▼About
-----------------------------*/
#About{
    background: url(../images/about/bg.png) no-repeat,url(../images/about/bg02.png) no-repeat;
    background-size: 300px auto,300px auto;
    background-position: top 0 left 0,top 400px right 0;
    min-width: 1140px;
    margin: 0 auto;
}
#About h2{
    font-size: 30px;
    color: #29366b;
    font-family:"Yu Mincho", "YuMincho";
    line-height: 1.5;
    position: relative;
    margin: 0 0 20px 0;
    padding: 0 0 20px 0;
}
#About h2:after{
    content: "";
    width: 500px;
    height: 3px;
    display: block;
    bottom:0;
    left: 0;
    background: #d3d4de;
    position: absolute;
    z-index: 0;
}
#About h2:before{
    content: "";
    width: 40px;
    height: 3px;
    display: block;
    background: #29366b;
    position: absolute;
    bottom:0;
    left: 0;
    z-index: 1;
}
#About .aesthetics,
#About div.conduct .body{
    max-width: 1000px;
    margin: 0 auto;
    overflow: hidden;
}
#About .aesthetics .image{
    width: 50%;
    padding: 250px 0;
}
#About .aesthetics .body{
    width: 50%;
    padding: 60px 0;
}
#About p{
    color: #4b4b4b;
    line-height: 2;
    width: 500px;
}
#About div.conduct{
    width: 100%;
    height: 450px;
    background: url(../images/about/image02.jpg) no-repeat;
    background-size: cover;
}
#About div.conduct .body{
    padding: 70px 0 0 0 ;
    letter-spacing: 2px;
}
#About div.conduct .body p{
    font-size: 18px;
}
#About div.conduct .body span{
    color: #29366b;
    font-family: 'Quattrocento', serif;
    font-size: 22px;
}
#About ul {
    padding: 40px 0 ;
}
#About ul li{
    overflow: hidden;
    width: 100%;
    padding: 30px 0;
}
#About ul li:nth-of-type(1) .image,
#About ul li:nth-of-type(3) .image{
    width: 50%;
}
#About ul li:nth-of-type(1) .body,
#About ul li:nth-of-type(3) .body{
    width: 46%;
}
#About ul li:nth-of-type(2) .image,
#About ul li:nth-of-type(4) .image{
    width: 47% ;
}
#About ul li:nth-of-type(2) .body,
#About ul li:nth-of-type(4) .body{
    width: 47%;
    padding: 20px 0 0 220px;
}
#About ul li .image img{
    width: 100%;
    height: auto;
}
#About ul li:nth-of-type(1) .body{
    padding: 140px 0 0 0;
}
#About ul li:nth-of-type(2) .body{
    padding: 140px 20px 0 170px;
}
#About ul li:nth-of-type(3) .body{
    padding: 40px 0 0 0;
}
#About ul li:nth-of-type(4) .body{
    padding: 110px 0 0 170px;
}


/*----------------------------
    ▼howtouse
-----------------------------*/

.usageMenu {
	background: #222;
	padding: 26px 40px;
	border-radius: 50px;
	margin-bottom: 38px;
}

.usageMenuInner {text-align: center;}

.usageMenu li {
	letter-spacing: 0.08em;
    display: inline;

}

@media only screen and (min-width: 769px) {
	.usageMenu li:not(:first-child) {
		background: url(/shared/images/line.png) no-repeat left 2px;
		margin-left: 7px;
		padding-left: 14px;
	}
}

.usageMenu a {
	display: inline-block;
	color: #fff;
	text-decoration: underline;
}
.usageMenu a:hover {text-decoration: none;}

.subTitle {
	font-size: 1.6rem;
	font-weight: 600;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	letter-spacing: 0.04em;
	text-indent: -1em;
	padding-left: 1em;
	margin-bottom: 30px;
}
.subTitle a {text-decoration: underline;}
.subTitle a:hover {text-decoration: none;opacity: 1;}

                
section.mainContent .detailInfo {
		background: #fbfbfb;
	}

	 section.mainContent .detailInfo p {
		width: 78.3%;
		max-width: 680px;
		margin: 0 auto;
	}

main > div + div {margin-top: 50px;}

@media only screen and (max-width: 768px) {
	
	.usageMenu {
		padding: 26px 15px;
		border-radius: 15px;
		margin-bottom: 30px;
	}
	.usageMenuInner {
		overflow: hidden;
		text-align: left;
	}

	.usageMenuInner ul {
		margin-left: -20px;
	}
	.usageMenu li {
		background: url(/shared/images/line.png) no-repeat left 2px;
		margin-left: 7px;
		padding-left: 14px;
	}
	
	

	section.mainContent .detailInfo {
		padding: 0 15px;
		width: calc( 100vw - calc(100vw - 100%));
		margin-left: -15px;
	}
	*::-ms-backdrop, section.mainContent .detailInfo {width: calc(100vw - 47px);}

 
		 section.mainContent .detailInfo p {
			width: 100%;
		}
	
	.subTitle {
		font-size: 1.5rem;
		line-height: 1.6;
		margin-bottom: 20px;
	}

	main > div + div {margin-top: 25px;}
	
}