@charset "UTF-8"; /**/
/* BASE */
.pB1{padding-bottom: 1%;}

.pB3{padding-bottom: 3%;}

.pB5{padding-bottom: 5%;}
.pB7{padding-bottom: 7%;}

.w85{width: 85%;}

#lutein_50th hr {
    border-top: 4px dotted #f39a1b;
    margin: 5% 5% 0%;
}
/****** Top Page ******/
#lutein_50th {
  text-align: center;
  background-color: #FFFFFF;
  font-family: 'Noto Sans JP', sans-serif, icomoon;
  background-image: url("../images/background_02.png");
  padding-bottom: 3%;
}

#lutein_50th a img {
    transition: 0.2s;
}
#lutein_50th a:hover {
    cursor: pointer;
}

/****** position 全体の位置調整 ******/
#lutein_50th div[class^="main_0"],
#lutein_50th .main_04_kuchikomi_bace,
#lutein_50th .main_04_btn,
#lutein_50th .main_05 .main_txt_base{
    position: relative;
}

#lutein_50th .main_01 .attention,
#lutein_50th .item_32521,
#lutein_50th .main_03_start,
#lutein_50th .item_32521_main_03,
#lutein_50th .main_03_more,
#lutein_50th .main_04_kuchikomi_01,
#lutein_50th .main_04_kuchikomi_02,
#lutein_50th .main_04_kuchikomi_03,
#lutein_50th .main_04_kuchikomi_04,
#lutein_50th .main_04_loupe,
#lutein_50th .footprints_01,
#lutein_50th .footprints_02,
#lutein_50th .footprints_03,
#lutein_50th .tyousa_title{
    position: absolute;
}

/****** ページ全体足跡 ******/
#lutein_50th .main_04 .footprints_01{
    bottom: -4%;
    left: 0;
}
#lutein_50th .main_05 .footprints_01{
    bottom: -4%;
    right: 0%;
    z-index: 5;
}

#lutein_50th .main_05 .footprints_02{
    bottom: -10%;
    left: -6%;
    z-index: 5;
}

#lutein_50th .main_07 .footprints_01{
    top: -13%;
    right: -3%;
}

#lutein_50th .main_07 .footprints_03{
    bottom: -8%;
    left: 0%;
}

/****** main_01　メインビジュアルの商品 ******/
#lutein_50th .item_32521{
    bottom: 20%;
    left: 15%;
    width: 14%;
}
#lutein_50th .item_32521:hover,
#lutein_50th .item_32521_main_03:hover,
#lutein_50th .spec_left img:hover{
    opacity: 0.8;
}
#lutein_50th .main_01 .attention{
    bottom: 2%;
    text-align: right;
    padding-right: 4%;
    padding-left: 47%;
}


/****** main_02　カート ******/
#lutein_50th .main_02 #goods32521,
#lutein_50th .main_02 #goods39192{
    font-size: 1.6em;
}

#lutein_50th .main_02 #goods32521,
#lutein_50th .main_02 #goods39192{
    padding-top: 5%;
}
#lutein_50th .main_02 .name{
    font-size: 0.9em;
    margin-bottom: 0;
}
#lutein_50th .main_02 .name_box{
    margin-bottom: 0;
}

#lutein_50th .main_02 .name a {
    color: #664733;
    font-weight: bold;
}

#lutein_50th .price2 {
    font-size: 2em;
    color: #e85d09;
}

#lutein_50th .main_02 .price2 strong {
    font-size: 1.7em!important;
    letter-spacing: -0.05em!important;
}
#lutein_50th .main_02 .cp_box {
    font-size: 0.6em;
    padding-bottom: 3%;
}
#lutein_50th .main_02 .tax {
    font-size: 0.4em;
}
#lutein_50th .main_02 .yen {
    font-size: 0.8em;
}
#lutein_50th .main_02 .btn {
    width: 60%;
    background-image: url(../images/main_02_off.png);/*通常の時のカート画像*/
    background-repeat: no-repeat;
    background-size: contain; /*背景全表示*/
    margin: auto;
    transition: 0.2s;
}
#lutein_50th .main_02 .btn a {
    display: block;
    padding-top: 5%; /*ボタンの画像サイズによって調整*/
}

