@charset "utf-8";
/* CSS Document */

/* header */
header { position:fixed; top:0; width:100%; margin:0 auto; padding:20px 50px 0; z-index:9999; }
header .logo { width:110px; }
header .logo .v { display:block; }
header .logo .s { display:none; }

/* gnav */
header .nav_box {  }

header.shrink { padding:10px 0 8px; background:#fff url(../img/head_bg1.png) no-repeat center bottom; }
header.shrink .logo { width:139px; }
header.shrink .logo .v { display:none; }
header.shrink .logo .s { display:block; }

header.shrink #gnav ul { max-width:none; }
header.shrink #gnav ul li { display:inline-block; }
header.shrink #gnav ul li a { font-size:15px; }


#mv { position:relative; }
#first_view { position:absolute; z-index:-10; }
#first_view { min-height:750px; }
#first_view .scroll { position:absolute; bottom:270px; left:0; z-index:50; }
#first_view .scroll:before { position:absolute; content:""; bottom:0; left:0; width:0; height:0; border-style:solid; border-width:150px 0 0 2000px; border-color:transparent transparent transparent #1f3331; z-index:1; }
#first_view .scroll:after { position:absolute; content:""; top:0; left:0; width:2000px; height:1000px; background-color:#1f3331;  }
#first_view .scroll p { position:absolute; bottom:40px; left:100px; color:#fff; padding:30px 0; z-index:10; }
#first_view .scroll p:before, #first_view .scroll p:after { position:absolute; content:""; }
#first_view .scroll p:before { left:0; bottom:0; border-left:1px solid #fff; height:100px; }
#first_view .scroll p:after { left:4px; bottom:0; border-right:1px solid #fff; height:15px; transform:rotate(30deg); }
#slide { position:relative; width:100%; max-width:1100px; margin:290px auto 0; z-index:100; }
#slide .lead { font-size:20px; text-align:right; line-height:1.7; letter-spacing:4px; }
#slide ul { max-width:995px; margin:10px 0 0 auto; background-color:#fff; }
#slide ul li img { background-color:#fff; }

/* contents */
#contents { position:relative; z-index:20; background:#1f3331; }

.charm { position:relative; padding-top:160px; }
.charm.bg_gn:before { display:none; }
.charm .conttl1 .en { top:-45px; left:-55px; }
.charm .txt_box { width:550px; margin:0 0 0 auto; }
.charm .txt_box .txt { margin:40px 0 100px; }
.charm .movie_box { position:absolute; bottom:-220px; left:0; z-index:15; width:100%; max-width:550px; }
.charm .movie_box .movie2 { margin-top:130px; }

.bg_sozai { position:relative; height:880px; }
.bg_sozai .img01 { position:absolute; bottom:30px; right:0; z-index:1000; }

.tsumugi { position:relative; height:720px; padding-top:70px; }
.tsumugi .conttl1 { float:left; width:160px; }
.tsumugi .conttl1 .jp { line-height:3; }
.tsumugi .conttl1 .en { left:-20px; bottom:105px; display:inline-block; }
.tsumugi .txt_box { float:right; }
.tsumugi .txt { float:left; margin-top:80px; margin-right:200px; max-width:470px; }
.tsumugi .btn1 { float:right; margin-top:200px; }

#instagram { max-width: 1000px; margin: 0 auto; padding:20% 0 100px; }
#instaList { margin-top: 20px; }
#instaList li { width:23%; }
#instaList li:nth-child(n+5) { margin-top: 20px; }

.hanbaikai { padding: 0; min-height: 280px; }
.hanbaikai .inner { padding: 20% 0 0; }
.hanbaikai .img02 { position:absolute; top:-150px; left:20px; z-index:10; }
.hanbaikai .img03 { position:absolute; top:-280px; right:30px; z-index:10; }
.hanbaikai .img04 { position:absolute; bottom:-50px; right:0; z-index:10; }
.hanbaikai .btn1 { display:block; margin-top:40px; text-align:center; }
.hanbaikai .btn1 a { display:inline-block; max-width:250px; text-align:left; }

.news { padding-top:13%; padding-bottom:150px; background:#fff; }
.news .news_list { max-width:1170px; margin:0 auto; }
.news .news_list li { width:22%; }
.news .news_list li:nth-child(n+2) { margin-left:4%; }
.news .news_list li:nth-child(2) { margin-top:30px; }
.news .news_list li:nth-child(3) { margin-top:60px; }
.news .news_list li:nth-child(4) { margin-top:90px; }
.news .news_list li a { display:block; }
.news .news_list li a:hover .img img { -webkit-transform:scale(1.1); transform:scale(1.1);}
.news .news_list li .img { overflow:hidden; }
.news .news_list li .img img { transition:all .3s; -webkit-transition:all .3s;  }
.news .news_list li .txt .date { display:block; font-size:30px; line-height:1; margin-top:7px; letter-spacing:1px; }
.news .news_list li .txt .ttl { display:block; line-height:1.5; }

.news .newsBtn { margin: 30px auto 0; }

@media screen and (max-width:1200px) {
  #first_view .scroll p { bottom:46px; left:50px; }

  .charm { padding-bottom:350px; }
  .charm .txt_box { margin:0 auto; }
  .charm .movie_box { max-width:560px; width:100%; bottom:-760px; left:50%; transform:translateX(-50%); }
  .bg_sozai .img01 { width:85%; }
  .tsumugi { height: 700px; }
  .tsumugi .inner { max-width:800px; }
  .tsumugi .txt { float:none; margin-top:60px; margin-right:0; }
  .tsumugi .btn1 { float:none; margin-top:40px; }
  #instagram { padding:30% 0 100px;  }
  .hanbaikai { padding:0; min-height:0; }
  .hanbaikai .inner{ padding:30% 0 0; }
  .hanbaikai .img02 { width:30%; top:-30%; left:50px; }
  .hanbaikai .img03 { width:50%; top:-60%; right:50px; }
  .hanbaikai .img04 { right:20px; width:38%; }
  .news { padding-top:10%; padding-bottom:100px; }
  }

@media screen and (max-width:1100px) {
  #slide { padding:0 50px 0 110px; }
  #contents {  margin-top:-5%; }
  .charm .txt_box .txt { margin-bottom:50px; }
  }

/* PC画面サイズ（1001以上のとき）ナビが縦書きになる */
@media screen and (min-width:1001px) {
  header:not(.shrink) #gnav > .nav { display:-webkit-flex; display:flex; min-width:330px; }
  header:not(.shrink) #gnav > .nav > li:not(.gbtn) { -ms-writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; }
  header:not(.shrink) #gnav > .nav > li:nth-child(n+2) { margin-left:8px; }
  header:not(.shrink) #gnav > .nav > li > a { display: inline-block; font-size:16px; }
  header:not(.shrink) #gnav > .nav > li > a::before { top: 0; right: 0; border-bottom: none; border-right: 1px solid #1f3331; }
  header:not(.shrink) #gnav > .nav > li > a:hover::before { width: 0; height: 100%; }

  header.shrink {  }
  header.shrink .nav_box { margin-top:10px; }
  header.shrink #gnav .nav li:nth-child(n+2) { margin-left:20px; }

  #gnav .gbtn > li + li { margin-top:10px; }
  header.shrink #gnav .btn_line { display:none; }

  }

/*gnav段落ち対処*/
@media screen and (max-width: 1200px) and (min-width: 1001px) {
 header.shrink .nav_box { margin-top: -10px; }
 header.shrink #gnav .gbtn {position: absolute; right: 20px; bottom: -5px;}
}
/*----------------------------------------------------
タブレット
-----------------------------------------------------*/
@media screen and (max-width:1000px) {

  header .inner_s { padding:0; }
  header .logo { width:90px; margin-left:20px; }

  #gnav .nav li a { padding-left:30px; }
  #nav-toggle { top:5px; right:30px; }

  header.shrink { background-size:1600px auto; background-position:-200px bottom; }

  header.open { padding:0 !important; }
  header.open .nav_box { position:absolute; top:0; bottom:0; left:0; right:0; }

  /* gnav スクロールしたら表示 */
  #gnav > ul > li > a { padding:13px 13px 13px 30px; }

  #slide { margin-top: 200px; }
  #slide .inner {  padding: 0; }
  #slide .lead { margin-top:20px; }
  #first_view .scroll { bottom:350px; }
  #first_view .scroll p { padding:0 0 40px; }
  #first_view .scroll p:after { bottom:20px; }
  #first_view .scroll p:before { height:80px; bottom:20px; }
  #contents { margin-top:-160px; }

  .charm { padding-top:0; margin-top: 250px; }

  .hanbaikai .inner { padding-top: 35%; }
  .hanbaikai .img02 { top:-25%; }
  .hanbaikai .img03 { top:-50%; }

  .news .newsBtn .btn1 { margin: 0 auto; }

  }

@media screen and (max-width:900px) {
.bg_sozai .img01 { position:static; margin:0 0 0 auto; padding-top:60%; }
.hanbaikai .img04 { display:none; }
.hanbaikai .conbox { width:100%; }
}

@media screen and (max-width:750px) {
.tsumugi { height:auto; padding-bottom:15%; }
.tsumugi .conttl1 { float:none; margin:0 auto; width: 100%; text-align: center; }

.tsumugi .conttl1 .jp { -webkit-writing-mode:horizontal-tb; -ms-writing-mode:lr-tb; writing-mode:horizontal-tb; }
.tsumugi .txt_box { float:none; }
.tsumugi .txt { margin-top:30px; }

.hanbaikai .inner { padding-top: 40%; }
.hanbaikai .img02 { top:-10%; }
.hanbaikai .img03 { top:-25%; }

.news .news_list { justify-content:space-between; -webkit-justify-content:space-between; margin-top:20px; }
.news .news_list li { width:47%; margin-left:0 !important; }
.news .news_list li:nth-child(3) { margin-top:40px; }
.news .news_list li:nth-child(4) { margin-top:60px; }
}

@media screen and (max-width:700px) {
.bg_sozai { height:auto; }
.charm .txt_box { width:100%; }
.charm .movie_box { padding:0 30px; bottom:-710px; }
.charm .movie_box > div { width:45%; }
.charm .conttl1 .en { left:-25px; }
.charm .btn_list li { width:100%; margin:0 auto; }
.charm .btn_list li:nth-child(n+2) { margin-top:15px; }
}

/*----------------------------------------------------
スマホ
-----------------------------------------------------*/
@media screen and (max-width:599px) {
header { padding:10px 20px 0; }
header .logo { width:60px; }
#nav-toggle { top:0; right:20px; }

header.shrink { background-size:900px auto; background-position:left bottom; height:70px; }
header.shrink .logo { width:100px; }
header.open #nav-toggle { top:3px; }
#gnav ul li a { padding-left:20px; }

#slide { margin-top: 100px; padding:0 20px 0 0; }
#slide ul { margin-left:20px; }
#slide .lead { font-size:16px; margin-top:0; }
#first_view .scroll { bottom:400px; }
#first_view .scroll p { display: none; }

#contents { margin-top:-100px; }
.charm { margin-top: 220px; }
.charm .movie_box { top:110%; bottom:inherit; }

.tsumugi { padding-bottom:25%; }
.tsumugi .conttl1 .jp { line-height: 2.2; font-size: 16px; }
.tsumugi .conttl1 .en { left: 10px; bottom: inherit; top: -30px; }
.bg_sozai { padding-bottom:15%; }

#instagram { padding: 5% 0 70px; }
#instagram .conttl3 .en { font-size: 40px; }
#instagram .conttl3 .jp { display: inline-block; font-size: 15px; }
#instaList { margin-top: 10px; }
#instaList li { width:31.5%; }
#instaList li:nth-child(n+4) { margin-top: 15px !important; }
#instaList li:nth-child(n+7) { display: none; }

.hanbaikai { padding:0; }
.hanbaikai .inner{ padding-top: 35%; }
.hanbaikai .img02 { top:-10vw; left:30px; }
.hanbaikai .img03 { top:-15vw; right:0; }
.hanbaikai .btn1 { max-width:none; }
.hanbaikai .btn1 a { min-width:inherit; }

.news .conttl3 .jp { display:inline-block; }

}
@media screen and (max-width:450px) {
#first_view .scroll:before { border-width:145px 0 0 1300px }
#first_view .scroll p { bottom:40px; }
}

@media screen and (max-width:400px) {
#slide .lead { font-size:17px; }
.charm .movie_box { bottom:-500px; }
.bg_sozai .img01 { padding-top:47%;  }
#instagram { padding-top: 0; }
}