@charset "utf-8";
/*==========================================================
CSS information
file name  :  mo-header.css
style info :  
ヘッダー関連のCSS
==========================================================*/
/*=============================
ヘッダー
=============================*/
header {
    min-height: 58px;
}
.header-all{
width:100%;
background-color: #FFF;
box-shadow: 0px 7.5px 18px 1.2px rgba(0, 0, 0, 0.12);
}

.header {
max-width:1240px;
margin-top: 0;
margin-left: auto;
margin-right: auto;
padding-top: 0;
padding-bottom: 0;
padding-left: 15px;
padding-right: 15px;
}
/*=============================
ヘッダーロゴ
=============================*/
.header-rogo {
float:left;
}
.header-rogo img{
width: 130px;
/* transition: .3s; */
padding-top:25px;
padding-bottom: 22px;
}
.HeaderRogoFixed.header-rogo img{
width:80px;
/* transition: .3s; */
}
.HeaderRogoFixed.header-rogo{
padding-top:5px;
padding-bottom:12px;
}
/*=============================
ヘッダー右側
=============================*/
.header-right {
/* width:80%; */
float:right;
padding-top:15px;
/* transition: .3s; */
text-align: right;
}
.HeaderRogoFixed .header-right{
padding-top:0px;
}
/*=============================
ヘッダーRR
=============================*/
.header-r-r{
float: right;
}
.header-r-r-tel{
margin-left: 10px;
display: inline-block;
}
.header-r-r-tel-icon{
display: inline-block;
vertical-align: middle;
font-size: 2rem;
margin-right: 5px;
color:#190F4D;
}
.header-r-r-tel-info{
display: inline-block;
vertical-align: middle;
line-height: 1.1;
}
.header-r-r-tel-no{
font-weight: bold;
font-size: 2.5rem;
}
.header-r-r-tel-time{
font-size:1.1rem;
text-align: center;
}

