@charset "UTF-8";
/*
	1)	初期設定
	2)	hover
	3)	header
	4)	nav
	5)	reserveBox
	6)	mainVisual
	7)	footer
	8)	contents
			 └ main
*/
/*============================================================================================================
	初期設定
============================================================================================================*/
/*
	元々のテキストのカラー
	color:#*7e7e81;
*/
body {
  color: #333333;
  -webkit-text-size-adjust: 100%;
  line-height: 2.2;
  letter-spacing: 0.5px;
}

div, h1, h2, h3, h4, h5, p, li, dl, dt, dd, th, td, article, header, footer, nav, span, a, section {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  height: auto;
  width: auto;
  max-width: 100%;
  line-height: 100%;
  vertical-align: top;
	zoom: 0.5;

}

em {
  font-style: normal;
}

h1, h2, h3, h4, h5 {
  line-height: 1.6;
  margin: 0;
}

p, li, td, th, dt, dd {
  font-size: 15px;
  line-height: 2.2;
  margin: 0;
  word-wrap: break-word;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  text-align: left;
  font-weight: normal;
  vertical-align: top;
  word-break: break-all;
}

ul,
ol {
  padding: 0;
  margin: 0;
}

@media screen and (min-width: 701px) {
  .sp {
    display: none !important;
  }
}

@media screen and (max-width: 700px) {
  body {
    min-width: 100%;
  }
  .pc {
    display: none !important;
  }
}

/*------------------------------------------
	フォント
------------------------------------------*/
body {
  font-family: '游ゴシック体', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

/* IE対策 */
@media all and (-ms-high-contrast: none) {
  body {
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
    font-weight: 500;
  }
  .websiteLink .item a {
    padding-top: 11px !important;
    padding-bottom: 5px !important;
  }
}

_:-ms-lang(x) body, _::-webkit-meter-bar body, body body {
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
  font-weight: 500;
}

_:-ms-lang(x) body .websiteLink .item a, _::-webkit-meter-bar body .websiteLink .item a, body body .websiteLink .item a {
  padding-top: 11px !important;
  padding-bottom: 5px !important;
}
/*
.copyright,
.btnVideo,
.navList li,
.language,
.secTit,
.txtLink,
.roomsNav,
.roomInfo .name,
.roomInfo .date,
.gsBox .list .tit,
.pagination,
.sideTtl {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  letter-spacing: 3px;
}
*/

.footer .language,
.copyright,
.pagination {
	letter-spacing: 1px;
}


@media screen and (max-width: 700px) {
	.navFixed {
		position: fixed;
		width: 100%;
		height: 100%;
	}
}


.txt {
	font-size:16px;
}
.center {
	text-align:center;
}

/*------------------------------------------
	枠
------------------------------------------*/
.inner {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 0px;
}

/*============================================================================================================
	hover
============================================================================================================*/
@media screen and (min-width: 701px) {
  a {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }
  a:hover {
    filter: alpha(opacity=60);
    -moz-opacity: 0.6;
    opacity: 0.6;
  }
}

/*============================================================================================================
	header
============================================================================================================*/
.header {
/*	background: url(../img2/bg_mv.gif) repeat-x top left;*/
	background: url(../img2/bg_mv.png) repeat-x top left;
	background-size: 8px 700px;
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 700px;
	z-index: -1;
}
.header::before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	width: 100%;
	height: 700px;
	background-image:
		repeating-linear-gradient(
			90deg,
			RGBA(255,255,255,0.1),
			RGBA(255,255,255,0.1) 1px,
			transparent 1px,
			transparent 8px
		),
		repeating-linear-gradient(
			0deg,
			RGBA(255,255,255,0.1),
			RGBA(255,255,255,0.1) 1px,
			RGBA(0,0,0,0) 1px,
			RGBA(0,0,0,0) 8px
		);
	z-index: -2;
}
.header h1 {
	padding: 30px;
/*	color: lightseagreen;*/
	color: white;
	line-height: 100%;
/*	line-height: 0px;*/
}
.header .inner {
	position: relative;
	padding: 0 100px;
}

