@charset "utf-8";


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

loading

**************************************************/
#loading{width: 100%; height: 100%; display: none; position: fixed; right: 0; top: 0;  z-index: 99999; }

@media screen and (min-width: 901px) {
}

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

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

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

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

/**/
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

ナビゲーション

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

/* header ////////////////////////////////////////////////////////////////////////////////////////////*/
#header-wrapper{width:auto;display: block;margin: 0;position: relative;z-index: 1;}
#header-wrapper .tel{ width:300px; height: 32px; display: block; position: absolute; right: 0; top: calc(6.25vw / 2); line-height: 0;}
#header-wrapper .tel img{width: auto; height: auto;}
#drowerWrap{ width: calc(6.25vw * 2); display: block; position: fixed; left: 6.25vw; top: 50%; transform: translateY(-50%);     min-width: 8em;}
#drowerWrap .navA a{display: block;text-align: left;padding-left: 0;position: relative;}
#drowerWrap .navA a::before{content:"";width: 10px;height: 1px;display: block;background: #ffe228;position: absolute;left: -30px;top: 50%;}


@media screen and (min-width: 901px) {
}

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

@media screen and (max-width: 1140px){
    #drowerWrap .navA a{font-size: 0.8rem;}
}

@media screen and (max-width: 900px){
    #header-wrapper{z-index: 1000;}
    #drowerWrap{display: none;}
    #header-wrapper .tel{width:200px; height: 21px; top:calc(2.5vw + 40px); transform: translateY(-50%);}
}

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


/* globalNav ////////////////////////////////////////////////////////////////////////////////////////////*/
.drowerset #drowerWrap{width: 66.666%;height: 100%;position: fixed;left: 0;top: 0; transform: none;}
.drowerset #drowerWrap::after{content:""; background:#ffe228; width: 100%; height: 100%; display:flex; position: absolute; left: 0; top: 0;} 
.drowerset #drowerWrap .navA{position: relative; display: inline-block; margin: auto; z-index: 1; width: calc(100% - 12.5vw);}
.drowerset #drowerWrap .navA ul li a{ font-size: 1.25em; padding:0.5em 0;}
.drowerset #drowerWrap.view{}

.drowerset #drowerWrap{ display: none;  opacity: 0;}
.drowerset.open #drowerWrap{display: flex;}

.drowerset #drowerWrap .navA{opacity: 0; transform: translateY(10px); transition:all 0.3s ease;}
.drowerset #drowerWrap.view .navA{opacity: 1; transform: translateY(0);   transition:all 0.3s ease;}
    

@media screen and (min-width: 901px) {
}

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

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

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

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


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

ハンバーガーボタン

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#btn_gNavi{width: 80px;height: 80px;display: block;border-radius: 50%;background: #1f2774;left: 2.5vw;top: 2.5vw;position: fixed;display: none;border: 1px solid #1f2774;z-index: 1;}
#btn_gNavi span{width: 30px;height: 20px;display: block;margin: 0 auto;position: relative;top: 50%;transform: translateY(-50%);}
#btn_gNavi span::before{content: "";width: 100%;height: 1px;display: block;background: #fff;position: absolute;top: 5px;left: 0;transform: translateX(0%) translateY(0%) rotate(0deg);transition: 0.3s ease;}
#btn_gNavi span::after{content: "";width: 100%;height: 1px;display: block;background: #fff;position: absolute;bottom: 5px;left: 0;transform: translateX(0%) translateY(0%) rotate(0deg);transition: 0.3s ease;}

@media screen and (min-width: 901px) {
}

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

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

@media screen and (max-width: 900px){
	#btn_gNavi{display: block;}
	.drowerset.open #btn_gNavi{background: #fff;z-index: 1;}
	.drowerset.open #btn_gNavi span::before{top: 50%; left: -50%; transform: translateX(50%) translateY(-50%) rotate(-45deg); background: #000;}
	.drowerset.open #btn_gNavi span::after{bottom: 50%; left: 50%; transform: translateX(-50%) translateY(50%) rotate(45deg); background: #000;}
}

@media screen and (max-width: 600px){
	#btn_gNavi{width: 60px; height: 60px;}
	#btn_gNavi{right: 5vw;}
	#btn_gNavi span::before{height: 1px;}
	#btn_gNavi span::after{height: 1px;}
}



/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

common

**************************************************/
.marker{position: relative;}
.marker::after{content:"";width: 110%;height: 60%;background:#ffe228;display: block;position: absolute;left: -5%;bottom: -20%;z-index: 0;}
.marker > *{position: relative; z-index: 1;}
.title{writing-mode: vertical-rl;font-size: 30px;display: block;font-weight: bold;padding-top: 75px;position: absolute;right:6.25vw;top: 5vw;}
.title .icon{width:60px; height: 60px; position: absolute; left: 50%; top: 0; transform: translateX(-50%);}
.title-eng{height: 7vw; margin-bottom: 1vw;}
.kadomaru img{border-radius: 300px;}
.circle-img img{border-radius: 45%;}

@media screen and (min-width: 901px) {
}

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

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

@media screen and (max-width: 900px){
    .title .icon{width:40px; height: 40px; }
    .title{font-size: 20px; right: 0; padding-top: 55px; transform: translateX(50%);}
}

@media screen and (max-width: 600px){
    .title-eng{height: 12vw; margin-bottom:2.5vw;}
    .title{writing-mode:revert; font-size: 1.3rem; padding-top: 0; position:relative; right:inherit; top:inherit; line-height: 30px; transform: none; margin-bottom: 10vw;}
.title .icon{width:30px; height: 30px; position: relative; left:inherit; top:inherit; transform:none; display: inline-block; margin-right: 0.5em;}
}


/*/////////////////////////////////////////////////////////////////////////

footer

////////////////////////////////////////////////////////////////////////*/
#footer-wrapper { padding-bottom: 10vw; font-size: 0.8rem; display: block;}
.footer-copyright{text-align: center;font-size: 0.8rem;display: block;line-height: 0;}
.footer-copyright small{padding-bottom: 10px; display: block;}
.footer-copyright img{width:auto; height: 13px;}

@media screen and (min-width: 901px) {
}

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

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

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

@media screen and (max-width: 600px){
    .footer-copyright small{font-size: 0.75em;}
}