#lutein_50th .main_02 .btn:hover {
    background-image: url(../images/main_02_on.png);/*オンマウスの時のカート画像*/
    background-repeat: no-repeat;
    background-size: contain; /*背景全表示*/
}
#lutein_50th .main_02 .btn p{
    opacity: 0;
}
/****** main_02　限定3個セット ******/
#lutein_50th .main_02{
    background-image: url("../images/background01.png");
    border-radius: 10px;
    margin: 4% 5%;
    padding-bottom: 3%;
}

#lutein_50th .main_02_link{
    text-align: right;
    color: #664733;
    display: block;
    font-size: 1.3em;
    font-weight: bold;
    margin-top: 2%;
    margin-right: 5%;
}

#lutein_50th .main_02_link:link{
    text-decoration: underline;
}
#lutein_50th .main_02_link:hover{
    text-decoration: none;
}
/****** main_03　ターゲット ******/
#lutein_50th .main_03{
    margin-top: 15%;
}
#lutein_50th .main_03_start{
    top: -9%;
    left: 1%;
    width: 85%;
}
#lutein_50th .item_32521_main_03{
    bottom: 34%;
    left: 12%;
    width: 27%;
}
#lutein_50th .main_03_more{
    bottom: 35%;
    right: 28%;
    width: 30%;
}

/****** main_04～07 調査報告テーブルベース ******/

#lutein_50th .main_04,
#lutein_50th .main_05,
#lutein_50th .main_06,
#lutein_50th .main_07{
    border-image-source: url(../images/table.png);
    border-style: solid;
    border-image-width: 47px;
    border-image-slice: 7% fill;
    margin: 3%;
    padding-bottom: 7%;
}


/****** main_04～07 共通 ******/

/* 調査結果タイトル */
#lutein_50th .tyousa_title{
    transform: translate(-50% , -50%);
    top: 1.5%;
    left: 50%;
}
#lutein_50th .main_05 .tyousa_title{
    top: 0.5%;
}

/* コメント */
#lutein_50th .main_txt_base{
    padding: 5%;
    background-color: #faf1dd;
    box-shadow: 0px 0px 25px 3px #ffe3b1 inset;
    color: #4b3323;
    text-align: left;
    font-size: 1.3em;
    line-height: 1.6em;
}


/****** main_04　調査その1 ******/

#lutein_50th .main_04{
    margin: 3% 3% 10%;
}

#lutein_50th .main_04 .attention{
    text-align: left;
    padding-left: 5%;
}

#lutein_50th .main_04 .main_inner{
    margin: 12% 5% 7%;
}
#lutein_50th .main_04_kuchikomi_bace {
    margin: 0 3% 3%;
}
#lutein_50th .main_04_kuchikomi_01{
    top: -3%;
    left: 1%;
}

#lutein_50th .main_04_kuchikomi_02{
    top: 2%;
    right: 1%;
    transition-delay: 0.4s;
}

#lutein_50th .main_04_kuchikomi_03{
    top: 31%;
    left: 2%;
    transition-delay: 0.6s;
}

#lutein_50th .main_04_kuchikomi_04{
    bottom: 3%;
    left: 3%;
    transition-delay: 0.8s;
}

#lutein_50th .main_04_loupe{
    bottom: 0%;
    right: -4%;
}


/****** main_05　調査その2 ******/

#lutein_50th .main_05{
    margin: 3% 3% 10%;
}
#lutein_50th .main_05 .main_inner{
    margin: 12% 5% 3%;
}
#lutein_50th .main_05_txt04{
    box-shadow: 0 0 0 2px #38200f;
    border: solid 8px #ffe3b1;
    background-color: #fff;
    color: #66452f;
    margin: 2px 8%;
    padding: 3%;
}

