@charset "UTF-8";
/* CSS Document */
body,h1,h2,p,ul,li{margin:0;padding:0;}
li{list-style: none;
	text-indent: -1em;
	padding-left: 1em;
}
a{text-decoration: none;}
body {
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
}
h2,h3 { font-family: "Sawarabi Mincho"; }
a{color: #fff;}

div {
	line-height: 1.6rem;
  }

  	/*---------------youtube modal----------------*/
.youtube-modal {
	z-index: 1500 !important;
  }
  
  .modal-content {
	background-color: transparent;
	border: none;
  }
  
  .modal-header {
	border-bottom: none;
  }
  
  .btn-close {
	background-color: #4f4f4f;
	border-radius: 0%;
  }
  
  .display-none {
	display: none !important;
  }


/* ボタン類 */
.btn{
	display: block;
	width:100%;
	border: 1px solid #cf9625;
	background: #cf9625;
	color: #111;
	font-weight: bold;
}
.btn:hover{
	background: #FF6732;
	color: #fff;
	transition: 0.4s;
}

#nav_reserve{
	position: absolute;
	top:30px;
	right:30px;
	z-index: 99;
	width:120px;
	line-height: 40px;
	text-align: center;
}
.toshop{
	width:320px;
	text-align: center;
	line-height: 80px;
	margin:30px auto 0;
	font-size:1.2em;
}


/* header */
header{
	margin:0;
	width:100%;
	position: fixed;
	z-index: 99;
	background: rgb(255, 255, 255);
}
header h1{position: absolute; left:0; right:0; margin:0 auto; height:90px; width:80px; padding:5px 0;}
header h1 img{ 
	height: 100%;
	position: center;
	text-align: center;
}

#nav_toggle, h1 {
	box-sizing: unset;
  }


/* nav */
nav{
	display: none;
	position: absolute;
	top:98px;
	width: 100%;
	background: #222;
	left: 0;
}
nav a{
	color: #ffffff;
}
header nav ul{
	display: block;
	margin: 0 auto;
	width: 90%;
}
header nav ul li{
	margin: 20px auto 0;
	padding:0 0 20px 0;
	text-align: start;
	border-bottom: 1px solid #444;
}
header nav ul li:last-child{
	border: none;
}
header nav ul li a{
	display: block; 
}
header nav ul li a:hover{
	text-decoration: underline; 
}

/* 開閉ボタン */
#nav_toggle{
	display: block;
	width: 40px;
	height: 40px;
	position: relative;
	top: 4px;
	z-index: 100;
	padding:30px;
}
#nav_toggle div {
	position: relative;
}
#nav_toggle span{
	display: block;
	height: 3px;
	background: rgb(0, 0, 0);
	position:absolute;
	width: 100%;
	left: 0;
	-webkit-transition: 0.5s ease-in-out;
	-moz-transition: 0.5s ease-in-out;
	transition: 0.5s ease-in-out;	
}
#nav_toggle span:nth-child(1){
	top:0px;
}
#nav_toggle span:nth-child(2){
	top:12px;
}
#nav_toggle span:nth-child(3){
	top:24px;
}
	
/* 開閉ボタンopen時 */
.open #nav_toggle span:nth-child(1) {
	top: 12px;
	-webkit-transform: rotate(135deg);
	-moz-transform: rotate(135deg);
	transform: rotate(135deg);
}
.open #nav_toggle span:nth-child(2) {
	width: 0;
	left: 50%;
}
.open #nav_toggle span:nth-child(3) {
	top: 12px;
	-webkit-transform: rotate(-135deg);
	-moz-transform: rotate(-135deg);
	transform: rotate(-135deg);
}

/* 背景 */
.background{
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    position: fixed;
    background-position: center center;
    opacity: 0;
-webkit-background-size: cover;
        background-size: cover;
-webkit-transition: all 0.5s ease 0s;
   -moz-transition: all 0.5s ease 0s;
        transition: all 0.5s ease 0s;
}
.show .background { opacity: 1;}
.contents .wrap {
    padding: 30vh 2vh 60vh;
    position: relative;
    z-index: 2;
}
/* 背景画像 */
#content00_bg {background-image: url(../images/bg_00.jpeg);}
#content01_bg {background-image: url(../images/bg_01.png);}
#content02_bg {background-image: url(../images/bg_02.jpeg);}
#content03_bg {background-image: url(../images/bg_03.jpeg);}
#content04_bg {background-image: url(../images/bg_04.jpeg);}
#content05_bg {background-image: url(../images/bg_00.jpg);}
#content06_bg {background-image: url(../images/bg_03.jpeg);}
#content07_bg {background-image: url(../images/bg_05.png);}
#content00 .wrap,#content01 .wrap,#content02 .wrap,#content03 .wrap,#content04 .wrap,#content05 .wrap,#content06 .wrap, #content07 .wrap { background-color: rgba(0,0,0,0.6);}



