@charset "UTF-8";

/*-----------------------------------
最終更新日：2019年1月10日
-----------------------------------*/
/* 2カラム等、複数カラムで横並びにした時に片方もしくは、両方の要素を上下中央に揃える
※ 両方を中央揃えするためには、要素を囲む外枠に高さ設定が必要 
使い方 ⇒ 上下中央寄せしたい要素の外枠に指定してください */

.kp-2column-vertical-center{
    display: flex;
    align-items: center;
}

/* line-height: 1.6; ※AEMの初期値 */

.kp-line-height-10{
    line-height: 1;
}

.kp-line-height-11{
    line-height: 1.1;
}

.kp-line-height-12{
    line-height: 1.2;
}

.kp-line-height-13{
    line-height: 1.3;
}

.kp-line-height-14{
    line-height: 1.4;
}

.kp-line-height-15{
    line-height: 1.5;
}

.kp-line-height-17{
    line-height: 1.7;
}

.kp-line-height-18{
    line-height: 1.8;
}

.kp-line-height-19{
    line-height: 1.9;
}

.kp-line-height-20{
    line-height: 2;
}

.kp-line-height-21{
    line-height: 2.1;
}

.kp-line-height-22{
    line-height: 2.2;
}

/* ボタンの角丸設定 */
.kp-radius-15-imp .g-ButtonUnit a{
    border-radius: 15px !important;
}

.kp-radius-40-imp .g-ButtonUnit a{
    border-radius: 40px !important;
}

.kp-radius-50-imp .g-ButtonUnit a{
    border-radius: 50px !important;
}

/* 画像の横幅が足りないときの中央寄せ設定 */
.kp-img-center-imp .g-Image__img {
    text-align: center !important;
    line-height: 0 !important;
}
.kp-img-center-imp .g-Image__img img {
    display: inline !important;
}

/* 画像にリンクがあり、コンテンツ幅の関係でリンクする領域が画像をはみ出す場合の設定 */
.kp-img-center-link-imp{
text-align: center !important;
}
.kp-img-center-link-imp a,
.kp-img-center-link-imp a p,
.kp-img-center-link-imp a p img{
display: inline !important;
}

/* スマホだけ */
@media screen and (max-width: 640px){
    /* 画像にリンクがあり、コンテンツ幅の関係でリンクする領域が画像をはみ出す場合の設定 */
    .kp-img-center-link-sp-imp{
    text-align: center !important;
    }
    .kp-img-center-link-sp-imp a,
    .kp-img-center-link-sp-imp a p,
    .kp-img-center-link-sp-imp a p img{
    display: inline !important;
    }
}

/* <br>の後ろに余白が自動的に入ってしまう箇所の修正設定 */
span.kp-br-text-indent{
    margin-left: -0.5em;
}

span.kp-br-text-indent-02{
    margin-left: -0.000001em;
}

/* スマホだけ */
@media screen and (max-width: 640px){
    span.kp-br-text-indent-sp{
        margin-left: -0.5em;       
    }
}

/* 字間のリセット */
.kp-letter-spacing-reset .cmn-richtext{
    letter-spacing: 0;
}

/* 2カラムのカラムチェンジ
⇒ クラス入れる箇所：カラムセパレータ */
.kp-2column-change .g-Column__cols{
    float: right;
}

/* 2カラム入替（PCとSPでカラム表示位置を入れ替える） */
@media only screen and (min-width: 1025px) {
	.kp-reverse-column--lg .l-Column__cols:first-child { float: right; }
}
@media only screen and (max-width: 1024px) and (min-width: 641px) {
	.kp-reverse-column--lg .l-Column__cols:first-child { float: right; }
}
@media only screen and (min-width: 1025px) {
	.kp-reverse-column--lg .l-Column__cols:last-child { float: left; } 
}
@media only screen and (max-width: 1024px) and (min-width: 641px) {
	.kp-reverse-column--lg .l-Column__cols:last-child { float: left; } 
}


/* 各画面表示のカラム横幅の設定
（AEMで設定できない 5% 刻みの数値） */