#lutein_50th .main_05_txt04 .contact_us .title{
    font-size: 2.5em;
    margin-bottom: 0;
	display: block;
}

#lutein_50th .main_05_txt04 .phone{
    font-size: 1.4em;
}
#lutein_50th .main_05_txt04 .phone a{
    color: #66452f;
    font-size: 2em;
	margin-left: 5px;
}

#lutein_50th .main_05_txt04 .hours{
    display: block;
}

 #lutein_50th .main_05 .attention{
    font-size: 1.6rem;
    color: rgba(75,35,51,0.7);  /*4b3323 不透明にする*/
}

#lutein_50th .main_05 .attention2{
    position: absolute;
    bottom: 22%;
    right: 3%;
    text-align: right;
    color: #806c5b;
    padding-left: 35%;
}

/****** main_06　調査その3 ******/
#lutein_50th .main_06 .main_inner .attention{
    text-align: right;
    padding-top: 1%;
    margin-left: 17%;
}
#lutein_50th .main_06 .attention{
    text-align: right;
    margin-left: 0%;
    font-size: 1.3rem;
    color:rgba(81,81,81,0.7); /*#515151 不透明にする*/
}

#lutein_50th .main_06 .main_inner{
    margin: 12% 5% 0%;
}
#lutein_50th .main_06 p {
     margin-bottom: 0em; 
}
/****** main_07　調査その4 ******/

#lutein_50th .main_07{
    margin: 3% 3% 10%;
}
#lutein_50th .main_07 .main_inner{
    margin: 12% 5% 3%;
}
#lutein_50th .main_07 p {
     margin-bottom: 0em; 
}
/****** main_09 まとめ ******/

.main_09{
    margin: 0 auto;
    text-align: center;
    background-color: #ffe3b1;
    padding: 7%;
    width: 720px;
}
.main_09_fb{
    margin-top: 3%;
}

/****** SPEC ******/
#lutein_50th .spec{
    background-color: #ffe3b1;
    margin: 5% 5% 8%;
    padding: 5%;
    border-radius: 10px;
}

#lutein_50th .spec #goods39192{
    padding-bottom: 2%;
}
#lutein_50th .spec .goods_set{
    display: flex; 
    flex-flow: column;
}
#lutein_50th .cp_discount{
    background-color: #ef5c28;
}

#lutein_50th .spec .img_box{
    flex: 0.8;
    padding-right: 3%;
}

#lutein_50th .spec .name {
    font-weight: bold;
    font-size: 1.05em;
}

#lutein_50th .spec .name a {
    color: #664733;
}
#lutein_50th .spec .name_box {
    margin-bottom: 0em;
}
#lutein_50th .spec .icon_box {
    font-size: 0.9em;
}
#lutein_50th .spec .txt_box {
    font-size: 1.1em;
    flex: 2;
    text-align: left;
}
#lutein_50th .spec .copy {
    display: none;
}


#lutein_50th .spec .btn {
    width: 45%;
    background-image: url(../images/main_02_off.png);
    background-repeat: no-repeat;
    background-size: contain;
    margin-left: auto;
    margin-top: 0.5em;
    transition: 0.2s;
}
#lutein_50th .spec .btn a {
    display: block;
    padding-top: 8%;
}
#lutein_50th .spec .btn:hover {
    background-image: url(../images/main_02_on.png);/*オンマウスの時のカート画像*/
    background-repeat: no-repeat;
    background-size: contain; /*背景全表示*/
}
#lutein_50th .spec .btn p{
    opacity: 0;
}
/*位置調整*/
#lutein_50th .spec .btn {
    margin-top: -60px;
    margin-left: auto;
    padding: 0;
}


/*******************/
/* 商品画像と商品情報パネル */
#lutein_50th .main_02 .c-panel__link {
    display: inline-flex;
}

/* 画像位置調整 */
#lutein_50th .main_02 .c-panel__header {
    display: none;
}

