@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Amiri");
@font-face {
  font-family: 'Noto Serif Japanese';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/NotoSerifCJKjp-Regular.otf) format("opentype");
}

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 766px) {
.pc { display: none !important; }
.sp { display: block !important; }
}

html body{
	background-color: #000000;
	height: 100%;
	margin: 0;
}

img{
	vertical-align: bottom;	/* 画像下の隙間をゼロに */
}

p {
/*	font-size: 18px;
	color: #b99f65;   */
  color          : #FFFFFF;            /* 文字の色 */
  font-size      : 1.2vw;               /* ＰＣ用の文字のサイズ */

  letter-spacing : 2px;                /* 文字間 */
  text-shadow    : 
       2px  2px 1px rgba(0, 0, 0, 0.40),
      -2px  2px 1px rgba(0, 0, 0, 0.40),
       2px -2px 1px rgba(0, 0, 0, 0.40),
      -2px -2px 1px rgba(0, 0, 0, 0.40),
       2px  0px 1px rgba(0, 0, 0, 0.40),
       0px  2px 1px rgba(0, 0, 0, 0.40),
      -2px  0px 1px rgba(0, 0, 0, 0.40),
       0px -2px 1px rgba(0, 0, 0, 0.40);        /* 文字の影 */
}
@media screen and (max-width: 766px) {
p {
  font-size      : 2.4vw;               /* スマホ用の文字のサイズ */
  letter-spacing : 1px;                /* 文字間 */
  }
}

a{	
	color: rgba(255,255,255,0.8);
	text-decoration: none;
}
a:visited {
	color: rgba(255,255,255,0.8);
}
a:hover {
	color: rgba(255,255,255,1.0);
	text-decoration: underline;
}

a:hover img{
	filter: drop-shadow(4px 4px 4px rgba(255,0,4,0.80));
	transition: all 0.5s ease;
}
.relative {
	position: relative;
}
.absolute {
	position: absolute;
}

.kintouwaritsuke {
	-moz-text-align-last: justify;
	text-align-last: justify;
}

.hako770oya{
	min-height: 100%;
	overflow: hidden;
}
.hako770{
	width: 50%;
}

.gizagiza-ue{
	background-image: url(../img/bg_002b-haji-top.png);
	width: 100%;
	height: 55px;
	margin: auto;
	position: relative;
}
.gizagiza-shita{
	background-image: url(../img/bg_002b-haji-bot.png);
	width: 100%;
	height: 55px;
	margin: auto;
	position: relative;
}


.page-system{
	background-image: url(../img/bg_002b.jpg);
	width: 100%;
	min-height: 100vh;
	margin: auto;
	position: relative;
}

.page-system img{
	width: 100%;
    top: 0;
	left: 0;
}

.syshako770oya{
	width: 90%;
    margin: 0 auto;
	position: relative;
}
.syshako770oya img {
	padding-bottom: 5%;
}
.sysimg	{
	position: absolute;
	opacity: 1.0;
	filter: alpha(opacity=100);
	-moz-opacity:1.0;
	transition: all 0.5s ease;
}
.sysimg:hover {
	opacity: 0.0;
	filter: alpha(opacity=0);
	-moz-opacity:0.0;
	transition: all 0.5s ease;
}
.page-chara{
	background-image: url(../img/bg_002b.jpg);
	width: 100%;
	margin: auto;
	position: relative;
}

.center-inline{
	margin: 0 auto;
    text-align: center;
}

.page-order{
	background-image:url(../img/bg-order3.jpg);
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: center;
	width: 100%;
	margin: auto;
	position: relative;
}

.hyoudai img{
	max-width: 55%;
	height: auto;
	margin: 2% 4% 4% 8%;
	filter: drop-shadow(8px 8px 8px rgba(0,0,0,0.6));
}
.hyoudai-center {
    display: block;
    text-align: center;
}
.hyoudai-center img{
	max-width: 70%;
	height: auto;
	margin: 2% 4% 4% 4%;
	filter: drop-shadow(8px 8px 8px rgba(0,0,0,0.6));
}
.order-text{
	max-width: 80%;
    margin: 0 auto;
    text-align: center;
	padding: 0 4% 4% 4%;
}
.banner500-box{
	width: 80%;
	margin: 0 auto;
}
.banner500-box img{
    max-width: 500px;
    width: 100%;
    height: auto;
    display: block;
    margin-right: auto;
    margin-left: auto;
    padding-bottom: 4%;
}
@media screen and (max-width: 766px) {
.banner500-box img{
    padding-bottom: 10%;
	}
}

