@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 Serif JP";
font-weight:400;
-webkit-appearance:none;
border-radius:0;
}

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

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

body {
color:#303030;
font-size:16px;
letter-spacing:1px;
line-height:1.5rem;
background-color: #fefbdd;
}

a {
color:#303030;
text-decoration:none;
transition:all 0.1s linear;
&:hover {
color:#303030;
animation-name:delay;
animation-duration:0.2s;
transition:all 0.2s linear;
}
}

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

100% {
opacity:1;
}
}




// ふわっと

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

/* 画面内に入った状態 */
.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
}
}
/*************************
CROUKA Valentine Selection
***************************/
.header {
width:100%;
margin:0 0 8rem 0;
text-align: center;
img {
padding:0;
width:100%;
z-index: 1;
}
div.pc{display: block;}
div.sp{display: none;}
}

@media screen and (max-width:50rem) {
.header {
margin:0 0 2rem 0;
img {
margin:0 auto;
padding:0;
}
div.pc{
display: none;
}
div.sp{
display: block;
}
}
}




/*************************
あたまがき
***************************/
.top_text{
max-width:calc(80% - 8rem);
width:calc(60rem - 4rem);
margin:0 auto;
padding-top:6rem;
z-index:99999999;
text-align: left;
line-height: 2.2rem;
font-size:1rem;
}
@media screen and (max-width: 30rem) {
.top_text{
max-width:calc(100% - 3rem);
width:calc(60rem - 2rem);
font-size:0.75rem;
padding:2rem 0 1rem 0;
letter-spacing: 0.1rem;
line-height: 1.4rem;
}
}



/*************************
各看板画像
***************************/
.kanban{
width:100%;
max-height: 600px;
.pc{display:inline;}
.sp{display:none;}
img {
width:100%;
object-fit:cover;
object-position: center;
}
}

@media screen and (max-width: 30rem) {
.kanban{
.pc{display:none;}
.sp{display:block;
width:100%;}
}
}



/*************************
container
***************************/


.container{
width:80%;
margin:10% 20% 0 0;
position:relative;
}

.text_container{
width:1080px;
margin:0 auto;
h2{
font-size:4rem;
font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
padding:0 200px 0 0;
margin:-1rem 0 0 0;
display:inline;
letter-spacing: 0.6rem;
}
p{
font-size:1rem;
font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
margin:2rem 4rem 1rem 1rem;
line-height: 2rem;
}
}

@media screen and (max-width: 30rem) {
.container{
width:90%;
margin:20% 10% 0 0;
position:relative;
}

.text_container{
width:88%;
margin:-1rem auto 0;
h2{
font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
font-size: 1.8rem;
padding: 0 50px 0 0;
margin: 1rem 0 0 0;
letter-spacing: 2px;
}
p{
font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
font-size:7.5px;
margin: 1rem 0 0 0;
line-height:0.9rem;
}
}
}


.container_right{
width:80%;
margin:10% 0 0 20%;
position:relative;
}
@media screen and (max-width: 30rem) {
.container_right{
width:90%;
margin:20% 10% 0 0;
position:relative;
}
}



/*************************
アイテムのところ
***************************/

ul.item_list{
width:62%;
margin:4% 19%;
display:flex;
flex-wrap:wrap;
list-style-type: none;
li{
width:30%;
margin:1.5%;
background-color: #F9F9F9;
span{
font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
display: block;
font-size:0.9rem;}
.name_container{
padding:10%;

}
img{width:100%;}
}
}
@media screen and (max-width: 30rem) {
ul.item_list{
width:88%;
margin:4% 6% 26%;
display:flex;
flex-wrap:wrap;
list-style-type: none;
li{
width:47%;
margin:1.5%;
background-color: #F9F9F9;
span{
display: block;
font-size:0.7rem;
line-height: 1rem;}
.name_container{
padding:6% 10% 10% 10%;
}
img{width:100%;}
}
}

}

