@charset "UTF-8";

/*-- 雲上閣 common.css --*/

/* reset */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
body {
	color: #444; min-width: 320px; line-height:1;
	font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	-webkit-text-size-adjust: 100%;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}
ol,ul {
	list-style:none;
}
blockquote, q {
    quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}
a,
botton {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    outline: none;
}
del {
    text-decoration: line-through;
}
abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
input, select {
    vertical-align:middle;
}
img {
	max-width: 100%;
}	
*:focus {
    outline: none;
}

/* layout */

.wrap { 
	width: 1320px; 
	margin: 0 auto;
}
.wrap_wide { 
	width: 1440px; 
	margin: 0 auto;
}
.wrap:after, 
.wrap_wide:after, 
.clearfix:after { 
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
	clear: both;
}
.pc {
    display: block!important;
}
.sp {
    display: none!important;
}

@media screen and (max-width: 1460px){
    .wrap_wide { 
        width: auto; 
    }
}
@media screen and (max-width: 1360px){
    .wrap { 
        width: calc(100% - 40px); 
        padding: 0 20px;
    }
}
@media screen and (max-width: 999px){
    .wrap { 
        padding: 0 15px;
    }
}
@media screen and (max-width: 767px){
    .pc {
        display: none!important;
    }
    .sp {
        display: block!important;
    }
}

/* header */

header .logo {
	width: 144px;
    float: left;
	margin: 40px 0;
}
header .wrap {
    position: relative;
}
header nav {
    position: relative;
    float: right;
	width: calc(100% - 210px);
}
header nav ul li {
	font-size: 1rem;
	font-weight: bold;
}
header nav ul li a {
	display: block;
	padding: 10px 0;
	color: #3a3230;
	text-decoration: none;
}
header nav ul li a:hover,
header nav ul li.current a {
	border-bottom: 2px solid #f2c028;
}
header nav ul.menu {
    position: absolute;
    top: 69px;
    left: 0;
	width: 100%;
    border-top: 1px solid #f0ebe7;
    text-align: center;
}
header nav ul.menu li {
    display: inline-block;
    margin: 0 20px;
}
header nav ul.menu li a {
	padding: 39px 0;
}
header nav ul.sns {
    position: absolute;
    top: 15px;
    right: 0;
	width: 60px;
    display: flex;
    justify-content: space-between;
}
header nav ul.sns li {
	width: 18px;
	margin-top: -1px;
	line-height: 0;
}

.nav_sp_logo {
	display: none;
}

@media screen and (max-width: 1360px){
	
	header .logo {
		width: 120px;
	}
	header nav {
    	width: calc(100% - 180px);
	}
	header nav ul.menu li {
		font-size: 14px;
	}
    header nav ul.menu {
        top: 65px;
    }
    header nav ul.menu li {
        margin: 0 15px;
    }
    header nav ul.menu li a {
        padding: 35px 0;
    }
    header nav ul.sns {
        top: 11px;
    }	
}
@media screen and (max-width: 999px){
	
	header .logo {
		width: 96px;
		margin: 30px 0;
	}
	header nav {
		width: calc(100% - 120px);
	}
    header nav ul.menu {
        top: 55px;
    }
    header nav ul.menu li {
        margin: 0 1.2vw;
		font-size: 12px;
    }
    header nav ul.menu li a {
        padding: 24px 0;
    }
    header nav ul.sns {
	    width: 50px;
        top: 6px;
    }
}
@media screen and (max-width: 767px){

	header .logo {
		width: 96px;
		margin: 15px 0;
	}
	header .nav_sp_logo {
		display: block;
		width: 96px;
		margin: 15px 20px;
	}
	header nav {
		display: block;
		width: auto;
		float: none;
		margin: 20px 0 0;
	}
	header nav ul.menu,
	header nav ul.sns {
        position: relative;
		display: block;
		width: auto;
		text-align: center;
	}
    header nav ul.menu {
        top: 0;
        border-top: none;
        text-align: center;
    }
    header nav ul.menu li {
        display: block;
        margin: auto;
		font-size: 18px;
    }
    header nav ul.menu li a {
        padding: 15px 0;
    }
    header nav ul.sns {
        margin-top: 20px;
    }
	header nav ul.sns li {
		display: inline-block;
		margin: 10px 15px;
	}
	header nav ul li a {
		padding: 15px 0;
	}
	header nav ul li a:hover,
	header nav ul li.current a {
		border-bottom: none;
	}
	header nav ul.sns li {
		margin-top: 0;
	}

}

/* lang_btn */

