@charset "utf-8";
html {
font-size: 62.5%;
line-height: 1.8;
}
html[lang="ja"] body, html[lang="ja"] button, html[lang="ja"] input, html[lang="ja"] select, html[lang="ja"] textarea {
font-family: YakuHanJP_Narrow, "游ゴシック Medium", "Yu Gothic Medium","游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", YuGothic,'Lato','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
font-weight:500;
}
body{
color:#000;
font-size: 1.4rem;
background:#fff;
-webkit-text-size-adjust: 100%;
}
.inter {
font-family: "Inter", YakuHanJP_Narrow, "游ゴシック Medium", "Yu Gothic Medium","游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", YuGothic,'Lato','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
font-weight: 400;
font-style: normal;
}
.inter.u-fwBold{
font-weight: 700;
}
.inter.u-fwExBold{
font-weight: 800;
}
.grecaptcha-badge {
visibility: hidden;
}
/*header*/
.header{
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 58px;
}
@media screen and (max-width:767px){
.header{
height:36px;
}
}
#index .header{
opacity: 0;
transition: all 0.8s ease 8s;
}
#index .header.animation{
opacity: 1;
}
.header .logo{
top:30px;
left: 50%;
transform: translate(-50%,0);
}
@media screen and (max-width:767px){
.header .logo{
top:15px;
}
}
.header .logo .icon-logo{
transition: all 0.8s ease;
}
.header.dark .logo .icon-logo{
color: #fff;
}
@media screen and (max-width:767px){
.header .logo .icon-logo{
font-size: 1.8rem;
}
}
.header .discription{
top:30px;
left: 5%;
transition: all 0.8s ease;
}
.header.dark .discription{
color: #fff;
}
.header .hNavi{
top:30px;
right:80px;
}
.header .hNavi .navi{
margin-right: 50px;
}
/* humbergerNavi */
.humbergerNavi{
z-index: 999;
}
a.c_nav-bt{
width:80px;
height:58px;
right:0;
top:10px;
z-index: 10000;
}
@media screen and (max-width:767px){
a.c_nav-bt{
width:50px;
height:36px;
top:7px;
}
}
#panel-btn-icon{
width:40px;
height: 2px;
background: #000;
position: absolute;
top: 50%;
left: 0;
transform: translate(0,-50%);
transition: all 0.3s ease;
}
@media screen and (max-width:767px){
#panel-btn-icon{
width:25px;
}
}
.header.dark #panel-btn-icon{
background: #fff;
}
.header .close #panel-btn-icon,
.header.dark .close #panel-btn-icon{
background: none !important;
}
#panel-btn-icon:before{
content: "";
position: absolute;
top: -10px;
left: 0;
width: 50px;
height: 2px;
background: #000;
transition: all 0.3s ease;
}
@media screen and (max-width:767px){
#panel-btn-icon:before{
width: 30px;
top: -8px;
}
}
.header.dark #panel-btn-icon:before{
background: #fff;
}
.header .close #panel-btn-icon:before,
.header.dark .close #panel-btn-icon:before{
top: 0;
width:40px;
background: #fff!important;
transform: rotate(-135deg);
}
@media screen and (max-width:767px){
.header .close #panel-btn-icon:before,
.header.dark .close #panel-btn-icon:before{
width: 30px;
}
}
#panel-btn-icon:after{
content: "";
position: absolute;
top: 10px;
left: 0;
width: 30px;
height: 2px;
background: #000;
transition: all 0.3s ease;
}
@media screen and (max-width:767px){
#panel-btn-icon:after{
width: 20px;
top: 8px;
}
}
.header.dark #panel-btn-icon:after{
background: #fff;
}
.header .close #panel-btn-icon:after,
.header.dark .close #panel-btn-icon:after{
top: 0;
width:40px;
background: #fff!important;
transform: rotate(135deg);
}
@media screen and (max-width:767px){
.header .close #panel-btn-icon:after,
.header.dark .close #panel-btn-icon:after{
width: 30px;
}
}
/*accordion*/
div.accordion{
display: none;
overflow-y: scroll;
top: 0;
right: 0;
bottom:0;
z-index: 9999;
padding: 0 0 0 10px;
width:100vw;
height:auto;
min-height:100vh;
}
div.accordion .accordionLogo{
top: 50px;
left: 5%;
}
@media screen and (max-width:767px){
div.accordion .accordionLogo{
position: static;
width: 100%;
padding: 0 5%;
}
div.accordion .accordionLogo .normalBlock{
margin-bottom: 5px;
}
div.accordion .accordionLogo .address{
padding: 30px 0;
}
}
div.accordion .copy{
bottom: 20px;
left: 5%;
}
div.accordion .privacy{
bottom: 50px;
left: 5%;
}
@media screen and (max-width:767px){
div.accordion .privacy{
position: static;
width: 100%;
padding: 0 5% 50px;
}
}
.accordionInbox{
width:100vw;
height:auto;
min-height:100vh;
box-sizing: border-box;
}
@media screen and (max-width:767px){
.accordionInbox{
padding-top: 40px;
}
}
@media screen and (max-width:767px){
.accordionInbox{
width: 100%;
display: block;
}
}
.accordionInbox .areaInner{
max-width: 800px;
}
@media screen and (max-width:767px){
.accordionInbox .areaInner{
width: 100%;
}
}
.accordionInner{
position: absolute;
top: 50%;
left: 0;
width: 100%;
transform: translate(0,-50%);
}
@media screen and (max-height:560px){
.accordionInner{
padding: 80px 0 0;
}
}
@media screen and (max-width:767px){
.accordionInner{
position: static;
padding: 60px 0 20px !important;
transform: translate(0,0);
}
}
.accordionInner .navi{
width: 50%;
}
@media screen and (max-width:767px){
.accordionInner .navi{
width:100%;
margin-bottom: 0;
}
.accordionInner .navi a{
padding: 10px 5%;
border-bottom: 1px solid #fff;
width: 90%;
}
.accordionInner .navi.insta a{
border: none;
padding: 30px 5%;
}
}
@media screen and (max-width:767px){
.accordionInner .navi .en{
font-size: 2rem;
}
}
.footerUpper.grid{
padding: 30px 0 0;
height: 0;
}
#page .footerUpper.grid{
padding:20px 0 0;
height:auto;
}
@media screen and (max-width:767px){
.footerUpper.grid{
padding: 15px 0 0;
}
}
#footer{
padding: 70px 5% 30px;
}
@media screen and (max-width:767px){
#footer{
padding: 30px 5% 15px;
}
#footer .logo{
margin-bottom: 30px;
}
}
@media screen and (max-width:767px){
#footer .addressOuter{
margin-bottom: 20px;
}
}
#footer .address:first-child{
margin-right: 100px;
}
@media screen and (max-width:980px){
#footer .address:first-child{
margin-right: 0;
}
#footer .address{
width: 100%;
margin-bottom: 40px;
}
}
@media screen and (max-width:767px){
#footer .address{
margin-bottom: 30px;
}
#footer .address .inter{
font-size: 1.2rem;
margin-bottom: 10px;
}
#footer .address .fs-13{
font-size: 1.2rem;
}
}
#footer .fNavi{
top: 70px;
right: 5%;
}
@media screen and (max-width:767px){
#footer .fNavi{
position: static;
margin-bottom: 40px;
}
}
#footer .fNavi .navi{
margin-left: 30px;
}
@media screen and (max-width:767px){
#footer .fNavi .navi{
width: 50%;
margin-left: 0;
margin-bottom: 10px;
}
}
@media screen and (max-width:767px){
#footer .copy{
text-align: left;
}
}