@charset "utf-8";


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

	Global

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

* {
	margin: 0;
	padding: 0;
	}

.section {
	max-width: 1200px;
	line-height: 2.6rem;
    font-family: 'Kosugi Maru', sans-serif;
    font-family: 'Kiwi Maru', serif;
    list-style-type: none;
    margin: auto;
	}


.section a {
	color: #193D60;
	padding: 0;
	text-decoration: none;
	}
	.section a:hover {
		color: #000;
		text-decoration: none;
		opacity: .8;
		}
	.section a img {
		border: none;
		}

.section p {
	margin: 0;
	padding: 10px 0 10px;
    font-family: fot-tsukuardgothic-std, sans-serif;
    font-weight: 700;
    font-style: normal;
    
	}

.section h11, .about_midashi h01>span {
    color:#FFF24B;
	}


.section span .br {
		display: block;
		}

.section img {
	margin: 0;
	padding: 0;
	max-width: 100%;
    width: auto;
	height: auto;
	}


.section li{
    list-style-type: none;
}

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

	配置制御

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

.alignleft {
	margin: 0 0 10px 0;
	}

.alignright {
	margin: 0 0 10px 0;
	}

.aligncenter {
	text-align: center;
	}

.display_s {display: inline;}
.display_pc {display: none;}



.rigth {
    float: right;
    margin: auto;
}

.left {
    float: left;
    margin: auto;
}


/* clearfix
----------------------------------------------*/




/* 余白
----------------------------------------------*/

.break{
    display: block;
}

.break_2{
    display: none;
}



/* h01~midashi
----------------------------------------------*/
h01 {
    font-size: 2.2rem;
    font-family: fot-tsukuardgothic-std, sans-serif;
    font-weight: 700;
    font-style: normal;
}

h11 {
    font-family: fot-tsukuardgothic-std, sans-serif;
    font-weight: 600;
    font-style: normal;
    color:#fff;
    font-size: 2.2rem;
}

h02 {
    font-size: 1.2rem;
    font-family: fot-tsukuardgothic-std, sans-serif;
    font-weight: 700;
    font-style: normal;
    color: #1D2088;
    background: #FFF843;
    border-radius: 8px;
    padding: 2px 5px;
}


h22 {
    font-family: fot-tsukuardgothic-std, sans-serif;
    font-weight: 700;
    font-style: normal;
    color: #1D2088;
    margin: auto;
    text-align: center;
    font-size: 3rem;
    position: relative;
    }


h33 {
    font-size: 1.6rem;
    font-family: fot-tsukuardgothic-std, sans-serif;
    font-weight: 700;
    font-style: normal;
    color: #1D2088;

}

h33,h22 span {
  position: relative;
  background: linear-gradient(transparent 40%, yellow 40%);
}

h44{
    margin: auto;
    text-align: center;
    font-size: 2.8rem;
    color: #fff;
    font-family: fot-tsukuardgothic-std, sans-serif;
    font-weight: 700;
    font-style: normal;
    line-height: 3.6rem;
}



.fukidashi_Q{
    position:relative;
    width:300px;
    height:60px;
    background:#8BD5E6;
    padding:20px;
    text-align:left;
    color:#333333;
    font-size:14px;
    font-weight:bold;
    border-radius:12px;
    -webkit-border-radius:12px;
    -moz-border-radius:12px;
}
.fukidashi_Q:after{
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    border-color: rgba(139, 213, 230, 0);
    border-top-width:10px;
    border-bottom-width:10px;
    border-left-width:30px;
    border-right-width:30px;
    margin-top: -10px;
    border-right-color:#8BD5E6;
    right:100%;
    top:65%;
}







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

	アニメ―ジョン

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

.click {
   content: ▼;
   width: 33.3%;
   margin: 50px auto;
   border-radius: 50px;
   color: #95dade;
   animation: fuwafuwa 2s infinite;
   display: inline-table;
   padding: 0!important;
}

