@charset "UTF-8";

/* 
リセットCSS
サイト共通デザイン・フォーマット

スマホ 320〜519px
タブレット 520〜959px　@media (min-width: 520px)
PC 960px以上　　　@media (min-width: 960px)
------------------------------------*/

/* ------------------------------------
reset CSS
------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;padding: 0;
  font-style: normal;
}

html{
  /* 10px / 16px=0.625(62.5%) */
  font-size: 62.5%;
  scroll-behavior: smooth;
}

html,
body {height: 100%;}

h1,h2,h3,h4,h5,h6,p {
  font-weight: normal;
  overflow-wrap: break-word;
}

ol,ul {list-style: none;}

img,picture,canvas,svg {
  display: block;
  max-width: 100%;
  border-style: none
}
input,button,textarea,select {
  font: inherit;
}
table {
  border-collapse: collapse;
}


/* ------------------------------------
AKKESHI COMMON CSS
------------------------------------ */
body {
  font-size: 1.4rem;
  color: #fff;
  font-family: 'Shippori Mincho',serif;
  -webkit-font-smoothing: antialiased;
}
body,
main {
  background-color: #0A1F00;
}
body#prodauct,
body#prodauct main,
body#contact,
body#contact main {
  background-color: #061301;
}

main,footer{
  position: relative;
  z-index:1 ;
}
/* main{padding-bottom: 5em;} */
  
section{position: relative;}

a {
  display: inline-block;
  color: #fff;
  text-decoration: none;
  transition: all .3s ease-in-out;
}

a:hover{
cursor: pointer;
color: #B9A582;
}
#gnav a:hover,
a.bt-primary:hover {
  cursor: pointer;
  color: #fff;
}

.list-mark::before{
  display: inline-block;
  content: "-";
  padding-right: 0.3em;
} 

.clearfix:after {
  display: block;
  clear: both;
  height: 0;
  content: ".";
  overflow: hidden;
}

.clearfix {
  overflow: hidden;
  zoom: 1;
}


/* スマホ非表示 */
.m-none{display: none;}

/* タブレット表示 */
@media (min-width: 520px) {
  .m-none{display: none;}
  .t-visible {display: block;}
  .pc-none {display: none;}
}

/* PC非表示 */
@media (min-width: 768px) {
  .pc-none {display: none;}
  .m-none {display: block;}
}


/* ------------------------------------
AKKESHI COMMON CSS  
font-size color line-height
------------------------------------ */
h1,.fz-xxlarge {
  color: #B9A582;
  font-size: 5.6rem;
  line-height:1.3;
}

/* .lower #txtheader h1::after{
 content: "";
 display: block;
 width: 1em;
 height: 1px;
 background-color: #887451;
 margin-top: 0.5em;
} */


h2,.fz-xlarge {
  color: #fff;
  font-size: 2rem;
  line-height:1.5;
}


h3 {
  color: #B9A582;
  font-size: 2rem;
}
.h3Box {
  text-align: center;
  border-bottom: 1px solid #7070706c;
  padding-bottom: 1em;
}


.fz-small {
  font-size: 1.2rem;
}

p,li,dd{
  font-size: 1.4rem;
  line-height: 2;
}

@media (min-width: 520px) {
h1,.fz-xxlarge{font-size: 5.6rem;}
h2,.fz-xlarge {font-size: 2.5rem;}
p{font-size: 1.6rem;}
.fz-small{font-size: 1.4rem;}
}

@media (min-width: 1280px) {
h1,.fz-xxlarge{font-size: 10rem;}
h2,.fz-xlarge {font-size: 3.2rem;}
#policy #txtheader h1,
#contact #txtheader h1,
#confirm #txtheader h1,
#complete #txtheader h1{
  font-size: 5.6rem;}
}

/* ------------------------------------
AKKESHI COMMON CSS  text-align
------------------------------------ */
.txtCenter{text-align: center;}
.txtRight{text-align: right;}

@media (min-width: 768px) {
.txtLeft-p{text-align: left;}
.txtCenter-p{text-align: center;}
.txtRight{text-align: right;}
}

/* ------------------------------------
AKKESHI COMMON CSS contentBox　witdh
------------------------------------ */
.width90{width: 90%;margin-left:auto;margin-right:auto;}
.width80 {width: 80%;margin-left: auto;margin-right: auto;}
.width70 {width: 70%;  margin-left: auto;  margin-right: auto;}

