@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("slick-theme.css");
@import url("slick.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css");


* {
padding:0;
margin:0;
outline:none;
border-radius:0;
}

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

// ふわっと

/* 画面外にいる状態 */
.fadein {
opacity : 0.5;
transform : translate(0, 50px);
transition: all 1s;
}

/* 画面内に入った状態 */
.fadein.scrollin {
opacity : 1;
transform : translate(0, 0);
}

@keyframes fadein_logo {
  0% {
    opacity: 0;/* 透明 */
  }
  100% {
    opacity: 1;/* 不透明 */
  }
}

.fadein_logo {
  opacity: 0;/* ここを追加 */
  animation-duration: 1s;/* アニメーション時間 */
  animation-delay : 1s;/* 変化開始の時間 */
  animation-name: fadein_logo;/* アニメーション名 */
  animation-iteration-count: 1;/* アニメーションの繰り返し（無限）*/
  animation-fill-mode: forwards; /*これで値を保持*/
}

html,body {
width:100%;
height:100%;
color:#303030;
font-family: "YuGothic", "Yu Gothic", "游ゴシック体", "游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-weight: 500;
letter-spacing: 0.03em;
font-size:16px;
letter-spacing:1px;
line-height:2rem;
padding:0;
margin:0;
}

a {
text-decoration:none;
transition:all 0.1s linear;
color:#303030;
}

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";
font-weight:900;
}

// 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;
$beige:#f8f4ee;
$dark-gray:#303030;
$light-gray:#cccccc;
$soft-gray:#eeeeee;
$red:#eb3b5a;
$orange:#fa8231;
$yellow:#f7b731;
$green:#20bf6b;
$blue:#3867d6;
$purple:#8854d0;
$accent :#45a3bf;


// リンク下線が左からスーッと出てくる
.cp_link {
padding: 0;
position: relative;
display: inline-block;
transition: .3s;
color: $dark-gray;
font-weight: 600;
margin: 2px 0;
}
.cp_link::after {
position: absolute;
bottom: 0;
left: 0;
content: '';
width: 0;
height: 1px;
background-color: $dark-gray;
transition: .3s;
color:$dark-gray;
}
.cp_link:hover::after {
width: 100%;
}

// 内に入ったラインがでる
h3 {
@include MON;
font-weight:bold;
text-align:center;
padding:2rem 0 2rem 0;
display: inline-block;
position: relative;
&:before {
content: '';
position: absolute;
left: 50%;
bottom: -10px; /*下線の上下位置調整*/
display: inline-block;
width: 30px; /*下線の幅*/
height: 2px; /*下線の太さ*/
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translate(-50%); /*位置調整*/
background-color: $dark-gray; /*下線の色*/
}
}

/////////////看板
.kanban {
width:100%;
margin:0 0 8rem 0;
position:relative;
img {
width:100%;
}
img.logo{
width:10%;
max-width: 400px;
position:absolute;
bottom:-60px;
left:10%;
z-index: 999999999;
}
div.pc{
display: block;
}
div.sp{
display: none;
}
}

@media screen and (max-width:50rem) {
.kanban {
margin:0 0 2rem 0;
img {
width:100%;
margin:0 auto;
}
img.logo{
width:26%;
max-width: 400px;
bottom:-30px;
left:auto;
right:10%;
z-index: 999999999;
}
div.pc{
display: none;
}
div.sp{
display: block;
}
}
}


////////////// コンテナーの設定はココ
.content_container {
width:96%;
padding:0 2%;
margin: 4rem auto;
background:$soft-gray;
clear: both;
&:nth-child(odd) {
background:$white;
}
}
h2 {
@include MON;
font-weight:bold;
text-align:center;
padding:0 0 2rem 0;
}
.content_inner {
max-width:1500px;
margin:0 auto;
}
@media screen and (max-width:50rem) {
.content_container {
width:100%;
padding:0;
margin: 2rem auto 0rem auto;
}
}


////////////// 頭がきの設定はココ
.header-text {
max-width:60rem;
margin: 0 auto;
font-size: 1.075rem;
padding-bottom: 4rem;
p{}
img{padding:0 0 0 4%;
float:right;
width:36%;
height: 100%;}
}

@media screen and (max-width:50rem) {
.header-text {
max-width: 90%;
padding: 0 5% 0 8%;
margin: 0 auto;
font-size: 0.9rem;
img{width:50%;height: 100%;}
}
}


/*************************
contents
***************************/

////////////// タイトル画像
.title{
text-align: center;
padding:8rem 0 2rem 0;
img{width:30%;}
}
@media screen and (max-width:50rem) {
.title{
text-align: center;
padding:2rem 0 0 0;
img{width:80%;}
}
}

