/*--------------------------------------------------
変数指定
--------------------------------------------------*/
/* フォント指定変数 */
$font_main: YuGothic,'Yu Gothic',sans-serif;
$font_sub: YuGothic,'Yu Gothic',sans-serif;

/* カラー変数 */
$c_bese_text: #696969;



/*--------------------------------------------------
要修正
--------------------------------------------------*/
/* 汎用フォントカラー指定 */
.f_red {color: #b50023 !important;}
.f_orange {color: #ff6600 !important;}
.f_pink {color: #ef9191 !important;}
.f_blue {color: #abc5ea  !important;}
.f_green {color: #dbedc6 !important;}
.f_brown {color: #6d4f2b !important;}



/*--------------------------------------------------
基本修正不要
--------------------------------------------------*/
/* テキスト装飾 */
.bold {font-weight: bold !important;}
.pad01 {
  padding-left: 1em;
  text-indent: -1em;
}
.pad02 {
  padding-left: 2em;
  text-indent: -2em;
}

/* テキスト配置 */
.alignC {text-align: center !important;}
.alignL {text-align: left !important;}
.alignR {text-align: right !important;}
.alignJ {text-align: justify !important;}

/* padding */
.p0 {padding: 0 !important;}
.p10 {padding: 10px !important;}
.pt0 {padding-top: 0 !important;}
.pt10 {padding-top: 10px !important;}
.pt20 {padding-top: 20px !important;}
.pt30 {padding-top: 30px !important;}
.pt40 {padding-top: 40px !important;}
.pb10 {padding-bottom: 10px !important;}
.pb20 {padding-bottom: 20px !important;}
.pr0 {padding-right: 0 !important;}
.pr10 {padding-right: 10px !important;}
.pr20 {padding-right: 20px !important;}
.pl0 {padding-left: 0px !important;}
.pl10 {padding-left: 10px !important;}
.pl20 {padding-left: 20px !important;}
.pl30 {padding-left: 30px !important;}
.pl40 {padding-left: 40px !important;}
.pl50 {padding-left: 50px !important;}

/* margin */
.m0 { margin: 0 !important;}
.m5 {margin: 5px !important;}
.m10 {margin: 10px !important;}
.mt0 {margin-top: 0 !important;}
.mt5 {margin-top: 5px !important;}
.mt10 {margin-top: 10px !important;}
.mt20 {margin-top: 20px !important;}
.mt25 {margin-top: 25px !important;}
.mt30 {margin-top: 30px !important;}
.mt80 {margin-top: 80px !important;}
.mb0 {margin-bottom: 0 !important;}
.mb3 {margin-bottom: 3px !important;}
.mb5 {margin-bottom: 5px !important;}
.mb10 {margin-bottom: 10px !important;}
.mb13 {margin-bottom: 13px !important;}
.mb15 {margin-bottom: 15px !important;}
.mb20 {margin-bottom: 20px !important;}
.mb25 {margin-bottom: 25px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb35 {margin-bottom: 35px !important;}
.mb40 {margin-bottom: 40px !important;}
.mb50 {margin-bottom: 50px !important;}
.mb60 {margin-bottom: 60px !important;}
.mb70 {margin-bottom: 70px !important;}
.mb80 {margin-bottom: 80px !important;}
.mb90 {margin-bottom: 90px !important;}
.ml0 {margin-left: 0 !important;}
.ml5 {margin-left: 5px !important;}
.ml10 {margin-left: 10px !important;}
.ml15 {margin-left: 15px !important;}
.ml20 {margin-left: 20px !important;}
.ml25 {margin-left: 25px !important;}
.ml30 {margin-left: 30px !important;}
.ml40 {margin-left: 40px !important;}
.ml50 {margin-left: 50px !important;}
.ml60 {margin-left: 60px !important;}
.ml70 {margin-left: 70px !important;}
.mr0 {margin-right: 0 !important;}
.mr5 {margin-right: 5px !important;}
.mr10 {margin-right: 10px !important;}
.mr11 {margin-right: 13px !important;}
.mr15 {margin-right: 15px !important;}
.mr20 {margin-right: 20px !important;}
.mr25 {margin-right: 25px !important;}
.mr30 {margin-right: 30px !important;}
.mr40 {margin-right: 40px !important;}
.mr50 {margin-right: 50px !important;}

/* 画像装飾 */
img {
  &.waku01 {
    border: solid 1px #ddd;
  }

  &.waku02 {
    padding: 4px;
    border: solid 1px #dddddd;
    background: #FFFFFF;
  }
}

/* clearfix */
.clearfix,
.box01,
.flow_item {
  min-height: 1px;

  &:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
  }
}

* html .clearfix {
  height: 1px;
}

/*--------------------------------------------------
フェードイン
--------------------------------------------------*/
/*フェードイン表示*/
.fade-in {
  opacity: 0;
  transition: all 2s;
}
.fade-in.scrollin {
  opacity: 1;
}

/*上にフェードイン*/
.down-to-top {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s;
}
.down-to-top.scrollin {
  opacity: 1;
  transform: translateY(0);
}

/*下にフェードイン*/
.top-to-down {
  opacity: 0;
  transform: translateY(-20px);
  transition: all 0.8s;
}

.top-to-down.scrollin {
  opacity: 1;
  transform: translateY(0);
}

/*画像ズームアウト*/
.zoom-out {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.zoom-out img {
  opacity: 0;
  transform: scale(1.1);
  transition: all 2s;
  object-fit: cover;
}

.zoom-out.scrollin img {
  opacity: 1;
  transform: scale(1);
  object-fit: cover;
}