@charset "UTF-8";

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

@media only screen and (max-width:750px){
    html{
        font-size : 3.6vw;
    }
}

body{
    background            : #fff;
    font-feature-settings : 'palt';
    min-width             : 320px;
    width                 : 100%;
}

#header {
    margin-bottom: 0 !important;
}

a:hover,a img:hover{
    opacity : 0.8;
}

#contents{
    max-width : 750px;
    width     : 100%;
}

.clife{
    background : #fff;
    display    : block; /* for ie */
    margin     : 0 auto;
    min-height : 100vh;
    padding    : 0 0 25% 0;
    position   : relative;
    width      : 100%;
}

.clife img{
    display : block;
    width   : 100%;
}




/*
// top
*/

.clife__fv__slide{
    line-height: 0;
}

.clife__fv__copy-image{
    margin : -5% 0 0 0;
    position : relative;
    z-index : 10;
}

.menu-btn_inner {
    font-family: "遊ゴシック";
}

@media (max-width: 420px) {
    .menu-btn_inner {
        margin: 0 auto;
    }
}

.menu-btn a {
    display: block;
    position: relative;
    margin: 0 auto;
    padding: 1.5em 2em;
    width: 420px;
    height: 50px;
    line-height: 8px;
    background: #fff;
    font-size: 16px;
    font-weight: bold;
    color: #d61719;
    border-radius: 50px;
    text-align: end;
    box-shadow: 0 0 0 3px #d61719, 0 0 0 7px #fff;
    box-sizing: border-box;
    text-decoration: none;
}

@media (max-width: 768px) {
    .menu-btn a {
        width: 380px;
        line-height: 5px;
        padding: 1.8em 2em;
        font-size: 16px;
        font-family: "游ゴシック";
    }
}

@media (max-width: 420px) {
    .menu-btn a {
        width: 280px;
        height: 40px;
        line-height: 7px;
        padding: 1.8em 2em;
        font-size: 10px;
    }
}

.menu-btn a::before {
    content: "";
    display: block;
    width: 50px;
    height: 45.5px;
    background: url('/assets/dist/img/logo.png') no-repeat;
    position: absolute;
    top: 1px;
    background-size: cover;
}

@media (max-width: 768px) {
    .menu-btn a::before {
        content: "";
        display: block;
        width: 45px;
        height: 43.5px;
        background: url('/assets/dist/img/logo.png') no-repeat;
        position: absolute;
        top: 8px;
        background-size: cover;
    }
}
@media (max-width: 420px) {
    .menu-btn a::before {
        content: "";
        display: block;
        width: 40px;
        height: 35.5px;
        background: url('/assets/dist/img/logo.png') no-repeat;
        position: absolute;
        top: 1px;
        background-size: cover;
    }
}



/*----------------------
*
* slick setting
*
----------------------*/
.slick-prev,
.slick-next{
    height:0 !important;
    line-height: 0;
    text-indent:-9999px;
}

.slick-prev {
    position: absolute;
    top: 50%;
    z-index: 5;
}

.slick-prev:before{
    background: url(../img/clife_fv_slide_btn_prev.png) no-repeat;
    content:'';
    position:absolute;
    top:50%;
    transform: translate(0,-50%);
    z-index: 2;
}

.slick-next:before{
    background: url(../img/clife_fv_slide_btn_next.png) no-repeat;
    content:'';
    position:absolute;
    top:50%;
    transform: translate(0,-50%);
    z-index: 2;
}
@media screen and (max-width:750px){
    .slick-prev:before{
        background-size:4.53vw;
        height:4.53vw;
        left:2.66vw;
        width:4.53vw;
    }

    .slick-next:before{
        background-size:4.53vw;
        height:4.53vw;
        right:2.66vw;
        width:4.53vw;
    }
}
@media only screen and (min-width:751px){
    .slick-prev:before{
        background-size:34px;
        height:34px;
        left:20px;
        width:34px;
    }

    .slick-next:before{
        background-size:34px;
        height:34px;
        right:20px;
        width:34px;
    }
}

.clife__fv__copy{
    letter-spacing: 0.1em;
    margin          : -7.3% 0 0 0;
    position        : relative;
    text-align      : center;
}
@media only screen and (max-width:750px){
    .clife__fv__copy{
        font-size : 1.0rem;
    }
}
@media only screen and (min-width:751px){
    .clife__fv__copy{
        font-size : 28px;
    }
}

