@charset "UTF-8";

/* 共通部分
------------------------------- */
* {
  box-sizing: border-box;
}

html {
    front-size: 100%;
}
body {
    font-family:  'Philosppher', serif;
      line-height: 1.7;
        color: #432;
}
a{
  text-decoration: none;
}
img {
  max-width: 100%;
}
.wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 4%;
}

/* 大きな背景画像 */
.big-bg {
     background-size: cover;
     background-position: center top;
     background-repeat: no-repeat;
}


/* 見出し */
#home .page-title{
  font-size: 2.5rem;
  text-transform: uppercase;
  font-weight: bold;
  color: #fff;
  text-shadow:1px 0 5px  #b1921b;
}
.page-title {
           font-family:  'Philosppher', serif;
           text-transform: uppercase;
           font-weight: bold;
}


}
.sub-title {
  font-size: 1.375rem;
  padding: 0 8px 8px;
  border-bottom: 2px #432 solid;
  font-weight: normal;
}

 /* ボタン */

.btn-solid-gold{
  text-align: center;
  width: 200px;
  text-transform: none;
  padding: 7px;
}
 a.btn-solid-gold {
   font-size: 2.5rem;
   font-family:  'Philosppher', serif;
   color: #b1921b;
   border-right: 4px solid #cea82c;
   border-bottom: 6px solid #987c1e;
   border-left: 4px solid #ffed8b;
   border-radius: 0;
   background: -webkit-gradient(linear, right top, left top, from(#ffd75b), color-stop(30%, #fff5a0), color-stop(40%, #fffabe), color-stop(50%, #ffffdb), color-stop(70%, #fff5a0), to(#fdd456));
   background: -webkit-linear-gradient(right, #ffd75b 0%, #fff5a0 30%, #fffabe 40%, #ffffdb 50%, #fff5a0 70%, #fdd456 100%);
   background: linear-gradient(-90deg, #ffd75b 0%, #fff5a0 30%, #fffabe 40%, #ffffdb 50%, #fff5a0 70%, #fdd456 100%);
   text-shadow: -1px -1px 1px #ffffd9;
 }

 a.btn-solid-gold:hover {

   color: #b1921b;
   border-right: 6px solid #cea82c;
   border-bottom: 8px solid #987c1e;
   border-left: 6px solid #ffed8b;
 }


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

 header {
   height: 90px;
   width: 100%;
   padding: 0px 15px;
   background-color: rgba(255,255,255,.5);
   position: fixed;
   top: 0;
   z-index: 10;
   display: flex;
 }

 .logo {
   width: 250px;
   margin-top: 0px;
 }

 nav {
   margin: 50px 0 0 auto;
 }

 .pc ul {
   display: flex;
   list-style: none;
   padding: 0;
   margin: 0;
 }

 .pc a {
   color: #432;
   text-decoration: none;
   display: block;
   line-height: 40px;
   padding: 0 20px;
 }

 .sm {
   display: none;
 }


 /**********************************　
 以下、ハンバーガーメニューの設定　
 ************************************/

 @media (max-width: 600px) {

   .pc {
     display: none;
   }

   #hamburger {
     background-color: transparent;
     position: relative;
     cursor: pointer;
     margin: 0 0 0 auto;
     height: 60px;
     width: 60px;
     margin-top: 15px;
   }

   .icon span {
     position: absolute;
     left: 15px;
     width: 40px;
     height: 4px;
     background-color: black;
     border-radius: 8px;
     transition: ease 0.75s;
   }

   .icon span:nth-of-type(1) {
     top: 16px;
   }
   .icon span:nth-of-type(2) {
     top: 28px;
   }
   .icon span:nth-of-type(3) {
     bottom: 16px;
   }

   .close span:nth-of-type(1) {
     transform: rotate(45deg);
     top: 28px;
   }

   .close span:nth-of-type(2) {
     opacity: 0;
   }

   .close span:nth-of-type(3) {
       transform: rotate(-45deg);
       top: 28px;
   }

   .sm {
       top: 40px;
       left: 0px;
       position: absolute;
       z-index: 10;
       width: 100%;
       background-color: #444;
   }

   .sm ul {
     flex-direction: column;
     list-style: none;
     line-height: 40px;
     text-align: center;
     border-top: solid 0.5px rgba(255,255,255,.5);

   }

   .sm li{
     border-top: solid 0.5px rgba(255,255,255,.5);

   }

   .sm a {
     text-align: center;
      text-decoration: none;
      color: #fff;
   }
 }


/*home
------------------------------------*/

#home {
     background-image: url(../images/IMG_87002.jpg);
     min-height: 100vh;
}
#home .page-title{
   text-transform: none;
   text-align: center;
}
#home p{
      text-transform: none;
      text-align: center;


}