/* PC */
@media only screen and (min-width: 1025px){
	.kp-column-size-95-pc{
		width: 95%;
	}
	.kp-column-size-85-pc{
		width: 85%;
	}
	.kp-column-size-75-pc{
		width: 75%;
	}
	.kp-column-size-65-pc{
		width: 65%;
	}
	.kp-column-size-55-pc{
		width: 55%;
	}
	.kp-column-size-45-pc{
		width: 45%;
	}
	.kp-column-size-35-pc{
		width: 35%;
	}
	.kp-column-size-25-pc{
		width: 25%;
	}
	.kp-column-size-15-pc{
		width: 15%;
	}
	.kp-column-size-05-pc{
		width: 5%;
	}
}

/* タブレット */
@media only screen and (min-width: 641px) and (max-width: 1024px){
	.kp-column-size-95-tb{
		width: 95%;
	}
	.kp-column-size-85-tb{
		width: 85%;
	}
	.kp-column-size-75-tb{
		width: 75%;
	}
	.kp-column-size-65-tb{
		width: 65%;
	}
	.kp-column-size-55-tb{
		width: 55%;
	}
	.kp-column-size-45-tb{
		width: 45%;
	}
	.kp-column-size-35-tb{
		width: 35%;
	}
	.kp-column-size-25-tb{
		width: 25%;
	}
	.kp-column-size-15-tb{
		width: 15%;
	}
	.kp-column-size-05-tb{
		width: 5%;
	}
}

/* スマホ */
@media only screen and (max-width: 640px){
	.kp-column-size-95-sp{
		width: 95%;
	}
	.kp-column-size-85-sp{
		width: 85%;
	}
	.kp-column-size-75-sp{
		width: 75%;
	}
	.kp-column-size-65-sp{
		width: 65%;
	}
	.kp-column-size-55-sp{
		width: 55%;
	}
	.kp-column-size-45-sp{
		width: 45%;
	}
	.kp-column-size-35-sp{
		width: 35%;
	}
	.kp-column-size-25-sp{
		width: 25%;
	}
	.kp-column-size-15-sp{
		width: 15%;
	}
	.kp-column-size-05-sp{
		width: 5%;
	}
}

/* 画面サイズが特定のサイズの時のみ、テキストの位置を変更する設定 
⇒ 適用箇所：Text Item 等 */

@media only screen and (min-width: 1025px){
    .kp-text-center-pc{
        text-align: center;
    }
    
    .kp-text-left-pc{
        text-align: left;
    }
    
    .kp-text-right-pc{
        text-align: right;
    }
}

@media only screen and (max-width: 1024px) and (min-width: 641px){
    .kp-text-center-tb{
        text-align: center;
    }
    
    .kp-text-left-tb{
        text-align: left;
    }
    
    .kp-text-right-tb{
        text-align: right;
    }
}

@media screen and (max-width: 640px){
     .kp-text-center-sp{
        text-align: center;
    }
    
    .kp-text-left-sp{
        text-align: left;
    }
    
    .kp-text-right-sp{
        text-align: right;
    }
}

/*-------------------------------------------------------------------------------------------------
■ Image & Text Pack (Horizontal)限定
下記CSSは、用途に応じて使い分けること

※ 画像が(テキスト領域よりも)小さい時 ⇒ 「kp-horizontal-center-txt〇〇」を使う
※ 画像が(テキスト領域よりも)大きい時 ⇒ 「kp-horizontal-center-txt〇〇-02」を使う

選択するCSSを間違えると、表示崩れが起きるため注意（position: absolute; は 高さ がないため）
-------------------------------------------------------------------------------------------------*/

/*----------------------------------------------------------------
Image & Text Pack (Horizontal)のテキストを中央寄せ設定
※画像が小さいとき
-------------------------------------------------------------------*/
/*PC：2カラム、タブレット：2カラム、スマホ：2カラム*/
.kp-horizontal-center-txtright .g-ImageTextHP__contentsBlock{
    position: relative;
}

