/* 機能POPタブ分け */


@media screen and (max-width: 767px)
.tab-group {
    padding: 0 0px;
    margin-right: -0px;
    margin-left: -0px;
}
.tab-group {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    background: url(/common/feature/images/eglamagic/pc/line.png) repeat-x 0 bottom;
}

.tab-group .tab.is-active {
    background: #fff;
    transition: all 0.2s ease-out;
    border-top: 1px solid #808080;
    border-right: 1px solid #808080;
    border-left: 1px solid #808080;
    border-bottom: none;
}
.tab-group .tab {
    position: relative;
    flex-grow: 1;
    border-top: 1px solid #808080;
    border-right: 1px solid #808080;
    border-left: 1px solid #808080;
    border-bottom: 1px solid #808080;
    padding: 4px;
    margin: 0;
    list-style: none;
    text-align: center;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
    cursor: pointer;
    background-color: #ebebeb;
    width: calc(100% / 3);
    margin-right: 5px;
}
@media screen and (max-width: 767px)
.tab-group .tab {
    border-top: 1px solid #808080;
    border-right: 1px solid #808080;
    border-left: 1px solid #808080;
    margin-right: 0;
    padding: 5px;
}


.tab-group .tab p {
    font-size: 1.5rem;
    color: #696969;
}

/* スマートフォンで見たとき */
@media only screen and (max-width: 750px) {
.tab-group .tab p {
    font-size: 1.3rem;
    color: #696969;
}
}

.panel-group .panel.is-show {
    display: block;
}
@media screen and (max-width: 767px)
.panel-group .panel {
    margin-top: 20px;
}

.panel-group .panel {
    display: none;
    margin-top: 22px;
}

.column-box .item dl dd .sub-img {

    width: 640px;
    height: auto;
    max-width: 100%;

}

@media screen and (max-width: 767px)
#main .flex-box.column-box {
    flex: none;
}
#main .flex-box.column-box {
    margin-bottom: 0px;
}
#main .flex-box {
    display: flex;
    flex-wrap: wrap;
}

#main .flex-box.column-box .item {
    width: calc(40% - 20px);
    margin-right: 20px;
}

#main .flex-box.column-box .text {
    width: calc(100% - 0px);
    margin-right: 0px;
}
    
#main .sec01 .heading_h1 span {
    background: linear-gradient(transparent 57%, #f4e5db 0%);
}

#main .sec02 .heading_h1 span {
    background: linear-gradient(transparent 57%, #f4e5db 0%);
}

#main .sec03 .heading_h1 span {
    background: linear-gradient(transparent 57%, #f4e5db 0%);
}    


/* 商品紹介 */
 
#main .flex-box {
    display: flex;
    flex-wrap: wrap;
}

@media only screen and (max-width: 750px) {
#main .flex-box  {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}   
}
    
.item-only {
    width: 491px;
    margin: 0px auto 0;
}
    
.item-only .coode-item-img {
    width: 60%;
}
    

.item-only .coode-item-txt {
    margin: 0 0 0 20px;
    width: calc(40% - 20px);
}
    
.item-only .coode-item-txt .btn_wrap {
    text-align: left;
}
.btn_wrap {
    margin: 10px auto 10px;
}
.btn_wrap {
    margin: 10px auto 10px;
    text-align: center;
}
    
.item-only .coode-item-txt .btn_wrap a {
    text-align: center;
}
.btn_wrap .btnItem.b_black {
    background-color: #4D4D4D;
    color: #fff;
}
.btn_wrap .btnItem {
    max-width: 280px;
}
.btn_wrap .btnItem {
    background-color: #fff;
    color: #4D4D4D;
    border: 1px solid #4D4D4D;
    border-radius: 4px;
    font-size: 13px;
    padding: 17px 10px;
    max-width: 220px;
    width: 100%;
}
.btn_wrap a {
    display: inline-block;
}
a:link, a:visited, a:hover, a:active {
    color: #4d4d4d;
    text-decoration: none;
}
a, a img {
    transition: all 0.5s;
}    



/* ３冠達成 */

/* ---------------------flex-box */
#main .flex-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
#main .flex-box .flex-cont {
  margin-right: 20px;
}
#main .flex-box.col-2 .flex-cont {
  width: 452.5px;
  width: calc(calc(100% - 20px) / 2);
}
@media screen and (max-width: 767px) {
  #main .flex-box.col-2 .flex-cont {
    width: auto;
    margin-right: 0;
  }
}
#main .flex-box.col-2 .flex-cont:nth-child(even) {
  margin-right: 0;
}
#main .flex-box.col-2 .flex-cont:last-child {
  margin-right: 0;
}
#main .flex-box.award .flex-cont {
  margin: 0 25px;
}
@media screen and (max-width: 767px) {
  #main .flex-box.award .flex-cont {
    margin: 0 0 0 -7%;
    width: 37.9%;
  }
}
@media screen and (max-width: 767px) {
  #main .flex-box.award .flex-cont:first-child {
    margin: 0;
  }
}

/* 機能内_画像 */

.kinou {
float: left;
width: 50%;
padding-right: 10px;
}


/* レビュー_アコーディオン */

summary {
  cursor: pointer;

}
details {
  margin: 5px;
  padding: 5px;
  border-radius: 10px;
border-color: #595959 ; 
border:1px;
}
details[open] {
  background: #fdf7dd;

}


/* ジャンプタブ分け */

