@import "/css/font-awesome/css/font-awesome.min.css";

body{
    background-image: url("/fair/sleep_project/images/bg.png") ;
}
.wrapper{
    position: relative;
}

.wrapper img {
	max-width: 100%;
}

.wrapper ol {
	list-style: none;
}

.tabpc_only,
.pc_only {
	display: none;
}

.note {
	font-size: 85%;
}

.txt_col{
    font-size: 90%;
}

.txt_col2{
    font-size: 88%;\
}


.wrapper a {
	text-decoration: none;
}

#pagetop {
	position: fixed;
	bottom: 50px;
	right: 25px;
}

#pagetop a {
	display: block;
	z-index: 10000;
	width: 35px;
	height: 35px;
}

sup {
	vertical-align: super;
	font-size: 70%;
}

.moreinfo {
	margin: 3em 0 0;
}

.moreinfo a {
	display: block;
	padding: 1em;
	background-color: #fff;
    border: solid 1px #000;
	text-align: center;
	position: relative;
    font-size: 85%;
    letter-spacing: 1px;
}

.moreinfo a img{
    width: 1.3em;
    position: absolute;
    top:30%;
    right: 0.5em;
}

.moreinfo a svg{
    width: 1.3em;
    position: absolute;
    top:30%;
    right: 0.5em;
}

.box-shadow {
  box-shadow: 0px 6px 3px rgba(0,0,0,0.4);
  -webkit-box-shadow: 0px 6px 3px rgba(0,0,0,0.4);
  -moz-box-shadow: 0px 6px 3px rgba(0,0,0,0.4);
}


@media only screen and (min-width: 640px) {
	.wrapper {
		font-size: 110%;
	}
	.wrapper a {
		transition: 0.5s;
	}
	.wrapper a:hover {
		text-decoration: none;
		opacity: 0.7;
		transition: 0.5s;
	}
	.wrapper img {
		width: auto;
	}
	.tabpc_only {
		display: inline;
	}
    
    .pc_only {
		display: block;
	   }
    
	.sp_only {
		display: none;
	}

	.em {
		font-size: 140%;
		font-weight: bold;
		text-align: center;
	}
}

/*  iPhone8,IPad  */

@media only screen and (min-width: 667px) {
    	.pc_only {
		display: block;
	   }
        .sp_only {
        display: none;
        }    
}   

@media only screen and (min-width: 960px) {
	.pc_only {
		display: inline;
	}
}

/* ■■■■■■■■■ ヘッダ ■■■■■■■■■ */
.header {
	margin: 0 auto 1em;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
	-webkit-align-items: center;
	align-items: center;
}
.header .logo {
	width: 33.6vw;
	margin-left: 5px;
	margin-right: auto;
}
.header .header_cta {
	display: -webkit-flex;
	display: flex;
}
.header .header_cta_item div {
	margin: 0 0 0 0.5em;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: column wrap;
	flex-flow: column wrap;
}

.header .header_cta_item a {
	color: #fff;
	font-size: 2.5vw;
	padding: 0.5em;
	position: relative;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
}
.header .header_cta_item:first-child a {
	background-color: #2db8ef;
}
.header .header_cta_item:last-child a {
	background-color: #ff9c00;
	margin-left: 5px;
}
.header .header_cta_item img {
	width: 7.5vw;
}
@media only screen and (min-width: 640px) {
	.header .logo {
		width: 170px;
	}
	.header .header_cta_item div {
		margin: 0 1em 0 0.5em;
	}
	.header .header_cta_item a {
		font-size: 90%;
	}
	.header .header_cta_item span {
		font-size: 80%;
	}
	.header .header_cta_item img {
		width: auto;
	}
}
@media only screen and (min-width: 960px) {
}

@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, .header .logo { 
      margin:0 auto; 
      width:740px; 
      padding-left:-400px;
    } 
    /* IE11 */
}

@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, .header .header_cta_item:first-child a{ 
      margin-left:-220px;
    } 
    /* IE11 */
}


/* ■■■■■■■■■ フッタ ■■■■■■■■■ */
.footer {
	margin: 5em 0;
	font-size: 60%;
	text-align: center;
    color: #fff;
}

/* ■■■■■■■■■　パンくず ■■■■■■■■■ */
.breadcrumb {
	overflow: hidden;
	margin: 0 0.5em;
	font-size: 80%;
}
.breadcrumb li {
	float: left;
	margin: 0.5em 0.5em 0 0;
}
.breadcrumb a {
	margin-right: 0.5em;
}
.breadcrumb span {
	font-weight: bold;
}
 