.kp-horizontal-center-txtright .g-ImageTextHP__contentsBlock .g-ImageTextHP__contentsBlock__image{
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.kp-horizontal-center-txtleft .g-ImageTextHP__contentsBlock{
    position: relative;
}

.kp-horizontal-center-txtleft .g-ImageTextHP__contentsBlock .g-ImageTextHP__contentsBlock__image{
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

/*PC：2カラム、タブレット：2カラム、スマホ：1カラム*/
.kp-horizontal-center-txtright-sp .g-ImageTextHP__contentsBlock{
    position: relative;
}

.kp-horizontal-center-txtright-sp .g-ImageTextHP__contentsBlock .g-ImageTextHP__contentsBlock__image{
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.kp-horizontal-center-txtleft-sp .g-ImageTextHP__contentsBlock{
    position: relative;
}

.kp-horizontal-center-txtleft-sp .g-ImageTextHP__contentsBlock .g-ImageTextHP__contentsBlock__image{
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

@media screen and (max-width: 640px){
.kp-horizontal-center-txtright-sp .g-ImageTextHP__contentsBlock{
    position: static;
}

.kp-horizontal-center-txtright-sp .g-ImageTextHP__contentsBlock .g-ImageTextHP__contentsBlock__image{
    position: static;
    top: auto;
    right: auto;
    transform: none;
}

.kp-horizontal-center-txtleft-sp .g-ImageTextHP__contentsBlock{
    position: static;
}

.kp-horizontal-center-txtleft-sp .g-ImageTextHP__contentsBlock .g-ImageTextHP__contentsBlock__image{
    position: static;
    top: auto;
    left: auto;
    transform: none;
}
}

/*----------------------------------------------------------------
Image & Text Pack (Horizontal)のテキストを中央寄せ設定
※画像が大きいとき
-------------------------------------------------------------------*/
/*PC：2カラム、タブレット：2カラム、スマホ：2カラム*/

.kp-horizontal-center-txtright-02 .g-ImageTextHP__contentsBlock{
    position: relative;
}

.kp-horizontal-center-txtright-02 .g-ImageTextHP__contentsBlock .g-ImageTextHP__contentsBlock__text{
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.kp-horizontal-center-txtleft-02 .g-ImageTextHP__contentsBlock{
    position: relative;
}

.kp-horizontal-center-txtleft-02 .g-ImageTextHP__contentsBlock .g-ImageTextHP__contentsBlock__text{
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

/*PC：2カラム、タブレット：2カラム、スマホ：1カラム*/
.kp-horizontal-center-txtright-02-sp .g-ImageTextHP__contentsBlock{
    position: relative;
}

.kp-horizontal-center-txtright-02-sp .g-ImageTextHP__contentsBlock .g-ImageTextHP__contentsBlock__text{
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.kp-horizontal-center-txtleft-02-sp .g-ImageTextHP__contentsBlock{
    position: relative;
}

.kp-horizontal-center-txtleft-02-sp .g-ImageTextHP__contentsBlock .g-ImageTextHP__contentsBlock__text{
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

@media screen and (max-width: 640px){
.kp-horizontal-center-txtright-02-sp .g-ImageTextHP__contentsBlock{
    position: static;
}

.kp-horizontal-center-txtright-02-sp .g-ImageTextHP__contentsBlock .g-ImageTextHP__contentsBlock__text{
    position: static;
    top: auto;
    left: auto;
    transform: none;
}

.kp-horizontal-center-txtleft-02-sp .g-ImageTextHP__contentsBlock{
    position: static;
}

.kp-horizontal-center-txtleft-02-sp .g-ImageTextHP__contentsBlock .g-ImageTextHP__contentsBlock__text{
    position: static;
    top: auto;
    right: auto;
    transform: none;
}
}


/* ボタンパックのアイコンを別窓設定だけど「＞」にする設定
（リンクパックのクラスに「kp-linkicon-newwindow」を付与して設定はデフォルトのまま）*/
.kp-linkicon-newwindow .cmn-icon--window:before, .cmn-icon--external:before{
content: "\e006";
}


/* スマホだけ左揃えのテキストの設定 */
@media screen and (max-width: 640px){
.kp-textleft-sp-imp p{
text-align: left !important;
}
}

/* スマホだけ右揃えのテキストの設定 */
@media screen and (max-width: 640px){
.kp-textright-sp-imp p{
text-align: right !important;
}
}

/* スマホだけ中央揃えのテキストの設定 */
@media screen and (max-width: 640px){
.kp-textcenter-sp-imp p{
text-align: center !important;
}
}


/* Border Radiusを使ったときにIEだけに入る変な余白を消す設定*/
@media all and (-ms-high-contrast: none) {
.opt-borderradius--xs {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
margin-bottom: -1px; /* 全方向指定時の挙動は分からないため、とりあえず残し */
}

.opt-borderradius--tl--xs {
-moz-border-radius-topleft: 4px;
-webkit-border-top-left-radius: 4px;
border-top-left-radius: 4px;
margin-bottom: -1px;
}

.opt-borderradius--tr--xs {
-moz-border-radius-topright: 4px;
-webkit-border-top-right-radius: 4px;
border-top-right-radius: 4px;
margin-bottom: -1px;
}

.opt-borderradius--br--xs {
-moz-border-radius-bottomright: 4px;
-webkit-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px;
margin-top: -1px;
}

.opt-borderradius--bl--xs {
-moz-border-radius-bottomleft: 4px;
-webkit-border-bottom-left-radius: 4px;
border-bottom-left-radius: 4px;
margin-top: -1px;
}

.opt-borderradius--s {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
margin-bottom: -1px; /* 全方向指定時の挙動は分からないため、とりあえず残し */
}

.opt-borderradius--tl--s {
-moz-border-radius-topleft: 8px;
-webkit-border-top-left-radius: 8px;
border-top-left-radius: 8px;
margin-bottom: -1px;
}

.opt-borderradius--tr--s {
-moz-border-radius-topright: 8px;
-webkit-border-top-right-radius: 8px;
border-top-right-radius: 8px;
margin-bottom: -1px;
}

.opt-borderradius--br--s {
-moz-border-radius-bottomright: 8px;
-webkit-border-bottom-right-radius: 8px;
border-bottom-right-radius: 8px;
margin-top: -1px;
}

.opt-borderradius--bl--s {
-moz-border-radius-bottomleft: 8px;
-webkit-border-bottom-left-radius: 8px;
border-bottom-left-radius: 8px;
margin-top: -1px;
}

.opt-borderradius--m {
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
margin-bottom: -1px; /* 全方向指定時の挙動は分からないため、とりあえず残し */
}

.opt-borderradius--tl--m {
-moz-border-radius-topleft: 12px;
-webkit-border-top-left-radius: 12px;
border-top-left-radius: 12px;
margin-bottom: -1px;
}

.opt-borderradius--tr--m {
-moz-border-radius-topright: 12px;
-webkit-border-top-right-radius: 12px;
border-top-right-radius: 12px;
margin-bottom: -1px;
}

.opt-borderradius--br--m {
-moz-border-radius-bottomright: 12px;
-webkit-border-bottom-right-radius: 12px;
border-bottom-right-radius: 12px;
margin-top: -1px;
}

.opt-borderradius--bl--m {
-moz-border-radius-bottomleft: 12px;
-webkit-border-bottom-left-radius: 12px;
border-bottom-left-radius: 12px;
margin-top: -1px;
}

.opt-borderradius--l {
-moz-border-radius: 16px;
-webkit-border-radius: 16px;
border-radius: 16px;
margin-bottom: -1px; /* 全方向指定時の挙動は分からないため、とりあえず残し */
}

.opt-borderradius--tl--l {
-moz-border-radius-topleft: 16px;
-webkit-border-top-left-radius: 16px;
border-top-left-radius: 16px;
margin-bottom: -1px;
}

.opt-borderradius--tr--l {
-moz-border-radius-topright: 16px;
-webkit-border-top-right-radius: 16px;
border-top-right-radius: 16px;
margin-bottom: -1px;
}

.opt-borderradius--br--l {
-moz-border-radius-bottomright: 16px;
-webkit-border-bottom-right-radius: 16px;
border-bottom-right-radius: 16px;
margin-top: -1px;
}

.opt-borderradius--bl--l {
-moz-border-radius-bottomleft: 16px;
-webkit-border-bottom-left-radius: 16px;
border-bottom-left-radius: 16px;
margin-top: -1px;
}

.opt-borderradius--xl {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
margin-bottom: -1px; /* 全方向指定時の挙動は分からないため、とりあえず残し */
}

.opt-borderradius--tl--xl {
-moz-border-radius-topleft: 20px;
-webkit-border-top-left-radius: 20px;
border-top-left-radius: 20px;
margin-bottom: -1px;
}

.opt-borderradius--tr--xl {
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
border-top-right-radius: 20px;
margin-bottom: -1px;
}

.opt-borderradius--br--xl {
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
border-bottom-right-radius: 20px;
margin-top: -1px;
}

.opt-borderradius--bl--xl {
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
border-bottom-left-radius: 20px;
margin-top: -1px;
}
}


/*----------------------------------------------------------------
PC、SP表示で非表示、表示の設定
-------------------------------------------------------------------*/
/* PCで非表示 */
@media screen and (min-width: 641px){
.kp-pc-display-none{
display: none;
}
}
/* SPで非表示 */
@media screen and (max-width: 640px){
.kp-sp-display-none{
display: none;
}
}
/* PCで非表示(imp) */
@media screen and (min-width: 641px){
.kp-pc-display-none-imp{
display: none !important;
}
}
/* SPで非表示(imp) */
@media screen and (max-width: 640px){
.kp-sp-display-none-imp{
display: none !important;
}
}


/*===============================================

ブランドヘッダーの設定

===============================================*/
/* PC */
@media screen and (min-width: 1025px){
    .kp-brand-header-setting .g-BrHeaderCommon{
        max-width: none;
        padding: 14px 0;
    }

    .kp-brand-header-setting .g-BrHeaderLogo{
        width: 48%;
        max-width: 76px;
    }

    .kp-brand-header-setting .g-BrHeaderCommon__logoBlock.is-lg-center .g-BrHeaderLogo{
        margin: 0 0 0 20px;
    }

    .kp-brand-header-setting .g-BrHeaderLogo .g-BrHeaderLogo .g-Image__img{
        max-width: none;
        max-height: none;
        width: 100% !important;
    }

    .kp-brand-header-setting .g-BrHeaderNavList{
        max-width: 967px;
        width: 100%;
        margin: 0 auto;
    }

    .kp-brand-header-setting .l-BrHeaderNavList__item{
        width: 20%;
        max-width: 159px;
        margin: 0;
        padding: 10px 0;
        border-left: 1px solid #e6e6e6;
    }

    .kp-brand-header-setting .l-BrHeaderNavList__item.is-active a.l-BrHeaderNavListLink{
        background: transparent;
    }

    .kp-brand-header-setting .l-BrHeaderNavList__item a.l-BrHeaderNavListLink:hover{
        background: transparent;
        opacity: 0.8;
    }

    .kp-brand-header-setting .l-BrHeaderNavList__item:last-child{
        border-right: 1px solid #e6e6e6;
    }

    .kp-brand-header-setting .g-BrHeaderNavList__item .g-BrHeaderNavListLink .g-BrHeaderNavListLink__inner{
        padding: 0;
        font-size: 15px;
        line-height: 1;
        font-family: "Hiragino Kaku Gothic ProN",
                     Meiryo,
                     "UD Shin Go Regular",
                     -apple-system,
                     BlinkMacSystemFont,
                     MyYuGothicM,
                     sans-serif;
        font-weight: normal;
        position: relative;
    }

    .kp-brand-header-setting .g-BrHeaderNav__listBlock.is-close{
        display: block !important;
    }
}

/* タブレット */
@media screen and (min-width: 641px) and (max-width: 1024px){
    .kp-brand-header-setting .g-BrHeaderCommon{
        padding: 1.7567567568vw 2.972972973vw 1.7567567568vw 2.2972972973vw;
    }

    .kp-brand-header-setting .g-BrHeaderCommon__logoBlock{
        width: 17%;
        max-width: 58px;
        padding: 0;
    }

    .kp-brand-header-setting .g-BrHeaderLogo{
        width: 76px;
    }

    .kp-brand-header-setting .g-BrHeaderLogo .g-Image__img{
        max-width: none;
        max-height: none;
    }

    .kp-brand-header-setting .g-BrHeaderLogo .g-Image__img img{
        max-height: none;
        width: 100%;
    }

    .kp-brand-header-setting .g-BrHeaderNavList{
        margin-bottom: -1px;
    }

    .kp-brand-header-setting .l-BrHeaderNavList__item.is-active a.l-BrHeaderNavListLink{
        background: transparent;
    }

    .kp-brand-header-setting .l-BrHeaderNavList__item a.l-BrHeaderNavListLink:hover{
        background: transparent;
        opacity: 0.8;
    }

    .kp-brand-header-setting .l-BrHeaderNav__buttonBlock a{
        padding: 30px 0 0 0;
        font-size: 16px;
        color: #000;
        background: transparent;
        font-family: "Hiragino Kaku Gothic ProN",
                     Meiryo,
                     "UD Shin Go Regular",
                     -apple-system,
                     BlinkMacSystemFont,
                     MyYuGothicM,
                     sans-serif;
    }

    .kp-brand-header-setting .l-BrHeaderNav__buttonBlock a .cmn-icon.cmn-icon--down{
        background: url("/content/dam/sites/kao/webmember-kao-com/jp/kaoplaza/contents/common/kp-brand-header-icon-menu.png") no-repeat;
        width: 100%;
        height: 100%;
        background-size: contain;
        left: 0;
        bottom: 0;
        top: 0;
        right: 0;
        margin-top: 0;
    }

    .kp-brand-header-setting .l-BrHeaderNav__buttonBlock a .cmn-icon.cmn-icon--up{
        background: url("/content/dam/sites/kao/webmember-kao-com/jp/kaoplaza/contents/common/kp-brand-header-icon-menu-close.png") no-repeat;
        width: 100%;
        height: 100%;
        background-size: contain;
        left: 0;
        bottom: 0;
        top: 0;
        right: 0;
        margin-top: 0;
    }

    .kp-brand-header-setting .cmn-icon--down:before{
        display: none;
    }

    .kp-brand-header-setting .cmn-icon--up:before{
        display: none;
    }

    /* 応募する */
    .kp-brand-header-setting .l-BrHeaderNavList__item:nth-child(1){
        border-top: solid 1px #00a0e9;
        border-bottom: 0;
        border-right: solid 1px #CCCCCC;
        margin-bottom: 0;
    }

    .kp-brand-header-setting .l-BrHeaderNavList__item:nth-child(1) .l-BrHeaderNavListLink{
        color: #00a0e9;
        font-weight: bold;
        font-family: "Hiragino Kaku Gothic ProN",
                     Meiryo,
                     "UD Shin Go Regular",
                     -apple-system,
                     BlinkMacSystemFont,
                     MyYuGothicM,
                     sans-serif;
    }

    /* 読む・知る・楽しむ */
    .kp-brand-header-setting .l-BrHeaderNavList__item:nth-child(2){
        border-top: solid 1px #e6383c;
        border-bottom: 0;
        border-left: 0;
        margin-bottom: 0;
    }

    .kp-brand-header-setting .l-BrHeaderNavList__item:nth-child(2) .l-BrHeaderNavListLink{
        color: #e6383c;
        font-weight: bold;
        font-family: "Hiragino Kaku Gothic ProN",
                     Meiryo,
                     "UD Shin Go Regular",
                     -apple-system,
                     BlinkMacSystemFont,
                     MyYuGothicM,
                     sans-serif;
    }

    /* 参加する */
    .kp-brand-header-setting .l-BrHeaderNavList__item:nth-child(3){
        border-top: solid 1px #7cbe28;
        border-bottom: solid 1px #b4b4b4;
        border-right: solid 1px #CCCCCC;
        margin-bottom: 0;
    }

    .kp-brand-header-setting .l-BrHeaderNavList__item:nth-child(3) .l-BrHeaderNavListLink{
        color: #7cbe28;
        font-weight: bold;
        font-family: "Hiragino Kaku Gothic ProN",
                     Meiryo,
                     "UD Shin Go Regular",
                     -apple-system,
                     BlinkMacSystemFont,
                     MyYuGothicM,
                     sans-serif;
    }

    /* 買う */
    .kp-brand-header-setting .l-BrHeaderNavList__item:nth-child(4){
        border-top: solid 1px #f4920b;
        border-bottom: solid 1px #f4920b;
        border-left: 0;
        margin-bottom: 0;
    }

    .kp-brand-header-setting .l-BrHeaderNavList__item:nth-child(4) .l-BrHeaderNavListLink{
        color: #f4920b;
        font-weight: bold;
        font-family: "Hiragino Kaku Gothic ProN",
                     Meiryo,
                     "UD Shin Go Regular",
                     -apple-system,
                     BlinkMacSystemFont,
                     MyYuGothicM,
                     sans-serif;
    }
    
    /* マイページ */
    .kp-brand-header-setting .l-BrHeaderNavList__item:nth-child(5){
        border-top: 0;
        border-bottom: 0;
        border-right: solid 1px #CCCCCC;
        margin-bottom: 0;
    }

    .kp-brand-header-setting .l-BrHeaderNavList__item:nth-child(5) .l-BrHeaderNavListLink{
        color: #000;
        font-weight: bold;
        font-family: "Hiragino Kaku Gothic ProN",
                     Meiryo,
                     "UD Shin Go Regular",
                     -apple-system,
                     BlinkMacSystemFont,
                     MyYuGothicM,
                     sans-serif;
    }
}

/* スマホ */
@media screen and (max-width: 640px){
    .kp-brand-header-setting .g-BrHeaderCommon{
        padding: 1.7567567568vw 2.972972973vw 1.7567567568vw 2.2972972973vw;
    }

    .kp-brand-header-setting .g-BrHeaderCommon__logoBlock{
        width: 17%;
        max-width: 58px;
        padding: 0;
    }

    .kp-brand-header-setting .g-BrHeaderLogo{
        width: 100%;
    }

    .kp-brand-header-setting .g-BrHeaderLogo .g-Image__img{
        max-width: none;
        max-height: none;
    }

    .kp-brand-header-setting .g-BrHeaderLogo .g-Image__img img{
        max-height: none;
        width: 100%;
    }

    .kp-brand-header-setting .l-BrHeaderNavList__item.is-active a.l-BrHeaderNavListLink{
        background: transparent;
    }

    .kp-brand-header-setting .l-BrHeaderNavList__item a.l-BrHeaderNavListLink:hover{
        background: transparent;
        opacity: 0.8;
    }

    .kp-brand-header-setting .l-BrHeaderNav__buttonBlock a{
        padding: 23px 0 0 0;
        font-size: 13px;
        color: #000;
        background: transparent;
        font-family: "Hiragino Kaku Gothic ProN",
                     Meiryo,
                     "UD Shin Go Regular",
                     -apple-system,
                     BlinkMacSystemFont,
                     MyYuGothicM,
                     sans-serif;
    }

    .kp-brand-header-setting .l-BrHeaderNav__buttonBlock a .cmn-icon.cmn-icon--down{
        background: url("/content/dam/sites/kao/webmember-kao-com/jp/kaoplaza/contents/common/kp-brand-header-icon-menu.png") no-repeat;
        width: 100%;
        height: 100%;
        background-size: contain;
        left: 0;
        bottom: 0;
        top: 0;
        right: 0;
        margin-top: 0;
    }

    .kp-brand-header-setting .l-BrHeaderNav__buttonBlock a .cmn-icon.cmn-icon--up{
        background: url("/content/dam/sites/kao/webmember-kao-com/jp/kaoplaza/contents/common/kp-brand-header-icon-menu-close.png") no-repeat;
        width: 100%;
        height: 100%;
        background-size: contain;
        left: 0;
        bottom: 0;
        top: 0;
        right: 0;
        margin-top: 0;
    }

    .kp-brand-header-setting .cmn-icon--down:before{
        display: none;
    }

    .kp-brand-header-setting .cmn-icon--up:before{
        display: none;
    }

    /* 応募する */
    .kp-brand-header-setting .l-BrHeaderNavList__item:nth-child(1){
        border-top: solid 1px #00a0e9;
        border-bottom: 0;
        margin-bottom: 0;
    }

    .kp-brand-header-setting .l-BrHeaderNavList__item:nth-child(1) .l-BrHeaderNavListLink{
        color: #00a0e9;
        font-weight: bold;
        font-family: "Hiragino Kaku Gothic ProN",
                     Meiryo,
                     "UD Shin Go Regular",
                     -apple-system,
                     BlinkMacSystemFont,
                     MyYuGothicM,
                     sans-serif;
    }

    /* 読む・知る・楽しむ */
    .kp-brand-header-setting .l-BrHeaderNavList__item:nth-child(2){
        border-top: solid 1px #e6383c;
        border-bottom: 0;
        margin-bottom: 0;
    }

    .kp-brand-header-setting .l-BrHeaderNavList__item:nth-child(2) .l-BrHeaderNavListLink{
        color: #e6383c;
        font-weight: bold;
        font-family: "Hiragino Kaku Gothic ProN",
                     Meiryo,
                     "UD Shin Go Regular",
                     -apple-system,
                     BlinkMacSystemFont,
                     MyYuGothicM,
                     sans-serif;
    }

    /* 参加する */
    .kp-brand-header-setting .l-BrHeaderNavList__item:nth-child(3){
        border-top: solid 1px #7cbe28;
        border-bottom: 0;
        margin-bottom: 0;
    }

    .kp-brand-header-setting .l-BrHeaderNavList__item:nth-child(3) .l-BrHeaderNavListLink{
        color: #7cbe28;
        font-weight: bold;
        font-family: "Hiragino Kaku Gothic ProN",
                     Meiryo,
                     "UD Shin Go Regular",
                     -apple-system,
                     BlinkMacSystemFont,
                     MyYuGothicM,
                     sans-serif;
    }

    /* 買う */
    .kp-brand-header-setting .l-BrHeaderNavList__item:nth-child(4){
        border-top: solid 1px #f4920b;
        border-bottom: 0;
        margin-bottom: 0;
    }

    .kp-brand-header-setting .l-BrHeaderNavList__item:nth-child(4) .l-BrHeaderNavListLink{
        color: #f4920b;
        font-weight: bold;
        font-family: "Hiragino Kaku Gothic ProN",
                     Meiryo,
                     "UD Shin Go Regular",
                     -apple-system,
                     BlinkMacSystemFont,
                     MyYuGothicM,
                     sans-serif;
    }
    
    /* マイページ */
    .kp-brand-header-setting .l-BrHeaderNavList__item:nth-child(5){
        border-top: solid 1px #b4b4b4;
        border-bottom: 0;
        margin-bottom: 0;
    }

    .kp-brand-header-setting .l-BrHeaderNavList__item:nth-child(5) .l-BrHeaderNavListLink{
        color: #000;
        font-weight: bold;
        font-family: "Hiragino Kaku Gothic ProN",
                     Meiryo,
                     "UD Shin Go Regular",
                     -apple-system,
                     BlinkMacSystemFont,
                     MyYuGothicM,
                     sans-serif;
    }

}