////////////// 最初の画像
.photo_first{
max-width:1200px;
margin:0 auto;
img{width:100%;}
p{padding:1rem 0 2rem 0;}
}
@media screen and (max-width:50rem) {
.photo_first{
width:80%;
padding:0 10%;
font-size:0.75rem;
img{width:100%;padding:1rem 0 0 0;}
p{padding:1rem 0 2rem 0;}
}
}

.text-combine{-ms-text-combine-horizontal: all;
	-webkit-text-combine: horizontal;
	text-combine-upright: all;
	line-height: 1;
	vertical-align: baseline;}

////////////// 写真のコンテナ
.photo_container{
max-width:1200px;
width:90%;
margin:0 auto;
img{width:100%;height: 100%;}
.pc{display: block;}
.sp{display: none;}
}
@media screen and (max-width:50rem) {
.photo_container{
width:94%;
margin:0 auto;
padding:0 3%;
font-size:0.75rem;
line-height: 1.4rem;
.pc{display: none;}
.sp{display: block;
font-size:0.6rem;}
}
}


.photo_big{
padding:8rem 0 0 0;
text-align: center;
width:70%;
margin:0 auto;
img{width:100%;}
p{text-align: left;padding:1rem 0 0 0;}
}
@media screen and (max-width:50rem) {
.photo_big{
width:100%;
padding:2rem 0 0 0;
img{width:100%;}
}
}

.photo_mid{
padding:6rem 0 0 0;
display:flex;
&:nth-child(odd) {flex-direction:row-reverse;}
img{width:85%;}
p{writing-mode: vertical-rl;
line-height: 1rem;
padding:0 2%;
}
}
@media screen and (max-width:50rem) {
.photo_mid{
padding:2rem 0 0 0;
img{width:85%;}
p{writing-mode: vertical-rl;
line-height: 1rem;
padding:0 2%;
}
}
}

.photo_small{
padding:8rem 0 0 0;
display:flex;
&:nth-child(odd) {flex-direction:row-reverse;}
img{width:70%;}
p{writing-mode: vertical-rl;
padding:0 2%;
}
}
@media screen and (max-width:50rem) {
.photo_small{
padding:2rem 0 0 0;
img{width:70%;}
p{writing-mode: vertical-rl;
line-height: 1rem;
padding:0 2%;
}
}
}



////////////// スタイリングのところ
.styling{
overflow: hidden;
padding:10rem 0 8rem 0;
max-width:1200px;
width:50%;
margin:0 auto;
img{width:100%;}
.text{width:40%;
float:right;
p{padding:1rem 0 0 0;font-size:0.75rem;font-weight: 600;}}
.title{text-align: center;
font-weight:600;
@include MON;
font-size:1.8rem;
padding-bottom:1rem;
}
}
@media screen and (max-width:50rem) {
.styling{
width:100%;
margin:0 auto;
padding:2rem 0 4rem 0;
img{width:100%;}
.text{width:100%;
float:right;
p{padding:1rem 0 0 0;font-size:0.75rem;font-weight: 600;}}
.title{text-align: center;
font-weight:600;
@include MON;
font-size:1.4rem;
}
}
}


.item{
padding:1rem 1rem 0 0;
text-align: right;
font-size: 0.6rem;
li{margin: 0.25rem 0;
span.brand{
}
span.buy{
background-color: $dark-gray;
color:$white;
padding:3px 5px;
}
color: #fff;
}
}
@media screen and (max-width:50rem) {
.item{}
}

/*************************
shop_container
***************************/
.shop_container{
background-color:$beige;
padding:10% 20%;
width:60%;
margin-top:0rem;
.shop_container_inner{
overflow: hidden;
background-color:$white;
padding:6% 10%;
margin:4rem 0;
box-shadow: 0 0 8px rgba(0,0,0,0.05);
i{
text-align: center;
display: block;
margin: 0 auto;
width:6%;
img{width:100%;}}
div.title{
font-size:1.2rem;
font-weight: 600;
padding: 0 0 2.4rem 0;
}
}
}

@media screen and (max-width:50rem) {
.shop_container{
padding:10% 5%;
width:90%;
.shop_container_inner{
padding:10% 10%;
div.title{
font-weight: 600;
padding: 0 0 2rem 0;
}
i{
width:12%;
}
}
}
}

iframe{
float:left;
width:50%;
border:0;
max-width:600px;
height: 400px;}

@media screen and (max-width:50rem) {
iframe{
float:none;
width:100%;
max-width:100%;
height: 200px;}
}

