@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");
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@700&display=swap');
@import url("https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.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;
}

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

a{
text-decoration: none;
}
a:hover{
opacity: 1;
animation: flash 1.5s;
}
@keyframes flash {
0% {
opacity: .3;
}
100% {
opacity: 1;
}
}

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

// DM+Sans
@mixin DM {
font-family: "DM Sans";
font-weight:600;
}

// 全体のデザイン
$white:#ffffff;
$gray:#999999;
$dark-gray:#303030;
$light-gray:#cccccc;
$soft-gray:#eeeeee;
$red:#D64D31;

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


/* 全体の読み込みをふわっと */
body {
-webkit-animation: fadeIn 1.5s ease 0s 1 normal;
animation: fadeIn 1.5s ease 0s 1 normal;
}
@keyframes fadeIn {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0
}
100% {
opacity: 1
}
}


// マウスホバーでちょっと大きくなるやつ
a.zoom{display: inline-block;
&:hover {-webkit-animation: zoom .3s;
animation: zoom .3s;}
@-webkit-keyframes zoom {50% {
-webkit-transform: scale(1.05);}}
@keyframes zoom {50% {transform: scale(1.05);}}
.cp_link:hover::after {width: 100%;}
}





////////////////////////////// 全体
.container {
width:100%;
}

////////////////////////////// CONTENT
.content {
width:100%;
text-align: center;
padding:200px 0;
}
@media screen and (max-width:30rem) {
.content {
width:80%;
margin:0 auto;
padding:4rem 0;
}
}
.content-layout{
width:60%;
margin:0 auto 5% auto;
display: flex;
}
@media screen and (max-width:30rem) {
.content-layout{
width:96%;
margin:0 auto 25% auto;
display: block;}
}
.content-item{
width:40%;
img{
width:100%;
}
}
@media screen and (max-width:30rem) {
.content-item{
width:100%;
}
}
.content-text{
margin:2rem 0 0 2%;
text-align: left;
width: 58%;
.content-title{
@include DM;
margin:0 0 1.6rem 0;
font-size:1.6rem;
}
p{
margin:0 0 1.6rem 0;
font-size:0.9rem;
}
div.name{
@include DM;
font-size: 1rem;
padding: 16px 0 4px 0;
line-height: 1.25rem;
font-weight: bold;
}
div.price{
@include DM;
font-size: 0.8rem;
padding:0 0 4px 0;
span.buy{
background-color: $dark-gray;
color:$white;
padding:3px 5px;
margin:0 8px;
}
}
div.jp-name{
font-size:0.8rem;
@include DM;
}
}

@media screen and (max-width:30rem) {
.content-text{
margin:2rem 2%;
text-align: left;
width: 96%;
.content-title{
font-size:1.2rem;
}
p{
font-size:0.8rem;
}
}
}
.item_button {
width: 100%; }
.item_button a {
height: 60px;
margin-top: 12px;
font-size:1rem;
line-height: 60px;
color: $white;
letter-spacing: 1px;
display: block;
text-align: center;
border-radius: 30px;
background-color: $dark-gray;
border: 1px solid;
width: 100%; }


////////////////////////////// 相互リンク
.content-blue {
width:100%;
text-align: center;
padding:150px 0 0 0;
}
@media screen and (max-width:30rem) {
.content-blue {
padding:6rem 0 0 0;
}
}

.sougolink_layout{
width:50%;
margin:0 auto;
padding:0 0 200px 0;
p.title{text-align: center;
@include DM;
font-weight: bold;
padding:0 0 10px 0;
}
p.comment{
text-align: center;
font-size:0.9rem;
padding:0 0 15px 0;
}
.sougolink_container{
.sougolink_box{
width:35%;
margin:0 auto;
padding:2% 0 0 0;
p{@include DM;
font-weight: bold;}
}
.item_button a{
@include DM;
i{padding:0 10px;}
}
}
img{width:60%;}
}
@media screen and (max-width:30rem) {
.sougolink_layout{
width:80%;
margin:0 auto;
padding:0 0 150px 0;
p.title{text-align: center;
@include DM;
font-weight: bold;
padding:0 0 10px 0;
}
p.comment{
text-align: center;
font-size:0.8rem;
padding:0 0 10px 0;
}
img{width:100%;}
.sougolink_container{
display: block;
.sougolink_box{
width:100%;
padding:10px 0 0 0;
p{@include DM;
font-weight: bold;}
}
.item_button{
width:60%;
margin: 0 auto;
a{
@include DM;
i{padding:0 10px;}
}
}
}
}

}



// 動画

video {
display: block;
max-width: 100%;
width: 100%;
height: auto;
}
.sp_douga{
display: none;
}

@media screen and (max-width:30rem) {
.sp_douga{
display: block;
div{
max-width:100%;}
img{
width:100%;
}
}
video {
display: none;
}
}



// フッター
footer {
background:$dark-gray;
padding: 40px;
margin:0;}
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: $gray; }
@media screen and (max-width: 30rem) {
#footer-logo {
width: 160px;
fill: $gray;
margin: 0 auto 24px auto;
display: block; } }