@charset "utf-8";

/* hypertext
-------------------- */
a {
  color: #9fd9f6;
  text-decoration: none;
}
a:hover {
  color: #888;
  text-decoration: underline;
}

/* MainImage
-------------------- */
#MainImage{
	position: relative;
}
#MainImage .ul{
	position: relative;
	z-index: 1;
}
#MainImage img#HeaderText{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	width: 100%;
}
/* グローバルナビ
-------------------- */
#Gnavi{
	position: relative;
	z-index: 15;
	margin-top: -75px;
	width: 100%;
	height: 150px;
	background-image: url('../img/bg_menu2.png');
	background-position: top left;
	background-repeat: repeat-x;
}
#Gnavi div.Inner2{
	background-image: url('../img/bg_menu.png');
	background-position: top left;
	background-repeat: no-repeat;
	background-size: contain;
	overflow: hidden;
	height: 150px;
}
#Gnavi ul.lMenu{
	width: 42.5%;
	float: left;
	margin-top: 90px;
}
#Gnavi ul.lMenu li{
	float: left;
}
#Gnavi ul.lMenu li:nth-child(1){
	width: 12.4%;
}
#Gnavi ul.lMenu li:nth-child(2){
	width: 18.5%;
}
#Gnavi ul.lMenu li:nth-child(3){
	width: 57.4%;
}

#HeaderLogo{
	float: left;
	width: 15%;
	text-align: center;
}
#HeaderLogo img{
	max-width: 150px;
	width: 100%;
	margin: 50px auto 10px;
}
#Gnavi ul.rMenu{
	width: 42.5%;
	float: right;
	margin-top: 90px;
}
#Gnavi ul.rMenu li{
	float: right;
}
#Gnavi ul.rMenu li:nth-child(1){
	width: 38.5%;
}
#Gnavi ul.rMenu li:nth-child(2){
	width: 19.4%;
}
#Gnavi ul.rMenu li:nth-child(3){
	width: 25.3%;
}

#Gnavi ul li{
	position: relative;
	background-image: url('../img/menu_line.png');
	background-position: top right;
	background-repeat: no-repeat;
	background-size: contain;
	text-align: center;
	height: 32px;
	padding-top: 8px;
}
#Gnavi ul.lMenu li:last-child{
	background-image: none;
}
#Gnavi ul.rMenu li:first-child{
	background-image: none;
}
#Gnavi ul li a img.main{
	width: 75%;
}
.popover-content {
    padding: 15px 20px;
    font-size: 18px;
}



/* common
-------------------- */
section{
	clear: both;
}


/* contentsMenu
-------------------- */
#contentsMenu{
	padding-top: 80px;
}
#contentsMenu div.conceptBlock{
	background-image: url('../img/bg_brown_wave.png');
	background-position: bottom left;
	background-repeat: no-repeat;
	background-size: contain;
	overflow: hidden;
}
#contentsMenu div.conceptBlock div.wrap{
	max-width: 700px;
	width: 70%;
	margin: 0 auto 30px;
}
#contentsMenu div.conceptBlock img:first-child{
	float: left;
	max-width: 360px;
	width: 60%;
	margin: 70px 0 50px;
}
#contentsMenu div.conceptBlock img:last-child{
	float: right;
	max-width: 220px;
	width: 32%;
	margin-top: 30px
}
#contentsMenu div.menuListBlock{
	background-color: #41210a;
	overflow: hidden;
	text-align: center;
}
#contentsMenu div.menuListBlock ul{
	max-width: 560px;
	/*max-width: 750px;*/
	width: 100%;
	margin: 0 auto 30px;
	overflow: hidden;
}
#contentsMenu div.menuListBlock ul li{
	float: left;
	max-width: 180px;
	width: 32.14%;
	margin: 30px 8.92% 40px;
}
#contentsMenu div.menuListBlock img#ms_message{
	max-width: 810px;
	width: 81%;
	margin: 0px auto 100px;
}
/* welcome
-------------------- */
#welcome{
	clear: both;
}
#welcome div.subImage{
	position: relative;
	margin-bottom: 50px;
}
#welcome div.subImage img{
	position: relative;
	z-index: 1;
}
#welcome div.subImage div.text{
	position: absolute;
	top: 34%;
	left: 8%;
	z-index: 10;
	color: #ffffff;
}
#welcome div.subImage div.text p.largeTxt{
	font-size: 28px;
	font-weight: bold;
	margin-bottom: 40px;
	letter-spacing: 6px;
}
#welcome div.subImage div.text p.smallTxt{
	font-size: 18px;
	letter-spacing: 4px;
	line-height: 2.4em;
}
#welcome div.subText{
	text-align: center;
	margin-bottom: 50px;
	overflow: hidden;
}
#welcome div.subText p.largeTxt{
	font-size: 24px;
	margin-bottom: 40px;
	letter-spacing: 6px;
}
#welcome div.subText p.largeTxt2{
	font-size: 24px;
	margin-bottom: 40px;
	letter-spacing: 1px;
}

