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

/* ------------------------------------------
COMMON
------------------------------------------ */
body{
    background: #fff;
    color: #545454;
}

.wrapper{
    position: relative;
}

.wrapper a{
    color: #545454;
}

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

.wrapper ol {
	list-style: none;
}

.tabpc_only,
.pc_only {
	display: none;
}

.note {
	font-size: 0.7rem;
    line-height: 1.8;    
}

@media only screen and (min-width: 768px) {
    .note {
        font-size: 0.75rem;
        line-height: 2;
    }
}

.tx_center{
    text-align: center;
}

.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;
}

@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;
	}
}


/*  PC  */

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

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

h1 {
    margin: 0;
    padding: 0;
}

h2 {
    margin: 0 0 2em;
    padding: 0;
    text-align: center;
    font-size: 1.4rem;
    font-weight: normal;
    font-family: "Geneva","Lucida Grande","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif;    
}

@media only screen and (min-width: 768px) {
    h2 {
    margin: 0 0 2em;
    padding: 0;
    font-size: 2.2rem;
    }
}
    
h3 {
    margin: 40px 0 20px;
    padding: 0;
    text-align: center;
    font-size: 1rem;
    font-weight: normal;   
    font-family: "Geneva","Lucida Grande","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif;    
}

h3 span{
    font-size:72%;
    margin-left: 1em;
    line-height: 2;
}

@media only screen and (min-width: 768px) {
    h3 {
    margin: 70px 0 20px;
    padding: 0;
    font-size: 1.4rem;        
    }
}
      

h4 {
    margin: 0 0 1.5em;
    padding: 0;
    text-align: left;
    font-size: 0.9rem;
    font-weight: normal;    
}

h4 span{
    font-size:75%;
    margin-left: 0.8em;
    line-height: 2;
}

.lead {
    margin: 0;
    padding: 0;
    text-align: left;
    font-size: 0.9rem;
    line-height: 1.9;
}

@media only screen and (min-width: 768px) {
    h4 {
    margin: 0 0 1em;
    padding: 0;
    font-size: 1.2rem;        
    }
    
    .lead { 
        margin: 0;
        padding: 0;
        font-size: 1rem; 
        line-height: 2.1;
        text-align: center;
     }      
}

img.gray{    
    -webkit-filter: grayscale(1);
    filter: gray;
    filter: grayscale(1);
    cursor: default;
    }     


img.gray {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}

img.gray:hover {
-webkit-filter: none;
-moz-filter: none;
-ms-filter: none;
-o-filter: none;
filter: none;
}

img.gray2 {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}



/* ------------------------------------------
HEADER
------------------------------------------ */
.header {
	margin: 0 auto;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
	-webkit-align-items: center;
	align-items: center;
    height: 60px;
}
.logo{
	width: 33.6vw;
	margin-left: 0;
	margin-right: auto;
    align-self: center;
}

.logo img{
   margin: 6px 0 0 6px;
}

@media only screen and (min-width: 768px) {
    .logo img{
   margin: 6px 0 0 -2px;
    }    
}

.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: 768px) {
	.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, .logo { 
      margin:0 auto; 
      width:740px; 
      padding-left:-400px;
    } 
    
   *::-ms-backdrop, .logo img { 
      margin:0 auto; 
      width:170px; 
      padding-left:-400px;
    } 
    
    /* IE11 */
}

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

/* ------------------------------------------
TOP
------------------------------------------ */
#top {
	margin: 0;
    text-align: center;
    }

#top div:last-child{
    margin: 0;
    padding: 140px 1.5em 180px;
}

#top p:last-child{
    margin-top: 0.8em;
}

#top .lead {
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 0.9rem;
    line-height: 3;
}

@media only screen and (min-width: 768px) {
    #top{
	   margin: 0;
    }
    
    #top div:last-child{
        margin: 0;
        padding: 240px 0 260px;
    }
    
    #top p:last-child{
        margin-top: 1em;
    }    
   	
    #top .lead { 
        margin: 0;
        padding: 0;
        font-size: 1.05rem; 
        line-height: 3;
        text-align: center;
     }  
}


