/*************************************************
	全体
**************************************************/
*,
::before,
::after {
  margin: 0;
  padding: 0;
  border: 0;
 	-webkit-box-sizing: border-box; /*Safari*/
		 -moz-box-sizing: border-box; /*Firefox*/
					box-sizing: border-box;
}
html,
body {
  width: 100%;
	height: 100%;
  font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
}
/*
* 1. デバイスの向きを変えた後にユーザーの文字サイズ調整を防ぐ
* 2. remの基準となるフォントサイズ
*/
html {
  font-size: 62.5%; /*2*/
  -ms-text-size-adjust: 100%; /*1*/
  -webkit-text-size-adjust: 100%; /*1*/
}
body {
	line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/*リストスタイルを消去*/
ul,
ol {
	list-style: none;
}
/*デフォルトでcollapse*/
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/**
  * IE9+用に、displayプロパティを定義。
  * 1. Edge, IE, Firefox用、details要素とsummary要素に「display: block;」を定義。
  * 2. IE, Firefox用、main要素に「display: block;」を定義。
 */
article,
aside,
details, /* 1 */
figcaption,
figure,
footer,
header,
main, /* 2 */
menu,
nav,
section,
summary { /* 1 */
  display: block;
}


/*************************************************
	フォーム類のスタイルをリセットする
**************************************************/
input,
textarea,
select {
	-webkit-appearance: none;
		 -moz-appearance: none;
					appearance: none;
	outline: none; /*Chromeのフォーカス時アウトラインを削除*/
	border: none;
	border-radius: 0;
	background: none;
	box-shadow: none;
	resize: none;
}
select { /*Firefoxのセレクト矢印を削除*/
	text-indent: .01px;
	text-overflow: "";
}
select::-ms-expand { /*IEのセレクト装飾を非表示*/
  display: none;
}
textarea {
  overflow: auto;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
  cursor: pointer;
}
[disabled] {
  cursor: default;
}
button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
button:-moz-focusring,
input:-moz-focusring {
  outline: 1px dotted ButtonText;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
[type="search"] {
  -webkit-appearance: textfield;
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}


/*************************************************
	テキスト・イメージ類スタイル
**************************************************/
a {
  background-color: transparent; /*IE10のリンクバックグラウンドカラーを透明にする*/
	text-decoration: none;
}
a:active,
a:hover {
  outline: 0;
}
b,
strong {
  font-weight: inherit;
}
img {
  border-style: none; /*リンク内画像のborderを消去*/
  vertical-align: bottom; /*画像下のスキマを消去*/
}
svg:not(:root) {
  overflow: hidden;
}


/*************************************************
　ヘッダー
**************************************************/
.header {
  display: flex;
  justify-content: space-between;
  z-index: 100;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 2em 5%;
  font-size: 1.4rem;
  transition: .3s ease;
}
.header.is-scroll {
  background: #222;
}
.header_logo {
  height: 34px;
}
.nav-list {
  display: flex;
  align-items: center;
  height: 100%;
  font-size: 1.3rem;
  font-weight: bold;
}
.nav-list li {
  padding: 0 1em;
}
.nav-list a {
  color: #fff;
  transition: .3s ease;
}
.nav-list a:hover {
  color: #2dbbda;
}

@media all and (max-width: 768px) {
  .header {
    justify-content: center;
    padding: 1em 5%;
  }
  .header_logo {
    height: 24px;
  }
  .nav-list {
    display: none;
    position: absolute;
    top: 54px;
    right: 0;
    left: 0;
    width: 100%;
    height: 30%;
    margin: auto;
    border-radius: 8px;
    font-size: 1.6rem;
    text-align: center;
  }
  .nav-list a {
    display: block;
    padding: 1em;
    background: #222;
  }
  .menu-trigger,
  .menu-trigger span {
    display: inline-block;
    transition: all .4s;
    box-sizing: border-box;
  }
  .menu-trigger {
    position: absolute;
    top: 10px;
    right: 20px;
    width: 40px;
    height: 36px;
    background: none;
    border: none;
    appearance: none;
    cursor: pointer;
  }
  .menu-trigger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #fff;
    border-radius: 4px;
  }
  .menu-trigger span:nth-of-type(1) {
    top: 0;
  }
  .menu-trigger span:nth-of-type(2) {
    top: 17px;
  }
  .menu-trigger span:nth-of-type(3) {
    bottom: 0;
  }
  .menu-trigger.is-active span:nth-of-type(1) {
    transform: translateY(17px) rotate(-45deg);
  }
  .menu-trigger.is-active span:nth-of-type(2) {
    opacity: 0;
  }
  .menu-trigger.is-active span:nth-of-type(3) {
    transform: translateY(-15px) rotate(45deg);
  }
}


/*************************************************
　ファーストビュー
**************************************************/
.fv {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  height: 70vh;
  background-image: url(../img/fv_bg.jpg);
  background-size: cover;
}
.fv-catch {
  width: 25%;
  max-width: 300px;
}
.fv-catch img {
  width: 100%;
}
.fv-items {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30%;
}
.slick-list {
  height: 100%;
}
.slick-track {
  height: 100%;
}
.slick-slide img {
  width: auto;
  height: 100%;
}
.fv-items li {
  display: flex !important;
  justify-content: center;
  align-items: center;
  width: 17%;
}
.fv-items li:nth-child(7) img {
  position: relative;
  top: -20px;
  height: 140%;
}
.fadeUp{
  animation-name:fadeUpAnime;
  animation-duration: .7s;
  animation-fill-mode:forwards;
  opacity:0;
}
@keyframes fadeUpAnime{
  from {
    opacity: 0;
    transform: translateY(50px);
  }

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

@media all and (max-width: 768px) {
  .fv {
    height: 90vh;
  }
  .fv-catch {
    width: 70%;
  }
  .slick-slide img {
    width: 100%;
    height: auto;
  }
  .fv-items li:nth-child(7) img {
    position: static;
    height: auto;
  }
}


/*************************************************
　セクション全般
**************************************************/
.sec-ttl {
  font-size: 3rem;
  font-weight: normal;
  text-align: center;
  letter-spacing: .1em;
}
.sec-ttl::before {
  display: block;
  margin-bottom: 1.5em;
  color: #2dbbda;
  font-size: 1.4rem;
  content: attr(data-sub);
}
.sec-ttl + p {
  margin-top: 4rem;
  font-size: 1.4rem;
  text-align: center;
  line-height: 1.6;
}

/*************************************************
　私たちについて
**************************************************/
.sec1 {
  padding: 80px 0 80px;
  background: linear-gradient(100deg, #E3E3E3 -0.25%, #F3F3F3 100%);
}
.sec1_inner {
  padding: 0 80px;
}
.service_list {

}
.service_list_item {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  margin-top: 2em;
}
.service_img {
  z-index: 10;
  position: relative;
  width: 50%;
  margin: 5em -5em 0;
}
.service_info {
  z-index: 5;
  position: relative;
  width: 50%;
  background: #fff;
  box-shadow: 0px 8px 44px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 5em;
  text-align: center;
}
.service_name {
  font-size: 3rem;
}
.service_name::after {
  display: block;
  margin: 1em 0 2em;
  color: #2dbbda;
  font-size: 1.2rem;
  font-size: 1.4rem;
  content: attr(data-sub);
}
.service_text {
  margin-bottom: 3em;
  font-size: 1.4rem;
  line-height: 1.8;
}
.service_btn {
  padding: 1em 2em;
  background: #222;
  border-radius: 8px;
  color: #fff;
  font-size: 1.6rem;
  font-weight: bold;
  box-shadow: 4px 8px 32px rgba(0, 0, 0, 0.3);
  transition: .3s ease;
}
.service_btn:hover {
  background: #2dbbda;
}
@media all and (max-width: 768px) {
  .sec1 {
    padding: 80px 0;
  }
  .sec1_inner {
    padding: 0 5%;
  }
  .service_list_item {
    flex-wrap: wrap;
  }
  .service_list_item:nth-child(even) {
    flex-direction: column-reverse;
  }
  .service_img {
    width: 90%;
    margin: 0 0 -15%;
  }
  .service_info {
    width: 95%;
    padding: 5em 3em;
  }
  .service_name {
    font-size: 2.4rem;
  }
  .service_name::after {
    font-size: 1.2rem;
  }
}

/* メッセージ */
.message {
  margin: 8em 0;
  padding-left: 80px;
  text-align: center;
}
.message_inner {
  position: relative;
  margin-bottom: 3em;
  padding: 5em 6em 2em;
  background: linear-gradient(100deg, #222 5%, #505050 100%);
  border-radius: 8px 0px 0px 8px;
  color: #fff;
  font-size: 1.4rem;
  text-align: left;
}
.message_ttl {
  font-size: 3.4rem;
  font-weight: normal;
  letter-spacing: .2em;
}
.message_head {
  margin: 2em 0 1em;
  font-size: 2rem;
}
.message_text {
  margin-bottom: 1em;
  width: 40%;
  line-height: 2;
}
.message_signature {
  width: 40%;
  text-align: right;
}
.message_position {
  font-size: 1.2rem;
}
.message_name {
  display: block;
  margin: .5em 0;
  font-size: 1.8rem;
}
.message_img {
  position: absolute;
  right: 2%;
  bottom: -20%;
  width: 55%;
}
.message_btn {
  z-index: 10;
  position: relative;
  padding: 1em 2em;
  background: #222;
  border-radius: 8px;
  color: #fff;
  font-size: 1.6rem;
  font-weight: bold;
  box-shadow: 4px 8px 32px rgba(0, 0, 0, 0.3);
  transition: .3s ease;
}
.message_btn:hover {
  background: #2dbbda;
}
.message_btn img {
  position: absolute;
  top: 0;
  left: -1.5em;
  bottom: 0;
  height: 3em;
  margin: auto;
}

@media all and (max-width: 1024px) and (min-width: 768px) {
  .message_img {
    width: 50%;
  }
  .message_text,
  .message_signature {
    width: 45%;
  }
}
@media all and (max-width: 768px) {
  .message {
    padding: 0 5%;
  }
  .message_inner {
    margin: 0;
    padding: 5em 2em 2em;
    border-radius: 8px;
  }
  .message_ttl {
    font-size: 3rem;
  }
  .message_text,
  .message_signature {
    width: 100%;
  }
  .message_signature {
    margin-bottom: 2em;
  }
  .message_img {
    position: static;
    bottom: 0;
    width: 100%;
  }
}

/*************************************************
　査定士
**************************************************/
.sec2 {
  padding: 80px 80px 0;
}
.member_list {
  display: flex;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.member_list li {
  width: 33.33%;
  padding: 3em;
}
.member_img {
  width: 100%;
}
.member_position {
  font-size: 1.4rem;
  font-weight: bold;
  text-align: center;
}
.member_name {
  margin: .5em 0 1em;
  font-size: 1.8rem;
  font-weight: bold;
  text-align: center;
}
.member_text {
  font-size: 1.4rem;
  line-height: 1.8;
}

@media all and (max-width: 768px) {
  .sec2 {
    padding: 80px 5% 0;
  }
  .member_list {
    flex-wrap: wrap;
  }
  .member_list li {
    width: 100%;
    padding: 0 3em 3em;
  }
}

/* 安心・安全 */
.safety {
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
  position: relative;
  width: 95%;
  margin: 4em auto -10%;
  padding: 4em;
  background: linear-gradient(100.26deg, #222222 0%, #3E3E3E 100%);
  border-radius: 8px;
  color: #fff;
}
.safety .sec-ttl {
  font-size: 2.4rem;
  font-weight: bold;
  text-align: left;
}
.safety .sec-ttl::before {
  font-size: 1rem;
}
.safety_list {
  display: flex;
  width: 60%;
}
.safety_list li {
  width: 33.33%;
  padding: 0 1em;
  text-align: center;
}
.safety_icon {
  width: 140px;
}
.safety_ttl {
  margin-bottom: .5em;
  font-size: 1.8rem;
  font-weight: bold;
}
.safety_text {
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1.5;
}

@media all and (max-width: 1024px) and (min-width: 768px) {
  .safety {
    flex-wrap: wrap;
  }
  .safety_list {
    width: 100%;
    margin-top: 4em;
  }
}
@media all and (max-width: 768px) {
  .safety {
    flex-wrap: wrap;
    padding: 40px 3em;
  }
  .safety .sec-ttl {
    text-align: center;
    line-height: 1.2;
  }
  .safety_list {
    flex-wrap: wrap;
    width: 100%;
  }
  .safety_list li {
    width: 100%;
    margin-top: 3em;
  }
}


/*************************************************
　買取の流れ
**************************************************/
.sec3 {
  padding: 15% 80px 10%;
  background: linear-gradient(100deg, #E3E3E3 -0.25%, #F3F3F3 100%);
  border-radius: 0px;
}
.flow_list {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-wrap: wrap;
}
.flow_item {
  width: 40%;
  margin: 4em 2em 0;
  padding: 3em;
  background: #3D3D3D;
  box-shadow: 0px 8px 44px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  color: #fff;
}
.flow_item:nth-child(even) {
  margin-top: 6em;
}
.flow_ttl {
  display: flex;
  align-items: center;
  font-size: 2rem;
  font-weight: bold;
}
.flow_number {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 1.6em;
  height: 1.6em;
  margin-right: .5em;
  color: #3D3D3D;
  font-size: 2.4rem;
  font-weight: bold;
  text-align: center;
}
.flow_number::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 10em;
  content: "";
}
.flow_number span {
  position: relative;
  z-index: 10;
  font-size: 2rem;
}
.flow_text {
  margin-top: 1em;
  font-size: 1.4rem;
  line-height: 1.8;
}

@media all and (max-width: 768px) {
  .sec3 {
    padding: 25% 5% 10%;
  }
  .flow_list {
    margin-top: 4em;
  }
  .flow_item {
    width: 100%;
  }
  .flow_item,
  .flow_item:nth-child(even) {
    margin-top: 1em;
  }
}


/*************************************************
　お客様の声
**************************************************/
.sec4 {
  width: 90%;
  margin: 120px auto;
  padding: 80px;
  background: #222;
  border-radius: 8px;
}
.sec4 .sec-ttl {
  color: #fff;
}
.voice_youtube {
  display: block;
  width: 60%;
  margin: 4em auto;
}
.voice_list {
  width: 70%;
  margin: 0 auto;
  color: #fff;
}
.voice_item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 3em 0;
}
.voice_icon {
  width: 60px;
}
.voice_detail {
  width: 90%;
  padding: 3em;
  border: 1px solid #575757;
  border-radius: 8px;
}
.voice_ttl {
  margin-bottom: 1em;
  font-size: 2rem;
}
.voice_text {
  font-size: 1.4rem;
  line-height: 1.8;
}

@media all and (max-width: 768px) {
  .sec4 {
    margin: 120px auto;
    padding: 50px 5%;
  }
  .voice_youtube {
    width: 100%;
  }
  .voice_list {
    width: 100%;
  }
  .voice_item {
    justify-content: center;
    flex-wrap: wrap;
  }
  .voice_item:nth-child(even) {
    flex-direction: column-reverse;
  }
  .voice_icon {
    margin-bottom: 1em;
  }
  .voice_detail {
    width: 100%;
  }
  .voice_ttl {
    line-height: 1.4;
  }
}

/*************************************************
　フッター
**************************************************/
.footer {
  position: relative;
  margin-top: 200px;
  padding: 80px 10% 20px;
  background: linear-gradient(100.26deg, #222222 0%, #3E3E3E 100%), #EEE;
}
.footer .sec-ttl {
  font-size: 2.4rem;
  font-weight: bold;
  text-align: left;
  color: #fff;
}
.footer .sec-ttl::before {
  font-size: 1rem;
}
.company_info {
  display: flex;
  flex-wrap: wrap;
  width: 40%;
  margin-top: 3em;
  color: #fff;
  font-size: 1.6rem;
  font-weight: bold;
}
.company_info dt {
  width: 15%;
  padding: .5em 0;
  border-bottom: 1px solid #787878;
  text-align: right;
  line-height: 2;
}
.company_info dd {
  width: 85%;
  padding: .5em 1em;
  border-bottom: 1px solid #787878;
  font-size: 1.4rem;
  line-height: 2;
}
.company_img {
  position: absolute;
  top: -10%;
  right: 0;
  width: 50%;
}
.company_img img {
  position: absolute;
}
.company_img1 {
  z-index: 1;
  top: -100px;
  width: 250px;
}
.company_img2 {
  top: 100px;
  left: 50px;
  width: 80%;
}
.footer small {
  display: block;
  margin-top: 2em;
  padding: 2em 5%;
  color: #ccc;
  font-size: 1em;
  text-align: center;
}

@media all and (max-width: 768px) {
  .company_info {
    width: 100%;
  }
  .company_info dt {
    width: 20%;
    font-size: 1.4rem;
  }
  .company_info dd {
    width: 80%;
    font-size: 1.3rem;
  }
  .company_img1 {
    top: -50px;
    left: -20px;
    width: 60%;
  }
  .company_img2 {
    width: 100%;
    left: 0;
  }
}