#welcome div.subText p.smallTxt{
	font-size: 16px;
	letter-spacing: 4px;
	line-height: 3em;
	margin-bottom: 10px;
}
#welcome div.subText ul.snsBox{
	max-width: 290px;
	width: 100%;
	margin: 0 auto;
}
#welcome div.subText ul.snsBox li{
	float: left;
	max-width: 60px;
	width: 20.6%;
	margin: 0 5.1%;
}

/* Menu
-------------------- */
#menu{
	clear: both;
	text-align: center;
}
#menu ul.menu3Box{
	overflow: hidden;
	max-width: 882px;
	width: 88%;
	margin: 0 auto 50px;
}
#menu ul.menu3Box li{
	float: left;
	max-width: 270px;
	width: 30.6%;
	margin: 0 1.3%;
}
#menu ul.menu3Box li img{
	margin-bottom: 10px;
}
#menu ul.menu3Box li p{
	text-align: center;
}
#menu ul.menu4Box{
	overflow: hidden;
	clear: both;
	max-width: 1000px;
	width: 100%;
	margin: 0 auto 50px;
}
#menu ul.menu4Box li{
	float: left;
	max-width: 244px;
	width: 25%;
}
#menu ul.menu4Box li img{
	margin-bottom: 10px;
}
#menu ul.menu4Box li p{
	text-align: center;
}
#menu p.btn{
	max-width: 300px;
	width: 30%;
	margin: 0 auto 80px;
}

/* fromShimonoseki
-------------------- */
#fromShimonoseki{
	clear: both;
	text-align: center;
}
#fromShimonoseki div.subImage{
	position: relative;
	margin-bottom: 50px;
}
#fromShimonoseki div.subImage img{
	position: relative;
	z-index: 1;
}
#fromShimonoseki div.subImage div.text{
	position: absolute;
	bottom: 15%;
	right: 8%;
	z-index: 10;
	color: #ffffff;
}
#fromShimonoseki div.subImage div.text p.largeTxt{
	font-size: 28px;
	font-weight: bold;
	margin-bottom: 40px;
	letter-spacing: 6px;
	text-align: right;
}
#fromShimonoseki div.subImage div.text p.smallTxt{
	font-size: 18px;
	letter-spacing: 4px;
	line-height: 2.4em;
	text-align: right;
}
#fromShimonoseki div.subText{
	text-align: center;
	margin-bottom: 50px;
	overflow: hidden;
}
#fromShimonoseki div.subText p.largeTxt{
	font-size: 24px;
	margin-bottom: 40px;
	letter-spacing: 6px;
}
#fromShimonoseki p.btn{
	max-width: 300px;
	width: 30%;
	margin: 0 auto 80px;
}



/* Commitment
-------------------- */
#commitment{
	clear: both;
	text-align: center;
	padding-bottom: 100px;
	background-image: url('../img/bg_brown_wave.png');
	background-position: bottom left;
	background-repeat: no-repeat;
	background-size: contain;
	overflow: hidden;
}
#commitment div.subImage{
	position: relative;
	margin-bottom: 50px;
}
#commitment div.subText{
	text-align: center;
	margin-bottom: 50px;
	overflow: hidden;
}
#commitment div.subText p.largeTxt{
	font-size: 24px;
	margin-bottom: 40px;
	letter-spacing: 6px;
}
#commitment div.subText p.smallTxt{
	font-size: 16px;
	letter-spacing: 4px;
	line-height: 3em;
	margin-bottom: 10px;
}
#commitment ul.menu2Box{
	overflow: hidden;
	max-width: 880px;
	width: 88%;
	margin: 0 auto 30px;
}
#commitment ul.menu2Box li{
	float: left;
	max-width: 370px;
	width: 42%;
	margin: 0 3.97%;
}
#commitment ul.menu1Box{
	overflow: hidden;
	max-width: 590px;
	width: 59%;
	margin: 0 auto 100px;
}
#commitment div.subImage2{
	position: relative;
	margin-bottom: 100px;
}
#commitment div.subImage2 img{
	position: relative;
	z-index: 1;
}
#commitment div.subImage2 div.text{
	position: absolute;
	top: 10%;
	left: 50%;
	z-index: 10;
	color: #ffffff;
}
#commitment div.subImage2 div.text p.largeTxt{
	font-size: 20px;
	font-weight: bold;
	letter-spacing: 6px;
	text-align: left;
	line-height: 3em;
}
#commitment div.subImage2 div.text p.smallTxt{
	font-size: 16px;
	letter-spacing: 4px;
	line-height: 2.4em;
	text-align: left;
}
#commitment p.btn{
	max-width: 300px;
	width: 30%;
	margin: 0 auto 80px;
}