@media (min-width: 520px) {
.width90-t{width: 90vw;margin-left:auto;margin-right:auto;}
.width80-t {width: 80vw;margin-left: auto;margin-right: auto;}
.width70-t {width: 70vw;margin-left: auto;  margin-right: auto;}
.width60-t {width: 60vw;margin-left: auto;  margin-right: auto;}
}

@media (min-width: 768px) {
.width90vw-p{width: 90vw;margin-left:auto;margin-right:auto;}
.width80vw-p {width: 80vw;margin-left: auto;margin-right: auto;}
.width70vw-p {width: 70vw;margin-left: auto;  margin-right: auto;}
.width60vw-p {width: 60vw;margin-left: auto;  margin-right: auto;}
}


/* ------------------------------------
AKKESHI COMMON CSS  margin
------------------------------------ */
.marginTnarrow {margin-top: 15px !important;}
.marginTmidium {margin-top: 50px !important;}
.marginTlarge {margin-top: 100px !important;}

.marginBnarrow {margin-bottom: 20px !important;}
.marginBmidium {margin-bottom: 50px !important;}
.marginBlarge {margin-bottom: 100px !important;}

.marginLnarrow {margin-left: 20px !important;}
.marginLmidium {margin-left: 50px !important;}
.marginLlarge { margin-left: 100px !important;}


@media (min-width: 520px) {
.marginTnarrow-t {margin-top: 15px !important;}
.marginTmidium-t { margin-top: 50px !important;}
.marginTlarge-t {margin-top: 100px !important;}

.marginBnarrow-t {margin-bottom: 20px !important;}
.marginBmidium-t {margin-bottom: 50px !important;}
.marginBlarge-t {margin-bottom: 100px !important;}

.marginLnarrow-t {margin-left: 20px !important;}
.marginLmidium-t {margin-left: 50px !important;}
.marginLlarge-t { margin-left: 100px !important;}
}


@media (min-width: 768px) {
.marginTnarrow-p {margin-top: 15px !important;}
.marginTmidium-p { margin-top: 50px !important;}
.marginTlarge-p {margin-top: 100px !important;}

.marginBnarrow-p {margin-bottom: 20px !important;}
.marginBmidium-p {margin-bottom: 50px !important;}
.marginBlarge-p {margin-bottom: 100px !important;}

.marginLnarrow-p {margin-left: 20px !important;}
.marginLmidium-p {margin-left: 50px !important;}
.marginLlarge-p { margin-left: 100px !important;}
}


/* ------------------------------------
AKKESHI COMMON CSS padding
------------------------------------ */
.paddingTnarrow {padding-top: 10px !important;}
.paddingTmidium { padding-top: 50px !important;}
.paddingTlarge {padding-top: 100px !important;}

.paddingBnarrow { padding-bottom: 20px !important;}
.paddingBmidium {padding-bottom: 50px !important;}
.paddingBlarge {padding-bottom: 100px !important;}








/* ------------------------------------------------------------
header #headerArea
------------------------------------------------------------ */
header {
  position: fixed;
  width: 100vw;
  z-index: 1000;
}

header #headerArea {
  width: 90vw;
  max-width: 960px;
  margin: 1vh auto 0;
}

header #headerArea .logo img {
  position: relative;
  width: 60px;
  z-index: 100001;
}

header .logo {
  float: left;
}

header .headerbox {
  text-align: center;
}

#hero #sns,
.lower #sns{
  position: fixed;
  right: 0px;
  top:50%;
  bottom: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.snsicon a{
  display: block;
  padding: 5px;
}


/* ==================================================================
header #headerArea　　PC 768px以上
================================================================== */
@media (min-width: 1110px){
header #headerArea {
  width: 85%;
  max-width: 1200px;
  min-width: 900px;
  margin: 0 auto;
}
header #headerArea .logo img {
  width: 80px;
  margin-top:1.5vh;
}
header .headerbox {
  float: right;
  text-align: right;
}
header .headerbox .translation {
  position: relative;
  bottom: 1em;
}
header .headerbox #contact {
  padding: 10px 2em;
  margin-left: 1em;
}

}




/* ------------------------------------
global nav
------------------------------------ */
#m-gnav {
  position: fixed;
  z-index:1000;
  /*ナビのスタート位置と形状*/
  top: -120%;
  left: 0;
  width: 100%;
  height: 100vh;/*ナビの高さ*/
  background-color: #0A1F00;
  transition: all 0.6s;/*動き*/
}
/*アクティブクラスがついたら位置を0に*/
#m-gnav.panelactive {
  top: 0;
}
/*ナビゲーションの縦スクロール*/
#m-gnav.panelactive .headerbox {
  /*ナビの数が増えた場合縦スクロール*/
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100vh;
  /*表示する高さ*/
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
/*ナビゲーション*/
#gnav ul {
  position: absolute;
  z-index: 999;
  top: 35%;
  left: 50%;
  border-bottom: #333 1px solid;
  padding-bottom: 1.5em;
  transform: translate(-50%, -50%);
}