#lutein_50th .main_02 .sample_view .c-panel__header img {
    max-width: 100%;
    max-height: 100%;
	margin-bottom: auto;
    display: none;
}

 /* バッチ */
#lutein_50th .main_02 .sample_view .c-panel__badge{
    display: none;
}

/* 商品名、受取方法、価格 */
#lutein_50th .main_02 .c-panel__body {
    place-content: center;
    place-items: start;
}

/* 商品名色調整 */
#lutein_50th .main_02 .c-panel__name{
    color: #664733;
    margin: auto;
    font-size: 2.3rem;
}

/* 価格色調整 */
#lutein_50th .main_02 .c-panel__price-wrapper {
    color: #e85d09;
    margin: 0 auto;
    margin-top: 16px;
    position: relative;
    top:-10px;
    display: flex;
    gap: 10px;
    align-items: baseline;
    justify-content: space-between;
}

#lutein_50th .main_02 .c-panel__discount-period {
        font-size: 1.3rem;
        color: #333;
}

/* 価格サイズ調整 */
#lutein_50th .main_02 .c-price{
    font-size: 55px;
	color: #E85D09
}

#lutein_50th .main_02 .c-price-delete{
    font-size: 19px;
}

/* ボタン調整 */
#lutein_50th .main_02 .c-panel__action {
    display: none;
}

/*********************************************************/
/*******************/
/* 商品画像と商品情報パネル */
#lutein_50th .spec .c-panel__link {
    Display: inline-flex;
    align-items: flex-start;
    width: 100%;
    margin-bottom: 20px;
}

/* 画像位置調整 */
#lutein_50th .spec .c-panel__header {
    flex: 0.8;
    padding-right: 3%;
    margin-top: auto;
    margin-bottom: auto;
}

#lutein_50th .spec .sample_view .c-panel__header img {
    max-width: 100%;
    max-height: 100%;
	margin-bottom: auto;
}

 /* バッチ */
#lutein_50th .spec .sample_view .c-panel__badge{
    margin-right: auto;
}

/* 商品名、受取方法、価格 */
#lutein_50th .spec .c-panel__body {
    place-content: center;
    place-items: start;
    flex: 2;
    margin-top: 0;
}

/* 商品名色調整 */
#lutein_50th .spec .c-panel__name{
    color: #664733;
    font-size: 1.6rem;
}

/* 価格色調整 */
#lutein_50th .spec .c-panel__price-wrapper {
    color: #e85d09;
    position: relative;
    top:-10px;
    display: flex;
    align-items: baseline;
    gap: 10px;
    justify-content: space-between;
}

#lutein_50th .spec .c-panel__discount-period {
        font-size: 1.3rem;
        color: #333;
}
/* 価格サイズ調整 */
#lutein_50th .spec .c-price{
    font-size: 3.4rem;
	color: #E85D09;
}

/* ボタン調整 */
#lutein_50th .spec .c-panel__action {
    display: none;
}

.c-panel__desc {
    display: none;
}

/*********************************************************/


/* ふわっとアニメ */
/* 動作を適用する箇所 */


.fuwatAnime { 
-webkit-animation-fill-mode:both; 
-ms-animation-fill-mode:both; 
animation-fill-mode:both; 
-webkit-animation-duration:1.3s; /* アニメ時間 */
-ms-animation-duration:1.3s; 
animation-duration:1.3s; 
-webkit-transition-delay: 0.1s;/* 開始時間 */
-ms-transition-delay: 0.1s;
transition-delay: 0.1s;
-webkit-animation-name: fuwatAnime; /* アニメ名 */
-ms-animation-name: fuwatAnime; 
animation-name: fuwatAnime; visibility: visible !important; }
/* .fadeIn_r, .fadeIn_l {
-webkit-animation-duration: 1.5s; -ms-animation-duration: 1.5s; animation-duration: 1.5s;
-webkit-animation-iteration-count: 1; -ms-animation-iteration-count: 1; animation-iteration-count: 1;/* アニメの繰り返し（無限infinite）
}*/
.fadeIn_r_Anime { 
-webkit-animation-fill-mode:both; 
-ms-animation-fill-mode:both; 
animation-fill-mode:both; 
-webkit-animation-duration:1.3s; /* アニメ時間 */
-ms-animation-duration:1.3; 
animation-duration:1.3s; 
-webkit-transition-delay: 0.2s;/* 開始時間 */
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;
-webkit-animation-name: fadeIn_r_Anime; /* アニメ名 */
-ms-animation-name: fadeIn_r_Anime; 
animation-name: fadeIn_r_Anime; visibility: visible !important; }

