/* ---------------------------------------------- /*
*   base css
/* ---------------------------------------------- */
html{
  font-size      : 0.9rem;
}
body{
  line-height    : 2;
  letter-spacing : 0.1rem;
}
main{
  overflow    : hidden;
}
p{
  color       : #999;
  margin      : 0 0 10px;
}
a{
  color       : #999;
  transition  : 0.4s all;
}
a:hover{
  background-color  : rgba(204,204,153,0.7);
  color             : #F8F8FF;  
  transition        : 0.4s all;
  border-radius     : 5px;
}
h1 a{
  font-family : 'sortilege_myfont','irohamaru-mikami-Regular','Sora','Kosugi Maru',sans-serif;
  font-weight : 700;
  color       : #999;
}
h3{
  font-size: 1.4rem;
  font-weight: 700;
  font-family: 'sortilege_myfont','irohamaru-mikami-Regular','Sora','Kosugi Maru',sans-serif;
}
@font-face{
  font-family: "sortilege_myfont";
  src: url("../myfont/irohamaru-mikami_myfont.woff") format("woff");
}
*{
  font-family: 'sortilege_myfont','irohamaru-mikami-Regular','Sora','Kosugi Maru',sans-serif;
}

/* 各セクションの上下余白 */
.module {
  padding    : 120px 0 80px;
}

/* floatの解除 */
.clearfix:after {
  content    : "";
  display    :block;
  clear      :both;
}

/* ---------------------------------------------- /*
*   各セクションタイトルの装飾
/* ---------------------------------------------- */

.module_header {
  margin     : 0 0 50px;
  text-align : center;
}
.module_title {
  position     : relative;
  font-family  : 'sortilege_myfont','irohamaru-mikami-Regular','Sora','Kosugi Maru',sans-serif;
  margin-bottom: 50px;
  color        : #999;
}
.module_title span {
  position   : absolute;
  font-size  : 50px;
  font-family: 'sortilege_myfont','irohamaru-mikami-Regular','Sora','Kosugi Maru',sans-serif;
  font-weight: 700;
  top        : -25px;
  left       : 0;
  right      : 0;
  opacity    : 0.1;
}
.module_line {
  background: rgba(188, 143, 143, 0.3);
  width     : 120px;
  height    : 1px;
  margin    : 0px auto;
}
.module_text {
  margin-top : 20px;
}

/* ---------------------------------------------- /*
*   1. トップページビジュアル
/* ---------------------------------------------- */
#top {
  position         : relative;
  height           :100vh;
  background-image : linear-gradient(to top, rgba(248,248,255,1) 0%, rgba(248,248,255,0.5) 100%) ,url("/images/top_image.jpg");
  background-size  : cover;
  background-position: center;
  display          : flex;
  justify-content  : center;
  align-items      : center;
}

.top-item {
  text-align : center;
  padding    : 60px 30px;
  max-width  : 780px;
  width      : 100%;
  z-index    : 1;
}
.top-item img{
  max-width  : 180px;
  width      : 100%;
}
/* 「ソルティレイジュ」の文字を装飾 */
.top-item_main {
  color         : #666;
  font-family   : 'sortilege_myfont','irohamaru-mikami-Regular','Kosugi Maru',sans-serif;
  font-size     : 80px;
  letter-spacing: 5px;  
}

/* 「 Sortilege 」の文字を装飾 */
.top-item_sub {
  color         : #666;
  font-size     : 40px;
  text-transform: none;
  margin        : 15px 0;
  font-weight   : 200;
}
/* トップの文字の下にライン */
.top-item_line {
  background: #999;
  width     : 120px;
  height    : 1px;
  margin    : 10px auto;
}

/* ---------------------------------------------- /*
	* 2. ナビゲーションバー
/* ---------------------------------------------- */
.navber {
  color      : #999;
  font-family: 'sortilege_myfont','irohamaru-mikami-Regular','Sora','Kosugi Maru',sans-serif;
}
.navber-brand {
  color      : #999;
  font-family: 'sortilege_myfont','irohamaru-mikami-Regular','Sora','Kosugi Maru',sans-serif;
}
.nav-title {
  display: inline;
  margin: 0;
  padding: 20px 20px;
  color      : #888;
}
.nav-title:hover {
  color: #F8F8FF;
}
.nav-pills .nav-link.active{
  background-color: rgba(204,204,153,0.7);
}

/* ---------------------------------------------- /*
  * 3. Origin   &   Introduction
/* ---------------------------------------------- */

/* Origin部分の画像を設定 */
.origin_img {
  min-height         : 300px;
  background-image   : url(/images/origin_image.jpg);
  background-size    : cover;
  background-position: center;
  border-radius      : 5px;
}
/* Origin & Introduction の文章を設定 */
.origin_text , .int_text {
  background-color : rgba(153,153,153,0.1);
  padding          : 80px 30px 70px 30px;
  text-align       : center;
  line-height      : 30px;
  border-radius    : 30px;
}
/* Origin & Introduction のタイトルを設定 */
.origin_title , .int_title {
  margin-top       : 70px;
  margin-bottom    : 40px;
  font-size        : 25px;
  color            : #888; 
}
/* Introdution部分の画像を設定 */
.int_img {
  min-height         : 300px;
  background-image   : url(/images/int_image.jpg);
  background-size    : cover;
  background-position: center;
  border-radius      : 30px;
}
#origin , #introduction {
  margin-top         : 40px;
}