#gnav li {
  width: 80vw;
  padding: 10px;
  letter-spacing: 0.1em;
  font-size: 1.5em;
  text-align: center;
}

@media (max-width: 413px) {
#gnav li {
    padding: 3px;
  }
}

@media (max-width: 330px) {
  #gnav li {
    padding: 0px;
    font-size: 1.2em;
  }
}

/* モバイル・タブレットのみ指定
------------------------------------ */
@media (max-width: 1110px) {
.opennav-m {
  position: absolute;
  top: 67%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top: 2em;
}
.opennav-m #contact {
    display: block;
    width: 70vw;
    padding: 1.6em 0;
    margin-bottom: 1.5em;
  }
.opennav-m address{letter-spacing: 0.1em;}
.opennav-m address strong{
  font-size: 2em;
}
.opennav-m .translation{
  position: relative;
  top:32vh;
}
}




/*------------------------------------
ハンバーガーメニューCSS
------------------------------------=*/
@media (max-width:1110px) {
.openbtn {
  position: fixed;
  z-index: 9999;/*ボタンを最前面に*/
  top: 0px;
  right: 0px;
  cursor: pointer;
  width: 50px;
  height: 50px;
  background:#0A1F00;
}
.openbtn span {
  display: inline-block;
  transition: all .4s;
  /*アニメーションの設定*/
  position: absolute;
  left: 13px;
  height: 2px;
  background-color: #fff;
}
.openbtn span:nth-of-type(1) {
  top: 22px;
  width: 50%;
}

.openbtn span:nth-of-type(2) {
  top: 29px;
  width: 50%;
}
.openbtn.active span:nth-of-type(1) {
  top: 20px;
  left: 16px;
  transform: translateY(6px) rotate(-45deg);
  width: 35%;
}

.openbtn.active span:nth-of-type(2) {
  top: 32px;
  left: 16px;
  transform: translateY(-6px) rotate(45deg);
  width: 35%;
}
}

/* ==================================================================
global nav #headerArea　　PC 960px以上
================================================================== */
@media (min-width: 1110px) {
#m-gnav {
  position: relative;
  z-index: 0;
  top: 0%;
  left: 0;
  width: 100%;
  height: auto;
  /*ナビの高さ*/
  background-color:inherit;
  /*動き*/
}
#gnav ul {
  /*ナビゲーション天地中央揃え*/
  position: relative;
  z-index: 999;
  top: 1em;
  right: 0;
  transform: translate(-50%, -50%);
  margin-top: 5px;
  border-bottom:none;
  padding-bottom: 0;
}

#gnav li {
  display: table-cell;
  width: auto;
}

#gnav a {
  position: relative;
  font-size: 16px;
  letter-spacing: 0.2em;
  margin-left: 1em;
  padding-bottom: 0.5em;
}

#index #gnav li::before {
  display: block;
  content: "•";
  font-weight: bold;
  text-align: center;
  height: 0.7em;
  visibility: hidden;
  position: relative;
  left: 0.3em;
}

#index #gnav li#nav1::before {
  visibility: visible;
}

#gnav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  /*線の形状*/
  width: 100%;
  height: 1px;
  background:#fff;
  transition: all .3s;/*アニメーションの指定*/
  transform: scale(0, 1);/*X方向0、Y方向1*/
  transform-origin: center top;/*上部中央基点*/
}
#gnav li.current a::after,
#gnav li a:hover::after {
  transform: scale(1, 1);
  /*X方向にスケール拡大*/

}
}

/* ==================================================================
pageformat top image
blenders.html
==================================================================*/
.lower #hero .heroImg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  filter: brightness(50%);
  object-fit: cover;
}

/* 下層ページページタイトル */
.lower #hero #pagetitle{
  position: fixed;
  top: 60%;
  left: 40%;
  transform: translate(-50%, -50%);
}
.lower #hero #pagetitle h1 {
  color: #fff;
  margin-bottom: 20px;
}

