@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* --- ヘッダー --- */
/* --- 全体レイアウト --- */
@media screen and (min-width: 1020px){
.custom-header {
width: 100vw;                /* 画面の幅いっぱいに設定 */
margin-left: 50%;            /* 左端を中央に合わせる */
transform: translateX(-50%); /* 左に半分ずらして画面中央に配置 */
position: relative;          /* 子要素の基準にする */
font-family: sans-serif;
box-sizing: border-box;
}

.custom-header .inner {
position: relative;
max-width: 1100px;
margin: 0 auto;
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 10px;
}

/* --- 上部バナー --- */
.top-banner {
width: 100%;
position: relative;
margin: 0 !important;
padding: 0 !important;
background-color: #2A2E88;
text-align: center;
}

.top-banner .inner {
justify-content: center;
}

.top-banner img {
width: 100%;
max-width: 100%;
display: block;
}

/* --- 左側エリア --- */
.header-left {
display: flex;
flex-direction: column;
gap: 10px;
}

.telepocket-area {
display: flex;
align-items: center;
gap: 10px;
}

.logo-telepocket {
width: 40px;
}

.company-info {
font-size: 10px;
line-height: 1.3;
color: #333;
margin: 0;
}

.flets-label {
font-size: 11px;
font-weight: bold;
color: #2A2E88;
display: block;
}

.flets-row {
display: flex;
align-items: center;
gap: 10px;
}

.flets-desc {
font-size: 11px;
font-weight: bold;
color: #2A2E88;
line-height: 1.2;
}

/* --- 右側エリア --- */
.header-right {
display: flex;
align-items: center;
gap: 20px;
}

.area-select-box {
position: absolute;
top: 0;
right: 0;
width: 310px;
display: flex;
align-items: center;
gap: 10px;
padding: 0px 8px 8px;
background: #2A2E88;
color: #fff;
border-radius: 0 0 3px 3px;
}

.label-blue {
width: 114px;
margin-top: 3px;
padding-right: 8px;
font-size: 12px;
line-height: 1.2;
font-weight: bold;
}

.buttons {
display: flex;
gap: 5px;
}

.btn-area {
padding: 5px 10px;
font-size: 13px;
font-weight: bold;
text-decoration: none;
color: #333;
background: #fff;
border-radius: 2px;
width: 80px;
text-align: center;
}

.btn-area:hover {
background-color: #f0f0f0;  /* マウスを乗せると少しだけグレーに変化 */
cursor: pointer;           /* マウスカーソルを指の形にする */
transform: translateY(-2px); /* マウスを乗せると上に2pxだけ浮き上がる */
}
.support-area {
text-align: right;
}

.support-area dl dt{
font-size: 11px;
margin-bottom: 5px;
text-align: left;
}

.support-area dl dd{
width: 180px;
}

.support-area dl dd a::after {
content: " >";        /* ここで記号を表示 */
padding-left: 4px;    /* 文字との間隔 */
font-weight: bold;
}

.support-area dl dd a{
display: block;
color: #272f89;
font-size: 12px;
font-weight: bold;
text-align: center;
text-decoration: none;
border: 1px solid #272f89;
border-radius: 3px;
background-color: #eef9ff;
padding: 6px 0 6px 3px;
}
.support-label {
font-size: 11px;
margin: 0;
}

.support-link {
font-size: 14px;
font-weight: bold;
color: #2A2E88;
text-decoration: underline;
}

.flets-and-support-wrapper{
display: flex;
overflow: hidden;
width: 1000px;
justify-content: space-between;
}

.-parallel .w-header{
margin-top: 0px;
}

.l-header__gnav{
display: none;
}

/* --- オーバーライド・調整 --- */
.l-header__logo {
display: none !important;
}
}

/* --- 3. スマホ対応（768px以下で切り替え） --- */
@media screen and (max-width: 768px) {

.l-header__logo {
display: block!important;
padding: 5px 0 5px 15px;
}

.l-header__customBtn{
width: 60px;
height: 60px;
}

.l-header__menuBtn{
width: 60px;
height: 60px;
}

.l-header__logo {
position: relative; /* 相対位置指定を有効に */
}

.l-header__logo::after {
content: "NTT東・西日本お申込みサイト"; /* 疑似要素にテキストを追加 */
display: block; /* ブロック表示 */
font-size: 9px; /* フォントサイズを調整 */
color: #2165AD; /* テキストの色を指定 */
font-weight: bold;
}

/* --- ヘッダー ここまで --- */

/* --- ハンバーガーメニューー --- */
.c-headLogo__img{
width: 90%;
}

.c-widget__title.-spmenu{
display: none;
}

.p-spMenu__inner{
background: #0079CE;
}

.p-spMenu__inner::before{
background: #0079CE;
}

.p-spMenu__body{
background: #0079CE;
color: #fff;
font-weight: bold;
font-size: 18px
}    

.c-submenuToggleBtn:before{
color: #fff;
}

.c-spnav{
margin-top: 20px;
}