.fadeIn_l_Anime { 
-webkit-animation-fill-mode:both; 
-ms-animation-fill-mode:both; 
animation-fill-mode:both; 
-webkit-animation-duration:1.2s; /* アニメ時間 */
-ms-animation-duration:1.2s; 
animation-duration:1.2s; 
-webkit-transition-delay: 0.2s;/* 開始時間 */
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;
-webkit-animation-name: fadeIn_l_Anime; /* アニメ名 */
-ms-animation-name: fadeIn_l_Anime; 
animation-name: fadeIn_l_Anime; visibility: visible !important; }

/* 動作内容 */
@-webkit-keyframes fuwatAnime {
 0% { opacity: 0; -webkit-transform: translateY(-25px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}

@keyframes fuwatAnime {
 0% { opacity: 0; -webkit-transform: translateY(-25px); -ms-transform: translateY(-50px); transform: translateY(-25px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

@media print, screen and (min-width: 768px) {
    #lutein_50th {
        width: 720px;
        margin: 0 auto;
    }
    .btn {border-radius: 0;}
  .c-price-delete{background: linear-gradient(transparent 10px, #333 10px, #333 11px, transparent 11px);}
	.c-panel__discount span{1.25rem;}
}



@media print, screen and (max-width: 768px) {
.pB1{padding-bottom: 3%;}
.pB3{padding-bottom: 5%;}
.pB7{padding-bottom: 5%;}
.w60{width: 60%;}
.w90{width: 90%;}
 #lutein_50th {
    background-size: 80px;
}
 #lutein_50th .footprints_01{
    width: 30%;
}
 #lutein_50th .footprints_02{
    width: 33%;
    bottom: -2%;
}
 #lutein_50th .main_07 .footprints_01{
    top: -10%;
}
 #lutein_50th .footprints_03{
    width: 30%;
}

 #lutein_50th .main_01 .attention{
    right: 0;
    bottom: 1%;
    font-size: 0.5em;
    font-size: 0.5em;
    padding-left: 30%;
    padding-right: 3%;   
}
 #lutein_50th .main_02 #goods32521,
 #lutein_50th .main_02 #goods39192{
    font-size: 1.0em;
}
 #lutein_50th .main_02 .name{
    padding: 0;
    font-size: 0.85em;
    letter-spacing: -0.05em;
}
 #lutein_50th .main_02 .price2 {
    font-size: 1.8em;
    color: #e85d09;
}
 #lutein_50th .main_02 .btn {
    width: 60%;
    margin-top: 0%;
    padding: 0;
}
 #lutein_50th .main_02{
    border-radius: 7px;
    padding: 0% 3% 5%;
    background-size: 15px;
}
 #lutein_50th .main_02_link{
    font-size: 0.8em;
    margin: 10px 0 0 0;
}
 #lutein_50th .main_04,
 #lutein_50th .main_05{
    margin: 2% 2% 10%;
}
 #lutein_50th .main_04,
 #lutein_50th .main_05,
 #lutein_50th .main_06,
 #lutein_50th .main_07{
    border-image-width: 30px;
    border-image-slice: 60 fill;
}
 #lutein_50th .tyousa_title{
    width: 50%;
}
 #lutein_50th .main_txt_base{
    font-size: 0.85em;
}
 #lutein_50th .main_04 .attention{
    font-size: 0.6em;
}
 #lutein_50th .main_04_kuchikomi_01{
    width: 50%;
}
 #lutein_50th .main_04_kuchikomi_02{
    width: 45%;
}
 #lutein_50th .main_04_kuchikomi_03{
    width: 40%;
}
 #lutein_50th .main_04_kuchikomi_04{
    width: 45%;
}
 #lutein_50th .main_04_loupe{
    width: 60%;
    bottom: 2.5%;
}
 .main_04_btn{
    width: 65%;
}
 #lutein_50th .main_05_txt04{
    border: solid 5px #ffe3b1;
    margin: 2px 5%;
    padding: 3%;
}
 #lutein_50th .main_05_txt04 .contact_us .title{
    font-size: 1.5em;
	 display: block;
}
 #lutein_50th .main_05_txt04 .phone a{
    font-size: 1em;
}
 #lutein_50th .main_05_txt04 .hours{
    font-size: 0.6em;
}
 #lutein_50th .main_05 .attention2{
    bottom: 20%;
    font-size: 0.7em;
    padding-left: 32%;
}
 #lutein_50th .main_05_txt03{
    width: 90%;
    padding-top: 8%;
}
 #lutein_50th .main_06 .attention{
    margin-left: 5%;
    font-size: 0.7em;
}
 .main_09_fb{
    width: 85%;
    margin-top: 5%;
}
 #lutein_50th .spec{
    padding: 3%;
}
 #lutein_50th .spec .price2 {
    font-size: 1em;
}
 #lutein_50th .spec .img_box{
    flex: 1.3;
    padding-right: 0%;
}
 #lutein_50th .spec .goods_set{
    margin: 0 2%;
}
 #lutein_50th .spec .name {
    font-size: 0.9em;
}
 #lutein_50th .spec .txt_box {
    margin-left: 3%;
    font-size: 0.8em;
}

 #lutein_50th .spec .btn {
    width: 45%;
    margin-top: -25px;
}
.main_09 {
width: 100%; /* スマホ用 */
}