@media (max-width: 413px) {
.lower #hero #pagetitle {
  padding-left:2em;
}
  .lower #hero #pagetitle h1 {
    font-size:2.5em;
  }
  .lower #hero #pagetitle p {
    font-size: 0.9em;
    line-height: 1.4;
     width:70vw;
  }
}

@media (min-width: 768px) {
.lower #hero #pagetitle {
  position: fixed;
  top: 75%;
  left: 40%;
  transform: translate(-50%, -50%);
}
.lower #hero #pagetitle h1{
  font-size: 8rem;
}
}

/* 下層ページページコンテンツ下部
ページリンクバナー
------------------------------*/
#otherPagelink{
  position: relative;
  height: 320px;
  /* margin-top: 250px; */
  object-fit: cover;
}
@media (min-width: 520px) {
#otherPagelink {
  height: 530px;
    /* margin-top: 300px; */
}
}
@media (min-width: 768px) {
  #otherPagelink {
    height: 200px;
    /* margin-top: 100px; */
  }
}
@media (min-width: 1050px) {
  #otherPagelink {
    height: 300px;
    /* margin-top: 200px; */
  }
}

@media (min-width: 1300px) {
  #otherPagelink {
    height: 400px;
    /* margin-top: 200px; */
  }
}

@media (min-width: 1920px) {
  #otherPagelink {
    height: 600px;
      /* margin-top: 200px; */
  }
}


#otherPagelink figure{
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  filter: brightness(70%);

}

#otherPagelink nav {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  text-align: center;
}
#otherPagelink nav a{color: #fff;}
#otherPagelink nav a:hover{
opacity:1;
}



/* ------------------------------------
footer
------------------------------------ */
footer {
  background-color: #000;
  text-align: center;
}
footer .footerbox {
  width: 80vw;
  margin: 0 auto;
  padding: 5em 0;
}

footer .logo img {
display: inline-block;
width: 79px;
margin-bottom: 0.7em;
}


footer .footerbox #contact {
  padding: 1.6em 0;
  margin: 2em 0 3em 0;
  display: block;
}
footer address{
  line-height: 2;
  margin-bottom: 1em;
}
footer address strong{
  font-size: 1.7em;
  letter-spacing: 0.2em;
}
footer .support-tel{
  border-bottom: #333 1px solid;
  padding-bottom: 1.5em;
}
footer .heed{
  margin-top: 3em;
  font-size: 4vw;
  color: #fff;
}
footer .heed small{
  display: block;
  margin-bottom: 2em;
}

footer #footer-nav{
font-size: 90%;
column-count: 2;
text-align: left;  
}
footer #footer-nav li{
  margin-bottom: 3em;
}

footer #policy-nav li{
  display: inline;
}
footer #policy-nav a{
  padding: 0 0.5em;
}

footer .heed em,
footer .heed .copyright{
display: block;
}
footer .heed .copyright{
font-size: 1rem;
}


/* ==================================================================
footer　　PC 960px以上
================================================================== */
@media (min-width: 768px) {
footer {
  text-align: left;
}
footer .footerbox {
  width: 80vw;
  max-width: 963px;
}
.footerbox-inner1{
display: flex;
justify-content: space-between;
margin-bottom: 2em;
}
.footerbox-inner2,
.footerbox-inner3 {
  display: flex;
}
.footerbox-inner2 .flex-item{flex-basis: 50vw;}
.footerbox-inner2 .flex-item:first-child{
  border-right: 1px #333 solid;
}
.footerbox-inner2 .flex-item:last-child{
  padding-left: 3em;
}
.footerbox-inner3 .flex-item {flex-basis: 50vw;}


footer .footerbox-inner1 #contact {
  display: inline-block;
  margin: 0 1em;
  padding: 1.5em 90px;
}
footer .translation{
  position: relative;
  bottom: 1.75em;
}

footer address {
  line-height: 1.5;
  margin-bottom: 1em;
}
footer .support-tel {
  border: none;
  padding-bottom: 0;
  margin-bottom: 0;
}
footer #footer-nav {
  column-count:unset;
}

footer #footer-nav li {
  margin-bottom:  1em;
}

footer .heed {
  font-size: 1em;
  text-align: right;
  margin-top: 0;
}
footer .heed small {
  margin-bottom: 0em;
}

footer .heed em,
footer .heed .copyright {
  display: inline-block;
}

}


/* 
ボタン共通設定
==============================================*/
.btn {
  position: relative;
  overflow: hidden;
  /*ボタンの形状*/
  text-decoration: none;
  display: inline-block;
  text-align: center;
  outline: none;
  /*アニメーションの指定*/
  transition: ease .2s;
}

