@charset "UTF-8";

html {
    font-size: 100%;
}

body {
  background-color: #6e5064;
  font-family: 'Kosugi Maru', serif;
  height: 100%;
}

.logo {
   color: #578a3d;
   font-size: 1.5rem;
   font-family: 'Dancing Script', cursive;
   text-transform: none;
   font-weight: bold;
}

/* navigation
-------*/

.main-nav {
  display: flex;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-top: 0px;
  margin-bottom: 0px;
  font-size: 1.25rem;
  list-style: none;
  background-color: #6e5064;
  border-radius: 20px;
}

.main-nav li {
    margin-right: 18px;
    margin-left: 18px;
}

nav a {
  color: #ffffff;
  text-decoration: none;
}

nav a:hover {
  color: #dcc8dc;
}

/* page-header
-------*/

.page-header {
    display: flex;
    justify-content: space-between;
}

.wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 4%;
}

/* HOME
-------*/

.home-content p {
    color: #578a3d;
    font-size: 1.4rem;
    margin: 0 0 10px;
    font-weight: bold;
}

.home-content {
    text-align: right;
    margin-top: 5%;
    /*
    background-color: rgba(255,255,255,0.4)*/
}

.page-title {
    color: #578a3d;
    font-size: 4rem;
    font-family: 'Dancing Script', cursive;
    text-transform: none;
    font-weight: bold;
}

/* back-ground
-------*/

.big-bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#home {
    background-image: url(img/knit1_2.jpg);
    min-height: 60vh;
    
    
/*
    background-color: #e6beaa;
    background-blend-mode: hard-light;
-------*/
}

.title {
  font-size: 1.75rem;
  border-left-style: solid;
  border-left-width: 10px;
  padding-left: 15px;
  margin-bottom: 50px;
}

/* koushi
-------*/

.koushi {
    color: #dcc8dc;
    padding: 10px;
    background-size: cover;
}

.koushi h3 {
    border-bottom: solid 3px #dcc8dc;
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 15px
}

.koushi p {
    font-size: 1.25rem;
    font-weight: bold;
    text-align: center;
    margin-top: 30px;
}

.nara {
  border-radius: 20px;
  height: auto;
  width: 600px;
  padding-bottom: 20px;
}

.shikaku {
  width: auto;
  height: auto;
  list-style-type: none;
  padding-bottom: 20px;
}

.shikaku li {
    font-size: 1.25rem;
    font-weight: bold;
    border-radius: 20px;
    width: auto;
}


.career {
  padding: 0px;
  width: auto;
  height: auto;
  list-style-type: none;
  padding-bottom: 20px;
}

.career li{
    font-size: 1.25rem;
    font-weight: bold;
    border-radius: 20px;
    width: auto;
}

.koushi img {
    float: left;
    padding: 5px;
    padding-right: 15px;
    border-radius: 10px;
    -webkit-touch-callout: none!important;
    -webkit-user-select: none!important;
    -moz-touch-callout: none!important;
    -moz-user-select: none!important;
    touch-callout: none!important;
    user-select: none!important;
    pointer-events: none;
}

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}



/* room
-------*/

.room {
  color: #6e5064;
  padding: 10px;
  background-image: url(img/knit22_1.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover; 
  background-color: #dcc8dc;
  background-blend-mode: soft-light;
  font-size: 1rem;
}

.link div {
    text-align: center;
}

.link {
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-decoration: none;
    width: auto;
    height: auto;
    padding: 3px;
    background-color: #dcc8dc;
    color: #000000;
    font-weight: bold;
}

.link:hover {
    text-decoration: none;
    background: #6e5064;
    color: #ffffff;
}

.room1 {
  background-color: #ffffff;
  color: #000000;
  width: 550px;
  padding: 15px;
  margin: 20px;
  box-shadow: 5px 5px 10px #000000;
  display: flex;
  flex: wrap;
  justify-content: space-between;
}

.room2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
}

/* photo
-------*/

.photo {
    color: #dcc8dc;
    padding: 10px;
    background-color: #6e5064;
    background-size: cover;
}

.photo p {
  clear: left;
  font-size: 1.25rem;
  font-weight: bold;
  display: none;
}

.photo a {
  color: #ffffff;
  text-decoration: none;
}

.photo a:hover {
  color: #000000;
}

.photo img {
    background-color: #ffffff;
    box-shadow: 10px 10px 20px #000000;
    max-width: 400px;
    height: auto;
    /*padding: 5px;*/
    margin: 20px;
    -webkit-touch-callout: none!important;
    -webkit-user-select: none!important;
    -moz-touch-callout: none!important;
    -moz-user-select: none!important;
    touch-callout: none!important;
    user-select: none!important;
    pointer-events: none;
}

.knit-photo {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}

.news {
    color: #dcc8dc;
    padding: 10px;
    background-size: cover;
}

.news a {
  color: #ffffff;
  text-decoration: none;
}

.news a:hover {
  color: #000000;
}

.news p{
    font-size: 1.25rem;
    font-weight: bold;
    border-radius: 20px;
    width: auto;
    padding-bottom: 20px
}