.news{
    /*background: #1d1d1d;*/
    display: flex;
    align-items: center;
    justify-content: center;
}

.news-btn{
    display: inline-block;
    border: 1px solid black;
    padding: 18px 80px 20px;
    text-transform: uppercase;
    color:  black;
    text-decoration: none;

    font-weight: 500;
    font-style: normal;
    font-size: 0.65rem;
    letter-spacing: 0.3em;
    border-radius: 0;
    font-family: "Helvetica Neue",Helvetica,Arial,Sana;

    transition: all 0.7s ease-out;

    margin: 0.7rem;
}

.in{
    background: linear-gradient(270deg, rgba(137,247,254,0.8), rgba(102,166,255,0.8), rgba(0,0,0,0), rgba(0,0,0,0));
    background-size: 300% 300%;
    background-position: 1% 50%;
}
.up{
    background: linear-gradient(270deg, rgba(250,112,154,0.8), rgba(254,225,64,0.8), rgba(0,0,0,0), rgba(0,0,0,0));
    background-size: 300% 300%;
    background-position: 1% 50%;
}

.news-btn:hover{
    color: white;
    border: 1px solid rgba(193,164,112,0);
    background-position: 99% 50%;
}




.bg{
position: relative;
	width: 100%;
  height: 300px;
}
.pv{
	position: absolute;
	top: 30px;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
}
.pv video{
	position: absolute;
	top: 50%;
	left: 50%;
	object-fit: cover;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
}





/*wp-ワードプレス埋め込み*/

.topics{
padding: 20px;
color: #432;
text-decoration: none;
}

.topics ul{
  list-style: none;
}

.news-title{
  text-align: center;
  border-bottom: 1px solid #432;
  font-size: 1.5rem;
}

.title{
  border-bottom: 1px solid #432;

}

.titleWrap a {
  color: #432;
  text-decoration: none;
}

.category{
font-size: 1.25rem;
color: #432;
text-decoration: none;
}

.date {
  margin-bottom: : 15px;
}

a.btn_news {
  display: flex;
      justify-content: space-between;
      align-items: center;
  	text-align: center;
  	text-decoration: none;
  	width: 220px;
  	margin: auto;
  	padding: 1rem 4rem;
  	font-weight: bold;
  	background: #eee;
  	color: #27acd9;
  	border-radius: 100vh;
  	position: relative;
  	transition: 0.5s;
  }
  a.btn_news::before {
  	content: '';
  	position: absolute;
  	top: calc(50% - 2px);
  	right: 1em;
  	transform: translateY(calc(-50% - 2px)) rotate(45deg);
  	width: 10px;
  	height: 1px;
  	background: #27acd9;
  }
  a.btn_news::after {
  	content: '';
  	position: absolute;
  	top: 50%;
  	right: 1em;
  	transform: translateY(-50%);
  	width: 50px;
  	height: 1px;
  	background-color: #27acd9;
  }
  a.btn_13:hover {
  	background: #d4eef7;
  	color: #27acd9;
  }

/* snsリンク
-------------------------------*/
.flowbtn18{
font-family:'Georgia',sans-serif;
display:inline-block;
position:relative;
width:90%;
height:50px;
font-size:23px;
border-radius:5px;
background-color:#444;
color:#fff!important;
text-decoration:none;
}

.snsbtniti2 li{
list-style: none;
}

