@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP");
@import url("https://fonts.googleapis.com/css?family=Noto+Serif+JP");
@import url("https://fonts.googleapis.com/css?family=Montserrat");
@import url("https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css");

// https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css
// at https://icons8.com/line-awesome

* {
padding:0;
margin:0;
outline:none;
font-family:"Noto Sans JP";
-webkit-appearance:none;
border-radius:0;
}

// スマホのスクロールをスムーズに
html {
-webkit-overflow-scrolling:touch;
}

html,body {
width:100%;
height:100%;
}

body {
color:#303030;
font-family:"Noto Sans JP";
font-size:16px;
letter-spacing:1px;
line-height:1.5rem;
}

a {
text-decoration:none;
transition:all 0.1s linear;

&:hover {
animation-name:delay;
animation-duration:0.2s;
transition:all 0.2s linear;
}
}

@keyframes delay {
0% {
opacity:0.5;
}

100% {
opacity:1;
}
}

ul {
list-style:none;
padding:0;
}

h1,h2,h3,h4,h5,h6 {
font-weight:bold;
line-height:1.5rem;
}

h1 {
font-size:2.0rem;
line-height:2.0rem;
}

h2 {
font-size:1.5rem;
line-height:2.0rem;
}

h3 {
font-size:1.25rem;
line-height:1.5rem;
}

h4,h5,h6 {
font-size:1.0rem;
line-height:1.5rem;
}

table	 {
border-collapse:collapse;
}

td,input	 {
font-family:"Noto Sans JP";
}

button {
background:transparent;
border:0;
}

button:hover {
cursor:pointer;
}

// Font Awesome
@mixin ICON {
font-family:"Font Awesome 5 Pro","Font Awesome 5 Brands";
}

// Line Awesome
@mixin LINE-AWESOME {
font-family:"Line Awesome Free","Line Awesome Brands";
}

// Noto Sans JP
@mixin SANS {
font-family:"Noto Sans JP";
font-weight:400;
}

// Noto Serif JP
@mixin SERIF {
font-family:"Noto Serif JP";
font-weight:400;
}

// Montserrat
@mixin MON {
font-family:"Montserrat";
}

// 全体のデザイン
$white:#ffffff;
$gray:#999999;
$dark-gray:#303030;
$light-gray:#cccccc;
$soft-gray:#eeeeee;
$red:#eb3b5a;
$orange:#fa8231;
$yellow:#f7b731;
$green:#20bf6b;
$blue:#3867d6;
$purple:#8854d0;

$accent:#45a3bf;
$accent-active:#246273;

// LOADER
#loading {
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:999999 !important;
background:#f8d4d0;
transition:all 0.5s linear;
}

.loading-item {
@include MON;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
color:$white;
font-weight:bold;
font-size:0.5rem;
letter-spacing:2px;
white-space: nowrap;
color:$dark-gray;
}

.loaded {
opacity:0;
visibility:hidden;
transform:scale(1.5,1.5);
filter:blur(5px);
}

// ここから

.container {
width:100%;
height:100%;
}

.jumbotron {
background:url("../img/cover.jpg") no-repeat 50% 50%;
background-size:cover;
width:100%;
height:100%;
max-width:100%;
max-height:75%;
position:relative;
z-index:-1;

h1 {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:30rem;
max-width:80%;
margin:0 0 4rem 0;

img {
width:100%;
}
}
}

.converse-addict-is {
background:linear-gradient(135deg,rgba(248,212,208,1),rgba(255,222,201,1));
padding:4rem;
max-width:calc(80% - 8rem);
width:calc(60rem - 4rem);
margin:-8rem auto 8rem auto;
z-index:9999;

p {
@include SERIF;
line-height:2rem;
text-align:center;
margin:0 0 1rem 0;

&:last-child {
margin:0;
}
}
}

@media screen and (max-width:30rem) {
.converse-addict-is {
background:linear-gradient(135deg,rgba(248,212,208,1),rgba(255,222,201,1));
padding:2rem 2rem;
max-width:calc(90% - 4rem);
width:calc(60rem - 2rem);
margin:-4rem auto 8rem auto;
z-index:99999;
}
}

.content {
margin:0 0 4rem 0;

h2 {
@include MON;
font-size: 1.25rem;
text-align: center;
padding:1rem;
}

@media screen and (max-width:30rem) {
h2 {
@include MON;
font-size: 1rem;
text-align: left;
padding:1rem 1rem 0 1rem;
}
}

}

.content-wrapper {
display:flex;
margin:0 0 8rem 0;

.content-lineup {
width:calc(30% - 8rem);
padding:2rem 4rem;

dl {

dt {
margin:2rem 0 0 0;
text-align:center;

img {
width:100%;
max-width:15rem;
min-width:8rem;
transition:all 0.1s linear;

&:hover {
cursor:pointer;
transform:scale(1.05,1.05);
}
}
}

dd {
padding:1rem;
display:none;
}
}
}

@media screen and (max-width:30rem) {
.content-lineup {
width:calc(80% - 4rem);
padding:2rem 2rem;
margin:0 auto;
}
}

.content-theme {
width:70%;

img {
width:100%;
}
}

@media screen and (max-width:30rem) {
.content-theme {
width:90%;
}
}

.content-theme-inner {
position:sticky;
top:2rem;
}

&:nth-child(even) {
flex-direction: row-reverse;
}
}

@media screen and (max-width:30rem) {
.content-wrapper {
display:flex;
flex-wrap:wrap;
margin:0 0 8rem 0;
}
}

.content-theme-image {
width:100%;
overflow: hidden;
}

@media screen and (max-width:30rem) {
.content-theme-image {
width:auto;
overflow: hidden;
height:25rem;

img {
height:100%;
object-fit:cover;
object-position: center;
}
}
}

