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

/* main visual
*************************************************************************************************************************/
.mv__wrap{ background: linear-gradient(to bottom, #edf3ef 0%,#d9dfdb 100%); width: calc(100% - 120px); height: 250px; margin: 0 0 0 120px; position: relative;}
.mv__wrap:nth-of-type(2){ margin-left: 0;}

.mv__ph{ position: relative; height: 100%; overflow: hidden;}
.mv__ph span{ position: absolute; left: 50%;}
.mv__ph--staff01-01{ width: 48.6275%; margin: 0 0 0 -15%; top: 25px;}
.mv__ph--staff01-02{ width: 43.1373%; margin: 0 0 0 -35%; top: 30px;}
.mv__ph--staff02{ width: 43.9216%; margin: 0 0 0 -15%; top: 30px;}
.mv__ph--staff03{ width: 59.2157%; margin: 0 0 0-22%; top: 30px;}

.mv__box{ position: absolute; top: 50%; left: -90px; transform: translateY(-50%); z-index: 2;}
.mv__wrap:nth-of-type(2) .mv__box{ position: absolute; top: 50%; left: auto; right: -60px; transform: translateY(-50%);}

.mv__ttl{ font-size: 0;}
.mv__ttl span{ display: inline-block; background: #000; margin: 6px 0 0; padding: 4px 5px 6px; font-weight: 700; font-size: 16px; line-height: 1; color: #fff; text-align: left; letter-spacing: .05em;}
.mv__shop{ margin: 17px 0 0; font-size: 11px; line-height: 1; white-space: nowrap;}
.mv__name{ margin: 17px 0 0; font-weight: 700; font-size: 14px; line-height: 1; color: #0fa044; white-space: nowrap; letter-spacing: .1em;}
.mv__name span{ display: block; margin: 10px 0 0 0; font-size: 11px; letter-spacing: .05em;}


@media print, screen and (min-width: 681px){

  .mv__wrap{ width: calc(100% - 200px); height: 400px; margin-left: 200px;}
  .mv__wrap--layout02{ margin-left: 0;}
  
  .mv__box{ left: -140px;}
  .mv__wrap:nth-of-type(2) .mv__box{ right: -100px;}
  
  
  .mv__ttl span{ margin-top: 15px; padding: 7px 10px 9px; font-size: 30px;}
  .mv__shop{ margin-top: 30px; font-size: 16px;}
  .mv__name{ margin-top: 30px; font-weight: 700; font-size: 20px;}
  .mv__name span{ margin-top: 15px; font-size: 16px;}
}


@media print, screen and (min-width: 1100px){

  .mv{ height: 600px;}
  .mv__wrap{ width: calc(100% - 400px); height: 100%; margin-left: 400px;}
  
  .mv__ph--staff01-01{ width: 175px; margin-left: 0; top: 55px; left: auto!important; right: 20px;}
  .mv__ph--staff01-02{ width: 176px; margin-left: 0; top: 95px; left: 14px!important;}
  .mv__ph--staff02{ width: 245px; margin-left: 0; top: 46px; transform: translateX(-50%);}
  .mv__ph--staff03{ width: 334px; margin-left: 0; top: 47px; transform: translateX(-50%);}
  
  .mv__box{ left: -200px;}
  .mv__wrap:nth-of-type(2) .mv__box{ left: 0;}
  
  .mv__ttl span{ font-size: 35px;}
  .mv__shop{ margin-top: 40px;}
  
  .mv-multi{ display: flex; justify-content: center; background: linear-gradient(to bottom, #edf3ef 0%,#d9dfdb 100%);}
  .mv-multi .mv__wrap{ width: 500px; margin-left: 0;}
  .mv-multi .mv__wrap:nth-of-type(1) .mv__box{ left: -50px;}
  .mv-multi .mv__wrap:nth-of-type(2) .mv__box{ left: 230px;}
}



/* interview
*************************************************************************************************************************/
.int{ background: #ecf1f1; margin: -120px 0 0; padding: 160px 20px 80px;}
.int__wrap{ background: #fff; padding: 20px 20px 30px;}
.int__block:first-of-type .int__catch{ margin-top: 0;}
.int__catch{ font-size: 0; margin: 55px 0 0;}
.int__catch span{ display: inline-block; background: #0fa044; margin: 6px 0 0; padding: 4px 5px 6px; font-weight: 700; font-size: 15px; line-height: 1; color: #fff; text-align: left; letter-spacing: .05em;}
.int__q{ margin: 30px 0 0;  font-weight: 700; line-height: 1.57; color: #0fa044;}
.int__q::before{ display: inline-block; content: "─"; width: calc(2em + 5px); transform: scaleX(2); transform-origin: left center;}
.int__a{ margin: 25px 0 0;}
.int__name{ margin: 0 1em 0 0; color: #0fa044;}

.int__ph{ width: calc(100% + 40px); margin: 25px 0 0;}
.int__block--trpl .int__ph{ margin-left: -40px;}

@media print, screen and (min-width: 681px){
  .int{  margin-top: -176px; padding: 230px 50px 80px;}
  .int__wrap{ padding: 50px 50px 60px;}
  .int__catch{ margin-top: 90px;}
  .int__catch span{ margin-top: 10px; padding: 6px 8px 8px; font-size: 24px;}
  .int__q{ margin-top: 45px; font-size: 18px;}
  .int__a{ margin-top: 40px; line-height: 2.4;}

  .int__ph{ width: calc(100% + 100px); margin-top: 40px;}
  .int__block--trpl .int__ph{ margin-left: -100px;}
}

@media print, screen and (min-width: 800px){
  .int__ph{  height: 466px;}
}

@media print, screen and (min-width: 1100px){
  .int{  margin-top: 0; padding: 150px 0 80px;}
  .int__wrap{ width: 1000px; margin: 0 auto; padding: 60px 100px 220px;}
  .int__box{ position: relative; margin: 60px 0 0;}
  .int__catch{ margin-top: 110px;}

  .int__ph{ width: 480px; height: 320px; margin-top: 0; position: absolute; top: 11px;}

  .int__block--tlpr .int__box,
  .int__block--trpl .int__box{ min-height: 331px;}

  .int__block--tlpr .int__ph{ right: -200px;}
  .int__block--trpl .int__ph{ margin-left: 0; left: -200px;}
  .int__block--tlpr .int__box{ padding: 0 340px 0 0;}
  .int__block--trpl .int__box{ padding: 0 0 0 340px;}
  .int__block--trpl .int__catch{ width: 900px; padding: 0 0 0 340px;}
}



/* message
*************************************************************************************************************************/
.msg{ margin: -70px 0 0; padding: 0 40px;}
.msg__ph{ height: 205px; position: relative; overflow: hidden;}
.msg__ph span{ display: block; min-width: 100px; max-width: 180px; position: absolute; top: 0; left: 50%; transform: translateX(-50%);}
.msg__ph--staff01-01{ width: 34.2373%;}
.msg__ph--staff01-02{ width: 37.6271%;}
.msg__ph--staff02{ width: 31.5254%;}
.msg__ph--staff03{ width: 33.5593%;}

.msg__box{ background: #0fa044; padding: 40px 30px 30px; position: relative; border-radius: 10px;}
.msg__ttl{ display: flex; justify-content: center; align-items: center; background: #000; width: 160px; height: 30px; position: absolute; top: -5px; left: -20px; font-weight: 700; font-size: 14px; line-height: 1; color: #fff; transform: rotate(-5deg); transform-origin: left top;}
.msg__txt{ font-size: 13px; line-height: 1.7; color: #fff;}

.msg-multi .msg__wrap:nth-of-type(2){ margin-top: 30px;}


@media print, screen and (min-width: 681px){
  .msg{ padding: 0;}
  .msg__wrap{ display: flex; flex-direction: row-reverse; justify-content: center; align-items: center; width: 530px; margin: 0 auto;}
  .msg__ph{ width: 240px; height: auto; overflow: auto;}
  .msg__ph span{ margin: 0 auto;  position: static; transform: none;}
  .msg__ph--staff01-01{ width: 115px;}
  .msg__ph--staff01-02{ width: 122px;}
  .msg__ph--staff02{ width: 116px;}
  .msg__ph--staff03{ width: 124px;}

  .msg__box{ width: 397px; padding: 50px;}
  .msg__ttl{ width: 207px; height: 38px; top: -9px; left: -30px; font-size: 18px;}
  .msg__txt{ font-size: 14px;}

  .msg-multi .msg__wrap:nth-of-type(2){ flex-direction: row;  margin-top: 50px;}
  .msg-multi .msg__box{ width: 347px;}
}


@media print, screen and (min-width: 1100px){
  .msg{ height: 250px; margin-top: 0;}
  .msg__wrap{ display: flex; flex-direction: row-reverse; justify-content: center; align-items: center; width: 530px; transform: translateY(-280px);}
  
  .msg__ph .msg__ph--staff01-02{ margin-top: 42px;}

  .msg-multi{ display: flex; justify-content: center; align-items: flex-start;}
  .msg-multi .msg__wrap{ width: 550px; margin: 0!important;}
}



/* message
*************************************************************************************************************************/
.flow{ margin: 60px 0 0;}
.flow__ttl{ display: flex; flex-direction: column; justify-content: center; align-items: center; background: #ecf1f1; height: 100px;}
.flow__ttl img{ width: 157px}
.flow__ttl span{ margin: 12px 0 0; font-weight: 500; font-size: 13px; line-height: 1;}

.flow-list{ max-width: 540px; margin: 30px auto 0; padding: 15px 20px 0; overflow: hidden;}
.flow-list__item{ margin: 40px 0 0; padding: 0 0 0 72px; position: relative;}
.flow-list__item:first-child{ margin-top: 0;}
.flow-list__item::before{ content: ""; width: 0; height: 1000%; border-left: 1px solid #ccc; position: absolute; bottom: 100%; left: 30px; z-index: -1;}

.flow-step__ttl{ position: relative; font-weight: 700; font-size: 15px;}
.flow-step__time{ display: flex; justify-content: center; align-items: center; background: #9fb3b3; width: 60px; height: 60px; position: absolute; top: 50%; left: -72px; border-radius: 50%; font: 700 13px/1 'Roboto', sans-serif; color: #fff; transform: translateY(-50%);}

.flow-step__ph{ margin: 15px 0 0;}
.flow-step__txt{ margin: 15px 0 0; font-size: 13px; line-height: 1.7;}


@media print, screen and (min-width: 681px){
  .flow{ margin-top: 100px;}
  .flow__ttl{ height: 190px;}
  .flow__ttl img{ width: 280px}
  .flow__ttl span{ margin-top: 18px; font-size: 18px;}

  .flow-list{ margin-top: 60px; padding: 29px 0 0;}
  .flow-list__item{ margin-top: 50px; padding-left: 110px;}
  .flow-list__item::before{ left: 45px;}
  
  .flow-step__ttl{ font-size: 16px;}
  .flow-step__time{ width: 90px; height: 90px; left: -110px; font-size: 18px;}
  .flow-step__txt{ font-size: 14px;}
}


@media print, screen and (min-width: 950px){
  .flow{ margin-top: 0;}
  .flow-list{ width: 850px; max-width: none; padding-bottom: 150px;}
  .flow-list__item--r{ padding: 0 0 0 490px;}
  .flow-list__item--l{ padding: 0 490px 0 0;}
  .flow-list__item::before{ left: 50%;}
  
  .flow-step__ttl{ font-size: 16px;}
  .flow-list__item--l .flow-step__time{ left: auto; right: -110px;}
  .flow-list__item--l .flow-step__ttl{ text-align: right;}
  .flow-step__txt{ font-size: 14px;}
  
  .flow-list__item--staff01-02{ margin-top: -15px;}
  .flow-list__item--staff01-03{ margin-top: -90px;}
  .flow-list__item--staff01-04{ margin-top: -130px;}
  .flow-list__item--staff01-05{ margin-top: 70px;}
  .flow-list__item--staff01-06{ margin-top: -40px;}
  .flow-list__item--staff01-07{ margin-top: -150px;}
  .flow-list__item--staff02-02{ margin-top: -200px;}
  .flow-list__item--staff02-03{ margin-top: -60px;}
  .flow-list__item--staff02-04{ margin-top: 80px;}
  .flow-list__item--staff02-05{ margin-top: 10px;}
  .flow-list__item--staff02-06{ margin-top: -170px;}
  .flow-list__item--staff03-02{ margin-top: -220px;}
  .flow-list__item--staff03-03{ margin-top: -90px;}
  .flow-list__item--staff03-04{ margin-top: 80px;}
  .flow-list__item--staff03-05{ margin-top: -110px;}
  .flow-list__item--staff03-06{ margin-top: -20px;}
}