.clife__article-link{
    margin:0 4% 0;
    width:92%;
}

.clife__article-link__list{
    display         :flex;
    flex-wrap       : wrap;
    justify-content : space-between;
}

.clife__article-link__list li:first-child{
    margin : 0 0 2.89% 0;
}

.clife__article-link__list li:not(:first-child){
    margin : 0 0 6.08% 0;
    width  : 49.27%;
}


.clife__category{
    margin:0 4% 0;
    width:92%;
}


@media only screen and (max-width:750px){
    .clife__category__icon{
        margin:3.62% auto 2.89%;
        width:36.2% !important;
    }
}
@media only screen and (min-width:751px){
    .clife__category__icon{
        margin:25px auto 20px;
        width:250px !important;
    }
}

.clife__category__nav{
    display:flex;
    flex-wrap:wrap;
    justify-content: space-between;
}

.clife__category__nav__btn{
    display:block;
}
@media only screen and (max-width:750px){
    .clife__category__nav__btn{
        height:13.33vw;
        margin:0 0 2.17% 0;
        width:49.27%;
    }
}
@media only screen and (min-width:751px){
    .clife__category__nav__btn{
        height:100px;
        margin:0 0 15px 0;
        width:340px;
    }
}

.clife__category__nav__btn--new{
    background: url(../img/top_category_btn_new_off.png) no-repeat;
    background-size: 100% auto;
}

.clife__category__nav__btn--new.active{
    background: url(../img/top_category_btn_new_on.png) no-repeat;
    background-size: 100% auto;
}

.clife__category__nav__btn--mamapapa{
    background: url(../img/top_category_btn_mamapapa_off.png) no-repeat;
    background-size: 100% auto;
}

.clife__category__nav__btn--mamapapa.active{
    background: url(../img/top_category_btn_mamapapa_on.png) no-repeat;
    background-size: 100% auto;
}

.clife__category__nav__btn--until5month{
    background: url(../img/top_category_btn_until5month_off.png) no-repeat;
    background-size: 100% auto;
}

.clife__category__nav__btn--until5month.active{
    background: url(../img/top_category_btn_until5month_on.png) no-repeat;
    background-size: 100% auto;
}

.clife__category__nav__btn--from6month{
    background: url(../img/top_category_btn_from6month_off.png) no-repeat;
    background-size: 100% auto;
}

.clife__category__nav__btn--from6month.active{
    background: url(../img/top_category_btn_from6month_on.png) no-repeat;
    background-size: 100% auto;
}

.clife__category__nav__btn--all{
    display : none;
}

.clife__article-list{
    margin:10.86% 4% 0;
    width:92%;
}

.article-list-wrap{
    border-bottom:1px solid #e6e6e6;
    margin:0 0 4.3% 0;
}

.article-list-wrap:last-child{
    border-bottom:none;
}

.clife__article-list__article-list{
    display:flex;
    padding:0 0 4.3% 0;
    position:relative;
}



.clife__article-list__article-list__thumb{
    margin:3% 1.45% 0 0;
    width:31.88%;
}

.clife__article-list__article-list__new-icon{
    height:6.9%;
    left:3.62%;
    position:absolute;
    top:11%;
    width:6.9%;
}

.clife__article-list__article-list__info{
    width:66.67%;
}

.clife__article-list__article-list__info__category-icon{
    margin:0 0 4% 0;
    width:40% !important;
}

.clife__article-list__article-list__info__title{
    color:#333 !important;
    display: block;
    font-weight: bold;
    text-decoration:none !important;
}
@media only screen and (max-width:750px){
    .clife__article-list__article-list__info__title{
        min-height:14.5vw;
    }
}
@media only screen and (min-width:751px){
    .clife__article-list__article-list__info__title{
        height:150px;
    }
}

@media only screen and (min-width:751px){
    .clife__article-list__article-list__info__title{
        font-size:28px;
    }
}

.clife__article-list__article-list__info__title__subtitle{
    color:#808080;
    display:block;
}

.clife__article-list__article-list__info__date{
    color:#808080;
    font-size:10px;
}
@media only screen and (min-width:751px){
    .clife__article-list__article-list__info__date{
        font-size:20px;
    }
}




/*
// article
*/

.clife-article__fv__text{
    margin : 2.6% 6.66% 12%;
}

.clife-article__fv__text__date{
    color     : #666;
    font-size : 10px;
    margin    : 2.6% 0;
    padding   : 0 0 2.6%;
}

