@charset "utf-8";
/*--基本--*/
:root{
	--font-size:16px;
	--max-width:1200px;
	--color: #633740;/*文字色*/
	--color-hover: red;/*マウスオーバー時の文字色・色を変えない場合は「color」と同値にする*/
    --lang-active: red;
	--background: #fff;/*背景*/
    --spec-border: #000;
    --btn-hover:linear-gradient(45deg, rgba(255, 253, 229, 1) 0%, rgba(255, 216, 238, 1) 100%);/*ボタンの色:hover*/
    --btn-color:#D54493;/*ボタンの文字色*/
    --btn-color-hover:#D54493;/*ボタンの文字色:hover*/
    --btn-max-w: 500px;/*ボタンの最大幅*/
    --border-radiue:100px;/*ボタンの角R。角Rにしない時は0・可愛くしたい時は100*/
    --slider-btn: #D54493;/*スライダー矢印*/
    --slider-page: #D54493;/*スライダーページネーション*/
}

@media screen and (max-width: 1200px){
	:root{
        --font-size:14px;
    }
}

@media screen and (max-width: 768px){
	:root{
        --font-size:12px;
    }
}

/*---------
　Font
---------*/
/*Noto Sans Japanese・Noto Serif Japanese以外はここに記載。**/


/*-----------
header
-----------*/
header .inner{align-items:flex-start; }

header .language{ display: flex; flex-direction: column; align-items: center;  }
header .language li{line-height: 1; padding: 1em 0;}
header .language li a{display: block; color: #FFF; transition: all 0.7s ease-out;}
header .language li.active a{ text-decoration: underline; } 
header .language li a:hover{color: #F7E0E8;text-decoration: none;}
header .language li:first-of-type { 
    width: 24px;
    height: 24px;
    background: url(../images/commone/icon_lang.png) 0 0 no-repeat;
    background-size: 100% auto;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}
header .language li:last-of-type a{border: none; padding-right: 0;}

.menu_sp{display: none;}


.fabs { text-align: center; transition: all 0.7s ease-out; display: block;}
.fabs p { color: #FFF; transition: all 0.7s ease-out;}
.fab {display: block; width: 22px; height: 22px;border-radius: 50%;text-align: center; color: white; margin: 2em auto 0 auto;}

.btn_nav {
    display: none;
}


header #tool.change .language li a{color: #CB3B66;}
header #tool.change .language li:first-of-type { 
    background: url(../images/commone/icon_lang_p.png) 0 0 no-repeat;
    background-size: 100% auto;
    transition: all 0.7s ease-out;
}
header .fabs.none { opacity: 0; }

.fade-blur {
  opacity: 0;
  filter: blur(1em);
  transform: translateY(3px);
  scale: 1.1;
  transition: opacity 1s ease, transform 1s ease, filter 1.2s ease;
}

.fade-blur.visible {
  opacity: 1;
   scale: 1;
  filter: blur(0);
  transform: translateY(0);
}


@media screen and (max-width: 768px){
    /*カスタム*/
    header.flex{padding-right: 1%;}
    .btn_nav{display: flex; width: 40px; height: 40px; margin-left: auto; z-index: 200; padding: 5px; justify-content: center; align-items: center; z-index: 9999; position: relative;}
    .btn_nav:hover{cursor: pointer;}
    .btn_nav span{width: 80%; height: 2px; background: #CB3B66; display: flex; position: relative; align-items: center;} 
    .btn_nav span::before,
    .btn_nav span::after{content: "";display: block; width: 100%; height: 2px;background: #CB3B66;position: absolute;transition: all 0.2s linear;}
    .btn_nav span::before{top: -8px;}
    .btn_nav span::after{bottom: -8px;}
    /* .btn_nav.active{filter: drop-shadow(0 0 2px #fff);} */
    .btn_nav.active span::before{transform: rotate(-45deg);top: calc(50% - 1px);transition: all 0.2s linear; background: #FFF;}
    .btn_nav.active span::after{transform: rotate(45deg);bottom: calc(50% - 1px);transition: all 0.2s linear; background: #FFF;}
    .btn_nav.active span{background:none;}
    
    .menu_sp{background: #cb3b66dc; width: 100%; height: 200px; position: absolute; top: -200px; left: 0; transition: all 0.2s linear; display: block;}
    .menu_sp.active{top: 0;transition: all 0.2s linear;}
    
    .menu_sp .language_sp{margin-top: 50px; text-align: center; flex-wrap: wrap;justify-content: center;}
    .menu_sp .language_sp li{padding: 0 2em; border: 1px #fff solid; border-width: 0 1px 0 0;line-height: 1;}
    .menu_sp .language_sp li a{color: #fff;}
    .menu_sp .language_sp li:first-child{width: 100%; margin-bottom: 1em;border: none; color: #fff;}
    .menu_sp .language_sp li:last-child{border-right: none;}
    .menu_sp .language_sp li.active a{color: #fff; text-decoration: underline;}
    
    
    .fabs_sp{margin-top: 2em; justify-content: center;}
    .fabs_sp p{width: 100%; text-align: center;color: #fff; margin: 0 0 10px 0;}
    .fabs_sp a{width: 28px; margin: .5em .5em 0; line-height: 1;}
    .fabs_sp .fab{opacity: 1; margin: 0 .5em;}
    
    header .language,
    .fabs{display: none;}
}