/* ■■■■■■■■■ トップ ■■■■■■■■■ */
.top {
	margin: 0;
    position: relative;
    display: block;
}

.bnr {
	margin: 1em 0 0;
    position: relative;
    display: block;
}

@media only screen and (max-width: 640px) {
    .top{
        	margin: 6em 1em 0;
    }
	.bnr{
        	margin: 2em 1em 0;
    }	    
}

.mv {
	text-align: center;
    display: -webkit-flex;
	display: flex;
}

.mv a:hover {
    text-decoration: none;
    opacity: 1;
    transition: none;
	}

.mv li:last-child{
	display: -webkit-flex;
	display: flex;
    flex-direction: column;    
}

h1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    color: #fff;
    font-size: 0;
    text-align: center;
    transform: translateY(-50%);
}

.lead {
	margin: 2em 1em;   
}

@media only screen and (min-width: 640px) {
	.top {
        /*  top: 50%; */
        top: 200px;
		margin: 3em 0 0;
        position: relative;
        /* height: 400px; */
	}
	.lead {       
        }  

}

/* iPhone8  */
@media only screen and (min-width: 667px) {
    .lead {           
        }     
}   

/* iPhone8横  */
@media only screen and (min-width: 667px) {
        .lead {           
        }     
}   

/* iPad  */
@media only screen and (min-width: 768px) {
        .lead {        
        }     
}   

/* PC用に戻す */
@media only screen and (min-width: 960px) {
        .lead { 
        }
}



/* ■■■■■■■■■ ナビ ■■■■■■■■■ */

nav ul {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    color: #fff !important;
  } 

nav ul li{
    padding:2em;
    color: #fff !important;
    text-align: center;
    font-size: 88%;
    width:33.33%;
    overflow: hidden;
    box-sizing: border-box;
    align-items: center;    
    height: 3.3em;
  }
  
nav ul li a{
    color: #fff !important;
  }


nav ul li span{
    font-size: 80%;    
}

nav ul li:first-child{
    background: #00285b;
}  

nav ul li:nth-child(2){
    background: #066486;
}    

nav ul li:nth-child(3){
    background: #06323d;
}    

nav ul li:last-child{
    background: #977860;
    }
  
  /* demo style */
      
  .clone-nav {
    margin: -4.5em 0 0 0;
	padding:4em 0 1em 0;
    position: fixed;
	/* height: 6em; */
    height: auto;
	overflow:hidden;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    transition: .3s;
    transform: translateY(-100%);
    box-shadow: none;
  }

  .clone-nav li{
    padding: 0.3em;
  }
      



@media only screen and (min-width: 640px) {
	nav {
		overflow:hidden;
		margin:-2000px auto 0;
        /*  width: 960px; */
	}
}    
    
@media only screen and (max-width: 640px) {
	nav {
		margin-top: -1500px;
		padding: 0;
	}
    
}      

@media only screen and (max-width: 640px) {
    nav ul {
    margin: -1em 0 0 0;
    width: 100%;
    top: -5em;
    left: 0;         
    }
    
    nav ul li{
    font-size: 70%;
    height: 6em;        
    }
    
    .clone-nav {
    margin: 0 0 0 0;
	padding:2.7em 0 4em 0;        
    top: -2.8em;
    left: 0;     
    }
    
    .clone-nav li{
    padding: 1em;
    }
    
}

  .is-show {
    transform: translateY(0);
  }

/* ■■■■■■■■■ 実際に表示される方のナビ ■■■■■■■■■ */

.nav_area{
    color: #fff !important;
    margin: 0 1em;
    /*  display: table; */ 
}

.nav{
    width: 100%;
}

.nav li {
	width:33.33%;
	float:left;
	font-size: 82%;
	margin:0 0 2em 0;
	text-align: center;
    color: #fff !important;
    box-sizing: border-box;
    padding: 0 0 1em 0;
	}

.nav li a{
	color: #fff !important;
    display: block;
	}

.nav li span{
    font-size: 80%;    
}

.nav li:first-child{
    background: #00285b;
    margin-top: 5em;
    box-shadow: 0px 6px 3px rgba(0,0,0,0.4);
    -webkit-box-shadow: 0px 6px 3px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 6px 3px rgba(0,0,0,0.4);  
}  