/* ******** ２コ割 ******** */

.row2 img{
        z-index: -1;
    }    

.row2 li  {
    position: relative;
    padding:0;
    margin:0;
    position: relative;
    display: block;
    }

.row2 li:last-child {
    margin-bottom: 0;
    }
    
.row2 li img{
        margin-top: 0;
    }

@media only screen and (min-width: 768px) {
    .row2 {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-flow: row wrap;
		flex-flow: row wrap;
        justify-content:space-around;
        margin: 0;
        padding: 0;
	}	

    .row2 li:first-child {
		width: 70%;
        margin-right: 1.5em;
	}
  
    .row2 li {
		width: 20%;  
	}
    
    .row2 li:last-child {
    margin-bottom: 0;
}
    
    .row2 li img{
        margin-top: 0;
    }
    
}

/* Ipad調整　*/
@media only screen and (max-width: 768px) { 
    .row2 {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-flow: row wrap;
		flex-flow: row wrap;
		margin-top:0;
    	}
    .row2 li {
		width: 100%;
        border: none;
        margin: 0;        
	}
    .row2 li:nth-child(even) {
        margin-left: 0;    
    }
    
    .row2 li img{
        margin-top: 2.5em;
    }
}    


/* ******** ５コ割 ******** */

.row5 img{
        z-index: -1;
    }    

.row5{
    margin: 0 1em;
}

.row5 li  {
    position: relative;
    padding-bottom: 1.8em;
    margin: 0;
    position: relative;
    display: block;
}

@media only screen and (min-width: 769px) {
    .row5 {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-flow: row wrap;
		flex-flow: row wrap;
        justify-content:space-between;
	}	
    
    .row5{
    padding: 0;
    }
    
    .row5 li {
		width: 20%;
        border: none;   
	}
}

@media only screen and (max-width: 768px) { 
    .row5 {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-flow: row wrap;
		flex-flow: row wrap;
		margin-top:0;
    	}
    .row5 li {
		width: 50%;
        border: none;
        margin: 0.5em 0 0;        
	}
    .row5 li:nth-child(even) {
        margin-right: 0;    
    } 
}    


/* ******** ４コ割 ******** */

.row4 img{
        z-index: -1;
    }    

.row4 li  {
    position: relative;
    padding-bottom: 1.8em;
    margin: 0 0 1em 0;
    position: relative;
    display: block;
}

@media only screen and (min-width: 769px) {
    .row4 {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-flow: row wrap;
		flex-flow: row wrap;
		//margin-top:1em;
        justify-content:space-between;
	}	

    .row4 li {
		width: calc(25% - 1.5em);
        border: none;   
	}
  
}

@media only screen and (max-width: 768px) { 
    .row4 {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-flow: row wrap;
		flex-flow: row wrap;
		margin-top:0;
    	}
    .row4 li {
		width: calc(50% - 2em);
        border: none;
        margin: 2em 1em 0;        
	}
    .row4 li:nth-child(even) {
        margin-right: 0;    
    } 
}    

/* ------------------------------------------
各カラム
------------------------------------------ */
#movie{
      margin: 0;
      padding: 0 0 70px;
      text-align: center;
}

@media only screen and (min-width: 768px) {
    #movie{
      margin: 0;
      padding: 0 0 150px;
    }
}

#product{
      margin: 0;
      padding: 0;
      text-align: center;
}

#product h2{
      margin:0 !important;
}

@media only screen and (min-width: 768px) {
#product h2{
      margin: 0 !important;
     }
}


#product　.spec ul{
    padding: 2em 0;
}

.price{
    font-size:0.8rem;
    line-height: 1.8;
}

.price span{
    font-size:80%;
}
.spec .linkbtn {
	border: 1px solid #545454;
    border-radius: 30px;
    width: 160px;
    margin: 1em auto 2em;
    font-size: 0.7rem;
}
.spec .linkbtn a {
	 display: block;
	 padding: 1em;
}