.clife-article__fv__text__copy{
    margin     : 0;
    text-align : justify;
}

.clife-article__fv__sub-image{
    padding:0 4% 12%;
    text-align : justify;
}

.clife-article__section{
    margin : 0 0 8% 0;
}


.clife-article__parent {
    width: 100%;
}
.parent-innner {
    width: 87%;
    margin: 0 auto;
}

.mdl--type-en {
    font-size: 20px;
}
@media (max-width: 768px) {
    .mdl--type-en {
        font-size: 15px;
        position: relative;
        top: -13px;
    }
}
@media (max-width: 530px) {
    .mdl--type-en {
        font-size: 12px;
    }
}
@media (max-width: 420px) {
    .mdl--type-en {
        font-size: 10px;
        position: relative;
        top: -10px;
    }
}
.mdl--type-kerning {
    font-size: 35px;
}
@media (max-width: 768px) {
    .mdl--type-kerning {
        font-size: 25px;
        position: relative;
        top: -15px;
    }
}
@media (max-width: 530px) {
    .mdl--type-kerning {
        font-size: 20px;
    }
}
@media (max-width: 420px) {
    .mdl--type-kerning {
        font-size: 18px;
        position: relative;
        top: -13px;
    }
}
.parent_btn {
    font-weight: bold
}
@media (max-width: 768px) {
    .parent_btn {
        font-size: 10px;
    }
}
@media (max-width: 768px) {
    .parent_btn {
        position: relative;
        top: 15px;
    }
}
.parent_btn:before {
    content: "▶";
    display: block;
    width: 8px;
    height: 8px;
    position: absolute;
    right: -20px;
    top: 1px;
}
@media (max-width: 768px) {
    .parent_btn:before {
        width: 6px;
        height: 6px;
        position: absolute;
        right: -20px;
        top: 6px;
    }
}
@media (max-width: 768px) {
    .parent_btn:before {
        width: 4px;
        height: 4px;
        position: absolute;
        right: -15px;
        top: -2px;
    }
}
.parent_btn:hover {
    color: #d61719;
}

.clife-article__content--wide{
    padding : 0 4%;
}

.clife-article__content__title{
    align-items   : flex-start;
    border-bottom : 4px solid #ff6699;
    display       : flex;
    font-size     : 18px;
    font-weight   : normal;
    margin        : 0 4% /*4%*/6%;
    padding       : 0 0 1.3% 0;
    width         : 92%;
}

.clife-article__content__title__subtitle{
    display:inline-block;
    font-size : 14px;
    margin:0 0 5px 0;
}

.clife-article__content__title--one-line{
    align-items   : center;
}

.icon_question{
    display   : inline-block !important;
    max-width : 62px;
    width     : 17.97% !important;
}
@media only screen and (max-width:750px){
    .icon_question{
        margin    : 1.3% 0 0 0;
    }
}
@media only screen and (min-width:751px){
    .icon_question{
        margin    : 0.6% 0 0 0;
    }
}
.oisix-banner a {
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    color: #000;
    text-decoration: none;
}
.oisix-banner-sp {
    display: none !important;
}
@media only screen and (max-width: 768px) {
    .oisix-banner-pc {
        display: none !important;
    }
    .oisix-banner-sp {
        display: block !important;
    }
}
.clife-article__content__title--one-line .icon_question{
    margin    : 0;
}

.clife-article__content__image{
    margin : 0 0 8% 0;
}

.clife-article__content__image--margin_small{
    margin : 0 0 5.3% 0;
}

.clife-article__content__image--margin_large{
    margin : 0 0 10.66% 0;
}

.clife-article__content__image--margin_exlarge{
    margin : 0 0 13.33% 0;
}

.clife-article__content__image--independence{
    margin: 14% 0;
}

.clife-article__content__text{
    padding:0 6.66% 8%;
    text-align : justify;
}
.clife-article__content__text--size_small{
    padding:0 6.66% 8%;
    font-size: 80%;
    text-align : left;
}

.clife-article__content__text--margin_no{
    padding:0 6.66%;
    text-align : justify;
}

.clife-article__content__text--margin_s{
    padding:0 6.66% 4%;
    text-align : justify;
}

.clife-article__content__text--margin_m{
    padding:0 6.66% 10.66%;
    text-align : justify;
}

.clife-article__content__text--margin_l{
    padding:0 6.66% 13.33%;
    text-align : justify;
}