header .lang_btn,
header .lang_close {
    display: none;
}
header ul.lang {
    position: absolute;
    top: 17px;
    right: 125px;
	width: 270px;
    display: flex;
    justify-content: space-between;
}
header ul.lang li {
    font-size: 13px;
	font-weight: bold;
}
header ul.lang li a {
	display: block;
	padding: 10px 0;
	color: #3a3230;
	text-decoration: none;
}
header ul.lang li a:hover,
header ul.lang li.current a {
	border-bottom: 2px solid #f2c028;
}

@media screen and (max-width: 1360px){
    header ul.lang {
        top: 12px;
    }
}
@media screen and (max-width: 999px){	
    header ul.lang {
        top: 8px;
        right: 100px;
        width: 240px;
    }
    header ul.lang li {
        font-size: 12px;
    }
}
@media screen and (max-width: 767px){

    header .lang_btn {
        display: block;
        position: absolute;
        top: 30px;
        right: 23%;
        z-index: 999;
        padding: 6px 0 6px 30px;
        background: url("/common/images/icon_lang.png") left center no-repeat;
        background-size: 24px 24px;
        cursor: pointer;
    }
    header .lang_btn:hover,
    header .lang_btn.active {
    	border-bottom: 2px solid #f2c028;
    }
    header ul.lang {
		display: none;
        position: absolute;
        z-index: 2000;
        top: 88px;
        right: -5px;
        width: calc(100% + 10px);
        padding: 50px 0;
        color: #fff;
        text-align: center;
        background: #473e35;
    }
	header ul.lang li {
		display: block;        
        right: auto;
        width: auto;
		margin: 0;
	}
    header ul.lang li a {
        padding: 15px 0;
        color: #fff;
        font-size: 18px;
    }
    header ul.lang li a:hover,
    header ul.lang li.current a {
        border-bottom: none;
    }
    header .lang_close {
        display: inline-block;
        margin: 15px 0 0;
        padding: 15px 0;
        cursor: pointer;
    }
    header .lang_close span {
        position: relative;
        top: 6px;
        margin: 0 0 0 1rem;
        font-size: 32px;
    }
    #lang_oly {
        display: none;
        position: fixed;
        z-index: 1000;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .oly {
        position: fixed;
        top: 90px;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.6);
    }
    .lang_html, body {
        overflow: auto;
        height: 100%;
    }
	.scrollstop {
        overflow: hidden;
	}    
}

/* lang_change */

.lang_change {
    background: #f2f2f2;
    padding: 10px;
}
.lang_change p {
    display: block;
    font-size: 1rem;
    line-height: 1.4;
    text-align: center;
}
html[lang=ja] .hide_if_ja,
html[lang=en] .hide_if_en,
html[lang=zh-Hant] .hide_if_zh,
html[lang=th] .hide_if_th {
    display: none!important;
}

@media screen and (max-width: 1024px){
    .lang_change p {
        font-size: 1.33vw;
    }
}
@media screen and (max-width: 767px) {
    .lang_change {
        padding: 10px 20px;
    }
    .lang_change p {
        font-size: .75rem;
        text-align: left;
    }
}

/* nav */

#nav_btn {
	display: none;
}

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

	#nav_btn {
		display: block;
		position: absolute;
		top: 35px;
		right: 18px;
		z-index: 999;
		color: #3a3230;
		cursor: pointer;
	}
	.nav_btn_bar,
	.nav_btn_bar span {
		display: inline-block;
		transition: all .4s;
	}
	.nav_btn_bar {
		position: relative;
		width: 28px;
		height: 19px;
	}
	.nav_btn_bar span {
		position: absolute;
		right: 0;
		width: 100%;
		height: 2px;
		background-color: #3a3230;
		border-radius: 4px;
	}
	.nav_btn_bar.active {
		position: fixed;
		right: 15px;
	}
	.nav_btn_bar span:nth-of-type(1) {
		top: 0;
	}
	.nav_btn_bar span:nth-of-type(2) {
		top: 8px;
	}
	.nav_btn_bar span:nth-of-type(2)::after {
		position: absolute;
		top: 0;
		right: 0;
		content: '';
		width: 100%;
		height: 2px;
		background-color: #3a3230;
		border-radius: 4px;
		transition: all .4s;
	}
	.nav_btn_bar span:nth-of-type(3) {
		bottom: 0;
	}
	.nav_btn_bar.active span:nth-of-type(1) {
		transform: translateY(8px) scale(0);
	}
	.nav_btn_bar.active span:nth-of-type(2) {
		width: 100%;
		transform: rotate(-45deg);
	}
	.nav_btn_bar.active span:nth-of-type(2)::after {
		transform: rotate(90deg);
	}
	.nav_btn_bar.active span:nth-of-type(3) {
		transform: translateY(-8px) scale(0);
	}
	.toggle_area {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 99;
		padding: 0;
		background: rgba(255, 255, 255, 0.98);
		overflow: scroll;
	}
	.hide {
		opacity: 0;
		visibility: hidden;
		overflow: hidden;
	}
	.animation {
	  	transition-property: opacity, visibility;
		transition-duration: .3s;
		transition-timing-function: ease-in;
	}
    .nav_html {
        overflow: auto;
        height: 100%;
    }
	.no-scroll {
		overflow: hidden;
	}    
}

