@charset "UTF-8";
/*********************
color 色設定
*********************/
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

body,
header,
main,
section,
footer,
h1,
h2,
h3,
ul,
li,
dl,
dt,
dd,
p,
img {
  margin: 0;
  padding: 0; }

li {
  list-style-type: none; }

img {
  border: none;
  vertical-align: bottom; }

a:link,
a:visited {
  color: #000;
  text-decoration: none; }

h1 {
  font-size: 14px; }

body {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  font-family: Helvetica, "メイリオ", "游ゴシック", "Yu Gothic", sans-serif;
  font-size: 14px;
  line-height: 1.85;
  text-align: center;
  color: #10334f; }

/* とちぎんマイカーローン特別金利キャンペーン */

.sec01_01 {
  background-color: #f5f265;
  background-image: url(../images/campaign_back02.png);
  background-size: cover;
  background-position: center;
  padding: 5% 0;
  overflow: hidden;
  margin-bottom: 55px;
}
.sec01_01 .wrap h2 {
  margin-bottom: 4vmin;
  font-size: 3rem;
  position: relative;
  z-index: 100;
}
.sec01_01 .wrap h2::before {
  content: "";
  background-image: url(../images/campaign_con.png);
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  width: 21vw;
  height: 29vw;
  top: -2vh;
  left: -6vw;
  z-index: -1;
  opacity: 0.7;
}
.sec01_01 .wrap h2::after {
  content: "";
  background-image: url(../images/campaign_con02.png);
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  width: 21vw;
  height: 33vw;
  top: -2vh;
  right: -7vw;
  z-index: -1;
  opacity: 0.7;
}
.txt_box {
  width: 700px;
  margin: 0 auto;
  padding: 2% 0;
  border-top: #515151 1px solid;
  border-bottom: #515151 1px solid;
  z-index: 100;
  position: relative;
  text-shadow:-1px -1px 3px #ffffff;
}
.txt_box_con {
  text-align: center;
  line-height: 1.5;
  font-size: 1.2rem;
}
.txt_box_kome {
  text-align: right;
  font-size: 1rem;
}
.txt_cau {
  text-align: left;
  width: 800px;
  margin: 0 auto;
}
.txt_cau_con {
  /* font-size: 1.6rem; */
  text-shadow:-1px -1px 3px #ffffff;
  padding-left: 14px;
  position: relative;
}
.txt_cau_con::before {
  content: "＊";
  position: absolute;
  margin-left: -14px;
}

  
/*********************
共通設定
*********************/
.wrap {
  width: 1200px;
  margin: 0 auto; }

.txt {
  text-align: justify;
  text-justify: inter-ideograph; }

.tar {
  text-align: right; }

.por {
  position: relative; }

.poa {
  position: absolute; }

.hidden {
  width: 100%;
  overflow: hidden; }

.bgTxt {
  background-size: contain;
  background-repeat: no-repeat;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap; }

.flex {
  display: -webkit-box;
  display: box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex; }
  .flex.direcCol {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column; }
  .flex.flexWrap {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
  .flex.alignCenter {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
  .flex.justBetween {
    -moz-justify-content: space-between;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between; }
  .flex.justCenter {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; }
  .flex.justEnd {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end; }
  .flex .selfCenter {
    -ms-flex-item-align: center;
    align-self: center; }

a:link, a:hover, a:visited {
  color: #000; }

a:hover {
  opacity: .7; }

/*********************
マージン
*********************/
.mt5 {
  margin-top: 5px; }

.mb5 {
  margin-bottom: 5px; }

.pt5 {
  padding-top: 5px; }

.pb5 {
  padding-bottom: 5px; }

.mt10 {
  margin-top: 10px; }

.mb10 {
  margin-bottom: 10px; }

.pt10 {
  padding-top: 10px; }

.pb10 {
  padding-bottom: 10px; }

.mt15 {
  margin-top: 15px; }

.mb15 {
  margin-bottom: 15px; }

.pt15 {
  padding-top: 15px; }

.pb15 {
  padding-bottom: 15px; }

.mt20 {
  margin-top: 20px; }

.mb20 {
  margin-bottom: 20px; }

.pt20 {
  padding-top: 20px; }

.pb20 {
  padding-bottom: 20px; }

.mt25 {
  margin-top: 25px; }

.mb25 {
  margin-bottom: 25px; }

.pt25 {
  padding-top: 25px; }

.pb25 {
  padding-bottom: 25px; }

.mt30 {
  margin-top: 30px; }

.mb30 {
  margin-bottom: 30px; }

.pt30 {
  padding-top: 30px; }

.pb30 {
  padding-bottom: 30px; }

.mt35 {
  margin-top: 35px; }

.mb35 {
  margin-bottom: 35px; }

.pt35 {
  padding-top: 35px; }

.pb35 {
  padding-bottom: 35px; }

.mt40 {
  margin-top: 40px; }

.mb40 {
  margin-bottom: 40px; }

.pt40 {
  padding-top: 40px; }

.pb40 {
  padding-bottom: 40px; }

.mt45 {
  margin-top: 45px; }

.mb45 {
  margin-bottom: 45px; }

.pt45 {
  padding-top: 45px; }

.pb45 {
  padding-bottom: 45px; }

.mt50 {
  margin-top: 50px; }

.mb50 {
  margin-bottom: 50px; }

.pt50 {
  padding-top: 50px; }

.pb50 {
  padding-bottom: 50px; }

.mt55 {
  margin-top: 55px; }

.mb55 {
  margin-bottom: 55px; }

.pt55 {
  padding-top: 55px; }

.pb55 {
  padding-bottom: 55px; }

.mt60 {
  margin-top: 60px; }

.mb60 {
  margin-bottom: 60px; }

.pt60 {
  padding-top: 60px; }

.pb60 {
  padding-bottom: 60px; }

.mt65 {
  margin-top: 65px; }

.mb65 {
  margin-bottom: 65px; }

.pt65 {
  padding-top: 65px; }

.pb65 {
  padding-bottom: 65px; }

.mt70 {
  margin-top: 70px; }

.mb70 {
  margin-bottom: 70px; }

.pt70 {
  padding-top: 70px; }

.pb70 {
  padding-bottom: 70px; }

.mt75 {
  margin-top: 75px; }

.mb75 {
  margin-bottom: 75px; }

.pt75 {
  padding-top: 75px; }

.pb75 {
  padding-bottom: 75px; }

.mt80 {
  margin-top: 80px; }

.mb80 {
  margin-bottom: 80px; }

.pt80 {
  padding-top: 80px; }

.pb80 {
  padding-bottom: 80px; }

.mt85 {
  margin-top: 85px; }

.mb85 {
  margin-bottom: 85px; }

.pt85 {
  padding-top: 85px; }

.pb85 {
  padding-bottom: 85px; }

.mt90 {
  margin-top: 90px; }

.mb90 {
  margin-bottom: 90px; }

.pt90 {
  padding-top: 90px; }

.pb90 {
  padding-bottom: 90px; }

.mt95 {
  margin-top: 95px; }

.mb95 {
  margin-bottom: 95px; }

.pt95 {
  padding-top: 95px; }

.pb95 {
  padding-bottom: 95px; }

.mt100 {
  margin-top: 100px; }

.mb100 {
  margin-bottom: 100px; }

.pt100 {
  padding-top: 100px; }

.pb100 {
  padding-bottom: 100px; }

.mt105 {
  margin-top: 105px; }

.mb105 {
  margin-bottom: 105px; }

.pt105 {
  padding-top: 105px; }

.pb105 {
  padding-bottom: 105px; }

.mt110 {
  margin-top: 110px; }

.mb110 {
  margin-bottom: 110px; }

.pt110 {
  padding-top: 110px; }

.pb110 {
  padding-bottom: 110px; }

.mt115 {
  margin-top: 115px; }

.mb115 {
  margin-bottom: 115px; }

.pt115 {
  padding-top: 115px; }

.pb115 {
  padding-bottom: 115px; }

.mt120 {
  margin-top: 120px; }

.mb120 {
  margin-bottom: 120px; }

.pt120 {
  padding-top: 120px; }

.pb120 {
  padding-bottom: 120px; }

.mt125 {
  margin-top: 125px; }

.mb125 {
  margin-bottom: 125px; }

.pt125 {
  padding-top: 125px; }

.pb125 {
  padding-bottom: 125px; }

.mt130 {
  margin-top: 130px; }

.mb130 {
  margin-bottom: 130px; }

.pt130 {
  padding-top: 130px; }

.pb130 {
  padding-bottom: 130px; }

.mt135 {
  margin-top: 135px; }

.mb135 {
  margin-bottom: 135px; }

.pt135 {
  padding-top: 135px; }

.pb135 {
  padding-bottom: 135px; }

.mt140 {
  margin-top: 140px; }

.mb140 {
  margin-bottom: 140px; }

.pt140 {
  padding-top: 140px; }

.pb140 {
  padding-bottom: 140px; }

.mt145 {
  margin-top: 145px; }

.mb145 {
  margin-bottom: 145px; }

.pt145 {
  padding-top: 145px; }

.pb145 {
  padding-bottom: 145px; }

.mt150 {
  margin-top: 150px; }

.mb150 {
  margin-bottom: 150px; }

.pt150 {
  padding-top: 150px; }

.pb150 {
  padding-bottom: 150px; }

.mt155 {
  margin-top: 155px; }

.mb155 {
  margin-bottom: 155px; }

.pt155 {
  padding-top: 155px; }

.pb155 {
  padding-bottom: 155px; }

.mt160 {
  margin-top: 160px; }

.mb160 {
  margin-bottom: 160px; }

.pt160 {
  padding-top: 160px; }

.pb160 {
  padding-bottom: 160px; }

.mt165 {
  margin-top: 165px; }

.mb165 {
  margin-bottom: 165px; }

.pt165 {
  padding-top: 165px; }

.pb165 {
  padding-bottom: 165px; }

.mt170 {
  margin-top: 170px; }

.mb170 {
  margin-bottom: 170px; }

.pt170 {
  padding-top: 170px; }

.pb170 {
  padding-bottom: 170px; }

.mt175 {
  margin-top: 175px; }

.mb175 {
  margin-bottom: 175px; }

.pt175 {
  padding-top: 175px; }

.pb175 {
  padding-bottom: 175px; }

.mt180 {
  margin-top: 180px; }

.mb180 {
  margin-bottom: 180px; }

.pt180 {
  padding-top: 180px; }

.pb180 {
  padding-bottom: 180px; }

.mt185 {
  margin-top: 185px; }

.mb185 {
  margin-bottom: 185px; }

.pt185 {
  padding-top: 185px; }

.pb185 {
  padding-bottom: 185px; }

.mt190 {
  margin-top: 190px; }

.mb190 {
  margin-bottom: 190px; }

.pt190 {
  padding-top: 190px; }

.pb190 {
  padding-bottom: 190px; }

.mt195 {
  margin-top: 195px; }

.mb195 {
  margin-bottom: 195px; }

.pt195 {
  padding-top: 195px; }

.pb195 {
  padding-bottom: 195px; }

.mt200 {
  margin-top: 200px; }

.mb200 {
  margin-bottom: 200px; }

.pt200 {
  padding-top: 200px; }

.pb200 {
  padding-bottom: 200px; }

/*********************
fv
*********************/
.fv {
  position: relative; }
  .fv h1 {
    width: 100%;
    height: 513px;
    background-image: url(../images/fv_main.png);
    background-position: center top;
    background-size: auto; }
  .fv .flow {
    position: absolute;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-duration: 2s;
    animation-duration: 2s; }
  .fvEarth {
    left: calc(50% - 232px);
    bottom: 58px;
    -webkit-animation-name: earth;
    animation-name: earth; }
  .fvDesk {
    left: calc(50% - 167px);
    bottom: 20px;
    -webkit-animation-name: desk;
    animation-name: desk;
    -webkit-animation-delay: .5s;
    animation-delay: .5s; }
  .fvNote {
    left: calc(50% + 92px);
    bottom: 59px;
    -webkit-animation-name: note;
    animation-name: note;
    -webkit-animation-delay: .7s;
    animation-delay: .7s; }
  .fvMemo {
    left: calc(50% + 152px);
    bottom: 28px;
    -webkit-animation-name: memo;
    animation-name: memo;
    -webkit-animation-delay: 1s;
    animation-delay: 1s; }

/*********************
header
*********************/

header {
  background-color: #ffffff;
  padding: .8% 5%;
  max-height: 130px;
}

.header_in {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header_logo {
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  align-items: center;
}

.header_logo img {
  margin: 0 1%;
  max-width: 130px;
  padding: 0 5%;
}


/* キャンペーン */
.campaign {
  background-color: #FFD54B;
  background-image: url(../images/campaign_back.jpg);
  background-size: cover;
  background-position: center;
  padding: 3% 0;
  overflow: hidden;
}
.campaign_tytle {
  text-align: center;
  font-weight: bold;
  font-size: 3.4vw;
  color: #f84d2b;
  line-height: 1;
  padding-bottom: 1%;
  position: relative;
  width: 72%;
  /* min-width: 530px;
  max-width: 680px; */
  margin: 0 auto;
}
.campaign_tytle::before {
  content: "";
  background-image: url(../images/campaign_con02.png);
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  width: 32vw;
  height: 24vw;
  top: 9vh;
  left: -12vw;
  /* transform: rotate(70deg); */
  overflow: hidden;
}
.campaign_tytle::after {
  content: "";
  background-image: url(../images/campaign_con.png);
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  width: 23vw;
  height: 24vw;
  top: 1vh;
  right: -15vw;
  /* transform: rotate(-160deg); */
  overflow: hidden;
}
.campaign_txt {
  text-align: center;
  line-height: 1;
  font-size: 2vw;
  text-shadow:-1px -1px 3px #ffffff;
  position: relative;
  z-index: 100;
}

@media only screen and (max-width: 750px) {
  .campaign {
      padding: 17% 0 6% 0;
      margin-bottom: 14%;
  }
  .campaign_tytle {
      text-align: center;
      font-weight: bold;
      font-size: 7.2vw;
      padding-bottom: 4%;
      z-index: 100;
      min-width: auto;
      width: 96%;
  }
  .campaign_txt {
      font-size: 4.4vw;
  }
  .campaign_tytle::before {
      width: 31vw;
      height: 31vw;
      top: 3vh;
      left: -16vw;
      transform: rotate(21deg);
      opacity: 0.7;
  }
  .campaign_tytle::after {
      width: 28vw;
      height: 28vw;
      top: 2vh;
      right: -12vw;
      transform: rotate(-200deg);
      opacity: 0.7;
  }
}
/*********************
sec02
*********************/
.sec02 .btns {
  width: 960px;
  margin: 0 auto; }
  .sec02 .btns li {
    width: 460px;
    height: 290px;
    padding-top: 164px;
    background-position: center bottom;
    background-repeat: no-repeat; }
    .sec02 .btns li.tsudoBtn {
      background-image: url(../images/sec02_btn_bg_tsudo.png); }
    .sec02 .btns li.ikkatsuBtn {
      background-image: url(../images/sec02_btn_bg_ikkatsu.png); }

.sec02 .tsudo {
  background-image: url(../images/bg_orange.png); }

.sec02 .ikkatsu {
  background-image: url(../images/bg_green.png); }

/*********************
cv
*********************/
.cv {
  background-image: url(../images/bg_orange.png); }
  .cv h2 {
    position: relative;
    top: -40px; }

.cv p {
  text-decoration: underline; }

/*********************
sec03
*********************/
.sec03 .reccomend {
  width: 960px;
  margin: 0 auto; }

/*********************
doc
*********************/
#doc {
  padding-bottom: 60px; }

/*********************
detail
*********************/
.detailCont {
  width: 900px;
  margin: 0 auto; }
  .detailCont dl:not(:last-of-type) {
    margin-bottom: 40px; }
  .detailCont dl dt {
    margin-bottom: 15px;
    font-size: 18px;
    line-height: 1; }

footer {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  height: 120px; }

@-webkit-keyframes earth {
  0% {
    -webkit-transform: none;
    transform: none; }
  100% {
    -webkit-transform: rotate(5deg) translateY(20px);
    transform: rotate(5deg) translateY(20px); } }

@keyframes earth {
  0% {
    -webkit-transform: none;
    transform: none; }
  100% {
    -webkit-transform: rotate(5deg) translateY(20px);
    transform: rotate(5deg) translateY(20px); } }

@-webkit-keyframes desk {
  0% {
    -webkit-transform: none;
    transform: none; }
  100% {
    -webkit-transform: rotate(-5deg) translateY(-20px);
    transform: rotate(-5deg) translateY(-20px); } }

@keyframes desk {
  0% {
    -webkit-transform: none;
    transform: none; }
  100% {
    -webkit-transform: rotate(-5deg) translateY(-20px);
    transform: rotate(-5deg) translateY(-20px); } }

@-webkit-keyframes note {
  0% {
    -webkit-transform: none;
    transform: none; }
  100% {
    -webkit-transform: rotate(-5deg) translateY(10px);
    transform: rotate(-5deg) translateY(10px); } }

@keyframes note {
  0% {
    -webkit-transform: none;
    transform: none; }
  100% {
    -webkit-transform: rotate(-5deg) translateY(10px);
    transform: rotate(-5deg) translateY(10px); } }

@-webkit-keyframes memo {
  0% {
    -webkit-transform: none;
    transform: none; }
  100% {
    -webkit-transform: rotate(5deg) translateY(-10px);
    transform: rotate(5deg) translateY(-10px); } }

@keyframes memo {
  0% {
    -webkit-transform: none;
    transform: none; }
  100% {
    -webkit-transform: rotate(5deg) translateY(-10px);
    transform: rotate(5deg) translateY(-10px); } }