.clife-article__content__text--bg_green{
    padding:8% 6.66% 8%;
    text-align : justify;
    background-color: #f5fdf2;
}

.clife-article__content__text--bg_yellow{
    padding:8% 6.66% 8%;
    text-align : justify;
    background-color:#fffcf3;
}

.clife-article__content__text--bg_blue{
    padding:8% 6.66% 8%;
    margin: 0 0 8% 0;
    text-align : justify;
    background-color:#f6fbff;
}

.clife-article__content__text--bg_beige{
    background-color:#fffcf3;
}

.clife-article__content__text--bg_sky-blue{
    background-color:#f5fdff;
}

.clife-article__content__text--bg_pink{
    background-color: #fff7fa;
}

.clife-article__content--bg_1903_01-content03_2-text{
    background: #eff6fb;
}

.clife-article__content--bg_1903_01-content03_4-text{
    background: #fffcf3;
}

.clife-article__content--bg_1903_02-content02_2-text{
    background: #ffffcc;
}

.clife-article__content--bg_1903_02-content02_3-text{
    background: #dfeef7;
}

.clife-article__content--bg_1903_02-content02_4-text{
    background: #f8ecf7;
}

.clife-article__content--bg_1907_02-content01_1-text{
    background: #fffbed;
}

.clife-article__content--bg_1907_02-content02_1-text{
    background: #e8f7f7;
}

.clife-article__content__number-of-responses{
    font-size  : 10px;
    text-align : right;
    margin     : 0 2.6% 0;
}

.clife-article__content__number-of-responses--margin_top-bottom{
    font-size  : 10px;
    text-align : right;
    padding    : 6.66% 8%;
}

.clife-article__content--bg_2001_03-content03_1-text{
    background: #fff7f9;
    margin:0 0 10.66%;
    padding:8% 6.66% 6.66%;
}

.clife-article__content__survey{
    border-bottom : 1px dashed #000;
    border-top    : 1px dashed #000;
    font-size     : 12px;
    margin        : 13.3% 6.6% 8%;
    padding       : 4.2% 0;
}

.clife-article__content__survey--margin-top-none{
    margin : 0 6.6% 8%;
}

.clife-article__content__survey__title{
    font-weight : bold;
    line-height : 1.75;
}

.clife-article__content__survey__text{
    line-height : 1.75;
}




/* toplink */

.toplink{
    padding    : 4% 2%;
    text-align : right;
}

.toplink a{
    background   : url(../img/side_arrow2.png) left center no-repeat;
    padding-left : 16px;
}


/* footer content link */

.clife__footer-content-link{
    padding: 5.3% 15px;
    width   : 100%;
}

.clife__footer-content-link li{
    display   : block;
    margin    : 0 auto 2.26%;
    max-width : 560px;
}




/* app dl */

.clife-app-dl{
    background      : #FFF9E6;
    bottom          : 0;
    left            : 0;
    position        : fixed;
    width           : 100%;
    z-index         : 9999;
}

@media only screen and (min-width: 751px) {

  .clife-app-dl__inner{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 15px;
  }

  .clife-app-dl__icon img{
    width: 500px;
    max-width: 100%;
    height: auto;
  }

}

@media only screen and (max-width: 750px){

  .clife-app-dl__inner{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 15px;
  }

  .clife-app-dl__icon{
    width: auto !important;
    margin: 0;
  }

  .clife-app-dl__icon img{
    width: auto;
    max-width: 100%;
    margin: 0 auto;
  }

}

.clife-app-dl__close-btn{
  position: relative;
  left: -10px;
  z-index: 1;
}