#product .lead{
    padding: 0 1.5em;
    margin-bottom: 40px;
    text-align: center;
    line-height: 3;
    font-size: 0.8rem;
}

#product .lead:first-child{
    //background: red;
    margin: 50px 0 40px 0;
}

#product .lead:last-child{
    margin-bottom: 100px;
}


#product .item01{
    margin: 100px 0 0;
}

#product .item02{
    margin: 100px 0 140px;    
}


@media only screen and (min-width: 768px) {
    #product{
    margin: 0;
    padding: 0 0 300px;
    }

    #product　.spec ul{
    padding: 2em 0;
    } 
      
    #product .lead{
    }
    
    .price{
    font-size:0.9rem;
    line-height: 2;
    }

    #product .lead:first-child{
    //background: red;
    margin: 80px 0 40px 0;
    }
    
    #product .lead:last-child{
    margin-bottom: 80px;
    }
    
    #product .item01{
    margin: 180px 0 0;        
    }

    #product .item02{
    margin: 150px 0 0;          
    }
}

#profile{
    margin: 0;
    padding: 0;
}

#profile div{ 
    border: 1px solid #ccc;
    padding: 2.5em 2em;
    text-align: left;
    margin: 0 1em 2em;
}

#profile .lead{
    text-align: left;
    font-size: 0.75rem;
    margin-bottom: 2em;
}


@media only screen and (min-width: 768px) {
    #profile{
    margin: 0;
    padding: 0 0 40px;
    }

    #profile div{ 
    border: 1px solid #ccc;
    padding: 3em 2em;
    margin-bottom: 2em;
    }
    
    #profile .lead{
    text-align: left;
    font-size: 0.85rem;
    line-height: 1.7;
    } 
}

/* ------------------------------------------
LINKS
------------------------------------------ */
#links{
    padding: 3em 0.5em;
    margin: 0 0 150px;
    text-align: center;
}

#links  div.links_wrap{ 
    padding: 3em 2em 2.5em;
    margin: 0 0.5em;
    background: #efefef;
    }

/* ******** ２コ割 ******** */
.row2_links{
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
}

.row2_links img{
    z-index: -1;
    }    

.row2_links li  {
    padding:0;
    margin:0;
    }

.row2_links li:last-child{
    margin-top: 1em;
} 

.row2_links a div{
	display: block;
	padding: 0;
	text-align: center;
	text-decoration:none;
	position: relative;
}

/*.row2_links a div::after {
	content: "\f107";
	color: #666;    
	font-family: FontAwesome;
	position: absolute;
	bottom: 0;
	right: 8%;
	transform: translateX(-50%);
}
*/

@media only screen and (min-width: 768px) {
    #links  div.links_wrap{ 
    padding: 2em;
    margin: 0 1em 160px;
    }
    
    .row2_links {
    font-size: 1rem;
    letter-spacing: 1px;
    display: -webkit-flex;
    display: flex;
    margin: 0;
    padding: 0;
    align-items: center;
    flex-direction: row;    
	}	

    .row2_links li:first-child {
    width: 20%;
    margin-right: 1.5em;
	}
  
    .row2_links li:last-child {
    width: calc( 100% - 20% - 1.5em );  
        margin-top: 0;    
	}

}

/* Ipad調整　*/
@media only screen and (max-width: 768px) { 
    .row2_links {
    display: -webkit-flex;
    display: flex;
    }
    
    .row2_links li {
    width: 100%;
    border: none;
    margin: 0;        
	}
}    



/* ------------------------------------------
SHOP_LIST
------------------------------------------ */
#shoplist {
	padding: 0;
    margin: 0;
    text-align: left;
    padding-top: 1em;
    z-index: -1;    
}