.flowbtn18 i{
position:relative;
bottom:5px;
}
.flowbtn18:hover{
text-decoration:none;
}
.flowbtn18 div{
font-size:15px;
position:relative;
bottom:22px;
}
/* Twitterマウスホバー時 */
.flowbtn18.fl_tw2:hover{
background:linear-gradient(135deg, #13f1fc 0%,#0470dc 100%);
}
/* Instagramマウスホバー時 */
.flowbtn18.insta_btn2:hover{
background:-webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
background:linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
}
/* Facebookマウスホバー時 */
.flowbtn18.fl_fb2:hover{
background:-webkit-linear-gradient(top, #5c80c6 0%, #34528c 74%);
background:linear-gradient(to bottom, #5c80c6 0%, #34528c 74%);
}
/* Feedlyマウスホバー時 */
.flowbtn18.fl_fd2:hover{
background:linear-gradient(135deg, #b1ea4d 0%,#459522 100%);
font-size:28px;
}
/* Pocketマウスホバー時 */
.flowbtn18.fl_pk2:hover{
background:linear-gradient(135deg, #f36265 0%,#dd4f68 100%);
}
.flowbtn18.fl_hb2{
font-size:25px;
}
/* はてブマウスホバー時 */
.flowbtn18.fl_hb2:hover{
background:-webkit-linear-gradient(top, #1fbccd 0%, #1c91d4 84%);
background:linear-gradient(to bottom, #1fbccd 0%, #1c91d4 84%);
}
/* YouTubeマウスホバー時 */
.flowbtn18.fl_yu2:hover{
background:linear-gradient(135deg, #f5515f 0%,#c9293c 100%);
}
/* LINEマウスホバー時 */
.flowbtn18.fl_li2:hover{
background: linear-gradient(135deg, #3a9278 0%,#00c300 100%);
}
/* お問い合わせマウスホバー時 */
.flowbtn18.fl_ma2:hover{
background:linear-gradient(135deg, #fad961 0%,#f76b1c 100%);
}
/* プロフィールマウスホバー時 */
.flowbtn18.fl_pf2:hover{
background:linear-gradient(135deg, #fad961 0%,#f8a33f 100%);
}
/* ulタグの内側余白を０にする */
ul.snsbtniti2{
padding:0!important;
}
/* アイコンボタンの位置調整 */
.snsbtniti2{
display:flex;
flex-flow:row wrap;
}
/* アイコンボタン同士の余白調整 */
.snsbtniti2 li{
flex:0 0 48%;
text-align:center!important;
}



/* company
-------------------------------*/
/* kv */
.kv{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.kv .main-copy{
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  letter-spacing: .2em;
}

.kv .sub-copy{
  color: #fff;
  font-size: 20px;
  text-align: center;
}

/* video */
.video{
  width: 100%;
  height: 100vh;
  background: url(../img/kv-alternative.jpg) no-repeat center/cover;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: -1;
}

.video::after{
  content: '';
  width: 100%;
  height: 100%;
  background-color: #10394b;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  opacity: .3;
}

.video video{
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

@media screen and (min-width: 768px) {
  /* kv */
  .kv{
    min-width: 960px;
  }

  .kv .main-copy{
    font-size: 60px;
  }

  .kv .sub-copy{
    font-size: 30px;
  }

  /* video */
  .video{
    min-width: 960px;
  }
}



.company-title {
 font-family: 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', 'Hiragino Mincho ProN', 'HGS明朝E', 'ＭＳ Ｐ明朝', serif;
  position: relative;
  padding: 1.5rem 2rem;
  -webkit-box-shadow: 0 2px 14px rgba(0, 0, 0, .1);
  box-shadow: 0 2px 14px rgba(0, 0, 0, .1);
  margin-top: 20px;
}

.company-title:before,
.company-title:after {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  content: '';
  background-image: -webkit-linear-gradient(315deg, #704308 0%, #ffce08 40%, #e1ce08 60%, #704308 100%);
  background-image: linear-gradient(135deg, #704308 0%, #ffce08 40%, #e1ce08 60%, #704308 100%);
}

.company-title:before {
  top: 0;
}
.company-title:after {
  bottom: 0;
}

#company p {
font-size: 16px;
font-weight: bold;
text-align: center;
margin: 30px auto 40px;
}

table {
margin: 20px auto;
}
.tbl-r02 th {
background: #432;
border: solid 1px #ccc;
color: #fff;
padding: 10px;
}
.tbl-r02 td {
　border: solid 1px #ccc;
padding: 10px;
}


/***ステップバーデザイン5***/
.step-wrap5 {
 counter-reset: count;
 margin: 2em 0;
 position: relative;
}
.step-content5 {
 padding: 4em 0 2em;
 margin: 0;
 position: relative;
 text-align: center;
}
.step-content5::before {
 content: "";
 display: block;
 width: 55px;
 height: 55px;
 background: #432;
 border-radius: 50%;
 position: absolute;
 top: 0;
 left: calc(50% - 27.5px);
}
.step-label5 {
 color: #fff;
 font-weight: bold;
 font-size: 12px;
 position: absolute;
 top: 6px;
 left: calc(50% - 15px);
}
.step-label5::after {
 counter-increment: count;
 content: counter(count);
 position: absolute;
 font-size: 30px;
 top: 8px;
 left: 7px;
}
.step-title5 {
 font-weight: bold;
 font-size: 120%;
}
.step-title5::first-line {
 text-align: center;
}
.step-body5 {
 margin-top: 1em;
 padding: 0 0 1em;
 border-bottom: dotted 2px #ddd;
}
.step-image{
  width: 400px;
  margin: 0 auto;
}

/***ステップバーデザイン5***/


/* farm
-------------------------------*/
.farm-title {
 font-family: 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', 'Hiragino Mincho ProN', 'HGS明朝E', 'ＭＳ Ｐ明朝', serif;
  position: relative;
  padding: 1.5rem 2rem;
  -webkit-box-shadow: 0 2px 14px rgba(0, 0, 0, .1);
  box-shadow: 0 2px 14px rgba(0, 0, 0, .1);
  margin-top: 20px;
}

.farm-title:before,
.farm-title:after {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  content: '';
  background-image: -webkit-linear-gradient(315deg, #704308 0%, #ffce08 40%, #e1ce08 60%, #704308 100%);
  background-image: linear-gradient(135deg, #704308 0%, #ffce08 40%, #e1ce08 60%, #704308 100%);
}

.farm-title:before {
  top: 0;
}
.farm-title:after {
  bottom: 0;
}

/* 社長紹介 */
.container wrapper{
    width:100%;

}
.container wrapper  {
    max-width:1000px;
    margin:0px auto;
    padding:80px 0px;
}
/* content */
@media (min-width: 992px) {
    .wrapper .container .content {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
.wrapper .content-item {
    width:100%;
}
@media (min-width: 992px) {
    .wrapper .content-item {
        width:50%;
    }
}
.wrapper .image{
    display:block;
    max-width:100%;
    margin:0px auto;
}
.wrapper .text{
    padding:20px;
}
.wrapper .text .heading{
    margin:0px 0px 40px 0px;
    font-size: 24px;
    font-weight: normal;
    text-align: center;
}
.president-image{
  margin-top: 30px;
}

.img01{
  width: 200px;
}


/*faq*/
#faq{
  background-image: url(../images/faq.jpg);
height: 400px;
}

.cp_qa *, .cp_qa *:after, .cp_qa *:before {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_qa {
	overflow-x: hidden;
	margin: 0 auto;
	color: #333333;
}
.cp_qa .cp_actab {
	padding: 20px 0;
	border-bottom: 1px dotted #cccccc;
}
.cp_qa label {
	font-size: 1.2em;
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	padding: 10px 10px 0 48px;
	cursor: pointer;
}
.cp_qa .cp_actab-content {
	font-size: 1em;
	position: relative;
	overflow: hidden;
	height: 0;
	margin: 0 40px;
	padding: 0 14px;
	-webkit-transition: 0.4s ease;
	        transition: 0.4s ease;
	opacity: 0;
}
.cp_qa .cp_actab input[type=checkbox]:checked ~ .cp_actab-content {
	height: auto;
	padding: 14px;
	opacity: 1;
}
.cp_qa .cp_plus {
	font-size: 2.4em;
	line-height: 100%;
	position: absolute;
	z-index: 5;
	margin: 3px 0 0 10px;
	-webkit-transition: 0.2s ease;
	        transition: 0.2s ease;
}
.cp_qa .cp_actab input[type=checkbox]:checked ~ .cp_plus {
	-webkit-transform: rotate(45deg);
	        transform: rotate(45deg);
}
.cp_qa .cp_actab input[type=checkbox] {
  display: none;
}

/*pearl
-----------------------------------*/
#pearl{
  background-image: url(../images/1234.jpg);
  height: 400px;
  margin-bottom: 40px;
}

.pearl-title {
  font-size: 30px;
  font-size: 3rem;
  position: relative;
  padding: 1.5rem;
  text-align: center;
}

.pearl-title span {
  font-size: 18px;
  font-size: 1.8rem;
  display: block;
}

.pearl-title:before {
  position: absolute;
  bottom: -10px;
  left: calc(50% - 30px);
  width:60px;
  height: 5px;
  content: "";
  border-radius: 3px;
  background: #fa4141;
}

.hoge{
  text-align: center;
}

/*color-stone
-----------------------------------*/
#color-stone{
  background-image: url(../images/IMG_0101.jpg);
  height: 400px;
  margin-bottom: 40px;
}


/*product
-----------------------------------*/
#product{
  background-image: url(../images/1234.jpg);
  height: 400px;
  margin-bottom: 40px;
}

.new-arrival{
  text-align: center;
  width: 315px;
  margin: 6% auto;
}

.new-arrival a{
  text-decoration: none;
  color: #432;
}
  .grid {
    display: grid;
    gap: 26px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    margin-top: 6%;
    margin-bottom: 50px;
    text-align: center;
  }

  .item a{
    text-decoration: none;
    color: #432;
  }

  .product-title {
  	position: relative;
  	padding-top: 30px;
  	font-size: 26px;
  	border-bottom: 1px solid rgba(5,62,98,1);
  }

  .product-title span {
  	position: relative;
  	z-index: 2;
  }

  .product-title::before {
  	content: attr(data-en);
  	position: absolute;
  	top: 0px;
  	left: 0;
  	color: rgba(5,62,98,0.2);
  	font-size: 32px;
  	text-transform: uppercase;
  	z-index: 1;
  }



/*CONTACT
-----------------------------------*/
#contact{
  background-image: url(../images/1234.jpg);
  height: 400px;;
  margin-bottom: 40px;
}

/* 店舗情報・地図 */
#location {
    padding: 4% 0;
}
#location .wrapper {
    display: flex;
    justify-content: space-between;
}
.location-info {
    width: 22%;
}
.location-info p {
    padding: 12px 10px;
}
.location-map {
    width: 74%;
}

/* ifram */
iframe{
  width: 100%;
}

/* SNS */
#sns {
    background: #FAF7F0;
    padding: 4% 0;
}
#sns .wrapper {
    display: flex;
    justify-content: space-between;
}
#sns .sub-title {
    margin-bottom: 50px;
}
.sns-box {
    width: 50%;
}


/*　スタイルメモリー
-------------------------------*/
#style-memory{
  background-image: url(../images/IMG_87181.jpg);
  height: 400px;
  margin-bottom: 40px;
}



/*　フッター
-------------------------------*/

footer {
     background: black;
     text-align: center;
     padding: 26px 0;
}
footer p {
     color: #fff;
     front-size: 0.875rem;
}

.site-map2{
  list-style: none;
  color: white;
  text-decoration: none;
}

.site-map{
  list-style: none;
  margin-bottom: 20px;
}


.privacy{
  color: white;
  font-size: 0.5rem;
}


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

  #home{
    background-image: url(../images/IMG_8700.jpg);
     min-height: 100vh;
  }

  #home .page-title {
     font-size: 2rem;
     margin-top: 100px;
  }
     .page-title {
         font-size: 2.5rem;
     }
     .btn-edge{
       margin-top:auto;
     }
     .page-header {
        flex-direction: column;
        align-items: center;
     }

  .btn{
    margin-top: 60px;
    text-align: center;
  }

  .label{
    margin:20px auto 20px 0;
  }



     /* HEADER */
     .main-nav {
       font-size: 0.9rem;
       margin-top: 10px;
     }
     .main-nav li {
       margin: 0 20px;
     }

     /* company */




  /* NES*/
.news li{
  flex-direction: column;
}

/*　スタイルメモリー
-------------------------------*/
#style-memory{
  background-image: url(../images/IMG_8718.jpg);
}


    /* CONTACT */
   #contact .page-title {
       margin-top: 30px;
   }

   /* 店舗情報・地図 / SNS */
   #location .wrapper,
   #sns .wrapper {
       flex-direction: column;
   }
   .location-info,
   .location-map,
   .sns-box {
       width: 100%;
   }
   .sns-box {
       margin-bottom: 30px;
   }

}