@keyframes fuwafuwa {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-30px);
  }
  100% {
    transform: translateY(0px);
  }
}





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

	Header

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

.header {
    content: "";
 	max-width: 1200px;
    height: auto;
    margin: auto;
    padding: 0 0 3%;
    text-align: center;
    background-image: url(https://lecinc.itembox.design/item/html/oyasumin_lp/img/backgraund_star.png);
	}

.header_item {
    max-width: 1000px;
    margin: auto;
    text-align: center;
}

.header img {
    margin: auto;
    text-align: center;
}

.header_midashi {
    margin: auto;
    padding: 2% 0 6%;
    text-align: center;
}

.header_item_list{

width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;

}


.header_item_img{
width: 32%;
    
}

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

	about_おやすみん

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


.about_oyasumin {
    max-width: 1200px;
    margin: auto;
    background-image: url(https://lecinc.itembox.design/item/html/oyasumin_lp/img/backgraund_dark.png);
    color:#fff;
    padding: 1%;
}

.about_midashi {
    height: 30px;
    display: block;
    color: #fff;
    padding: 5%;
    width: 80%;
    margin-left: 5%;
}
.about_illust {
    display: flex;
    height: 450px;
    padding: 0 2%;
}

.about_illust li {
    width: 60%;
    position: relative;
}




.about_oyasumin .about_illust li .illust_01 {
    position: absolute;
    left: 23%;
    top: -12%;
    margin: auto;
    width: 80%;
}

.about_oyasumin .about_illust li .illust_02 {
    position: absolute;
    top: 90px;
    left: -5%;
    width: 62%;
}

.about_oyasumin .about_illust li .illust_03 {
    position: absolute;
    top: 48%;
    left: 56%;
    width: 30%;
}


.about_illust .about_text {
    width: 40%;
    margin: 6% auto;
    
}

.about_illust .about_text p {
    margin: 6% auto 0;
    
}

.about_text .about_text_h01 {
    margin: 5% auto;
    height: 20px;
}

.about_text .about_text_h01:after {
    border-top: 1px solid; 
    margin: auto;
    width: 200px;
    padding:-2px 0 0 10px;
  content: '';
  position: relative;
  display: inline-block;
}


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

	眠りと体温

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

.sleep_body {
    max-width: 1000px;
    margin: auto;
    text-align: center;
}

.sleep_body .icon_mini {
    margin: auto;
    text-align: center;
}
.sleep_body ul {
    width: 100%;
    margin: 2% auto 3%;
    text-align: center;
}


.sleep_body li {
    width: 100%;
    margin: 5% auto;
}


.sleep_body h22::before{
    content:"";
    background-image: url(https://lecinc.itembox.design/item/html/oyasumin_lp/img/line_black.png);
    position:absolute;
    height: 5px;
    width: 100%;
    margin:7% 0 0 -105%;
}

.sleep_body h22::after{
    content:"";
    background-image: url(https://lecinc.itembox.design/item/html/oyasumin_lp/img/line_black.png);
    position:absolute;
    height: 5px;
    width: 100%;
    margin:7% 0 0 5%; 
}

.sleep_body .sleep_image {
    width: 38%;
    margin: auto;
    padding: 1% 2% 2%;
}

.sleep_body .sleep_p {
    width: 54%;
    margin: auto;
    padding: 2%;
    text-align: start;
    color: #1D2088;
}

.sleep_midashi{
    width: 100%;
    margin: 8% auto 4%;
    text-align: center;
    height: auto;
    color: #1D2088;
}



/* 深部体温
----------------------------------------------*/
/*.deep_temperature {
    width: 80%;
    margin: auto;
    background-color: #4BB1C1;
    border-radius: 10px;
    
}*/

.deep_temperature {
    width: 80%;
    text-align:start;
    height: 140px;
    margin: 8% auto 4%;
    background-color:#8BD5E6;
    border-radius: 10px; 
    padding: 4% 4% 1% 4%;
    display: inline-table;
}

.deep_temperature div {
    margin: 1% 4% 0 4%;
}

.deep_temperature div h11 {
    font-size: 2.4rem;
}

.deep_temperature p{
    width: 80%;
    font-size: 1.6rem;
    text-align: start;
    margin: auto -1px;
}

.deep_temperature img {
    width: 28%;
    margin: -22% 0 0 65%;
}


/* pickup
----------------------------------------------*/

.pickup {
    height: auto;
    text-align: center;
    margin: 2%;
    position:relative;
}



/*about_hoot*/

.hand_foot_oyasumin {
    padding: 5%;
    width: 100%;
    background-image: url(https://lecinc.itembox.design/item/html/oyasumin_lp/img/backgraund_platinum.png);
    background-size: cover;
}


.about_foot {
    width: 90%;
    height: 1000px;
    margin: auto;
    display: inline-table;
}
.hand_foot_oyasumin img{
    width: 80%;
    margin: auto;
    }

.about_foot li {
    display: block;
    width: 100%;
    margin: auto;
}

.about_foot li img {
    width: 100%;
    margin: auto 1%;
    padding: 5%;
    display: inline-table;
}

.about_foot li p {
    text-align: start;
    width: 80%;
    margin: auto 1%;
    display: inline-table;
    color: #fff;
    font-size: 1.8rem;
}



/*about_hoot*/

.hand_hand_oyasumin {
    padding: 5%;
    width: 100%;
    background-image: url(https://lecinc.itembox.design/item/html/oyasumin_lp/img/backgraund_platinum.png);
    background-size: cover;
}


.about_hand {
    width: 90%;
    height: 1000px;
    margin: auto;
    display: inline-table;
}
.hand_hand_oyasumin img{
    width: 80%;
    margin: auto;
    }

.about_hand li {
    display: block;
    width: 100%;
    margin: auto;
}

.about_hand li img {
    width: 100%;
    margin: auto 1%;
    padding: 5%;
    display: inline-table;
}

.about_hand li p {
    text-align: start;
    width: 80%;
    margin: auto 1%;
    display: inline-table;
    color: #fff;
    font-size: 1.8rem;
}



/*about_sheet*/

.hand_sheet_oyasumin {
    padding: 5%;
    width: 100%;
    background-image: url(https://lecinc.itembox.design/item/html/oyasumin_lp/img/backgraund_platinum.png);
    background-size: cover;
}

.about_sheet {
    width: 90%;
    height: 1000px;
    margin: auto;
    display: inline-table;
}
.hand_sheet_oyasumin img{
    width: 100%;
    margin: auto;
    }

.about_sheet .aroma {
    display: grid;
    display: inline-table;
    margin: auto;
    width: 33.3%;
    padding: 5%;
}

.about_sheet .aroma img {
    width: 100%;
    margin: auto 1%;
    padding: 5%;
    display: inline-table;
}


.aroma h11 {
    width: 33.3%;
    text-align: center;
    margin: auto;
    font-size: 2.2rem;
}

.aroma p{
    width: 100%;
    text-align: center;
    margin: auto;
    color: #fff;
    font-size: 1.8rem;
    line-height: 2.2rem;
}


.tab-buttons {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}


.tab-buttons span {
    font-size: 14px;
    font-family: fot-tsukuardgothic-std, sans-serif;
    font-weight: 700;
    font-style: normal;
    color: #fff;
    background: url(https://lecinc.itembox.design/item/html/oyasumin_lp/img/background_star-platinum.png)no-repeat;
    background-blend-mode: screen;
    background-color: steelblue;
    background-size: cover;
    cursor: pointer;
    border-bottom: 2px solid #ddd;
    width: 32%;
    text-align: center;
    line-height: 40px;
    border-radius: 12px;
    padding: 1%;
    /* position: relative; */
}



/*.tab-buttons span {
    font: 400 14px 'open sans',sans-serif;
    color: #fff;
    background: url(https://lecinc.itembox.design/item/html/oyasumin_lp/img/background_star-platinum.png)no-repeat;
    cursor: pointer;
    border-bottom: 2px solid #ddd;
    display: block;
    width: 33.3%;
    float: left;
    text-align: center;
    line-height: 40px;
}*/


.tab-buttons span:hover{
    background-blend-mode: soft-light;
}


.tab-content{
  border-bottom:3px solid #ddd;
  padding: 2% 0;
  background:#fff;
  display:inline-block;
  font:400 13px 'open sans',sans-serif;
  color:#333;
}


.tab-content p {
    font-size: 1.8rem;
    color: #fff;
    font-family: fot-tsukuardgothic-std, sans-serif;
    font-weight: 700;
    font-style: normal;
}

/*#lamp{
  width:33.3%;
  height:2px;
  background:#fff;
  display:block;
  position:absolute;
  top:40px;
  transition: all .3s ease-in;
-o-transition: all .3s ease-in;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
}
*/

#lamp {
    width: 6%;
    height: 4px;
    background: #fff;
    display: block;
    position: relative;
    top: -17px;
    border-radius: 12px;
    transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    -webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
}

#lamp.content2 {
    left: 47%;
    transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    -webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
}
#lamp.content3 {
    left: 81%;
    transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    -webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
}
#lamp.content1 {
    left: 13%;
    transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    -webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
}


/*.tab-buttons span::before {
  background-color: #000;
}
.tab-buttons span::after {
  border-color: #000 transparent transparent transparent;
}
*/





/* 3つのラインナップ
----------------------------------------------*/

.lineup {
    max-width: 1200px;
    margin: auto;
    background-image: url(https://lecinc.itembox.design/item/html/oyasumin_lp/img/backgraund_dark.png);
    color:#fff;
    text-align: center;
    padding: 5%;
}

.lineup dl {
    max-width: 900px;
    margin: auto;
    display: inline-table;
}

.lineup dt {
    width: 30%;
    margin: auto;
    display: inline-table;
}

.lineup .lineup_image{
    height: auto;
    width: auto;
    display: block;
}



/* 3つのラインナップ_イントロダクション
----------------------------------------------*/


.lineup_introduction {
    width: 1000px;
    margin: 5% auto;
    display: inline-table;
}

.lineup_foot {
    margin: auto;
    display: inline-table;
    height: 400px;
}

.lineup_hand {
    margin: auto;
    height: 400px;
}

.lineup_sheet {
    margin: auto;
    height: 400px;
}


.lineup_introduction .item_link {
    width: 30%;
    margin: 10% 2% 0 0;
    text-align: center;
    
}

.lineup_introduction .item_about{
    width: 650px;
    margin: auto;
    text-align: start;
    
}

.lineup_introduction .item_about p{
    width: auto;
    text-align: start;
    padding: 3% 0 1%;

}

.lineup_introduction .item_about_details {
    background: #FFFFFF;
    border-radius: 20px;
    width: 700px;
    height: 300px;
    margin: 5% auto;
    padding: 5%;  
    
}

.lineup_introduction .item_about_details:befor {
    content: "";
    position: absolute;
    border: 12px solid transparent;
    border-top: 12px solid #ffc4c4;
    top: 100%;
    left: 5%;
    color: #fff;
}

.lineup_introduction .item_about_details dt {
    width: 62%;  
    margin: 5% auto;
}

.lineup_introduction .item_about_details dd {
    width: 30%;
    float: right;
    margin: 5% 0% -1%;
}




.lineup_introduction .item_about_details p {
    font-size: 1.2rem;
    display: flex;
    margin: -1%;
    color: #1D2088;
}


.lineup dt a img {
    margin: auto;
    padding: 3% 8%;
}
    
/* PC用（非表示設定）
----------------------------------------------*/
#headcont_pc,
#pc_head_menu,
#mainimg_area .pc {
	display: none;
	}


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

	Footer

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

#footer {
	padding: 40px 0 0;
	background: #F6F1ED url(https://lecinc.itembox.design/item/html/natyucuri/img/footer_bg_sp.jpg) repeat-y;
	-moz-background-size: 100% auto;
	background-size: 100% auto;
	font-size: 0.9em;
	}
	#footer a,
	#footer a:hover {
		text-decoration: none;
		}

	#footer .ft_home {
		padding: 0 5%;
		}

	#footer .footnavi{
		}
		#footer .footnavi ul {
			margin-top: 15px;
			list-style: none;
			}
			#footer .footnavi li {
				padding: 5px 5%;
				}
				#footer .footnavi li a {
					padding: 10px 0 10px 20px;
					display: block;
					color: #683805;
					background: #FFF;
					border-radius: 10px;