.banner500-box a{
	position: relative;
}

.fullVideo-top { /* TOP動画専用のvideoタグ*/
    position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
    width: 100%;
	height: auto;
    z-index: 0;
	background-size: cover;
	overflow-y: hidden;
}

.top-gazou {
	width: 100%;
	position: absolute;
}
.top-gazou img{
	width: 100%;
}

.video-wrapper { /* videoタグ用2 */
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.toppage{
	background-color: #000;
	width: 100%;
	height: 100vh;
	margin: auto;
	position: relative;
}

.index1540px {
	background-color:rgba(0,0,0,0.4);
	max-width: 1100px;
	margin: auto;
	padding: 3% 0;
}
@media screen and (max-width: 766px) {
.index1540px {
	background-color:rgba(0,0,0,0);
}
}
.index1540px-dark {
	background-color:rgba(0,0,0,0.4);
	max-width: 1100px;
	margin: auto;
	padding: 3% 0;
}
.dark04{
	background-color:rgba(0,0,0,0.5);
	width: 100%;
}
.index1540px-spec {
	max-width: 1100px;
	margin: auto;
	padding: 3% 0;
}

.intro{
	background-image:url(../img/bg-intro.jpg);
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position:right top;
	width: 100%;
	margin: auto;
	position: relative;
}
.intro1540px {
	max-width: 1540px;
	margin: auto;
}
.intro-text{
	max-width: 80%;
	padding: 0 4% 6% 10%;
}

.page-spec{
    background-image: url(../img/bg-spec.jpg);
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    margin: auto;
    position: relative;
}

.spec-div {
/*	background-color:rgba(0,0,0,0.4);	*/
	max-width: 100%;
	margin: auto;
}

.spec-waku{
    margin: 0 auto;
    text-align: center;
}

.specsheet{
	line-height: 1;
	color: #fff;
	display: inline-block;
    vertical-align: bottom;
    filter: drop-shadow(3px 3px 2px rgba(0,0,0,0.8));
	padding-bottom: 12%;
}
.specsheet dt {
    font-weight: normal;
    float: left;
    clear: left;
	text-align: left;
    width: 140px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    border-bottom: solid 1px #fff;
	margin-right: -40px;
}
.specsheet dd {
	float: left;
/*	width: 290px;	*/
	width: 380px;
	text-align: left;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 20px;
    border-bottom: solid 1px rgba(255, 255, 255, 0.4);
}
.specsheet br {
	line-height: 1.5;
}
.line2 {
	line-height: 40px;
	height: 40px;
}
.line3 {
    line-height: 168px;
    height: 168px;
}

.line3-en {
	line-height: 24px;
    height: 108px;
    margin-top: 60px;
}

/* TOPページの画像関係切り分け */

/* パソコン（動画）横長用 */
@media screen and (min-width: 766px) {
.top-sodlogo{
	width: 100%;
	height: 100%;
	position: absolute;
}
.top-sodlogo img{
	max-width: 25%;
    position: absolute;
    top: 0;
    left: 0;
    right: 65%;
    /* bottom: 0; */
    margin: auto;
    padding-top: 18%;
}
.top-yarukayarare{
	width: 100%;
	height: 100%;
	position: absolute;
}
.top-yarukayarare img{
	max-width: 25%;
    position: absolute;
    /* top: 6%; */
    padding-top: 6%;
    top: 0%;
    left: 2%;
    /* right: 0; */
    /* bottom: 0; */
    margin: auto;
}
.top-gengo-icon-jp{
	width: 100%;
/*	height: 100%;	*/
	position: absolute;
}
.top-gengo-icon-jp img{
    max-width: 2.5%;
    position: absolute;
    /* top: 6%; */
    padding-top: 1%;
    top: 0%;
    left: 4%;
    margin: auto;
}
.top-gengo-icon-en{
	width: 100%;
/*	height: 100%;	*/
	position: absolute;
}
.top-gengo-icon-en img{
    max-width: 2.5%;
    position: absolute;
    /* top: 6%; */
    padding-top: 1%;
    top: 0%;
    left: 8%;
    margin: auto;
}	
	
	
	
.top-kyoukinofps{
	width: 100%;
	height: 100%;
	position: absolute;
}
.top-kyoukinofps img{
    max-width: 30%;
    position: absolute;
	padding-top: 10%;
	top: 0%;
    left: 6%;
    margin: auto;
}
.top-toreira-pc{
	width: 100%;
	height: 100%;
	position: absolute;
}
.top-toreira-pc img{
	max-width: 32%;
    position: absolute;
    top: 0;
    right: 0;
    margin: auto;
    padding-top: 20%;
}
.top-toreira-mb{
	display: none;
}
.top-toreira-mb img{
	display: none;
}
}
/* スマホ（画像）縦長用 */
@media screen and (max-width: 766px) {
.top-sodlogo{
	width: 100%;
	height: 100%;
	position: absolute;
}
.top-sodlogo img{
    max-width: 42%;
    position: absolute;
    top: 8%;
    left: 3%;
    margin: auto;
}
.top-yarukayarare{
	width: 100%;
	height: 100%;
	position: absolute;
}
.top-yarukayarare img{
	max-width: 70%;
    position: absolute;
    left: 4%;
    bottom: 30%;
    margin: auto;
}
.top-kyoukinofps{
	width: 100%;
	height: 100%;
	position: absolute;
}
.top-kyoukinofps img{
	max-width: 80%;
    position: absolute;
    left: 8%;
    bottom: 20%;
    margin: auto;
}
.top-toreira-pc{
	display: none;
}
.top-toreira-pc img{
	display: none;
}
.top-toreira-mb{
	width: 100%;
	height: 100%;
	position: absolute;
}
.top-toreira-mb img{
	max-width: 35%;
    position: absolute;
    top: 4%;
    /* left: 0; */
    right: 0;
    /* bottom: 0; */
    margin: auto;
    /* padding-top: 25%; */
}
.top-gengo-icon-jp{
	width: 100%;
/*	height: 100%;	*/
	position: absolute;
}
.top-gengo-icon-jp img{
    max-width: 7.5%;
    position: absolute;
    /* top: 6%; */
    padding-top: 2%;
    top: 0%;
    left: 6%;
    margin: auto;
}
.top-gengo-icon-en{
	width: 100%;
/*	height: 100%;	*/
	position: absolute;
}
.top-gengo-icon-en img{
    max-width: 7.5%;
    position: absolute;
    /* top: 6%; */
    padding-top: 2%;
    top: 0%;
    left: 16%;
    margin: auto;
}	
}

/* TOP下の正方形 */
.toppage-sita {
	position: relative;
	max-width: 1540px;
	padding: 2% 0;
	margin: auto;
	text-align: center;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: space-around;
	margin-top: -6%; /* 動画に被せる */
}
.toppage-sita img {
	width: 100%;
    max-width: 490px;
}
.box490 {
/*	max-width: 490px;
	max-height: 330px;
	float: left;	*/
}
/* スマホ（画像）縦長用 */
@media screen and (max-width: 766px) {
.toppage-sita {
	display: none; /* 動画に被せる */
	}
}

/* TOP下の正方形＠テスト（モバイル） */
.toppage-sita-mb {
	position: relative;
    max-width: 1540px;
    padding: 2% 0 8% 0;
    margin: auto;
    text-align: center;
	margin-top: -25%; /* 動画に被せる */
}
.toppage-sita-mb img {
	width: 70%;
	padding-bottom: 10%;
/*    max-width: 490px;	*/
}
.box490-mb {
/*	max-width: 490px;
	max-height: 330px;
	float: left;	*/
}
@media screen and (min-width: 766px) {
.toppage-sita-mb {
	display: none;
	}
}

/* TOP下のバナースペース */
.top-banner {
	background-color: rgba(125,125,255,0.6);
    max-width: 1540px;
    padding: 2% 0;
	margin: auto;
    text-align: center;
}
.top-banner img {
/*	width: 25%; */
	max-width: 300px;
	min-width: 200px;
	padding: 0.5%;
}
/* intro下のバナースペース */
.middle-banner {
    max-width: 1540px;
    padding: 2% 0 6% 0;
	margin: auto;
    text-align: center;
}

.middle-banner img {
/*	width: 25%; */
	max-width: 300px;
	min-width: 200px;
	padding: 0.5%;
}

.footer{
/*	background-color: rgba(42,40,61,0.68);	*/
}
.footer-inner{
	display:block;
	text-align: center;
    padding: 2% 0;
}
.footer-inner img {
	max-width: 300px;
    height: auto;
}
.footer-inner a {
	text-decoration: none;
}