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

iframe {
  width: 100%;
  height: 100vh;
}
.seka-logo {
  margin: 0px;
  padding: 0px;
}
.seka-logo img {
  width: 100%;
}

.section-top {
  color: #FFF;
  padding: 20px 24px 10px 24px;
  background-color: #000;
}
.section-top h2 {
  line-height: 3.6rem;
}
.section-top__main-image img {
  width: 100%;
  object-fit: cover;
  object-position: 0% 0%;
}
.section-top .slick-dots {
  bottom: -25px;
}
.section-top .slick-dots li button:before {
  color: #FFF;
  font-size: 10px;
}

.price {
  margin-top: 20px;
}
.price-black {
  color: #333;
  margin-left: 5px;
}
.price-red {
  color: red;
}
.price-white {
  color: #fff;
}
.price-lightblue {
  color: #000033;
  margin-left: 5px;
}
.price-mintgreen {
  color: #67b0b4;
}

.seka-price1 ,.seka-price2  {
  text-align: left;
  padding: 20px 40px;
  margin-bottom: 40px;
}
.seka-price1  h3 {
  font-size: 3.6rem;
  margin-bottom: 15px;
}
.seka-price1  span {
  font-size: 1.5rem; 
}
.seka-price1  p {
  font-size: 2.9rem;
  font-weight: bold;
  margin-top: 20px;
}
.seka-price2  h3 {
  font-size: 3.6rem;
  margin-bottom: 15px;
  line-height: 1.2;
}
.seka-price2  span {
  font-size: 1.5rem;
  
}
.seka-price2  p {
  font-size: 2.9rem;
  font-weight: bold;
  margin-top: 20px;
}


.seka-specification {
  border-top: 1px solid #FFF;
  margin-top: 20px;
  
}
.seka-specification h2 {
  font-size: 2.0rem;
  font-weight: 600;
  text-align: center;
  margin: 20px 0 0px;
  letter-spacing: 1em;
}
.seka-specification p {
  font-size: 1.3rem;
  text-align: left;
  padding: 30px 20px 0;
}

.description-of-item {
  border-top: 1px solid #FFF;
  margin: 30px 0 60px;
}
.description-of-item h2 {
  font-size: 2.0rem;
  font-weight: 600;
  text-align: center;
  margin: 30px 0 20px;
  letter-spacing: 0.3em;
}
.seka-exceed {
  margin-bottom: 40px;
}
.seka-exceed p {
   font-size: 1.3rem;
  text-align: left;
  padding: 20px 20px 0;
}
.seka-rdc h3 {
  font-size: 2.0rem;
  text-align: left;
  padding-left: 20px;
  margin-bottom: 20px;
  letter-spacing: 0.18em;
}
.seka-rdc p {
  font-size: 1.3rem;
  text-align: left;
  padding: 0 20px 30px;
}


.accordion-wrap_z {
  margin-bottom: 50px;
}
.accordion-wrap{
    border-bottom: 1px solid #ddba4d;
    width: 90%;
    margin: 0 auto;
}

.accordion-item{
  width: 100%;
  margin: 0 auto;
  cursor: pointer;
  text-align: left;
  margin-top: 30px;
  font-size: 1.5rem;
  font-weight: 600;
}

.accordion-header{
  transition: ease-in-out 100ms;
}

.accordion-text{
  width: 100%;
  font-size: 1.3rem;
  text-align: left;
  display: none;
  padding-top: 20px;
  padding-bottom: 20px;
 }

 .fa{
  transition: ease-in-out 300ms;
 }

 .rotate-fa{
  transform: rotate(180deg);
 }


 .accordion-header .fa{
  float: right;
  line-height: 35px;
 }

 .accordion-gold{
  color: #ddba4d;
 }

 .accordion-no-bar{
  border-bottom: 0;
}

/*資料*/
.seka-document {
  margin-bottom: 80px;
  width: 100%;
}
.seka-document img {
  width: 90%;
  margin-left: 5%;
}







/*========= レイアウトのためのCSS ===============*/

.wrapper{
  overflow: hidden;
}


.box{
 
  padding: 20px;
  margin:0 auto;
  background: #000;
  color: #fff;
  box-sizing:border-box;
}



/*==================================================
ふわっ
===================================*/


/* fadeUp */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}


/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeUpTrigger{
    opacity: 0;
}

.description-of-item {
  animation-delay: 0.6s
}
.seka-rdc {
  animation-delay: 1.0s
}
.seka-document {
  animation-delay: 2.0s
}

.about-top__image-message {
  animation-delay: 3.0s
}
.about-information {
  animation-delay: 4.0s
}


/*========= 検索窓を開くためのボタン設定 ===========*/

.open-btn1{
  position: absolute;
  top:10px;
  right:10px;
  background:url("https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/7-2-3/img/icon_search.svg") no-repeat 15px center;/*虫眼鏡アイコンを背景に表示*/
  background-size: 20px 20px;
  width:50px;
  height:50px;
  cursor: pointer;/*カーソルを指マークに*/
}

/*クリック後、JSでボタンに btnactive クラスが付与された後の見た目*/
.open-btn1.btnactive{
  background:url("https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/7-2-3/img/icon_close.svg") no-repeat 15px center;/*閉じるアイコンを背景に表示*/
  background-size: 18px 18px;
}

/*========= 検索窓の設定 ===============*/

/*==検索窓背景のエリア*/

#search-wrap{
    position:absolute;/*絶対配置にして*/
  top:150px;
    right:20px;
  z-index: -1;/*最背面に設定*/
  opacity: 0;/*透過を0に*/
  width:0;/*横幅は0に*/
  transition: all 0.4s;/*transitionを使ってスムースに現れる*/
  border-radius: 5px;
}

/*ボタンクリック後、JSで#search-wrapに panelactive クラスが付与された後の見た目*/
#search-wrap.panelactive{
  opacity: 1;/*不透明に変更*/
  z-index: 3;/*全面に出現*/
  width:280px;
  padding:20px;
  top:60px;
  background:#fff;
}

/*==検索窓*/
#search-wrap #searchform{
  display: none;/*検索窓は、はじめ非表示*/
}

/*ボタンクリック後、JSで#search-wrapに panelactive クラスが付与された後*/
#search-wrap.panelactive #searchform{
  display: block;/*検索窓を表示*/
}

/*==検索フォームの設定*/

/*==テキスト入力とボタンinput共通設定*/
#search-wrap input{
  -webkit-appearance:none;/*SafariやChromeのデフォルトの設定を無効*/
  outline: none;
  cursor: pointer;/*カーソルを指マークに*/
  color: #666;
}

/*テキスト入力input設定*/
 #search-wrap input[type="text"] {
  width: 100%;
  border: none;
  border-bottom:2px solid #ccc;
  transition: all 0.5s;
  letter-spacing: 0.05em;
    height:46px;
  padding: 10px;
}

/*テキスト入力inputにフォーカスされたら*/
 #search-wrap input[type="text"]:focus {
  background:#eee;/*背景色を付ける*/
}

/*ボタンinput設定*/
 #search-wrap input[type="submit"] {
  position: absolute;
    top:10px;
  right:30px;
  background:url("https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/7-2-3/img/icon_search.svg") no-repeat right;/*虫眼鏡アイコンを背景に表示*/
  background-size: 20px 20px;
  width:30px;
  height: 60px;
}







/*
*{
  border: 1px solid red!important;
}*/