/*					-webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
/*						-moz-border-radius: 10px;   /* Firefox用 */ 
					behavior: url(border-radius.htc); /* IE用 */
					}

	#footer .lec {
		padding: 40px 5% 50px;
		text-align: center;
		background: #F6F1ED url(https://lecinc.itembox.design/item/html/natyucuri/img/footer_bg_sp.jpg) repeat-y;
		-moz-background-size: 100% auto;
		background-size: 100% auto;
		}

	#footer .copyright {
		padding: 30px 5%;
		font-size: 0.75em;
		color: #683805;
		background: #fff;
		}



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

	タブレット用ギミック

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

@media screen and ( min-width:781px) and ( max-width:1024px) {
    
.about_oyasumin .about_illust li .illust_01 {
    position: absolute;
    left: 20%;
    top: -6%;
    margin: auto;
    width: 60%;
}
    
.about_oyasumin .about_illust li .illust_02 {
    position: absolute;
    top: 40%;
    left: 0%;
    width: 50%;
}
    
    
.about_oyasumin .about_illust li .illust_03 {
    position: absolute;
    top: 51%;
    left: 58%;
    width: 35%;
}
    
    
    
    
}

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

	スマホ用ギミック

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

@media screen and (max-width: 780px) {
    
 .header {
    content: "";
    max-width: 1200px;
    height: auto;
    margin: auto;
    text-align: center;
    background-image: url(https://lecinc.itembox.design/item/html/oyasumin_lp/img/backgraund_star.png);
}  
    
.header img {
    margin: auto;
    width: 100%;
    text-align: center;
}
    
    
.header .header_midashi {
    margin: auto;
    width: 100%;
    padding: 0 3% 3%;
    text-align: center;
}
    
    
/* 余白
----------------------------------------------*/

.break{
    display: none;
}
    
.break_2{
    display: block;
}
    
    

h01 {
    font-size: 1.8rem;
    font-family: fot-tsukuardgothic-std, sans-serif;
    font-weight: 700;
    font-style: normal;
}

h11 {
    font-family: fot-tsukuardgothic-std, sans-serif;
    font-weight: 600;
    font-style: normal;
    color: #fff;
    font-size: 2rem;
}
 
h44 {
    margin: auto;
    text-align: center;
    font-size: 2.4rem;
    color: #fff;
    font-family: fot-tsukuardgothic-std, sans-serif;
    font-weight: 700;
    font-style: normal;
    line-height: 3.6rem;
}
    
.about_illust {
    display: inline-grid;
    height: 500px;
}
    
    
    
.about_illust .about_text {
    width: 100%;
    margin: 6% auto;
    padding: 5%;
    display: inline-grid;
}
    
.about_text .about_text_h01 {
    margin: 3%;
    height: 20px;
}
    
.about_midashi {
    height: 30px;
    display: block;
    color: #fff;
    padding: 5% 0;
    width: 100%;
    margin-left: 5%;
}
    

.about_illust li {
    width: 100%;
}
    
    
.about_oyasumin .about_illust li .illust_01 {
    position: relative;
    left: 0%;
    top: 2%;
    margin: auto;
    width: 52%;
}
    
.about_oyasumin .about_illust li .illust_02 {
    position: relative;
    top: -60%;
    left: -1%;
    width: 55%;
}
    
.about_oyasumin .about_illust li .illust_03 {
    position: relative;
    top: -150%;
    left: 60%;
    width: 35%;
}
    
 
    
    
    
    
.sleep_body {
    max-width: 1000px;
    margin: auto;
    padding: 5%;
    text-align: center;
}
    
.sleep_body .sleep_image {
    width: 100%;
    margin: auto;
    padding: 5%;
}
    
    
.sleep_body h22::before {
    content: none;
    background-image: url(https://lecinc.itembox.design/item/html/oyasumin_lp/img/line_black.png);
    position: absolute;
    height: 5px;
    width: 50%;
    margin: 7% 0 0 -50%;
}

.sleep_body h22::after {
    content: none;
    background-image: url(https://lecinc.itembox.design/item/html/oyasumin_lp/img/line_black.png);
    position: absolute;
    height: 5px;
    width: 50%;
    margin: 7% 0 0 5%;
}
    
    
    
    
.sleep_body .sleep_p {
    width: 100%;
    margin: auto;
    padding: 5%;
    text-align: start;
    color: #1D2088;
}
    
.deep_temperature {
    width: 100%;
    text-align: center;
    height: 140px;
    margin: 4% auto;
    background-color: #8BD5E6;
    border-radius: 10px;
    padding: 4% 4% 1% 4%;
    display: inline-table;
}
    
.deep_temperature img {
    width: 60%;
    text-align: center;
    margin: 2% auto;
}
    
.deep_temperature p {
    width: 100%;
    font-size: 1.6rem;
    text-align: start;
    margin: auto -1px;
}
 
    

.tab-buttons span {
    font-size: 14px;
    font-family: fot-tsukuardgothic-std, sans-serif;
    font-weight: 700;
    font-style: normal;
    color: #fff;
    background: url(https://lecinc.itembox.design/item/html/oyasumin_lp/img/background_star-platinum.png)no-repeat;
    background-blend-mode: screen;
    background-color: steelblue;
    background-size: cover;
    cursor: pointer;
    border-bottom: 2px solid #ddd;
    display: block;
    max-width: 31%;
    text-align: center;
    line-height: 18px;
    border-radius: 5px;
    padding: 5% 0;
}

#lamp {
    width: 15%;
    height: 4px;
    background: #fff;
    display: block;
    position: relative;
    top: -12px;
    transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    -webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
}
    
.about_sheet .aroma {
    display: grid;
    display: inline-table;
    margin: auto;
    width: 95%;
    padding: 5%;
}
    
.tab-content p {
    font-size: 1.6rem;
    color: #fff;
    font-family: fot-tsukuardgothic-std, sans-serif;
    font-weight: 700;
    font-style: normal;
    padding: 4% 0;
    line-height: 1.6;
}

.border {
    border-bottom: double;
    border-top: double;
    margin: 15% 0!important;
}
    
.tab-content .aroma p {
    font-size: 1.6rem;
    color: #fff;
    font-family: fot-tsukuardgothic-std, sans-serif;
    font-weight: 700;
    font-style: normal;
    padding: 0;
}
    
.about_hand li p {
    text-align: start;
    width: 100%;
    margin: auto 1%;
    display: inline-table;
    color: #fff;
    font-size: 1.6rem;
}
    
.about_hand li img {
    width: 100%;
    margin: auto 1%;
    padding: 0;
    display: inline-table;
}
    
.hand_foot_oyasumin img {
    width: 100%;
    margin: auto;
} 
    .lineup dt a img {
    margin: auto;
    padding: 3% 1%;
}
    .click {
    content: ▼;
    width: 32%;
    margin: 50px auto;
    border-radius: 50px;
    color: #95dade;
    animation: fuwafuwa 2s infinite;
    display: inline-table;
    padding: 0!important;
}
    
#lamp.content1 {
    left: 8%;
    transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    -webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
}
    
#lamp.content2 {
    left: 42%;
    transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    -webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
}
    
#lamp.content3 {
    left: 77%;
    transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    -webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
}
    
}