.nav li:nth-child(2){
    background: #066486;
    margin-top: 5em;
    box-shadow: 0px 6px 3px rgba(0,0,0,0.4);
    -webkit-box-shadow: 0px 6px 3px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 6px 3px rgba(0,0,0,0.4);
}    
   
.nav li:nth-child(3){
    background: #977860;
    margin-top: 5em;    
    box-shadow: 0px 6px 3px rgba(0,0,0,0.4);
    -webkit-box-shadow: 0px 6px 3px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 6px 3px rgba(0,0,0,0.4);
}    

/*  .nav li:last-child{
    background: #977860;
    box-shadow: 0px 6px 3px rgba(0,0,0,0.4);
    -webkit-box-shadow: 0px 6px 3px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 6px 3px rgba(0,0,0,0.4);    
    }
*/

@media only screen and (min-width: 640px) {
    .nav_area{
    color: #fff !important;
    margin: 450px  1em 0;
    /*  display: table; */ 
    }
    
	.nav {
		overflow:hidden;
		margin:0 auto;
        font-size: 105%;
	}
    .nav span{
        color: #fff !important;
        font-size: 80%;
        padding: 0.5em;
        letter-spacing: 1px;
    }
    .nav li {
		width:33.3%;
		float:left;
		font-size: 85%;
		margin:0 !important;
        padding: 0.8em;
		text-align: center;
        color: #fff !important;
        box-sizing: border-box;
	}
    
    .nav li a{
		color: #fff !important;
	}

	.nav li:first-child{
        background: #00285b;
    }  

    .nav li:nth-child(2){
        background: #066486;
    }    

    .nav li:nth-child(3){
        background: #06323d;
    }    

    .nav li:last-child{
        background: #977860;
        }
  
}

/* ********** iPhone6,7,8讓ｪ ********* */

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


/* ********** iPad ********** */

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

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


/* ■■■■■■■■■ 各コラム ■■■■■■■■■ */

#item_wrapper {
    margin: 2000px auto 0 !important;    
	/*  margin: 3em auto 0 !important; */
    background: #fff;
    /*  padding: 0 0 2em; */
    box-sizing: border-box;
}

@media only screen and (max-width: 640px) {
    #item_wrapper{
    margin: 1495px 1em 0 !important;      
    /*  margin: 3em 1em 0 !important; */
    box-sizing: border-box;
    padding: 1em 1em 3em 1em;        
    }
}


#item_wrapper ul li{
    padding: 2em 1em;
}

#item_wrapper ul li:nth-child(odd){
    background: #eee;
}

#item_wrapper ul li ul li{
    padding: 0;
    background: inherit !important;
}

#item_wrapper h2 {
	padding: 4em 0 1em;
	text-align: center;
    font-size:125%; 
    font-weight: bold;
}

@media only screen and (max-width: 640px) {
    #item_wrapper h2{
     padding: 0 0 1em;
     font-size:120%;
     margin: 2em 0 0 0;        
    }
}


#item_wrapper .item_lead{
    font-size: 95%;
    padding: 1em 2em 3em;
    line-height: 1.6;
}


@media only screen and (max-width: 640px) {
    #item_wrapper .item_lead{
        padding: 1em 1em 3em;
    }
}

#item_wrapper .item_2col {
    margin: 0;
}

#item_wrapper .item_2col:last-child {
    margin: 0;
}


#item_wrapper h3 {
    margin-bottom: 1em;
}

#item_wrapper h3 span{
    font-size: 90%;
    font-weight: normal;
}

#item_wrapper h3 p{
    background:#00285B; 
    color:#fff; 
    line-height:2.2; 
    text-align:center;
    margin-bottom:0.5em;
    font-size: 90%;
    padding: 0.8em;
    border-radius:60px;
}

#item_wrapper .right_col {
    line-height: 1.7;
    padding: 0 1em;
    text-align: left;    
}

#item_wrapper .right_col,
#item_wrapper .left_col{
    padding: 0;
}


#item_wrapper .left_col div{
    margin-left: 1em;
    font-size:95%;
    font-weight: normal;
}

#item_wrapper .left_col img{
    margin-bottom: 2em;
}


.right_col p:first-child{
    padding-top: 0;
}

.right_col p{
    padding-bottom: 1.5em;
}


/*再生ボタン*/
audio{
    margin: 1.0em 0 1.5em;
    max-width: 100%;
}

@media only screen and (min-width: 640px) {
    audio{
            margin: 1.0em 0 1.5em;
        width: 100%;
        } 
}