.content {
  width: 100%;
  height: auto;
  background-color: ;
}

.inner {
  padding-top: 30px;
  display: flex;
  justify-content: space-evenly;

}

.inner p{

font-weight:600; 
font-size: 14px;
}

.inner-1 {
padding: 10px 6px 6px 6px;
width: 30%;
 width: 90%; /*幅の調節*/
 color: #666666; /*文字色*/
background-color: #FBD8B1;/*背景色*/
 border: px solid #ccc; /*線の太さ・色*/
 border-radius: 5px; /*角の丸み*/ 
line-height: 10px;

}

.inner-2 {
padding: 10px 6px 6px 6px;
width: 30%;
 width: 90%; /*幅の調節*/
 color: #666666; /*文字色*/
background-color: #dbe4e5; /*背景色*/
 border: px solid #ccc; /*線の太さ・色*/
 border-radius: 5px; /*角の丸み*/ 
margin-left: 5px;
margin-right: 5px;
line-height: 10px;

}

.inner-3 {
padding: 10px 6px 6px 6px;
width: 30%;
 width: 90%; /*幅の調節*/
 color: #666666; /*文字色*/
background-color: #dfdced;/*背景色*/
 border: px solid #ccc; /*線の太さ・色*/
 border-radius: 5px; /*角の丸み*/ 

line-height: 10px;

}

/*  レビュー */
/* section-review
//////////////////////*/
.section-review {
  background: rgba(221, 127, 111, 0.1);
  padding: 40px 0 0 0;;
  margin-bottom: 0px;
}

@media only screen and (max-width: 767px) {
  .section-review {
    padding: 26px 0 0 0;
    margin-bottom: 0px;
  }
}

.section-review .review-list {
  width: 780px;
  margin: 0 auto;
}

@media only screen and (max-width: 767px) {
  .section-review .review-list {
    width: auto;
    margin-top: 20px;
  }
}

.section-review .review-list li {
  width: calc(100% - 60px);
  background: #fff;
  padding: 1em;
  font-size: 1.8rem;
  border-radius: 10px;
  letter-spacing: 0;
}

@media only screen and (max-width: 767px) {
  .section-review .review-list li {
    width: 100%;
    font-size: 1.5rem;
    padding: 0.6em 1.3em;
    line-height: 2.2;
  }
}

.section-review .review-list li:nth-of-type(even) {w
  margin-left: auto;
}

.section-review .review-list li:not(:last-of-type) {
  margin-bottom: 20px;
}

@media only screen and (max-width: 767px) {
  .section-review .review-list li:not(:last-of-type) {
    margin-bottom: 15px;
  }
}



.headline {
    text-align: center;
}

.headline__title {
    padding: 1.34em 0;
    font-size: 3rem;
    letter-spacing: 0.25ch;
    font-weight: bold;
    font-family: 'Roboto', sans-serif;
}
@media only screen and (max-width: 767px) {
.headline__title {
    padding: 1.34em 0;
    font-size: 3rem;
    letter-spacing: 0.25ch;
    font-weight: bold;
    font-family: 'Roboto', sans-serif;
position: relative; top: 10px;
}
}
.row {
    max-width: 1010px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 25px;
}


/*  タブ分け_2 */

..tab_wrap{
    width:100%; margin:0px auto;}
input[type="radio"]{
    display:none;}
.tab_area{
    font-size:0; margin:0 5px;}
.tab_area label{
    width:30%; margin:0 0px; display:inline-block; padding:12px 0; color:#999; background:#eee; text-align:center; font-size:13px; cursor:pointer; transition:ease 0.2s opacity; border-top-left-radius: 5px;  border-top-right-radius: 5px;/*角の丸み*/ }
.tab_area label:hover{opacity:0.5;}
.panel_area{background:rgba(221, 127, 111, 0.1);}
.tab_panel{width:100%; padding:20px 0; display:none;}
.tab_panel p{font-size:16px; letter-spacing:1px; text-align:center;}

#tab1:checked ~ .tab_area .tab1_label{background:rgba(221, 127, 111, 0.1); color:#000;}
#tab1:checked ~ .panel_area #panel1{display:block;}
#tab2:checked ~ .tab_area .tab2_label{background:rgba(221, 127, 111, 0.1); color:#000;}
#tab2:checked ~ .panel_area #panel2{display:block;}
#tab3:checked ~ .tab_area .tab3_label{background:rgba(221, 127, 111, 0.1); color:#000;}
#tab3:checked ~ .panel_area #panel3{display:block;}


/*   機能_文中_new */

.new{
font-size: -1;
color: #fff; background-color: #E49875; width: auto; padding: 2px 5px ; margin: 3px 5px ; border-radius: 3px;border: 1px;
}
       
/*  画像切り抜き */


.img_trm_bra img{
  width: 100%;
/*height: 270px;*/
  object-fit: cover; /* この一行を追加するだけ！ */
}

@media only screen and (max-width: 767px) {
.img_trm_bra img{
  width: 100%;
/*height: 200px;*/
  object-fit: cover; /* この一行を追加するだけ！ */
  }
}



.img_trm img{
  width: 100%;
height: 100px;
  object-fit: cover; /* この一行を追加するだけ！ */
}

@media only screen and (max-width: 767px) {
.img_trm img{
  width: 100%;
height: 70px;
  object-fit: cover; /* この一行を追加するだけ！ */
  }
}