/* xx-コンテンツ共通 */
.text-box {
    max-width: 1080px;
    background-color: rgba(0,0,0,0.7);
    color: #fff;
	margin:0 auto;
	border-left:1px solid #bebb77 ;
	border-right:1px solid #c79810;
}
.text-box:before,
.text-box:after {
	content:"";
	display:block;
	height:1px;
	width:100%;
	background:-webkit-gradient(linear, left top, right bottom, from(#bebb77), to(#c79810));
	background:-moz-linear-gradient(left, #bebb77, #c79810);
	background:linear-gradient(left, #bb68db, #c79810);
}
.text-area{padding:50px 30px;}
.text-area h2{text-align: center; font-size:32px;}
.text-area .subtitle{text-align: center; margin-bottom:30px; font-size:16px; color: #eac15d;}
.text-area h3{font-size:36px; margin-bottom:30px; text-align: center;}
.text-area p{font-size:22px; line-height: 1.5em;}
.text-area .comment{text-align: center; margin-bottom:30px;}
.text-area h4{margin:0 0 14px 0; color: #eac15d;}
.text-area .image{text-align: center; margin-bottom:30px;}


/* 00-イントロ */
.text-box00 {
	position: relative;
	text-align: center;
    max-width: 100%;
    color: #fff;
	margin:0 auto;
}
.text-box00 img{width:80%;}
.text-box00 h2{
	font-size: 48px;
	margin:0;
}
.text-box00 h3{
	margin-bottom:10px;
}


/* 01-サンプル */
#content01 ul{
	display: -webkit-flex;
	display: flex;
	list-style: none;
	flex-wrap: wrap;
	justify-content: space-around;
}
#content01 li{width:35%;}
#content01 li img{width:100%;}

#sample ul li{
	text-indent: 0;
	padding-left: 0;
	width: 40%;

}


/* 02-商品概要 */
.special{
	font-size:16px;
	border:1px solid #ccc;
	background: #111;
	padding:20px;
	margin-top:30px;
}
.detail{margin-bottom:30px;}
.special li{
	line-height: 1.8em;
	text-indent: -0.5em;
	padding-left: 0.5em;	
}

.special1{
	font-size:16px;
	border:1px solid #ccc;
	background: #111;
	padding:20px;
	margin-top:30px;
}
.detail{margin-bottom:30px;}
.special1 li{
	line-height: 1.8em;
	text-indent: -1em;
	padding-left: 1em;	
}

.summary li{
	margin-bottom: 10px;
	text-indent: -1.4em;
	padding-left: 1.3em;
}
.summary li:before{
	content: '◆';
	color:#eac15d;
	font-size: 16px;
	margin-right:6px;
	vertical-align: middle;
	}
.image img{width:80%;}
.period{margin-top:30px;}
.period h4{margin-bottom:20px;}
.period p{margin:0 0 30px 10px; text-align: center;}
.period span{font-size:1.5em; padding-bottom:5px; border-bottom:1px solid #eac15d;}
.summary .strong{
	color:#FF6732;
	font-weight: bold;
	font-size: 1.3em;
	margin-top:20px;
}
.credit p{font-size: 0.9em; font-weight: normal; margin-top:30px; text-align: center;}


/* 04-ショップ */
#content04 .shoplogo{width:60%; margin:0 auto;}
#content04 .shoplogo img{width:100%; margin-bottom:30px;}


/* 05-オルサガ紹介 */
#content05 .logo{text-align: center;}
#content05 p{margin-bottom:30px;}
.hortensia,
.pv{
	width:380px;
	height:60px;
	border:1px solid #fff;
	display: block;
	margin:0 auto;
	text-align: center;
	line-height: 60px;
}
.hortensia{background: #3a589e; margin-bottom:30px;}
.pv{background: #3a589e;}
.hortensia:hover,
.pv:hover{
	background: #FF6732;
	color: #fff;
	transition: 0.4s;
}

/* 05-登壇者 */
.speaker-box h4
	{font-size: 1.2em; font-weight: bold; margin-top:30px; text-align: center; color: #ffffff;}

.speaker-box p
	{font-size: 0.9em; font-weight: normal; margin-top:30px; text-align: left;}

.img-fluid {
	text-align: center;
	position: center;
}


/* 07-シェア */
#content07 .tw_btn,
#content07 .fa_btn{
	width:320px;
	height:60px;
	border:1px solid #fff;
	display: block;
	margin:0 auto;
	text-align: center;
	line-height: 60px;
}
#content07 .tw_btn{background: #1da1f2; margin-bottom:30px;}
#content07 .fa_btn{background: #3a589e;}
#content07 .tw_btn:hover,
#content07 .fa_btn:hover{
	background: #FF6732;
	color: #fff;
	transition: 0.4s;
}

/*////////    header    ///////*/
header{
	height:110px;
	min-width:100%;
	}
	
	.header-w-logo{
	width:100%;
	}
	
	.header-w-logo div{
	width:100%;
	padding:12.199999999vw 0 0 0;
	}
	
	.header-w-logo div h1{
	width:53.2vw;
	margin:0 0 0 4.0vw;
	}
	
	.header-w-logo div h1 img{
	width:100%;
	display:block;
	}
	
	.header-w-copy{
	top:34.0vw;
	left:0;
	}
	
	.header-w-copy div{
	width:100%;
	}
	
	.header-w-copy div p{
	width:90vw;
	margin:4.0vw 0 0 4.0vw;
	}
	
	.header-w-copy div p img{
	width:100%;
	}
	
	.header-w-copy02 p{
	width:45.0vw;
	}
	
	.header-w-copy02 p img{
	width:100%;
	}
	
	.header-w-icon p{
	width:62.8vw;
	}
	
	.header-w-icon p img{
	width:100%;
	}