/*-------お問合せボタン-------*/
.header-r-r-bt {
display: inline-block;
margin-left: 10px;
/* transition: .3s; */
background-color: #fde74c;
}
.header-r-r-bt a{
font-size: 1.2rem;
color: #000000;
font-weight: bold;
text-decoration: none;
padding: 5px 15px;
display: block;
width:100%;
/* transition: .3s; */
}
.header-r-r-bt a::before{
font-family: "Font Awesome 5 Free"; 
font-weight: 900; 
content: "\f0e0";
color: #000000;
margin-right: 5px;
}
.header-r-r-bt a:hover,.header-r-r-bt a:hover::before{
background-color: #190F4D;
/* transition: .3s; */
color: #FFFFFF;
}
/*-------ログインボタン-------*/
.header-r-r-bt-log {
display: inline-block;
margin-left: 10px;
/* transition: .3s; */
background-color: #ef233c;
}
.header-r-r-bt-log a{
font-size: 1.2rem;
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
padding: 5px 15px;
display: block;
width:100%;
/* transition: .3s; */
}
.header-r-r-bt-log a::before{
font-family: "Font Awesome 5 Free"; 
font-weight: 900; 
content: "\f2f6";
color: #FFFFFF;
margin-right: 5px;
}
.header-r-r-bt-log a:hover,.header-r-r-bt-log a:hover::before{
background-color: #b0152f;
/* transition: .3s; */
color: #FFFFFF;
}
/*ヘッダーリンク*/
.header-r-r-bts {
display: inline-block;
/* transition: .3s; */
color: #190F4D;
}
.header-r-r-bts a{
font-size: 1.2rem;
color: #333;
font-weight: bold;
text-decoration: none;
}
.header-r-r-bts a::before{
font-family: "Font Awesome 5 Free"; 
font-weight: 900; 
content: "\f0e0";
color: #FFFFFF;
margin-right: 5px;
}
/*------------------------クローンヘッダー------------------------*/
.clone-header {
position: fixed;
top: 0;
left: 0;
z-index: 2;
width: 100%;
/* transition: .3s; */
transform: translateY(-120%);
}
.is-show {
transform: translateY(0);
z-index: 100;
}
.is-show .header-right{
padding-top:10px;
}
.is-show .header-rogo img{
width:80px;
/* transition: .3s; */
padding-top:0px;
padding-bottom: 3px;
}
.is-show .header-rogo{
padding-top:8px;
padding-bottom: 6px;
}
.is-show .HeaderNavi ul.sub-menu li a{
/* background-color: rgba(255,255,255,0.9); */
}
/*------------------------ヘッダーナビゲーション------------------------*/
/*ヘッダー固定jQuery処理*/
/*ナビゲーション囲み幅サイズ設定*/
.navi-wrapper{
width:99%;
/* transition: 0.9s; */
/*margin: 0 auto; 中央配置*/
float:right; /*右寄せ*/
}
/*レイアウト設定・ナビゲーション浮かせる処理*/
.Navilist{position: relative; z-index: 99;}
/*レイアウト設定・子メニューはデフォルトclose&浮かせるアブソルート*/
.Navilist ul.sub-menu{
position: absolute;
display: none; 
width: 100%;
/* margin-top: 3px;下線かぶり対策 */
}
/*レイアウト設定・ナビゲーション横並び化*/
.HeaderNavi li{display: inline-block;}
/*レイアウト設定・ナビゲーション横幅均等分割*/
li.Navilist { float: left; width: 14.28571%;}
li.Navilist:first-child:nth-last-child(1),
li.Navilist:first-child:nth-last-child(1) ~ li.Navilist { width: 100%;}
li.Navilist:first-child:nth-last-child(2),
li.Navilist:first-child:nth-last-child(2) ~ li.Navilist { width: 50%;}
li.Navilist:first-child:nth-last-child(3),
li.Navilist:first-child:nth-last-child(3) ~ li.Navilist { width: 33.33333%;}
li.Navilist:first-child:nth-last-child(4),
li.Navilist:first-child:nth-last-child(4) ~ li.Navilist { width: 25%;}
li.Navilist:first-child:nth-last-child(5),
li.Navilist:first-child:nth-last-child(5) ~ li.Navilist { width: 20%;}
li.Navilist:first-child:nth-last-child(6),
li.Navilist:first-child:nth-last-child(6) ~ li.Navilist { width: 16.66667%;}
li.Navilist:first-child:nth-last-child(7),
li.Navilist:first-child:nth-last-child(7) ~ li.Navilist { width: 14.28571%;}
/*レイアウト設定・サブメニューの横並びを解除*/
.HeaderNavi .sub-menu li.menu-item{display: block;float: none;}