/*　2105_01吹き出し　*/
.clife-article__content--bg_2105_01-content01_1{position: relative;/*background: url(../img/article/2105_01/2105_01_content01_1-image.png) no-repeat;background-size: contain;*/}
.clife-article__content--bg_2105_01-content01_1 .text_01{position: absolute;top: 10%;left: 33%;font-size: 102%;letter-spacing: 0.1em;width: 55%;font-weight: bold;line-height: 1.4;transform: translate(0,-50%);}
.clife-article__content--bg_2105_01-content01_1 .text_02{position: absolute;top: 36%;left: 13%;font-size: 102%;letter-spacing: 0.1em;width: 55%;font-weight: bold;line-height: 1.4;transform: translate(0,-50%);}
.clife-article__content--bg_2105_01-content01_1 .text_03{position: absolute;top: 63%;left: 33%;font-size: 102%;letter-spacing: 0.1em;width: 55%;font-weight: bold;line-height: 1.4;transform: translate(0,-50%);}
.clife-article__content--bg_2105_01-content01_1 .text_04{position: absolute;top: 90%;left: 13%;font-size: 102%;letter-spacing: 0.1em;width: 55%;font-weight: bold;line-height: 1.4;transform: translate(0,-50%);}
@media only screen and (min-width:751px){
    .clife-article__content--bg_2105_01-content01_1 .text_01,.clife-article__content--bg_2105_01-content01_1 .text_02,.clife-article__content--bg_2105_01-content01_1 .text_03,.clife-article__content--bg_2105_01-content01_1 .text_04{font-size:187%;}
}
/*　2105_01吹き出しここまで　*/


/*　uservoice　*/
.clife-article__content__uservoice{
    margin: 0 auto 12%;
    padding: 0 8.8%;
}

.clife-article__content__uservoice li{
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    margin: 0 0 6%;
}

.clife-article__content__uservoice li:nth-child(even){
    flex-direction: row-reverse;
}

.clife-article__content__uservoice li img{
    flex-shrink: 0;
    margin: 3.23% 0 0;
    width: 18.93%;
}

.clife-article__content__uservoice li p{
    /*background: #fffcf3;*/
    border: 0.4vw solid #fdeabe;
    border-radius: 5.333vw;
    font-size: 102%;
    padding: 6.47%;
    position: relative;
    text-align: justify;
    width: 72%;
}

.clife-article__content__uservoice li p:before{
    background: url(../img/fukidashi_uservoice.png) no-repeat top left 0.266vw/100% auto;
    content:'';
    height:4vw;
    left: -6.933vw;
    position: absolute;
    top: 11.2vw;
    width: 6.933vw;
    z-index: 2;
}

.clife-article__content__uservoice li:nth-child(even) p:before{
    background: url(../img/fukidashi_uservoice.png) no-repeat top right -0.266vw/100% auto;
    left: auto;
    right: -6.933vw;
    transform: rotateY(180deg);
}

@media only screen and (min-width:751px){
    .clife-article__content__uservoice li p{
        border: 3px solid #fdeabe;
        border-radius: 40px;
        font-size: 187%;
    }

    .clife-article__content__uservoice li p:before{
        background: url(../img/fukidashi_uservoice.png) no-repeat top left 2px/100% auto;
        height: 30px;
        left: -52px;
        top: 84px;
        width: 52px;
    }

    .clife-article__content__uservoice li:nth-child(even) p:before{
        background: url(../img/fukidashi_uservoice.png) no-repeat top right -2px/100% auto;
        right: -52px;
    }
}


.clife-article__content__uservoice.clife-article__content__uservoice--2111_01 li p{
    background: #fff;
    border: 0.4vw solid #fff095;
}
@media only screen and (min-width:751px){
    .clife-article__content__uservoice.clife-article__content__uservoice--2111_01 li p{
        border: 3px solid #fff095;
    }
}

/*==================================================
AHW-956で追加　アコーディオンのためのcss
===================================*/

/*アコーディオン全体*/
.accordion-area{
  list-style: none;
  width: 96%;
  max-width: 900px;
  margin:0 auto;
}

.accordion-area li{
  margin: 10px 0;
}

.accordion-area section {
border: 1px solid #ccc;
}

/*アコーディオンタイトル*/
.title {
  position: relative;/*+マークの位置基準とするためrelative指定*/
  cursor: pointer;
  font-size:1rem;
  font-weight: normal;
  padding: 3% 3% 3% 50px;
  transition: all .5s ease;
}

/*アイコンの＋と×*/
.title::before,
.title::after{
  position: absolute;
  content:'';
  width: 15px;
  height: 2px;
  background-color: #333;
  
}
.title::before{
  top:48%;
  left: 15px;
  transform: rotate(0deg);
  
}
.title::after{    
  top:48%;
  left: 15px;
  transform: rotate(90deg);

}

/*　closeというクラスがついたら形状変化　*/

.title.btn_close::before{
transform: rotate(45deg);
}

.title.btn_close::after{
transform: rotate(-45deg);
}

/*アコーディオンで現れるエリア*/
.box {
  display: none;/*はじめは非表示*/
  margin:0 3% 3% 3%;
  padding: 3%;
}