.news2 {
    overflow: auto;
    height: auto;
}

.sns {
  color: #6e5064;
  border-color: #6e5064;
  padding: 10px;
  background-image: url(img/knit17.jpg);
  background-repeat: no-repeat;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
 /*
  background-color: #e6beaa;
  background-blend-mode: hard-light;
 */
}

.sns h3 {
  font-size: 3rem;
  font-family: 'Dancing Script', cursive;
  margin-top: 0px;
  color: #578a3d;
/*
  border-top: solid 1px #578a3d;
  border-bottom: solid 1px #578a3d;*/
  background-color: rgba(255,255,255,0.5)
}

#sns .sns-content {
    display: flex;
    justify-content: flex-start;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 4%;
}

/* ボタン全体 */
.flowbtn{
font-family: sans-serif;
border-radius:15px;
position:relative;
display:inline-block;
width:70px;
height:70px;
color:#fff!important;
transition:.5s;
text-decoration:none;
box-shadow:0 1px 2px #999;
}

/* Instagram紫グラデ背景 */
.insta_btn1{
background:linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
background:linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
overflow:hidden;
}

/* Instagramオレンジグラデ背景 */
.insta_btn1:before{
content: '';
position:absolute;
top:33px;
left:-40px;
width:100px;
height:60px;
background:radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
background:radial-gradient(#ffdb2c 5%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
}

/* ボタン内テキスト調整 */
.flowbtn div{
font-size: 25px;	
letter-spacing: 0;
position: relative;
bottom: -10px;
text-align: center;
}

/* ボタンマウスホバー時 */
.flowbtn:hover{
   transform:translateY(-5px);
   transform:translateY(-5px);
   transform:translateY(-5px);
   text-decoration:none;
}

.snsbtn {
    list-style: none;
    margin-left: 5vw;
}

footer {
  font-size: 1.5rem;
  text-align: center;
  background-color: #dcc8dc;
  color: #578a3d;
  font-family: 'Dancing Script', cursive;
  font-weight: bold;
}


/* モバイル版 */
@media (max-width: 600px) {

    
    .page-title {
        font-size: 9vw;;
    }
    .logo {
        display: none;
    }
    
    .main-nav {
        font-size: 3vw;
        margin-top: 5px;
        padding: 5px;
    }
    
    .main-nav li {
        margin: 0 10px;
    }
    
    .home-content {
        margin-top: 0px;
    }
    
    .home-content p {
        font-size: 3.5vw;;
        margin: 10px 0 0px;
    }
    
    .page-header {
        flex-direction: column;
        align-items: center;
        /*position: sticky!important;
        position: -webkit-sticky!important;*/
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
    }
    
    #home {
    min-height: 40vh;
    padding-top: 10vw;
    }
    
    .koushi {
    padding-top: 7.5vw;
    }
    .room {
    padding-top: 7.5vw;
    }
    .photo {
    padding-top: 7.5vw;
    }
    .news {
    padding-top: 7.5vw;
    }
    .sns {
    padding-top: 7.5vw;
    }
    
    .koushi img {
        width: 30vw;
        height: auto;
    }
    .nara {
        width: 100%;
        height: auto;
    }
    .nara p {
        font-size: 3.5vw;
        padding-bottom: 20px
    }
    
    .title {
        font-size: 1.5rem;
        margin-bottom: 20px;
        border-left-width: 5px;

    }
    
    .koushi h3 {
        font-size: 1.2rem;
        margin: 0;
    }
    /* 
    .shikaku {
        font-size: 0.9rem;
        width: 350px;
        height: auto;
        padding: ;
        padding-bottom: 20px
    }
    
    .career {
        font-size: 0.9rem;
        width: 550px;
        padding: 0;
    }
    */
    
    .shikaku {
        width: 100%;
    }
    .career {
        width: 100%;
    }
    
    .shikaku li {
        font-size: 3.5vw;
        padding-bottom: 10px;
        padding-top: 10px;
    }
    .career li {
        font-size: 3vw;
        padding-bottom: 10px;
        padding-top: 10px;
    }
    
    .room {
        font-size: 2.5vw;
    }
    .room2 {
        margin-bottom: 20px;
    }
    
    .link {
        font-size: 2.5vw;
    }
    .room1 {
        padding:2vw;
        margin: 5px;
    }
    
    .photo p {
        font-size: 3.5vw;
        display: contents;
    }
    
    .photo img {
        width: 70vw;
        height: auto;
        margin-right: auto;
        margin-left: auto;    box-shadow: 10px 10px 20px #000000;
    }
    
    .knit-photo {
        overflow: auto;
        height: 80vh;
        width: 85vw;
        margin: auto;
        margin-top: 10px;
    }
    
    .news p {
        font-size: 3vw;
        padding-bottom: 10px;
    }
    
    .sns h3 {
        font-size: 7vw;
        margin: 3vw;
    }
    
    footer {
        font-size: 1rem;
    }
    
    .flowbtn {
    
    }
    
   .container2 {
    display: flex;
    flex-wrap: wrap;
}
}