.address{
width:45%;
padding-left:5%;
float:right;
}
.address dt,.address dd {
@include SANS;
margin-left:0;
}
.address dt {
font-size:0.9rem;
font-weight:600;
letter-spacing:2px;
line-height:2em;
}
.address dd {
font-size:0.8rem;
font-weight: normal;
margin-bottom:20px;
padding-left:10px;
border-left:2px solid #cccccc;
-webkit-transition:all 0.1s linear;
-moz-transition:all 0.1s linear;
-ms-transition:all 0.1s linear;
transition:all 0.1s linear;
}
.address dd:hover {
border-left:2px solid #000000;
}

@media screen and (max-width:50rem) {
.address{
width:100%;
padding-left:0;
float:none;
}
.address dt {
font-size:0.75rem;
}
.address dd {
font-size:0.6rem;
line-height:1rem;
margin-bottom:10px;
}
}


/*************************
footer
***************************/
footer {
background: white;
padding: 40px;
margin:0;
clear: both;}
footer ul {
display: flex;
flex-wrap: wrap;
justify-content: center; }
footer li {
margin: 0 10px 0 0;
a{
font-size: 0.8rem;
}}
footer li:first-child {
margin: 0 auto 0 0; }
@media screen and (max-width: 30rem) {
footer li {
margin: 5px 10px; }
footer li:first-child {
margin: auto;
width: 100%; } }
footer a {
font-family: "Montserrat";
color: $gray; }
footer a:hover {
color: $red; }
footer a i {
margin: 0 0.25rem 0 0; }
#footer-logo {
width: 160px;
fill: $dark-gray; }
@media screen and (max-width: 30rem) {
#footer-logo {
width: 160px;
fill: $dark-gray;
margin: 0 auto 24px auto;
display: block; } }
#page_top{
width: 50px;
height: 50px;
position: fixed;
right: 0;
bottom: -50px;
opacity: 0.6;
margin:0 20px 0 0 ;
}
#page_top a{
position: relative;
display: block;
width: 50px;
height: 50px;
text-decoration: none;
}
#page_top a::before{
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: '\f102';
font-size: 25px;
color: $dark-gray;
position: absolute;
width: 30px;
height: 30px;
top: -15px;
bottom: 0;
right: 0;
left: 0;
margin: auto;
text-align: center;
}

/*============
nav
=============*/
nav {
display: block;
position: fixed;
top: 0;
left: -300px;
bottom: 0;
width: 260px;
background: $white;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
transition: all .5s;
z-index: 999999999999999999999999;
opacity: 0;
}
.open nav {
left: 0;
opacity: 1;
}
nav .inner {
padding: 25px;
}
nav .inner ul {
list-style: none;
margin: 0;
padding: 0;
}
nav .inner ul li {
position: relative;
margin: 0;
font-weight: 600;
}
nav .inner ul li a svg{
padding:0 6px 0 0;
}
nav .inner ul li a {
display: block;
color: $dark-gray;
font-size: 1.1rem;
padding: 1em;
text-decoration: none;
transition-duration: 0.2s;
i{
img{
width:16%;
margin:0 6px -6px 0;;
}
}
}
nav .inner ul li a:hover {
background: $soft-gray;
}
@media screen and (max-width: 767px) {
nav {
left: -220px;
width: 180px;
}
nav .inner {
padding: 10px;
}
nav .inner ul li a {
font-size: 0.8rem;
}
}
/*============
.toggle_btn
=============*/
.toggle_btn {
display: block;
position: fixed;
top: 30px;
left: 30px;
width: 30px;
height: 30px;
transition: all .5s;
cursor: pointer;
z-index: 3;
}
.open .toggle_btn {
left: 330px;
}
.toggle_btn span {
display: block;
position: absolute;
left: 0;
width: 30px;
height: 2px;
background-color: $dark-gray;
border-radius: 4px;
transition: all .5s;
}
.toggle_btn span:nth-child(1) {
top: 4px;
}
.toggle_btn span:nth-child(2) {
top: 14px;
}
.toggle_btn span:nth-child(3) {
bottom: 4px;
}
.open .toggle_btn span {
background-color: $white;
}
.open .toggle_btn {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
.open .toggle_btn span:nth-child(1), .open .toggle_btn span:nth-child(3) {
width: 16px;
}
.open .toggle_btn span:nth-child(1) {
-webkit-transform: translate(-1px,4px) rotate(-45deg);
transform: translate(-1px,4px) rotate(-45deg);
}
.open .toggle_btn span:nth-child(3) {
-webkit-transform: translate(-1px,-4px) rotate(45deg);
transform: translate(-1px,-4px) rotate(45deg);
}
@media screen and (max-width: 767px) {
.open .toggle_btn {
left: 250px;
}
}
/*============
#mask
=============*/
#mask {
display: none;
transition: all .5s;
}
.open #mask {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: .8;
z-index: 2;
cursor: pointer;
}