/* scene
-------------------- */
#scene{
	clear: both;
	text-align: center;
	margin-bottom: 50px;
	/*max-width: 970px;*/
	width: 100%;
	padding: 50px 1.36%;
	background-color: #41210a;
}
#scene #sceneBlock{
	margin-bottom: 100px;
	overflow: hidden;
}
#scene #sceneBlock #box01{
	float: left;
	max-width: 300px;
	width: 29.8%;
	margin: 0 2% 30px;
}
#scene #sceneBlock #box01 img:first-child{
	margin-bottom: 28px;
}
#scene #sceneBlock #box02{
	float: right;
	max-width: 604px;
	width: 62.2%;
	margin: 0 2% 30px;
}
#scene #sceneBlock #box03{
	clear: both;
	margin: 0 2% 30px;
}
#scene #sceneBlock #box04,
#scene #sceneBlock #box06{
	clear: both;
}
#scene #sceneBlock #box04 img:first-child,
#scene #sceneBlock #box06 img:first-child{
	float: left;
	max-width: 450px;
	width: 46%;
	margin: 0 2% 30px;
}
#scene #sceneBlock #box04 img:last-child,
#scene #sceneBlock #box06 img:last-child{
	float: right;
	max-width: 450px;
	width: 46%;
	margin: 0 2% 30px;
}
#scene #sceneBlock #box05{
	clear: both;
}
#scene #sceneBlock #box05 img{
	float: left;
	max-width: 290px;
	width: 29.5%;
	margin: 0 1.8% 30px;
}
#scene #sceneBlock #box07{
	float: left;
	max-width: 450px;
	width: 46%;
	margin: 0 2% 30px;
}
#scene #sceneBlock #box08{
	float: right;
	max-width: 450px;
	width: 46%;
	margin: 0 2% 30px;
}
#scene #sceneBlock #box08 img{
	margin-bottom: 27px;
}
#scene #sceneBlock #box08 img:last-child{
	margin-bottom: 0px;
}
#scene #sceneBlock #box09{
	clear: both;
	margin: 0 2% 30px;
}
#scene div.subText{
	text-align: center;
	margin-bottom: 50px;
	overflow: hidden;
	color: #ffffff;
}
/*
#scene div.subText p.largeTxt{
	font-size: 24px;
	margin-bottom: 40px;
	letter-spacing: 6px;
}
*/
#scene div.subText p.smallTxt{
	font-size: 16px;
	letter-spacing: 4px;
	line-height: 3em;
	margin-bottom: 10px;
}
#scene div.menuListBlock{
	background-color: #41210a;
	overflow: hidden;
}
#scene div.menuListBlock ul{
	max-width: 750px;
	width: 100%;
	margin: 0 auto;
}
#scene div.menuListBlock ul li{
	float: left;
	max-width: 180px;
	width: 24%;
	margin: 30px 4.6% 40px;
}

/* shop
-------------------- */
#shop{
	clear: both;
}
#shop div.subImage{
	position: relative;
	margin-bottom: 0px;
}
#shop div.subImage img{
	position: relative;
	z-index: 1;
}
#shop div.subImage div.largeTxt{
	position: absolute;
	top: 10%;
	left: 25%;
	width: 50%;
	background-color: rgba(255,255,255,0.5);
	z-index: 10;
	padding: 40px 5%;
	font-size: 20px;
	line-height: 2em;
	letter-spacing: 3px;
	text-align: center;
}
/*
#shop div.subImage div.smallTxt{
	position: absolute;
	top: 40%;
	left: 20%;
	width: 60%;
	font-size: 22px;
	font-weight: bold;
	letter-spacing: 4px;
	line-height: 2em;
	z-index: 10;
	text-align: center;
	color: #ffffff;
}
*/
#shop div.subImage p.btn{
	max-width: 300px;
	width: 30%;
	margin: 0 auto;
	position: absolute;
	top: 80%;
	left: 35%;
	text-align: center;
	z-index: 10;
}


/* simons
-------------------- */
#simons{
	clear: both;
	text-align: center;
	overflow: hidden;
	margin-bottom: 50px;
}
#simons #fLogo{
	max-width: 400px;
	width: 40%;
	margin: 200px auto;
}
#simons div#shopInfoBlock{}

#simons div#shopInfoBlock div#mapBox{
	max-width: 580px;
	width: 58%;
	float: left;
}
#simons div#shopInfoBlock div#infoBox{
	max-width: 380px;
	width: 38%;
	float: right;
	padding-top: 80px;
}
#simons div#shopInfoBlock div#infoBox h3{
	margin-bottom: 20px;
	text-align: left;
}
#simons div#shopInfoBlock div#infoBox dl{
	margin-bottom: 50px;
}
#simons div#shopInfoBlock div#infoBox dl dt{
	clear: both;
	float: left;
	width: 6em;
	text-align: left;
}
#simons div#shopInfoBlock div#infoBox dl dd{
	padding-left: 8em;
	margin-bottom: 5px;
	text-align: left;
}
#simons div#shopInfoBlock div#infoBox p.btn{
	max-width: 300px;
	width: 80%;
	margin: 0 auto;
}