@charset "utf-8";
/* CSS Document */

/***共通項目***/
body { color:#222; background: url("../img/bg.jpg") repeat;}

@media (min-width: 769px) {
	a[href^="tel:"] { pointer-events: none; }
}

.w100 { width:100%; }

a, a:visited { color: #555; transition: 0.4s; }

img { backface-visibility: hidden;}

/***コンテンツ***/
.wrapper { display: flex; width: 100%; margin: 0; padding: 0; font-size: 0; flex-wrap: wrap;}
.wrapper .left , .wrapper .right { width: 100%;}
.wrapper .left { background: url("../img/bg2.jpg") center/cover no-repeat; display: flex; align-items: center; justify-content: center; padding: 3.0rem; flex-wrap: wrap;}
.wrapper .left img { max-width: 742px; width: 100%;}

.wrapper .right .text-block .logo {text-align: center; min-height: 1px; width: 15%; margin:0 auto;}
.wrapper .right .text-block .logo img { width: 100%;}

.wrapper .right .text-block .typo { text-align: center;}
.wrapper .right .text-block .typo > span { font-size: 4.8rem; font-family: 'Oswald', sans-serif; font-weight: 700; position: relative;}
.wrapper .right .text-block .typo > span::before, .wrapper .right .text-block .typo > span::after { font-family: 'Oswald', sans-serif; font-size: 2.0rem; font-weight: 400; position: absolute; letter-spacing: 0.175rem;}
.wrapper .right .text-block .typo > span::before { content: "HF-3 D4I"; top: -0.75rem; left: 0; }
.wrapper .right .text-block .typo > span::after { content: "EDITION"; bottom: -1.2rem; right: 0; }
.wrapper .right .text-block .typo span > span { color: #079BB3;}

.wrapper .right .text-block .caption { font-size: 0.9rem; text-align: center;}

.wrapper .right .box { padding: 0; display: flex; align-items: center; justify-content: center;  flex-wrap: wrap;}
.wrapper .right .box:nth-child(even) { background-color:#079BB3; color: #FEFEFE; }

.intro  { font-size: 1.0rem; line-height: 1.8rem; font-weight: 400; color: #FEFEFE; min-height: 1px; display: inline; position: relative;}
.intro::after { content: "-Jake Shimabukuro"; font-style: italic; display: block; position: absolute; right: 0; bottom: -1.4rem; font-weight: 700;}

.box p { font-size: 1.0rem; font-weight: 500; line-height: 1.8rem;}

    @media(min-width:992px){
        .wrapper .left { -ms-flex-order:1; order: 1; }
        .wrapper .right { -ms-flex-order:0; order: 0; }
        .wrapper .left , .wrapper .right { width: 50%;}
        
        .wrapper .left { position: fixed; right: 0;  height: 100vh; display: flex; align-items: center; justify-content: center; padding: 3.0rem; flex-wrap: wrap; }
        .wrapper .left img { width:auto; height: 100%; max-height: 55vw; }
		.wrapper .left p { background-color: transparent; }
        
        .wrapper .right .text-block { height: 100vh; width: 100%; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;}
		.wrapper .right .text-block .typo > span { font-size: 5.5rem; }
		.wrapper .right .text-block .typo > span::before, .wrapper .right .text-block .typo > span::after { font-size: 2.0rem; }
		.wrapper .right .text-block .typo > span::before { top: -0.8rem; }
		.wrapper .right .text-block .typo > span::after { bottom: -1.2rem; }
		
		.wrapper .right .text-block .caption { font-size: 1.0rem; text-align: center;}
		
		.wrapper .right .box { height: 100vh; width: 100%;}
		.intro  { font-size: 1.4rem; line-height: 2.2rem; font-weight: 400; color: #FEFEFE;  }
		.intro::after { bottom: -1.8rem;}
    }

.box p.typo { text-align: center; width: 100%; margin-top: 1.0rem;}
.box p.typo > span { font-size: 3.0rem; font-family: 'Oswald', sans-serif; font-weight: 700; position: relative;}
.box p.typo > span::before, .box p.typo > span::after { font-family: 'Oswald', sans-serif; font-size: 1.0rem; font-weight: 400; position: absolute; letter-spacing: 0.175rem;}
.box p.typo > span::before { content: "HF-3 D4I"; top: -0.5rem; left: 0; }
.box p.typo > span::after { content: "EDITION"; bottom: -0.8rem; right: 0; }

.box .tbn { display: flex; flex-wrap: wrap; margin-top: 2.0rem;}
.box .tbn li { width: 20%; font-size: 0;}
.box .tbn li img { width: 100%;}

.spec {display: flex; justify-content: flex-start; align-items: center; width: 100%; flex-wrap: wrap; flex-shrink: 0; border-top: solid 1px #FEFEFE; margin-top: 0;}
.spec li { font-size: 0.8rem; margin-bottom: 0.175rem;}
.spec li:nth-child(odd){ width: 30%;}
.spec li:nth-child(even){ width: 70%; padding-left: 1.5rem; position: relative;}
.spec li:nth-child(even)::before {content: "："; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}

.btn { width: 100%; color: #079BB3; padding: 0.25rem; text-align: center; font-size: 1.0rem; font-weight: 400; border: solid 2px #079BB3; position: relative; transition: 0.8s; margin-top: 0;}
.btn a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; text-indent: -9999px;}
.btn:hover { background-color: #079BB3; color: #FEFEFE;}

p.price { font-size: 1.0rem; font-weight: 700; color: #FF7BAC; line-height: 2.2rem;}
p.price span { font-size: 3.5rem; font-family: 'Lato', sns-serif;}
	@media(min-width:1200px){
		p.price { font-size: 1.6rem; font-weight: 700; color: #FF7BAC; line-height: 3.2rem;}
		p.price span { font-size: 5.0rem; font-family: 'Lato', sns-serif;}
	}

/***店舗情報***/
.shop .venue { text-align: center; font-size: 1.6rem; font-weight: 500; }
.shop .venue span { font-size: 1.0rem;}

.shop .info div[class^="col-"] { } 
.shop .info p { width: 100%; margin: 0; margin-bottom: 1.5rem; font-size: 1.2rem; padding:0.5rem 0; border-bottom: dashed 1px #FEFEFE;}
.shop .info p:last-child { margin-bottom: 0;}
.shop .info p span { font-size: 0.8rem; margin-right: 0.5rem; vertical-align: middle;}
.shop .info p span[class^="icon-"] { font-size: 1.6rem; }
.shop .info p a, .shop .info p a:visited { color: #FEFEFE;}
.shop .info p a:hover{ color:#CCC; }
    @media(min-width:768px){
        .shop .info p { text-align: left; font-size: 1.0rem; vertical-align: middle; padding:0.25rem 0; }
        .shop .info p span { font-size: 0.8rem;}
        .shop .info p span[class^="icon-"] { font-size: 1.7rem; }
        .shop .info .col-s-5 img { padding-right: 1.0rem;}
    }


/***フッター***/
.footer { width: 100%; margin: 0; padding:1.0rem 0; text-align: center; font-size: 0; background-color: #079BB3; color: #FEFEFE; }
.footer span { font-size: 4.5rem;}
.footer .copy { font-size: 0.6rem; margin-top: 0.25rem;}