/* ---------------------------------------------- /*
  * 4. Products
/* ---------------------------------------------- */

/*-- 商品ランダム風表示 --*/
/*--
.item_listbox {
  justify-content: center;
  width: 90%;
  margin: 100px auto;
}
.item_box1 {
  align-items: center;
  margin: 100px 0 30px 100px;
}
.item_box2 {
  align-items: center;
  margin: 0;
  display: flex;
}
.item_box3 {
  align-items: center;
  margin: 10px 0 30px 200px;
}
.item_box4 {
  display: flex;
  align-items: center;
  margin: 50px 0 30px 0;
}
.item_box_content2 {
  margin-top: 100px;
}
.item_box_content3 {
  margin-top: 80px;
}
.item_box_content4 {
  margin-left: 150px;
}
.item_image1 {
  width: 60%;
  height: auto;
  border-radius: 2%;
}
.item_image2 {
  width: 70%;
  height: auto;
  border-radius: 2%;
}
.item_image3 {
  width: 80%;
  height: auto;
  border-radius: 2%;
  float:right;
}
.item_image4 {
  width: 35%;
  height: auto;
  border-radius: 2%;
  float: left;
  margin-right: 10px;
}
.item_image5 {
  width: 60%;
  height: auto;
  border-radius: 2%;
}
.item_image6 {
  width: 80%;
  height: auto;
  border-radius: 2%;
}
.item_desc1 {
  margin: 10px 20px 50px 20px;
  float: left;
}
.item_desc2 {
  margin-top: 80px;
  float:left;
}
.item_desc3 {
  float: right;
}
.item_desc6 {
  float:left;
}
.item_num , .item_num2{
  font-size: 15px;
  letter-spacing: 8px;
  color:#888;
}
.item_num span:after {
  content: "";
  height : 2px;
  width: 30px;
  background : #888;
  display: block;
  margin : 0 0 20px -2px;
}
.item_num2 span:after {
  content: "";
  height : 2px;
  width: 30px;
  background : #888;
  display: block;
  margin : 0 0 20px 287px;
}
.item_txt1 , .item_txt2 , .item_txt6 {
  font-size    : 15px;
  color        :#888;
  margin       : 0 0 0 -3px;
  writing-mode : vertical-rl;
  -webkit-writing-mode: vertical-rl;
  -moz-writing-mode: vertical-rl;
  -o-writing-mode: vertical-rl;
}
.item_txt3 {
  font-size: 15px;
  color:#888;
}
.item_txt4 {
  font-size    : 13px;
  color        :#888;
  margin       : 0 0 0 -3px;
  writing-mode : vertical-rl;
  -webkit-writing-mode: vertical-rl;
  -moz-writing-mode: vertical-rl;
  -o-writing-mode: vertical-rl;
}
.item_txt5 {
  font-size: 15px;
  color:#888;
}
/*-- 商品ランダム風表示ここまで--*/

/*--  商品４つ横並び表示 --*/

.items {
  margin-top         : 80px;
}
.item_card {
  margin-bottom      : 50px;
}
.item_card img {
  width              : 100%;
  height             : 100%;
  object-fit         : cover;
  border-radius      : 10px;
}
.item_inner {
  text-align         : center;
  width              : 100%;
  margin-top         : 5px;
  padding-top        : 10px;
  background-color   : rgba(153, 153, 153, 0.048);
  border-radius      : 10px;
}
.item_title {
  color              : #777;
  font-size          : 18px;
  padding-top        : 1px;
  padding-bottom     : 10px;
}

/*--  商品４つ横並び表示ここまで --*/

.andmore {
  text-align         : center;
  font-size          : 16px;
}

/* ---------------------------------------------- /*
  * 5. Links
/* ---------------------------------------------- */
.sns {
  margin-top         :100px;
}
.instagram {
  text-align         : center;
}
/* SNSボタンのスマホサイズレスポンシブ */
@media(max-width: 1000px) {
  .instagram {
    margin-bottom    : 100px; 
    text-align       : center;
  }
}
.insta i {
  width              : 50px;
  height             : 50px;
  font-size          : 50px;
  color              : #F8F8FF;
  text-align         : center;
  background         : linear-gradient(135deg, #427eff 0%, #f13f79 70%) ;
  border-radius      : 13px;
}
.facebook {
  margin-bottom      : 100px;
  text-align         : center;
}
.fb i {
  width              : 50px;
  height             : 50px;
  font-size          : 50px;
  color              : #315096;
}
.tw i {
  width              : 50px;
  height             : 50px;
  font-size          : 50px;
  color              : #1DA1F2;
}
.minne img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
}
.creema img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
}

/* ---------------------------------------------- /*
  * 6. Infomation
/* ---------------------------------------------- */



/* ---------------------------------------------- /*
  * 7. Contact
/* ---------------------------------------------- */

#contact{
  max-width: 650px;
  margin: 0 auto;
}
.form-control {
  background-color: rgba(153,153,153,0.1);
}
.form-control:hover {
  background-color: #eee;
}
.btn-custom-2 {
  background   : rgba(204,204,153,0.7);
  border-radius: 3px;
  color        : #fff;
}

/* ---------------------------------------------- /*
  * 8. Footer
/* ---------------------------------------------- */
footer {
  padding   : 20px 0;
  background: #999;
}
footer p{
  color: #fff;
}