.content-detail {

li {
@include MON;
font-weight:bold;
font-size:0.6rem;
text-align:center;
}

.name {
font-weight:bold;
text-align:center;
font-size:0.8rem;

&:after {
content:"";
width:2rem;
display:block;
border-bottom:1px solid $dark-gray;
margin:1rem auto;
}
}

.release:before {
content:"RELEASE:";
margin:0 0.5rem 0 0;
}

.price:before {
content:"PRICE:";
margin:0 0.5rem 0 0;
}

.color:before {
content:"COLOR:";
margin:0 0.5rem 0 0;
}

.upper:before {
content:"UPPER:";
margin:0 0.5rem 0 0;
}

.outsole:before {
content:"OUTSOLE:";
margin:0 0.5rem 0 0;
}

.inquiry {
text-align: center;

button {
color:$white;
background: $red;
padding:0.5rem 1.5rem;
margin:1rem 0 0 0;
border-radius:2px;
display:inline-block;

&:hover {
cursor:pointer;
background:$orange;
}
}
}
}

// フッター
footer {
padding:4rem 2rem;
background:$dark-gray;
color:#ffffff;
text-align:center;

h3 {
font-size:1rem;
line-height:1rem;
font-weight:normal;
color:$gray;
margin:0 0 2rem 0;

&:before {
@include ICON;
content:"\f05a";
font-weight:900;
margin:0 0.5rem 0 0;
}
}

.footer-contact-us {
display:flex;
justify-content:center;
max-width:40rem;
width:80%;
margin:0 auto 2rem auto;

li {
@include MON;
margin:0;
padding:0 1rem;
width:calc(30% - 2rem);
border-right:1px solid $gray;

&:last-child {
border-right:none;
}

a {
color:$white;
}
}

@media screen and (max-width:30rem) {
li {
@include MON;
margin:0 0 1rem 0;
padding:0 1rem;
width:calc(100% - 2rem);
border-right:none;
}
}

.phone:before {
@include ICON;
content:"\f095  PHONE";
font-weight:900;
margin:0 0 0.25rem 0;
display:block;
font-size:0.5rem;
letter-spacing:2px;
}

.mail:before {
@include ICON;
content:"\f0e0  MAIL";
font-weight:900;
margin:0 0 0.25rem 0;
display:block;
font-size:0.5rem;
letter-spacing:2px;
}

.line:before {
@include ICON;
content:"\f3c0  LINE";
font-weight:900;
margin:0 0 0.25rem 0;
display:block;
font-size:0.5rem;
letter-spacing:2px;
}
}

@media screen and (max-width:30rem) {
.footer-contact-us {
display:block;
max-width:40rem;
width:80%;
margin:0 auto;
justify-content:center;
}
}

}

.footer-caution {
max-width:40rem;
width:80%;
font-size:0.8rem;
margin:0 auto;
color:$gray;
}

// グランドメニュー
.grand-menu {
background:linear-gradient(135deg,rgba(248,212,208,0.9),rgba(255,222,201,0.9));
max-width:calc(80% - 8rem);
width:calc(60rem - 8rem);
height:calc(100% - 8rem);
z-index:1;
padding:6rem 4rem 4rem 4rem;
position:fixed;
top:0;
right:0;
display:none;

ul {
display:flex;
flex-wrap:wrap;

li {
width:50%;

a {
@include MON;
color:$dark-gray;
font-size:0.8rem;
font-weight:bold;
text-align:center;
border:1px solid $dark-gray;
margin:0 1rem 1rem 0;
padding:1rem 2rem;
display:block;
overflow:hidden;
text-overflow: ellipsis;
white-space: nowrap;

&:hover {
background:$dark-gray;
color:$white;
}
}
}
}
}

@media screen and (max-width:30rem) {
.grand-menu {
background:linear-gradient(135deg,rgba(248,212,208,0.9),rgba(255,222,201,0.9));
max-width:calc(80% - 4rem);
width:calc(60rem - 4rem);
height:calc(100% - 4rem);
z-index:1;
padding:6rem 2rem 2rem 2rem;
position:fixed;
top:0;
right:0;
display:none;

ul {
display:block;
flex-wrap:wrap;

li {
width:100%;

a {
@include MON;
color:$dark-gray;
font-weight:bold;
text-align:center;
border:1px solid $dark-gray;
margin:0 0 1rem 0;
padding:1rem 2rem;
display:block;
overflow:hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
}

.grand-menu-button {
position:fixed;
top:2rem;
right:2rem;
z-index:999999;

button {
color:$dark-gray;
font-size:2rem;
}
}

// お問い合わせ

.inquiry-menu {
background: rgba(0,0,0,0.9);
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
color:$white;
z-index: 999999;
display:none;

.inquiry-wrapper {
display:flex;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width: 80%;
max-width:40rem;
margin:0 auto;
}

.inquiry-close {
color:$dark-gray;
background: $white;
border:2px solid $white;
position:absolute;
top:-3rem;
right:0;
font-weight:bold;
line-height:0.8rem;
padding:0.5rem 1rem;
font-size:0.8rem;

&:hover {
cursor:pointer;
color:$white;
background: transparent;
}
}

.inquiry-title {
@include MON;
letter-spacing: 5px;
font-size:0.5rem;
font-weight:bold;
transform:rotate(90deg);
transform-origin: 0 0;
white-space: nowrap;
position: absolute;
}

ul {
border-left:1px solid $white;
margin: 0 0 0 2rem;
padding: 0 0 0 2rem;

li {
margin:0 0 2rem 0;
font-size:1.25rem;

span {
font-size:0.8rem;
display:block;
line-height:1.25rem;
margin:0.5rem 0 0 0;
}
}

a {
color:$white;
font-weight:bold;
}
}
}