/* header */
#top-head {
top: -100px;
position: absolute;
width: 100%;
margin: 100px auto 0;
padding: 30px 0 0;
line-height: 1;
z-index: 999;
text-align: center;
}
#top-head a,
#top-head {
color:#000000;
text-decoration: none;
}
#top-head .inner {
width:62%;
margin:0 auto;
position: relative;
display: none;
}
#top-head .logo {
float: left;
padding: 14px 0 0 0;
}
#global-nav ul {
list-style: none;
position: absolute;
right: 0;
top: 20px;
font-size: 14px;
}
#global-nav ul li {
float: left;
font-weight: 900;
}
#global-nav ul li a {
padding: 0 20px 10px 20px;
margin-top: -10px;
font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}

/* Fixed */
#top-head.fixed {
margin-top: 0;
top: 0;
position: fixed;
padding-top: 0;
height: 55px;
background: #fff;
background: rgba(255,255,255,.7);
transition: top 0.65s ease-in;
-webkit-transition: top 0.65s ease-in;
-moz-transition: top 0.65s ease-in;
}
#top-head.fixed .inner{
display:block;}
#top-head.fixed .logo {
font-size: 1.1rem;
}
#top-head.fixed #global-nav ul li a {
color:#000000;
font-size:1rem;
padding: -10px 20px 0 20px;
}

/* Toggle Button */
#nav-toggle {
display: none;
position: absolute;
right: 12px;
top: 14px;
width: 24px;
height: 22px;
cursor: pointer;
z-index: 101;
}
#nav-toggle div {
position: relative;
}
#nav-toggle span {
display: block;
position: absolute;
height: 4px;
width: 100%;
background: #000;
border-radius: 2px;
left: 0;
-webkit-transition: .35s ease-in-out;
-moz-transition: .35s ease-in-out;
transition: .35s ease-in-out;
}
#nav-toggle span:nth-child(1) {
top: 0;
}
#nav-toggle span:nth-child(2) {
top: 8px;
}
#nav-toggle span:nth-child(3) {
top: 16px;
}
@media screen and (max-width: 640px) {
#top-head .inner {
width: 100%;
padding: 0;
}
#top-head {
top: 0;
position: fixed;
margin-top: 0;
}
/* Fixed reset */
#top-head.fixed {
padding-top: 0;
background: transparent;
}
#mobile-head {
background: #fff;
width: 100%;
height: 48px;
z-index: 999;
position: relative;
}
#top-head.fixed .logo,
#top-head .logo {
position: absolute;
left: 13px;
top: 0px;
color: #333;
}
#global-nav {
position: absolute;
/* 開いてないときは画面外に配置 */
top: -510px;
background: #333;
width: 100%;
text-align: center;
padding: 10px 0 0 0;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
#global-nav ul {
list-style: none;
position: static;
right: 0;
bottom: 0;
font-size: 0.4rem;
}
#global-nav ul li {
float: none;
position: static;
}
#top-head #global-nav ul li a,
#top-head.fixed #global-nav ul li a {
width: 100%;
display: block;
color: #fff;
padding: 18px 0;
}
#nav-toggle {
display: block;
}

/* #nav-toggle 切り替えアニメーション */
.open #nav-toggle span:nth-child(1) {
top: 6px;
-webkit-transform: rotate(315deg);
-moz-transform: rotate(315deg);
transform: rotate(315deg);
}
.open #nav-toggle span:nth-child(2) {
width: 0;
left: 50%;
}
.open #nav-toggle span:nth-child(3) {
top: 6px;
-webkit-transform: rotate(-315deg);
-moz-transform: rotate(-315deg);
transform: rotate(-315deg);
}
/* #global-nav スライドアニメーション */
.open #global-nav {
/* #global-nav top + #mobile-head height */
-moz-transform: translateY(556px);
-webkit-transform: translateY(556px);
transform: translateY(556px);
}
}



/*************************
footer
***************************/
footer {
overflow: hidden;
background: #F9F9F9;
padding: 40px;
margin:0;
clear: both;}
footer ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
list-style-type: none;}
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: #999999; }
footer a:hover {
color: #eb3b5a; }
footer a i {
margin: 0 0.25rem 0 0; }
#footer-logo {
width: 160px;
fill: #303030; }
@media screen and (max-width: 30rem) {
#footer-logo {
width: 160px;
fill: #303030;
margin: 0 auto 24px auto;
display: block; } }