#item_wrapper .r_text{
    padding: 1em 0 2em;
    font-size: 90%;
}

#item_wrapper .r_text2{
    padding: 1em 0;
    font-size: 80%;
    color: #444;
}


@media only screen and (min-width: 640px) {
    #item_wrapper {
	margin: 1em 1em 0;
    }

    #item_wrapper div{
    }
    
    
	#item_wrapper .item_2col {
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: space-between;
		justify-content: space-between;
        /* align-items: center; */
        padding-top: 1.5em;        
	}
    
	#item_wrapper .left_col{
		width: calc(40% - 0.75em);
	}
    
    #item_wrapper .right_col {
		width: calc(60% - 0.75em);
	}

    .video{
        /* width: 530px; */
        /* height: 315px; */
    }
}

.video {
    position: relative;
    height: 0;
    padding: 30px 0 56.25%;
    overflow: hidden;
    margin-bottom: 2em;
}

.video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.movie_wrap{
    box-sizing: border-box;
    background:#ddd; 
    border-radius:10px; 
    padding:0.5em 1em 0.05em; 
    margin-bottom:1em;

}

.movie{
    font-size: 65%;
    padding: 0.5em;
    /* background: #333; */
    color: #fff;
    letter-spacing: 1px;
    font-weight: bold;
    margin-right: 0.6em;
    height:60px;  
    width:60px;  
    border-radius:80px; 
    text-align:center; 
}

.movie:before{
    /* content: "◎"; */
}

.movie_title,
.music_title{
    font-size: 90%;
    padding: 0.5em 0 0.5em 0;
    margin-bottom: 1em;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    position: relative;
}

.movie_text,
.music_text{
    position:absolute;
    top:3.2em;
    left:0.9em;
}


.music_wrap{
    box-sizing: border-box;
    background:#f5ded4; 
    border-radius:10px; 
    padding:0.5em 1em 0.05em; 
    margin-bottom:2em;
}

.cd_title{
    font-size:80%;
}

.cd_title a{
    text-decoration: underline !important;
    color: #C13E04;
}

.time{
    font-size: 75%;    
}

.music{
    font-size: 65%;
    padding: 0.5em;
    /* background: #c13e04; */
    color: #fff;
    letter-spacing: 1px;
    font-weight: bold;
    margin-right: 0.6em;
    height:60px;  
    width:60px;  
    border-radius:80px; 
    text-align:center; 
}

@media only screen and (max-width: 640px) {
    .movie, 
    .music{
    height:50px;  
    width:100px;  
    border-radius:80px; 
    }
}

.music:before{
    /* content: "♪"; */
}


/* iPad  */
@media only screen and (min-width: 768px) {
        .video{
        /* width: 410px; */
        /* height: auto; */
    }
     
}  

.item_shop {
	margin: 2em 0.5em 2em 0.5em;
}

.item_shop img{
}


/* ■■■■■■■■■ Good Sleep Factory ■■■■■■■■■ */

#gsf_wrapper {
	background: #74B9B8;
    margin: 4em auto 0 !important;
    padding: 0 2em 2em 2em;
    box-sizing: border-box;
}


@media only screen and (max-width: 640px) {
    #gsf_wrapper{
    margin: 3em 1em 0 !important;
    box-sizing: border-box;
    padding: 1em 1em 3em 1em;   
        
    }
}

#gsf_wrapper h2 {
	padding: 4em 0 1em;
	text-align: center;
    font-size:125%; 
    font-weight: bold;
}

@media only screen and (max-width: 640px) {    
#gsf_wrapper h2{
     padding: 0 0 2em;
     font-size:120%;
     margin: 2em 0 0 0;     
    }
}    
         
    
#gsf_wrapper .right_col .items3_col p{
		margin: 0.5em 0 1em;
	}


#gsf_wrapper .gsf_lead{
    padding: 1em;
    font-size: 90%;
    line-height: 1.7;
}

#gsf_wrapper .gsf_cap{
    margin: 0;
    font-size: 80%;
    line-height: 1.7;
}

#gsf_wrapper .c1{
    background: #AF9500;
    color: #fff;
    padding: 0.5em;
    text-align: center;
    font-size: 80%;
}

#gsf_wrapper .c2{
    background: #F08E8E;
    color: #fff;
    padding: 0.5em;
    text-align: center;
    font-size: 80%;    
}

#gsf_wrapper .c3{
    background: #13917d;
    color: #fff;
    padding: 0.5em;
    text-align: center;
    font-size: 80%;    
}