.header .hBox {
	padding-top: 40px;
width:44%;
}
.header .ttlCap {
	margin-bottom: 10px;
}
.header .ttlCap p {
    line-height: 1.7em;

}
.header .ttlCap p span {
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 1px;
background: linear-gradient(transparent 0%, #ffff66 0%);
	display:inline;
}

.header h2 {
	color:#fff;
	font-size:46px;
	font-weight: bold;
	margin-bottom:30px;
}
.header h3 i {
display: inline-block;
margin-right: 10px;
}
.header h3 i img {
	vertical-align:text-bottom;
}
.header h3 span {
	display: inline-block;
font-size: 26px;
	color:#0f0c6d;
	font-weight: bold;
	line-height: 1.4em;
	letter-spacing: 0;
	margin-bottom: 10px;
}
.hCaption {
	letter-spacing: 0;
	margin-bottom: 10px;
font-size: 16px;
}
.header ul {
	margin-bottom: 20px;
    display: flex;
    
}
.header ul li{
	display: inline-block;
	margin-right: 20px;
}

.hImg {
	position: absolute;
    top: 0px;
    right: 0px;
	width: 48%;
}

section.feature {
	padding-left: 25px;
	padding-right: 10px;
	background-color: RGBA( 255, 255, 255, 0.5 );
/*	background-color: beige;*/
	border-radius: 5px;
}

section.feature ul {
	display: inline;
	margin-left: 15px;
}

section.feature li {
  position: relative;
  display: block;
  top: -15px;
  line-height: 120%;
  margin-bottom: 5px !important;
}

section.feature li::before {
  content: '●';
  font-size: 70%;
  position: absolute;
  left: -14px;
  top: 0px;
}

@media screen and (max-width: 1200px) {
.header h2 {
	font-size:3.7vw;
}
.header h3 span {
font-size: 2.3vw;
}
}

@media screen and (max-width: 1000px) {
	.header .inner {
		position: relative;
		padding: 0 20px;
	}
}

@media screen and (max-width: 700px) {
	.header {
		height: 100vh;
	}
	.header h1 {
		padding: 20px 20px 20px;
		line-height: 100%;
/*		line-height: 0px;*/
	}
	.header .hBox {
	    width: 100%; 
		padding-top: 0px;
	}
	.hImg {
		width: 100%;
		position: relative;
		margin: 0px;
	}
	.header .ttlCap p span{
		font-size: 13px;
	}	
	
	.header h2 {
	    font-size: 8vw;
		margin-bottom: 5px;
	}
	.header h3 span {
		font-size: 6vw;
	}
	.header h3 i img {
		vertical-align: bottom;
	}
	.hCaption {
		font-size: 12px;
		line-height: 1.6em;
	}
	.header ul li {
		margin: 0 auto;
	}
}



/*============================================================================================================
	footer
============================================================================================================*/
.footer {
	background-color:#000;
	color: #fff;
	text-align: center;
	padding: 40px 0 40px;
}
.fLink{
	margin-bottom: 20px;
}
.fLink a {
	text-decoration: underline;
}
.fLogo{}

@media screen and (max-width: 700px) {
	.footer {
		padding: 40px 0 40px;
	}
	.fLink{
		margin-bottom: 20px;
	}
}



/*============================================================================================================
	contents
============================================================================================================*/
.contents {
	background-color:#fff;
	margin-top: 1000px;
/*	margin-top: 700px;*/
}

.secTtl {	margin-bottom: 20px;
}
.ttlSub {
	font-size: 14px;
	color: #00a0e9;
	display: block;
	margin-bottom: 10px;
}
.ttlMain {
	font-size: 27px;
	color: #090752;
	
}


/*=======about=======*/
.secAbout {}
.secAbout .inner {
	position: relative;
}
.secAbout .innerBox {
	float: right;
	padding: 160px 100px 170px 0;
    width: 44%;
}

.secAbout .innerBox ul li {
	color:#333;
}

.figAboutMain {
	position: absolute;
	top:60px;
	left:0px;
	margin:0px;
    width: 55%;
}
.figAboutSub {
	position: absolute;
	bottom:-40px;
	right:80px;
}

/*=======feature=======*/
.secFeature {
	background-color: #fcfbf6;
} 
.secFeature .inner {
	padding:100px 0 ;
}
.secFeature .innerBox {
	padding: 0 100px;
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    flex-direction: row;
/*    flex-wrap: wrap;*/
}

.secFeature .secTtl {
	text-align:center;
}

.secFeature .box {
	text-align:center;
}
.secFeature .box figure {
	height:180px;
    text-align: center;
    align-items: center;
    display: flex;
    justify-content: center;
}
.secFeature .box dl dt {
	color:#090752;
	font-size:20px;
	font-weight:bold;
}

.secFeature .box dl dd {
	text-align:center;
	color:#333;
	line-height: 1.6em;
}


/*=======secHowto=======*/
.secHowto {
	display: block;
	  background: url(../img2/bg_sec.gif) repeat-x top left #fff;
	background-size: 9px 742px;

}
.secHowto .inner {
	padding: 120px 100px;
}
.secHowto .innerBox {
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
}
.hHowto {
}
.hHowto figure img{
	margin-top: -100px;
}
.hHowto p {
	color:#333;
}
.secHowto .hBox {
	float:left;
	margin-right: 20px;
	margin-bottom:	40px;
}

.secHowto .box {
	width:22%;
	padding-bottom:0px;
}
.secHowto .box dt {
	padding-bottom:40px;
}
.secHowto .box dd {
	font-size:13px;
	color:#333;
	line-height: 1.6em;
}

.secHowto .box:nth-child(1) {
	background: url(../img2/img_01.png) no-repeat bottom right;
	background-size: 107px 90px;
}
.secHowto .box:nth-child(2) {
	background: url(../img2/img_02.png) no-repeat bottom right;
	background-size: 123px 90px;
}
.secHowto .box:nth-child(3) {
	background: url(../img2/img_03.png) no-repeat bottom right;
	background-size: 124px 90px;
}
.secHowto .box:nth-child(4) {
	background: url(../img2/img_04.png) no-repeat bottom right;
	background-size: 125px 90px;
}
.secHowto .box:nth-child(5) {
	background: url(../img2/img_05.png) no-repeat bottom right;
	background-size: 124px 90px;
}
.secHowto .box:nth-child(6) {
	background: url(../img2/img_06.png) no-repeat bottom right;
	background-size: 124px 90px;
}
.secHowto .box:nth-child(7) {
	background: url(../img2/img_07.png) no-repeat bottom right;
	background-size: 124px 90px;
}
.secHowto .box:nth-child(8) {
	background: url(../img2/img_08.png) no-repeat bottom right;
	background-size: 124px 90px;
}



/*=======secTest=======*/
.secTest {} 

.secTest .innerBox{ 
		background-color: #fcfbf6;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
}
.secTest .hBox {
	padding:50px 0 0 100px;
	    width: 43%;
}
.secTest .hBox p {
	margin-bottom:10px;
}
.secTest .hBox a {
	color:#090752;
	font-weight:bold;
}

.secTest .innerBox figure {
	margin:0px;
	    width: 57%;
}

.bottomLink {
	text-align:center;
	padding:100px 0px;
}
.bottomLink li {
	display:inline-block;
	margin: 0 10px;
}

@media screen and (max-width: 1000px) {
	.secAbout .innerBox {
		padding: 160px 20px 200px 0;
	}
	.secFeature .innerBox {
		padding: 0 20px;
	}
	.secHowto .inner {
		padding: 120px 20px;
	}
	.secTest .hBox {
		padding: 50px 0 0 20px;
	}
}

/*=======secthank=======*/
    
.secthank {
    background-color: #fcfbf6;
}
    
.secthank .inner {
    padding: 100px 0;
}
.secthank .secTtl {
    text-align: center;
}

.secthank .box {
    width: auto;
    text-align: center;
    padding: 10px 0;
    background-color: #ffffff;
}
.secthank .box dt {
    max-width: 20%;
    margin: 0 auto 20px;
    border-bottom: 1px solid #999999;
    
}

.secthank .box dd {
    font-weight: bold;
}



@media screen and (max-width: 700px) {
	.contents {
	    margin-top: 100vh;
	}
		
	.ttlMain {
		/*font-size: 20px;*/
	}	
	.secAbout .innerBox ul li {
		line-height: 1.6em;
		margin-bottom: 10px;
	}
		
	.secAbout .innerBox {
		padding: 40px 20px 20px;
		width: 100%;
	}	
	.figAboutMain {
		position: relative;
		top: 0px;
		left: 0px;
		margin: 0px;
		width: 100%;
		margin: 0 0 -40px 0;
	}
	.figAboutSub {
		display: none;
	}
		
		
	.secFeature .inner {
		padding: 60px 20px ;
	}
		
	.secFeature .secTtl {
		text-align: left;
	}
		
	.secFeature .innerBox {
		display: block;
		}
	.secFeature .box figure {
		height: auto;
		display: block;
	}
	.secFeature .box {
		margin-top: 40px;
	}
	.secFeature .innerBox {
		padding: 0 0px;
	}
		
		
	.secHowto .inner {
		padding: 40px 20px;
	}
	.secHowto .innerBox {
		display:  block;
	}
		
	.secHowto .box {
		width: 100%;
		padding-bottom: 0px;
	}
		
		
	.secHowto .box {
		width: 100%;
		padding-bottom: 40px;
	}
	.secHowto .box dt {
		padding-bottom: 0px;
	}

	.secHowto .box:nth-child(1) {
		background: url(../img2/img_01.png) no-repeat top right;
		background-size: 107px 90px;
	}
	.secHowto .box:nth-child(2) {
		background: url(../img2/img_02.png) no-repeat top right;
		background-size: 123px 90px;
	}
	.secHowto .box:nth-child(3) {
		background: url(../img2/img_03.png) no-repeat top right;
		background-size: 124px 90px;
	}
	.secHowto .box:nth-child(4) {
		background: url(../img2/img_04.png) no-repeat top right;
		background-size: 125px 90px;
	}
	.secHowto .box:nth-child(5) {
		background: url(../img2/img_05.png) no-repeat top right;
		background-size: 124px 90px;
	}
	.secHowto .box:nth-child(6) {
		background: url(../img2/img_06.png) no-repeat top right;
		background-size: 124px 90px;
	}
	.secHowto .box:nth-child(7) {
		background: url(../img2/img_07.png) no-repeat top right;
		background-size: 124px 90px;
	}
	.secHowto .box:nth-child(8) {
		background: url(../img2/img_08.png) no-repeat top right;
		background-size: 124px 90px;
	}
		
	.secTest .innerBox {
		display: block;
	}
	.secTest .hBox {
		width: 100%;
		padding: 50px 20px 20px 20px;
	}
	.secTest .innerBox figure {
		width: 100%;
	}
	.bottomLink {
		text-align: center;
		padding: 40px 0px;
	}
		
	.secthank .box dt{
		max-width: 90%;
		min-width: 50%;
		margin: 0 auto 20px;
		border-bottom: 1px solid #999999;
		
	}
	.secthank .box dd{
		font-size: 12px;
	}
}

/*==========================================
	main
==========================================*/


@media screen and (max-width: 960px) {

}

@media screen and (max-width: 700px) {
}