@charset "UTF-8";
/**
 * サイト共通ヘッダーのスタイル。
 *
 * もともと各ページの本文に <style> で直書きされていたものを1本にまとめた。
 * マークアップは parts/header/header_contents.php。
 */

.fr-site-header,.fr-site-header *{box-sizing:border-box;}
.fr-site-header{width:100%;background:#333;color:#fff;border-bottom:1px solid rgba(0,0,0,.1);position:relative;z-index:9998;font-family:inherit;}
.fr-site-header__inner{height:73px;max-width:1400px;margin:0 auto;padding:0 48px;display:flex;align-items:center;gap:24px;}
.fr-site-header__logo{display:flex;align-items:center;text-decoration:none;line-height:1;flex:0 0 auto;}
.fr-site-header__logo img{display:block!important;width:200px!important;height:40px!important;object-fit:contain!important;max-width:200px!important;}
.fr-site-header__search,.fr-site-header__menuBtn{display:none;}
.fr-site-header__nav{margin-left:auto;display:flex;align-items:center;justify-content:flex-end;gap:0;white-space:nowrap;}
.fr-site-header__nav a{color:#fff!important;text-decoration:none!important;font-size:13px;padding:0 10px;height:72px;display:flex;align-items:center;position:relative;background:transparent!important;border:0!important;}
.fr-site-header__nav a:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:#00cf95;transform:scaleX(0);transition:transform .2s;}
.fr-site-header__nav a:hover:after,.fr-site-header__nav a.is-current:after{transform:scaleX(1);}
.fr-site-header__nav a.contact span{border:1px solid rgba(255,255,255,.75);border-radius:8px;padding:9px 13px;}
.fr-site-header__lang{position:relative;height:72px;display:flex;align-items:center;}
.fr-site-header__langBtn{appearance:none;-webkit-appearance:none;border:0;background:transparent!important;color:#fff!important;height:72px;padding:0 22px 0 10px;font:inherit;font-size:13px;line-height:1;cursor:pointer;position:relative;}
.fr-site-header__langBtn:after{content:"";position:absolute;right:8px;top:50%;width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-65%) rotate(45deg);}
.fr-site-header__langMenu{position:absolute;top:100%;right:0;min-width:150px;padding:6px 0;background:#333;border:1px solid rgba(255,255,255,.18);box-shadow:0 12px 24px rgba(0,0,0,.22);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s,transform .18s,visibility .18s;z-index:30;}
.fr-site-header__lang:hover .fr-site-header__langMenu,.fr-site-header__lang:focus-within .fr-site-header__langMenu,.fr-site-header__lang.is-open .fr-site-header__langMenu{opacity:1;visibility:visible;transform:translateY(0);}
.fr-site-header__nav .fr-site-header__langMenu a{display:block;height:auto;padding:11px 16px;color:#fff!important;font-size:13px;line-height:1.35;text-decoration:none;white-space:nowrap;}
.fr-site-header__nav .fr-site-header__langMenu a:after{display:none;}
.fr-course-breadcrumb{width:100%;background:#f7f7f7;border-bottom:1px solid #e5e5e5;}
.fr-course-breadcrumb ol{max-width:1200px;margin:0 auto;padding:9px 20px;list-style:none;display:flex;gap:8px;flex-wrap:wrap;font-size:12px;color:#666;}
.fr-course-breadcrumb a{color:#666;text-decoration:none;}
.lankame-fr-category-intro{max-width:1200px;margin:34px auto 0;padding:0 20px;box-sizing:border-box;color:#333;font-size:16px;line-height:1.8;}
@media screen and (max-width:1100px){
	.fr-site-header__inner{padding:0 24px;}
	.fr-site-header__nav a{font-size:12px;padding:0 7px;}
}
@media screen and (max-width:900px){
	html.lankame-mobile-menu-open,html.lankame-mobile-menu-open body{overflow:hidden!important;}
	.fr-site-header__inner{height:64px;padding:0 18px;justify-content:space-between;}
	.fr-site-header__search{display:block;width:31px;height:31px;border:3px solid #fff;border-radius:50%;position:relative;flex:0 0 auto;}
	.fr-site-header__search:after{content:"";position:absolute;width:15px;height:3px;background:#fff;right:-11px;bottom:-6px;transform:rotate(45deg);border-radius:2px;}
	.fr-site-header__logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
	.fr-site-header__logo img{width:178px!important;height:auto!important;max-width:178px!important;}
	.fr-site-header__menuBtn{display:flex;width:44px;height:44px;align-items:center;justify-content:center;flex-direction:column;gap:7px;background:transparent!important;border:0!important;padding:0;position:relative;z-index:10002;box-shadow:none!important;}
	.fr-site-header__menuBtn span{display:block;width:33px;height:3px;background:#fff;border-radius:2px;transition:transform .2s,opacity .2s;}
	.fr-site-header.is-menu-open .fr-site-header__menuBtn span:nth-child(1){transform:translateY(10px) rotate(45deg);}
	.fr-site-header.is-menu-open .fr-site-header__menuBtn span:nth-child(2){opacity:0;}
	.fr-site-header.is-menu-open .fr-site-header__menuBtn span:nth-child(3){transform:translateY(-10px) rotate(-45deg);}
	.fr-site-header__nav{position:fixed;top:0;right:0;width:86vw;max-width:390px;height:100vh;overflow:auto;background:#fff;display:block;margin:0;padding:86px 24px 28px;transform:translateX(105%);transition:transform .25s ease;box-shadow:-16px 0 28px rgba(0,0,0,.22);z-index:10001;white-space:normal;}
	.fr-site-header.is-menu-open .fr-site-header__nav{transform:translateX(0);}
	.fr-site-header__nav:before{content:"MENU";display:block;background:#00cf95;color:#fff;font-size:20px;font-weight:800;letter-spacing:.05em;padding:15px 18px;margin:0 0 16px;}
	.fr-site-header__nav a{display:block!important;height:auto!important;color:#333!important;font-size:18px!important;line-height:1.4!important;padding:14px 8px!important;border-bottom:1px solid #e5e5e5!important;}
	.fr-site-header__nav a:after{display:none!important;}
	.fr-site-header__nav a.contact span{border:0;padding:0;}
	.fr-site-header__lang{display:block;height:auto;}
	.fr-site-header__langBtn{display:block;width:100%;height:auto;color:#333!important;text-align:left;font-size:18px;padding:14px 8px;border-bottom:1px solid #e5e5e5;background:#fff!important;}
	.fr-site-header__langMenu{position:static;opacity:1;visibility:visible;transform:none;background:#fff;border:0;box-shadow:none;padding:0 0 0 18px;}
	.fr-site-header__nav .fr-site-header__langMenu a{color:#333!important;font-size:17px!important;padding:12px 8px!important;}
}
@media screen and (max-width:781px){
	.fr-course-breadcrumb ol,.lankame-fr-category-intro{padding-left:18px;padding-right:18px;}
}