/*装飾設定・親スタイル*/
.HeaderNavi li.Navilist{/*区切り*/
position: relative;
display: block;
}
.HeaderNavi li.Navilist:after{/*区切り*/
position:absolute;
display: block;
content: ""; 
top: 15px;
right: 0;
bottom: 15px;
border-left: 2px solid #ccc;
}
.HeaderNavi li.Navilist:last-child:after{/*区切り最後要素none*/
display: none;
}
/*装飾設定・リストスタイル*/
li.Navilist a{
padding:16px 0;
font-size: 1.2rem;
/* font-weight: bold; */
color: #000000; 
text-align: center;
text-decoration: none;
display: block; 
}
li.Navilist {/*親背景色
background-color: rgb(102,102,102,0.6);*/
}
li.Navilist:hover {/*下線*/
/* border-bottom:3px #190F4D solid; */
}
/*装飾設定・子スタイル*/
.HeaderNavi ul.sub-menu li a{/*子リンク色*/
position: relative;
/* font-size: 1.3rem; */
/* font-weight: bold; */
/* color: #000000; */
/* background-color: rgba(255,255,255,0.4); */
/* padding: 10px 0px; */
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
/*装飾設定・子スタイル:hover*/
.HeaderNavi ul.sub-menu li a:hover{/*子リンク色*/
/* color: #FFFFFF; */
/* font-weight: bold; */
/* background-color: rgb(25,15,77,0.7); */
}


/*=============================
spサイドメニュー
=============================*/
.sp-wrapper {
position: relative;
width: 100%;
height: 100%;
background: #FFF;
-webkit-transition: all .3s ease;
transition: all .3s ease;
z-index: 2;
overflow: hidden;
}
/* サイドメニューオープン時 */
.side-open .sp-wrapper,
.side-open .overlay {
-webkit-transform: translate3d(-375px, 0, 0);
transform: translate3d(-375px, 0, 0);
}
.overlay {
content: '';
visibility: hidden;
position: fixed;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background: rgba(0,0,0,0);
/* -webkit-transition: all .5s ease; */
/* transition: all .5s ease; */
z-index: 3;
}
.side-open .overlay {
visibility: visible;
cursor: pointer;
background: rgba(0,0,0,.7);
}
.overlay::after {/*Close文字デザイン*/
font-size: 4rem;
content: "Close";
visibility: hidden;
position: fixed;
top: 40%;
left: 120px;
display: block;
width: 100%;
height: 50px;
color: rgba(255,255,255,0);
font-weight: bold;
text-align: center;
/* -webkit-transition: all .5s ease; */
/* transition: all .5s ease; */
}
.side-open .overlay::after {
visibility: visible;
color: rgba(255,255,255,.8);
}
/* サイドメニューコンテンツ/開閉用ボタン */
.side-menu-btn {
position: fixed;
top: 5px;
right: 20px;
width: 40px;
height: 40px;
padding: 5px;
cursor: pointer;
z-index: 4;
background-image: url("../img/side_open.png");
background-size: contain;
background-repeat: no-repeat;
/* transition: .1s; */
}
.side-open .side-menu-btn {
position: fixed;
top: 20px;
right: 20px;
width: 40px;
height: 40px;
padding: 5px;
cursor: pointer;
z-index: 4;
background-image: url("../img/side_close.png");
background-size: contain;
background-repeat: no-repeat;
/* transition: .1s; */
}
.side-menu-rogo{
position: fixed;
top: 25px;
padding-left: 10px;
}
/* サイドメニューコンテンツ */
.side-menu {
/* font-size: 1.4rem; */
position: fixed;
top: 0;
right: 0;
box-sizing: border-box;
width: 375px;
height: 100%;
/* padding-top: 165px; */
padding: 2em;
text-align: center;
/* background-color: #190f4d; */
z-index: 1;
}
.MobileSidebarMenuCustom li a{
/* display: block; */
display: inline-block;
text-decoration: none;
/* color: #FFF; */
/* background-color: #0b0722; */
padding: 15px;
}
.MobileSidebarMenuCustom li a:hover {
    color: #1a73e8;
}
.MobileSidebarMenuCustom .sub-menu li a{
display: block;
/* background-color: #100931; */
}
.MobileSidebarMenuCustom .sub-menu li a:hover{
display: block;
/* background-color: #39A2AE; */
}
.MobileSidebarMenuCustom ul.sub-menu{
display: none; 
}
ul.MobileSidebarNavi{
width: 100%;
height: 100%;
display: block;
overflow: auto;
}
.MobileSidebarNavi .NavilistMo{
position: relative;
}
/*下矢印↓*/
.MobileSidebarNavi .NavilistMo:after {
content: "";
position: absolute;
border-right: 2px solid #FFF;
border-bottom: 2px solid #FFF;
width: 5px;
top:20px;
right: 20px;
height: 5px;
transform: rotate(45deg);
color: #FFF;
}
/*上矢印↑*/
.MobileSidebarNavi .NavilistMo.ac:after {
content: "";
position: absolute;
border-left: 2px solid #FFF;
border-top: 2px solid #FFF;
border-right: 0;
border-bottom: 0;
width: 5px;
top:20px;
right: 20px;
height: 5px;
transform: rotate(45deg);
}
/*=============================
SPサイドメニューTEL
=============================*/
.sp-header-tel{
margin-top: 20px;
}
.sp-header-tel a{
display: block;
color:#A0A1A0;
text-decoration: none;
}
.sp-header-tel-icon{
display: inline-block;
vertical-align: middle;
font-size: 2rem;
margin-right: 5px;
}
.sp-header-tel-info{
display: inline-block;
vertical-align: middle;
line-height: 1.1;
}
.sp-header-tel-no{
font-weight: bold;
font-size: 2.5rem;
}
.sp-header-tel-time{
font-size:1.1rem;
text-align: center;
}


/*=============================
PC
=============================*/
@media screen and (min-width:769px) {/* 769px以上*/

.sp-header-all{
display: none;
}
.side-menu-btn{
display: none;
}
.side-menu {
display: none;
}
ul.MobileSidebarNavi{
display: none;
}


}
/*=============================
SP
=============================*/
@media screen and (min-width: 0px) and (max-width:768px) {/* 768px以下*/

.header-all{
display: none;
}
.g-navi-all{
display: none;
}
.sp-header-all{
width: 100%;
background-color: #FFF;
z-index: 99;
height: 49px;
}
.sp-header-co{
background-color: #FFF;
padding: 5px 15px 5px 15px;
position: fixed;
width: 100%;
z-index: 99;
}
.sp-header-rogo img{
width:64px;
/* transition: .5s; */
}

}


/* 240411調整 */
.header-all {
    box-shadow: none;
    padding: 1em;
    border-bottom: solid 1px #eee;
}
.header {
    padding: 0;
}
.header-rogo img {
    width: 80px;
    padding: 0;
    margin-top: 6px;
}
.header-right {
    padding-top: 0;
}
.navi-wrapper {
    width: auto;
}
li.Navilist {
    width: auto !important;
}
li.Navilist:hover {
    border-bottom: none;
}
li.Navilist a {
    font-size: unset;
    color: unset;
    padding: 0.6em 0.7em;
}
li.Navilist a:hover {
    color: #1a73e8
}
.HeaderNavi li.Navilist:after {
    content: none;
}
.header-contact a {
    color: #fff !important;
    font-weight: 600;
    font-size: 14px !important;
    background-color: #1a73e8;
    border-radius: 8px;
    line-height: 2;
    padding: 8px 14px !important;
    margin-left: 1em;
}
.header-contact a:hover {
    opacity: 0.7;
}
.header-wp a {
color: #1a73e8 !important;
font-weight: 600;
font-size: 14px !important;
border: solid 1px #1a73e8;
border-radius: 8px;
line-height: 2;
padding: 8px 14px !important;
margin-left: 1em;
}
.header-wp a:hover {
opacity: 0.7;
}
/* サブメニュー */
.HeaderNavi ul.sub-menu li a {
    justify-content: left;
    padding: 1em;
    text-align: left;
    line-height: 1;
}
.sub-menu {
    min-width: max-content;
    background-color: #e3eefc;
    border-radius: 8px;
}
.Navilist ul.sub-menu {
    margin-top: 0;
}
.sub-menu li a {
    padding: 1em;
}
.sub-menu li a:hover {
    color: #1a73e8 !important;
}

/* SPハンバーガーメニュー */
.overlay::after {
    content: none !important;
}
.side-menu-btn {
    top: 0.75em;
    right: 1em;
    width: 32px;
    height: 32px;
}
.side-menu-rogo {
    position: unset;
    text-align: center;
    padding: 4em 2em 2em;
}
.MobileSidebarMenuCustom li a {
    color: unset;
    font-weight: 600;
    padding: 0.5em 1em;
}
.MobileSidebarMenuCustom .sub-menu li a {
    background-color: #e3eefc;
}
.side-open .side-menu-btn {
    width: 32px;
    height: 32px;
    top: 0.75em;
    right: 1em;
}
.MobileSidebarNavi .NavilistMo:after {
    border-right: 2px solid #1a73e8;
    border-bottom: 2px solid #1a73e8;
    width: 12px;
    right: 16px;
    height: 12px;
    top: 0.5em;
}
.MobileSidebarNavi .NavilistMo.ac:after {
    border-left: 2px solid #1a73e8;
    border-top: 2px solid #1a73e8;
    width: 12px;
    right: 16px;
    height: 12px;
    top: 1em;
}
.header-contact-sp {
    margin-top: 0.75em;
}
.header-contact-sp a {
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
    background-color: #1a73e8 !important;
    text-align: center;
    border-radius: 8px;
    line-height: 2;
    padding: 0.5em 2em !important;
    display: block !important;
}
.header-wp-sp a {
    color: #1a73e8 !important;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    border: solid 1px #1a73e8;
    border-radius: 8px;
    line-height: 2;
    padding: 0.5em 2em !important;
    display: block !important;
}
@media screen and (max-width: 768px) {
    .sp-header-co {
        padding: 1em 1em;
        border-bottom: solid 1px #eee;
    }
    .sub-menu {
        border: none;
    }
}