.btn {border-radius: 0;}
#lutein_50th .main_02 .c-panel__name {font-size: 14px;}
#lutein_50th .main_02 .c-price {font-size: 3.3rem;}
#lutein_50th .spec .c-panel__link {margin-bottom: 20px;}
#lutein_50th .spec .c-panel__header {flex: 0.8;padding-right: 3%;}
#lutein_50th .spec .c-panel__name {font-size: 11.6px;text-align: left;}
#lutein_50th .spec .c-price { font-size: 15px;}
#lutein_50th .spec .c-price-delete { font-size: 11px;}
#lutein_50th .spec .c-panel__discount-period {font-size: 0.8rem;}
.c-panel__desc{
  display:none;
}

#lutein_50th .main_05 .attention{font-size: 1rem;}
#lutein_50th .main_06 .attention{font-size: 0.7rem;}

/* 価格サイズ調整 */
#lutein_50th .main_02 .c-price{
    font-size: 42px;
	color: #E85D09
}

#lutein_50th .main_02 .c-price-delete{
    font-size: 14.5px;
}
}

#lutein_50th .goods_set .btn a{
  display: block;
  width: 100%;
  padding: 14px 0;          /* 高さを増やす：好みで調整 */
  text-align: center;
}

#lutein_50th .goods_set .btn a p{
  margin: 0;
  line-height: 1;
}

.c-price-delete{
  background: linear-gradient(transparent 0px, rgb(0, 0, 0) 0px, rgb(0, 0, 0) 0px, transparent 0px) !important;
  color: #666;
}

.c-price-delete .d-inline-block{
  text-decoration: line-through;
  text-decoration-color: #333;
  text-decoration-thickness: 1px;
}

.c-price-delete-yen {
  display: inline-block;
  position: relative;
  z-index: 1;
  /*background: white;  線を隠す背景 */
  padding: 0 2px;
}