/* main */

main {
	display: block;
}
main a {
    text-decoration: none;
}

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

}

/* footer */

.pagetop a {
	display: none;
}

footer {
	border-top: 1px solid #3a3230;
	padding: 50px 0 0;
}
footer a {
	color: #3a3230;
	text-decoration: none;
}
footer a:hover {
	color: #666;
	text-decoration: underline;
}
.f_nav,
.copyright {
	width: 480px;
}
.f_nav {
	float: right;
	text-align: right;
}
.f_nav ul li {
	display: inline;
	font-size: .875rem;
	margin-left: 30px;
	letter-spacing: 1px;
}
.f_address {
	width: calc(100% - 480px);
	float: left;
}
.f_address .logo {
	width: 128px;
	float: left;
	padding: 0 30px 30px 0;
}
.f_address h2 {
	margin: 2px 0 13px;
	font-size: .8125rem;
	font-weight: normal;
	letter-spacing: 3px;
}
.f_address p {
	padding: 0 0 13px;
	font-size: .8125rem;
	letter-spacing: 2px;
}
.f_address p .icon_map,
.f_address p .icon_tel {
	position: relative;
	top: 3px;
	width: 13px;
	z-index: 1;
	margin-right: 5px;
}
.f_address p .icon_tel {
	top: 1px;
}
.copyright {
	margin: 40px 0 0;
	float: right;
	font-size: .8125rem;
	text-align: right;
}
.f_logo {
    margin: 20px 0 50px;
    text-align: center;
}
.f_logo img {
    width: 154px;
}

@media screen and (max-width: 1099px){
	.f_nav,
	.copyright {
		width: 400px;
	}
	.f_nav ul li {
		font-size: .75rem;
		margin-left: 20px;
	}
	.f_address {
		width: calc(100% - 400px);
		float: left;
	}

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

	footer {
		padding: 40px 0 20px;
	}
	.f_nav,
	.copyright {
		width: 340px;
	}
	.f_nav ul li {
		font-size: .625rem;
		margin-left: 10px;
	}
	.f_address {
		width: calc(100% - 340px);
	}
	.f_address .logo {
		width: 80px;
		padding: 0 20px 20px 0;
	}
	.f_address h2 {
		margin: 0 0 5px;
		font-size: .6785rem;
		letter-spacing: 0;
	}
	.f_address p {
		padding: 0 0 5px;
		font-size: .6785rem;
		letter-spacing: 0;
	}
	.copyright {
		margin: 20px 0 0;
		font-size: .6785rem;
	}
    .f_logo {
        margin: 20px 0;
    }
    .f_logo img {
        width: 177px;
    }

}
@media screen and (max-width: 767px){
	
	footer {
		padding: 30px 0;
	}
	.pagetop a {
		display: block;
		position: relative;
		margin: 20px 0;
		padding: 20px;
        text-align: center;
	}
	.pagetop a::after {
		display: block;
		content: "";
		position: absolute;
		top: 0;
		left: calc(50% - 7px);
		width: 15px;
		height: 15px;
		border-top: solid 2px #3a3230;
		border-right: solid 2px #3a3230;
		transform: rotate(-45deg);
	}
	.f_nav,
	.copyright {
		width: 100%;
	}
	.f_nav {
		float: none;
		text-align: center;
	}
	.f_nav ul li {
		display: block;
		font-size: .875rem;
		margin-left: 0;
	}
	.f_nav ul li a {
		display: block;
		padding: 15px 0;
	}
	.f_address {
		width: 100%;
		float: none;
	}
	.f_address .logo {
		width: 128px;
		float: none;
		margin: 40px auto;
		padding: 0;
	}
	.f_address h2 {
		margin: 2px 0 13px;
		font-size: .8125rem;
		text-align: center;
		letter-spacing: 2px;
	}
	.f_address p {
		padding: 0 0 13px;
		font-size: .8125rem;
		text-align: center;
		letter-spacing: 1px;
	}
	.f_address p span {
		display: block;
	}
	.f_address p span::before {
		content: "\A";
		white-space: pre;
	}
	.copyright {
		margin: 30px 0 0;
		float: none;
		font-size: .6875rem;
		text-align: center;
	}
    .f_logo {
        margin: 40px 0 20px;
    }
    .f_logo img {
        width: 177px;
    }

}
@media screen and (max-width: 399px){
	.copyright {
		font-size: .625rem;
	}
    .f_logo img {
        width: 141.6px;
    }
}