/*ボタン内spanの形状*/
.btn {
  position: relative;
  z-index: 3;
  /*z-indexの数値をあげて文字を背景よりも手前に表示*/
}
.btn span {
  position: relative;
  z-index: 3;
  /*z-indexの数値をあげて文字を背景よりも手前に表示*/
}

.btn:hover span {
  color: #fff;
}

/*== 背景が流れる（斜め） */
.bgskew::before,
.bgskew2::before,
.bgskew3::before {
  content: '';
  /*絶対配置で位置を指定*/
  position: absolute;
  top: 0;
  left: -130%;
  width: 120%;
  height: 100%;
  transform: skewX(-25deg);
}

/*hoverした時のアニメーション*/
.bgskew:hover::before,
.bgskew2:hover::before,
.bgskew3:hover::before {
  animation: skewanime .5s forwards;
  /*アニメーションの名前と速度を定義*/
}
@keyframes skewanime {
  100% {left: -10%;/*画面の見えていない左から右へ移動する終了地点*/
  }
}

.btn_color1 {background-color: #887451;}
.bgskew::before{background-color: #b9a582;}

.btn_color2 {background-color: #184B03;}
.bgskew2::before{background-color: #34701c;}

.btn_color3 {background-color: transparent;border: 1px solid #5F685C;}
.bgskew3::before{background-color: #184B03;}

.btn_color2,.btn_color3 {
  width: 70vw;
  padding: 1em;
  margin: 1em 0;
}
@media (min-width: 520px) {
.btn_color2 {
  width: 300px;
  margin: 1em 0;
}

.btn_color3 {
  width: 200px;
  margin: 1em 0;
}

}


/*== 無限に波紋が広がるボタン
------------------------------- */
.btnripple2 {
  /*波紋の基点とするためrelativeを指定*/
  position: relative;
  /*波紋の形状*/
  display: inline-block;
  background: transparent;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #ccc;
  outline: none;
  /*アニメーションの設定*/
  transition: all .3s;
  opacity: 0.6;
}

/*hoverした際の背景色の設定*/
.btnripple2:hover {
  opacity: 1;
}

/*波形を2つ設定*/
.btnripple2::after,
.btnripple2::before {
  content: '';
  /*絶対配置で波形の位置を決める*/
  position: absolute;
  left: -25%;
  top: -25%;
  /*波形の形状*/
  border: 1px solid #fff;
  width: 150%;
  height: 150%;
  border-radius: 50%;
  /*はじめは不透明*/
  opacity: 0.7;
  /*ループするアニメーションの設定*/
  animation: 2s circleanime linear infinite;
}

/*波形の2つ目は0.5秒遅らせてアニメーション*/
.btnripple2::before {
  animation-delay: 1s;
}

/*波形のアニメーション*/
@keyframes circleanime {
  0% {
    transform: scale(0.68);
  }

  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}

/*中央矢印*/
.btnripple2 span::after {
  content: '';
  /*絶対配置で矢印の位置を決める*/
  position: absolute;
  top: 14%;
  left: 35%;
  /*矢印の形状*/
  border: 9px solid transparent;
  border-top-width: 8px;
  border-bottom-width: 8px;
  border-left-color: #fff;
}






/* ==================================================================
common CSS
アニメーション　
================================================================== */


/*
 LoadingのためのCSS
=======================================================*/
/* Loading背景画面設定　*/
#splash {
  /*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 100002;
  text-align: center;
  color: #887451;
}

/* Loading画像中央配置　*/
#splash_text {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 999;
  transform: translate(-50%, -50%);
  color: #887451;
  width: 100%;
}

/*IE11対策用バーの線の高さ※対応しなければ削除*/
#splash_text svg {
  height: 2px;
}

/*割れる画面のアニメーション*/
.loader_cover {
  width: 100%;
  height: 50%;
  background-color: #0A1F00;
  transition: all .8s cubic-bezier(.04, .435, .315, .9);
  transform: scaleY(1);
}

/*上の画面*/
.loader_cover-up {
  transform-origin: center top;
}

/*下の画面*/
.loader_cover-down {
  position: absolute;
  bottom: 0;
  transform-origin: center bottom;
}

/*クラス名がついたらY軸方向に0*/
.coveranime {
  transform: scaleY(0);
}



/*
スクロールでヘッダー画像が拡大しながら、下のエリアが被る効果
=======================================================*/
.scrollarea-bttomupFix {
  position: fixed;
  /*背景を固定するためfixedをかける*/
  z-index: -1;
  /*#container,#footerよりも下に配置するために数値を小さくする*/
  top: 0;
  /*topの位置がJSで変化*/
  /*以下画面で背景画像を表示させるための指定*/
  width: 100%;
  height: 100vh;
  /* background: url("../img/pict.jpg") no-repeat top center; */
  transform-origin: center;
  /*変化する基点を中心からに設定*/
overflow: hidden;
}



/*
流れるテキスト 右から左 
=======================================================*/

/*全共通*/
.slide-in {
  overflow: hidden;
  display: inline-block;
}

.slide-in_inner {
  display: inline-block;
}

/*左右のアニメーション*/
.leftAnime {
  opacity: 0;
  /*事前に透過0にして消しておく*/
}
.slideAnimeLeftRight {
  animation-name: slideTextX100;
  animation-duration: 1.2s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes slideTextX100 {
  from {
    transform: translateX(-100%);
    /*要素を左の枠外に移動*/
    opacity: 0;
  }

  to {
    transform: translateX(0);
    /*要素を元の位置に移動*/
    opacity: 1;
  }
}

.slideAnimeRightLeft {
  animation-name: slideTextX-100;
  animation-duration: 1.2s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes slideTextX-100 {
  from {
    transform: translateX(100%);
    /*要素を右の枠外に移動*/
    opacity: 0;
  }

  to {
    transform: translateX(0);
    /*要素を元の位置に移動*/
    opacity: 1;
  }
}



/* 
基本の動き２
その場でフェードイン　
==============================================*/
.fadeIn {
  animation-name: fadeInAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeInAnime {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 下から 
==============================================*/
.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);
  }
}


/* 上から 
==============================================*/
.fadeDown {
  animation-name: fadeDownAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}

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

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

/* 左から 
==============================================*/
.fadeLeft {
  animation-name: fadeLeftAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeLeftAnime {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }

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

/* 右から 
==============================================*/
.fadeRight {
  animation-name: fadeRightAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeRightAnime {
  from {
    opacity: 0;
    transform: translateX(100px);
  }

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


/*　画像の拡大　
==============================================*/
.zoomIn img {
  transform: scale(1);
  transition: .3s ease-in-out;
  /*移り変わる速さを変更したい場合はこの数値を変更*/
}

.zoomIn a:hover img {
  /*hoverした時の変化*/
  transform: scale(1.2);
  /*拡大の値を変更したい場合はこの数値を変更*/
}

/*　画像のマスク　*/
.mask {
  display: block;
  line-height: 0;
  /*行の高さを0にする*/
  overflow: hidden;
  /*拡大してはみ出る要素を隠す*/
}



/*
スライドショー 
=======================================================*/
#sliderWrap{padding: 120px 0;}

.slider{display: flex;position: relative;}
.slider li{
align-items: center;
}
.slider img {
  width: 100%;
  /*スライダー内の画像を横幅100%に*/
  height: auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/
.slider .slick-slide {
  margin: 0 30px;
}

/* スライドのサイズを80%にする */
.slider li.small {
  width: 400px!important;
  transform: translate(0px, 25%);
}

/* スライドのy座標調整 */
.slider li.bottomshift img {
  transform: translate(0px,40px)
}



/*
アコーディオンパネル
=======================================================*/
/*アコーディオン全体*/
.accordion-area {
  list-style: none;
  width: 90vw;
  margin: 0 auto;
}


/*アコーディオンタイトル*/
.title {
  position: relative;
  /*+マークの位置基準とするためrelative指定*/
  cursor: pointer;
  font-size: 1rem;
  font-weight: normal;
  padding: 1.5em 3% 1.5em 20px;
  transition: all .5s ease;
  color: #fff;
  font-size: 1.2em;
  text-align: left;
  background-color: #887451;
}

/*アイコンの＋と×*/
.title::before,
.title::after {
  position: absolute;
  content: '';
  width: 20px;
  height: 2px;
  background-color: #fff;

}

.title::before {
  top: 48%;
  right: 20px;
  transform: rotate(0deg);

}

.title::after {
  top: 48%;
  right: 20px;
  transform: rotate(90deg);

}

/*　closeというクラスがついたら形状変化　*/

.title.close::before {
  transform: rotate(0deg);
}

.title.close::after {
  transform: rotate(0deg);
}

/*アコーディオンで現れるエリア*/
.box {
  display: none;
  /*はじめは非表示*/
  background: transparent;
}
.box dt,
.box dd{
  text-align: left;
  line-height: 1.5;
}