@media only screen and (min-width: 640px) {
    #gsf_wrapper {
        margin: 0 1em 1em 1em;
        }
    
    #gsf_wrapper .item_2col,
    #gsf_wrapper .item_3col {
            display: -webkit-flex;
            display: flex;
            -webkit-justify-content: space-between;
            justify-content: space-between;
        }
    
    #gsf_wrapper .left_col{
		width: calc(40% - 0.75em);
	}
    
    #gsf_wrapper .right_col {
		width: calc(60% - 0.75em);
	}
    
    #gsf_wrapper .right_col .items3_col{
		width: calc(33% - 0.75em);
	}
    
    #gsf_wrapper .right_col .items3_col p{
		margin-top: 1em;
	}
    
}    

/* ■■■■■■■■■ CD Release ■■■■■■■■■ */

#cd_wrapper {
	margin: 4em auto 0 !important;
    padding: 0 2em 2em 2em;
    box-sizing: border-box;
    background: #fff;
}

@media only screen and (max-width: 640px) {
    #cd_wrapper{
    margin: 3em 1em 0 !important;
    box-sizing: border-box;
    padding: 1em 1em 3em 1em;   
    }
}

#cd_wrapper h2 {
    padding: 4em 0 1em;
    text-align: center !important;
    font-size:125%; 
    font-weight: bold;
}

@media only screen and (max-width: 640px) {    
#cd_wrapper h2{
     padding: 0 0 1em;
     font-size:120%;
     margin: 2em 0 1em 0;     
     text-align: center !important;    
    } 
  }     
    

#cd_wrapper h3 {
	padding: 2em 0 0;
	text-align: center;
    border-bottom: 2px solid #222;
    line-height: 2;
    margin-bottom: 1em;
}

#cd_wrapper .right_col {
    line-height: 1.7;
	}

#cd_wrapper .right_col .items3_col p{
		margin-top: 1em;
	}

#cd_wrapper .cd_read{
    margin: 1em
}

#cd_wrapper .right_col dt{
    padding: 0 0 2em 0;
    font-size: 85%;
}

#cd_wrapper .right_col dd{
    padding: 0;
    font-size: 85%;
}

#cd_wrapper .cd_list{
    margin: 1em 0;
    font-size: 78%;
	padding-left:1em;
	text-indent:-1em; 
}

#cd_wrapper .cd_release{
    font-size: 85%;
    margin: 0.2em auto 2em;
    text-align:center;    
}

@media only screen and (min-width: 640px) {
    #cd_wrapper {
        margin: 0 1em 1em 1em;
        }
    
    #cd_wrapper .item_2col {
            display: -webkit-flex;
            display: flex;
            -webkit-justify-content: space-between;
            justify-content: space-between;
            align-items: center; 
        }
    
    #cd_wrapper .left_col{
		width: calc(30% - 0.75em);
	}
    
    #cd_wrapper .right_col {
		width: calc(70% - 0.75em);
	}
    
}    


/* ■■■■■■■■■ bnr ■■■■■■■■■ */

#bnr_wrapper {
	margin: 4em auto 0 !important;
    padding: 0 2em 2em 2em;
    box-sizing: border-box;
    background: #fff;    
}

@media only screen and (max-width: 640px) {
    #bnr_wrapper{
    margin: 3em 1em 0 !important;
    box-sizing: border-box;
    padding: 1em 1em 3em 1em;    
    }
}

#bnr_wrapper h2 {
    padding: 4em 0 1em;
    text-align: center !important;
    font-size:125%; 
    font-weight: bold;
}
  
@media only screen and (max-width: 640px) {    
#bnr_wrapper h2{
    padding: 0 0 2em;
    font-size:120%;
    margin: 2em 0 0 0;     
    text-align: center !important;    
    }
}    
               
#bnr_wrapper h2 span{
	font-size:90%; 
    font-weight: normal;
    line-height: 2;
}

@media only screen and (min-width: 640px) {
    #bnr_wrapper {
        margin: 0 1em 1em 1em;
        }

}    


/* ********** PC ********** */
@media only screen and (min-width: 960px) {
	.header,
	.top,
	.bnr,    
    nav,
	.breadcrumb,
	.footer,
    .nav_area,
	#item_wrapper,
    #gsf_wrapper,
    #bnr_wrapper,    
    #cd_wrapper{
		width: 960px;
		margin-left: auto;
		margin-right: auto;
	}
}