/*-----------
reset
-----------*/
* {margin: 0;padding: 0;}

.cf { zoom: 1; }
.cf:before,.cf:after { content: ""; display: table;}
.cf:after { clear: both;}

img {height: auto;}

/*-----------
commone
-----------*/
.left{float: left;}
.right{float: right;}
.listL li{float: left;}

.sp{display: none;}

header,article,#top{width: 100%; min-width: 1200px; overflow: hidden; position: relative;}
article{background: url(../images/bg_cnt.jpg); background-size: contain;}
section{margin-top: 350px;background: url(../images/bg.gif) repeat-y center top #fff; background-size:cover, contain;}
section#viewer{background-image:url(../images/bg_viewer.png),url(../images/bg.gif); background-size:contain;}
.inner{width: 1200px; margin: 0 auto; position: relative;}
section .inner{padding: 50px 0 60px;}
section p{padding: 0 35px;}

@media screen and (max-width: 767px){
	.pc{display: none;}
	.sp{display: block;}
	img{width: 100%;}
	
	header,article,#top{min-width: 100%;}
	article{background-size: 200% auto; background-position: center 0;}
	section{margin-top: 100px}
	.inner{width: 95%; margin: 0 auto;}
	section p{padding: 0 5%;}
}
/*-----------
body
-----------*/
body{position: relative; color: #a2a5a2; font-size: 18px; width: 100%; min-width: 1200px;}
@media screen and ( max-width:767px) {
	body{width: 100%; min-width: 100%; font-size: 16px;}
}

/*-----------
header & top
-----------*/
#top{background: url(../images/bg_top.png) no-repeat #fff top center; position: relative;}
header{position: absolute; overflow:initial;z-index: 10;}
header .inner{width: 98%;}
header .inner,header .inner .inner_box{display: flex;}
header .inner{justify-content: space-between;}
header .inner .inner_box{justify-content: flex-end;}

h1{font-size: 0.7em; color: #b0a670; font-weight: normal;}
h3{margin: 0 auto;}
.btn_reserve_top{padding-top:10px;}

.social,.language{position: relative; overflow: visible;margin-left: 10px;}
.social::after,.language::after{content: ""; display: block; position: absolute; bottom: -15px; left: 0; background: url(../images/icon_img.png) no-repeat; width: 40px; height:15px;}
.social li/*,.language li*/{ margin: 0; line-height: 0;}


.social,.language{position: relative; overflow: visible;margin-left: 10px; background:linear-gradient(#cde8dc, #99d0b8);}
.language{height: 47px;transition: all 0.2s linear;}
.social{height: 71px}

.language .lang_btn{width: 30px; padding: 6px 5px 0; line-height: 1.6em; position: relative; z-index: 10;}
.language .lang_btn:hover{cursor:pointer}
.language li:not(.lang_btn){text-align: center; position: relative; z-index: 1;}
.language li a{color:#FFFFFF; text-decoration: none; width: 80%; margin: 0 auto; border-top: 1px solid #fff; padding: 9px 0 10px;font-size: 0.9em;display: block;line-height: 1em; transition: all 0.2s linear;}
.language li.lang_top{transition: all 0.2s linear;}
.language .lang_select {display:none;}



.top_main .img_top{width: 720px; margin: 0 auto; display: block;}
.top_main h2{width: 749px; margin: -200px auto 0; padding-bottom: 50px}
.top_main h2.en{width: 873px;}
@media screen and ( max-width:767px) {
	#top{background-size: cover;}
	header { position: relative;}
	header .inner{width: 95%; padding: 0 2.5%; position: relative; z-index: 5; background: linear-gradient(#99d0b8, #cde8dc);}
	h1{color: #fff; padding-top: 5px; margin: 0;}
	
	.social,.btn_reserve_top,.language{display: none;}
	
	.top_main{padding-top: 5px;}
	.top_main h2,.top_main h2.en{width: 100%; margin: -20% auto 0; padding-bottom: 5%;}
	.top_main .btn_reserve_top{display: block; width: 80%; margin: -5% auto 0;}
	.language_sp{width: 40px; padding-top: 5px;}
	.sp .sosial_sp{display: flex; justify-content: space-between; width: 30%; margin: 0 auto;}
	.sp .sosial_sp li{width: 45%;}
	
	.language_sp_cnt{display: block; background:linear-gradient(#a3c3b5, #aedac6);color: #fff; text-align: center;padding: 10px 0 5px;
    height: 23px; margin-top: -38px; z-index: 1; position: relative; transition: all 0.2s linear;}
	.language_sp_cnt.active {margin-top: 0; transition: all 0.2s linear;}
	.language_sp_cnt p{line-height: 1em;}
	.language_sp_cnt a{color: #fff; transition-duration: none;}
	
}

/*-----------
 #txt
-----------*/
#txt h3.pc{position: absolute; top: 80px; left: 161px;}
#txt h3.pc.en{top: 67px;}
#txt .inner_box{width: 795px; margin-top: 151px;}
#txt .img_a{margin-left: -114px;}
#txt .img_b{margin:0 -78px 0 20px;  clear: both;}
#txt .inner_box .space {float: left; height: 150px}
#txt p.en{font-size: 0.8em;}

@media screen and ( max-width:767px) {
	#txt h3.sp{position: absolute; top: -5%;right: 7%;width: 20%;}
	#txt h3.sp.en{ top: 6%;right: auto;width: 111%;left: -11%;}
	#txt h3.sp img{width: 100%;}
	#txt .inner_box{width: 100%;margin: 15% auto 5%;position: relative;}
	#txt .inner_box.en{margin-top: 5%;}
	#txt .img_a{width: 88%; margin-left: -20%;}
	#txt .inner_box .space {float: left; height: 150px}
	#txt .inner_box .space {display: none;}
	#txt .img_b.right{display: none;}
	#txt p.en br{display: block;}
	
}

@media screen and ( max-width:600px) {
	#txt h3.sp{top: -3%;}
}
/*-----------
  comment
-----------*/
#comment h3 {width: 621px;}
#comment .img_a{margin-left: -40px;} 
#comment .img_b{margin-right: 20px;}
#comment .box_txt{width: 923px;}
#comment .box_txt_b{width: 662px;margin-top: 147px;}
#comment .inner_box{margin-top: 40px;}
#comment .inner_box:last-child{margin-top: 100px;}
.ttl_com_a{margin-left:-50px;}
.ttl_com_b{text-align: right; position: relative; left: 37px; /*right: -70px; margin-top: -20px*/}
.ttl_com_b.en{ margin-top: -28px}
#comment .work{font-size: 0.8em; margin-top: 10px;}
.txt_ill{margin-top: 20px; font-size: 0.8em;}
.txt_ill a{color: #91b2ad;}

@media screen and ( max-width:767px) {
	#comment h3 {width: 100%;}
	#comment .inner_box{margin-top: 4%;}
	#comment .img_a{ width: 70%;margin-left: 0;}
	#comment .img_b{width: 100%; margin-right: 0;margin-left: 0;} 
	#comment .box_txt,#comment .box_txt_b{width: 100%;}
	#comment .box_txt_b.zh{margin-top: 0;}
	
	#comment .inner_box:last-child{margin-top: 15%;}
	.ttl_com_a { width: 84%;margin: -26% 0 0 13%;}
	.ttl_com_a.en{width: 90%; margin: -13% 0 0 8%;}
	.ttl_com_b{width: 95%; text-align: left; right: auto; left: auto;margin-top: -47%; margin-left: 2%;}
	.ttl_com_b.zh{margin-top: 0;}
	.ttl_com_b.en{width: 91%; text-align: left; right: auto;  margin-top: -23%; margin-left: 2%;}
	.ttl_com_a + p{margin-top: 16%;}
	.ttl_com_a.en + p{margin-top: 7%;}
	.ttl_com_b + p{ margin-top: 5%;}
	.ttl_com_b.en + p{ margin-top: 2%;}
	#comment .img_b.right{float: none;}
}

/*-----------
  360°Viewer
-----------*/
#viewer h3 {width: 672px;}
#viewer p{font-size: 0.8em;text-align: center; margin-top: 10px;}
#viewer p.pc{display: block;}
#viewer p.sp{display: none;}

/* ROTATE */
#spinarea{width: 700px; margin: 0 auto;}
#spinner { position:relative; margin-bottom: 10px;}

.threesixty {position: absolute;margin:0 auto;top:0;cursor:move;cursor:grab;cursor:-moz-grab;cursor:-webkit-grab;z-index:5;}
.threesixty .threesixty_images {display:none;list-style:none;margin:0;padding:0}
.threesixty .threesixty_images img {position:absolute;top:0;width:100%;height:auto}
.threesixty .threesixty_images img.previous-image {visibility:hidden;width:0}
.threesixty .threesixty_images img.current-image {visibility:visible;width:100%;max-width: 642px;}
.threesixty .spinner {width:60px;display:block;margin:0 auto;height:30px;background:#333;background:rgba(0,0,0,0.7);-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;z-index:60;position:relative;}
.threesixty .spinner span {font-family:Arial,"MS Trebuchet",sans-serif;font-size:12px;font-weight:bolder;color:#FFF;text-align:center;line-height:30px;display:block;top:60px}


@media screen and ( max-width:767px) {
	#viewer h3 {width: 100%;}
	#viewer p.pc{display: none;}
	#viewer p.sp{display: block;}
	
	
	/* ROTATE */
	#spinarea{width: 100%; margin: 0 auto;}
	
}
/*----------- 
  process
-----------*/
#process h3.pc {width: 911px;}
.slider{width: 460px; margin: 0 auto; position: relative; box-shadow:0px 0px 7px 0px #94b1a9; border: 5px solid #fff;}
.thumb{position: relative;width: 400px;margin: 20px auto 0; padding-left: 21px}
.prev,.next,.prev_t,.next_t{position: absolute;width: 40px;height: 77px; left: -60px; top: 45%; top: calc(50% - 38px); z-index: 10;}
.next{left: auto; right: -60px;}
.prev_t{left: -39px}
.next_t{left: auto; right: -45px;}
#process .txt{text-align: center;margin-bottom: 10px;}

.slider li{position: relative;}
.slider li p{position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,0.5); color: #fff; padding: 5px; box-sizing: border-box; font-size: 0.8em; width: 100%;}

@media screen and ( max-width:767px) {
	#process h3.sp {width: 110%; margin-left: -5%;}
	#process .inner{width: 85%;}
	.slider {width: 94%; margin-top: 10px;}
	.thumb{padding-left: 0; width: 90%;}
	.prev,.next,.prev_t,.next_t{position: absolute;width: 30px;height: 67px; left: -14%; top: 45%; top: calc(50% - 30px); z-index: 10;}
	.next{right: -14%;left: auto; }
	.prev_t,.next_t{display: none!important;}
	#process .txt{padding: 0;}
}

/*-----------
  online
-----------*/
#online{margin-bottom: 200px;}
#online .inner{display: flex;}
#online .box_img,#online .box_txt{width: 50%; text-align: center;}
#online h3{margin: 20px auto 0;}
#online .txt{padding: 0; margin-top: 10px;}
#online .btn{margin: 20px auto 0;}
#online ul{margin-top: 20px; margin-left: 1em;}
#online li{font-size: 0.6em;}
#online li::before{content: "※";margin-left: -1em;}
#online.en li::before{content: "*";margin-left: -1em;}

@media screen and ( max-width:767px) {
	#online{margin-bottom: 100px;}
	#online .inner{display:block;}
	#online .box_img,#online .box_txt{width: 93%;margin: 0 auto;}
	#online li{text-align: left; font-size: 0.8em;}
}
/*-----------
footer
-----------*/
footer{position: relative; background: #add1c9; color: #fff; padding: 30px 0;}
footer .inner{display: flex; justify-content:space-between;}
footer .inner .inner_box{display: flex; justify-content: flex-start;}
footer .inner .inner_box p{margin-left: 20px;}
footer .inner .inner_box .copyright{font-size: 0.7em}
#social_buttons{display: flex; justify-content:flex-end;}
#social_buttons p{margin-right: 10px;}

@media screen and ( max-width:767px) {
	footer{min-width: 100%; padding: 5% 0 10%;}
	footer .inner{display: block;}
	footer .inner .inner_box{display: flex; flex-wrap: wrap; justify-content: center;}
	footer .inner .inner_box p{margin-left: 0}
	footer .inner_footer{ width: 100%;}
	footer .inner .inner_box p{width: 40%; max-width: 200px;}
	footer .inner .inner_box p + p{margin-top: -10px; margin-left: 20px;}
	footer .inner .inner_box p.copyright{width: 100%; margin: 0; max-width: 100%; text-align: center}
	footer .inner .inner_box p.copyright br{display: block;}
	
	#social_buttons{float: none; justify-content: space-between; width: 30%; margin: 5% auto 0;}
	#social_buttons p{margin-right: 0; width: 45%;}
}