.tenpo_headline {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	margin: 0 0.5em;
	line-height: 2em;
}
.tenpo_headline .blog_link a {
	display: block;
	text-align: center;
}
.tenpo_headline .blog_link a::before {
	content: "\f105";
	font-family: FontAwesome;
	margin-right: 0.5em;
}
.tenpo_area {
    z-index: -1;
    font-size: 0.9rem;
}
.tenpo_area p {
	padding: 0.5em;
	position: relative;
}
.tenpo_area p::after {
	content: "\f107";
	font-family: FontAwesome;
	position: absolute;
	right: 0.5em;
	top: 50%;
	transform: translateY(-50%);
}


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

@media only screen and (max-width: 768px) {
.tenpo_area{
    margin: 0 auto;
    padding: 0;
    width: 94%;
    font-size: 0.85rem;
    }    
    
.tenpo_area p::after {
    content: "\f107";
	font-family: FontAwesome;
	position: absolute;
	right: 0.5em;
	top: 50%;
	transform: translateY(-50%);
    }
}

.tenpo_area p.active::after {
	content: "\f106";
	font-family: FontAwesome;
	position: absolute;
	right: 0.5em;
	top: 50%;
	transform: translateY(-50%);
}
.tenpo_area nav > ul {
	border-bottom: solid 1px #808080;
	font-size: 90%;
}
.tenpo_area nav > ul > li {
	margin: 0.5em 0 0;
	padding: 0 0.5em;
	border-bottom: solid 1px #808080;
}
.tenpo_area nav > ul > li:last-child {
	border-bottom: none;
}
.popup_area_title {
	
}
.tenpo_area a {
	display: block;
	padding: 0 0 0.5em;
	position: relative;
}
.tenpo_area a::after {
	content: "\f105";
	font-family: FontAwesome;
	position: absolute;
	right: 0.5em;
	top: 50%;
	transform: translateY(-50%);
}
.tenpo_area a span {
	font-size: 90%;
}

@media only screen and (max-width: 639px) {
	.tenpo_area p {
	position: relative;
    border-bottom: 1px solid #666;
	}
}
@media only screen and (min-width: 768px) {
	.tenpo_area {
	border: none;
	}
	.tenpo_area p {
    border-bottom: solid 2px #ccc;
	position: relative;
	}
	.tenpo_area p::after {
    content: "\f107";
	}
	.tenpo_area nav > ul {
    border: none;
    margin: 0 0.5em 1.5em;
    font-size: 0.9rem;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
	}
	.tenpo_area nav > ul > li {
    margin: 0.5em;
    padding: 0;
    width: calc(33.333% - 1em);
    border: none;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
	}
	.tenpo_area a {
    display: block;
    width: calc(100% - 0.5em);
    padding: 0.2em 0 0.2em 0.5em;
    position: relative;
    border-bottom: solid 1px #fff;
	}
}

/* ------------------------------------------
FOOTER
------------------------------------------ */
footer {
	margin: 0;
    padding: 0 0 1em;
	text-align: center;
    font-weight: normal !important;
}

footer p:last-child{
    margin-top: 0.3em;
    font-size: 0.7rem;
}

footer img{
    text-align: center;
}

footer .logo{
    text-align: center !important;
    margin: 0 auto !important;
}    

@media only screen and (min-width: 768px) {
    footer {
	font-size: 0.8rem;
    }
    
    footer p:last-child{
    margin-top: 0.3em;
    font-size: 0.75rem;
    } 
}    
    
.video {
    position: relative;
    height: 0;
    padding: 30px 0 56.25%;
    overflow: hidden;
    margin: 0 auto 2em;
    text-align: center;
}

.video iframe {
    //position: absolute;
    //top: 0;
    //left: 0;
    width: 360px;
    height: 202px;
}


@media only screen and (min-width: 768px) {
    .video iframe {
    //position: absolute;
    //top: 0;
    //left: 0;
    width: 560px;
    height: 315px;
    }
}
    
    
    
/* ********** PC ********** */
@media only screen and (min-width: 1000px) {
    .header,
	#top,
    #movie,
    #product,
    #profile,
    #links,
    #snsicon,
    #shoplist,
	footer{
		width: 1000px;
		margin-left: auto;
		margin-right: auto;
	}
}