@charset "UTF-8";

/* ===================================
	File Name   : etc.css
	Description : ETC Page Layout CSS
	Editor      : Bface Hayakawa
	Last Editor : Bface Shigyo
	
	Update Description :
	[2022/12/28] Sct Page作成
	[2021/02/08] Press Page作成
	[2020/11/02] Recovery Plan Page作成
	[2020/04/28] 新規作成

====================================== */

/*========== Style Contents ==========

	1. Individual Redefinition
	2. Information Detail Page
	3. Form Page
	4. Photogallery Page
	5. Download Page
	6. FAQ Page
	7. Recovery Plan Page
	8. Appointment Page
	9. Press Page
	10. Sct Page
	
====================================== */



/*===== ■1. Individual Redefinition =====*/
.iframe_responsive {
  position: relative;
  width: 100%;
  margin-bottom: 10px;
  padding: calc(315 / 560 * 100%) 0 0;
}
.iframe_responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/*===== ■2. Information Detail Page =====*/

#information_detail .inner div.flex2 div {
  margin-bottom: 50px;
}

#information_detail .inner > p { margin: 0 20px;}

#information_detail .inner > p em {
  display: block;
  margin: 30px 0;
  color: #d71518;
  font-weight: bold;
  font-size: 2.0rem;
  line-height: 1.4;
  text-align: center;
}
#information_detail .inner > p:not(:last-child) { 
  margin: 0 0 30px;
}
#information_detail .inner > p + p.notice { margin: -20px 20px 30px;} 

#information_detail .inner > p.sign {
  text-align: right;
  font-size: 1.8rem;
}

#information_detail .inner p.company_read {
  margin-bottom: 20px;
}

#information_detail .inner p.company_name span,
#information_detail .inner p.company_name > a {
  display: block;
}

#information_detail .inner p.mr_expo {
  margin-bottom: 40px;
}

 #information_detail .inner span.mr_expo_li {
  margin-bottom: 15px;
}


@media (max-width: 768px) {
  #information_detail .inner div.flex2 div {
    margin-bottom: 8vw;
  }
  
  #information_detail .inner > p { margin: 0;}
  
  #information_detail .inner > p em {
    margin: 4vw 0;
    font-size: 1.4rem;
    line-height: 1.6;
  }
  
  #information_detail .inner > p:not(:last-child) { margin-bottom: 4vw;}
  #information_detail .inner > p + p.notice { margin: -2.67vw 0 4vw;} 
  
  #information_detail .inner > p.sign { font-size: 1.6rem;}
  
  #information_detail .inner p.mr_expo {
    margin-bottom: 8vw;
  }

   #information_detail .inner span.mr_expo_li {
    margin-bottom: 2.67vw;
  }
}



/*===== ■3. Form Page =====*/
@media (max-width: 768px) {
  #form_application .flex2.single div:not(:last-child) {margin-bottom: 8vw;}
}



/*===== ■4. Photogallery Page =====*/
#etc_photogallery #visual p > br {display: none;}

#photogallery_photo p {
  margin-bottom: 30px;
  text-align: center;
}

#photogallery_photo .inner > a {margin-bottom: 30px;}

#photogallery_photo p br {display: none;}

#photogallery_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 10px;
}

#photogallery_list::after {
  display: block;
  width: calc(50% - 10px);
  content:'';
}

#photogallery_list li {
  position: relative;
  width: calc(25% - 10px);
  margin-bottom: 10px;
}

#photogallery_list li a::before {
  display: inline-block;
  position: absolute;
  bottom: 5px;
  right: 5px;
  width: 20px;
  height: 15px;
  background: url("../img/etc/img-open.svg") no-repeat center / contain;
  content:"";
  z-index: 1;
}

#photogallery_list li a::after {
  position: absolute;
  bottom: 0;
  right: 0;
  border-left: 50px solid transparent;
  border-bottom: 50px solid #8a0e10;
  content:"";
}

#photogallery_list li img,
#photogallery_list li canvas{
  width: 100%;
  vertical-align: bottom;
  filter: brightness(80%) sepia(90%);
  transition: filter .25s;
}

#photogallery_list li a:hover img {
  opacity: 1;
  filter: brightness(100%) sepia(0%);
}


@media (max-width: 768px) {
  #etc_photogallery #visual p > br {display: block;}
  
  #photogallery_movie section {
    width: 100%;
    margin-bottom: 5.34vw;
  }
  #photogallery_movie section:last-child {
    margin-bottom: 0;
  }
  
  #photogallery_photo p br {display: block;}
  
  #photogallery_photo .inner > a {display: none;}
  
  #photogallery_list {margin-bottom: 0;}
  
  #photogallery_list li {
    width: calc(50% - 1.34vw);
    margin-bottom: 2.67vw;
  }
  
  #photogallery_list li a::before {
    bottom: 1.34vw;
    right: 1.34vw;
    width: 4vw;
    height: 2.94vw;
  }
  
  #photogallery_list li a::after {
    border-left: 10.67vw solid transparent;
    border-bottom: 10.67vw solid #8a0e10;
  }
  
  #photogallery_list li a:hover img {
    filter: none;
  }

  #photogallery_list li img {
    filter: brightness(100%) sepia(0%);
  }
}



/*===== ■5. Download Page =====*/
#download_condition .inner > p {
  margin-bottom: 30px;
  font-weight: bold;
  text-align: center;
}
  
#download_condition li > em {
  display: inline-block;
  position: relative;
  padding-left: 12px;
  font-weight: bold;
  line-height: 1.4;
}

#download_condition li:not(:last-child) > em { margin-bottom: 10px;}

#download_condition li > em:before {
  position: absolute;
  top: 8px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #333;
  transform: translateY(-50%);
  content: "";
}

#download_condition ul ul {
  margin: 0 12px 20px;
}

#download_condition ul ul li {
  position: relative;
  padding-left: 1.4rem;
  line-height: 1.4;
  font-size: 1.6rem;
}

#download_condition ul ul li:not(:last-child) {
  margin-bottom: 5px;
}

#download_condition ul ul li:before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 1rem;
  height: 1px;
  background: #333;
  transform: translateY(-50%);
  content: "";
}

#download_logo,
#download_logo_sec {text-align: center;}

#download_logo > figure,
#download_logo_sec > figure {
  width: 50%;
  margin: 0 auto 25px;
}
#download_logo > figure img,
#download_logo_sec > figure img
 { border: 1px solid #ebebeb;}

#download_banner > figure:not(:last-child),
#download_banner_sec > figure:not(:last-child) {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
}

#download_banner > figure span,
#download_banner_sec > figure span { text-align: center;}

#download_banner img,
#download_banner_sec img {
  border: 1px solid #ebebeb;
}
#download_banner .size_300x250 span img,
#download_banner_sec .size_300x250 span img {
  max-width: 150px;
}

#download_banner .size_160x600 span img,
#download_banner_sec .size_160x600 span img {
  max-width: 80px;
}

#download_banner .size_468x60 span img,
#download_banner_sec .size_468x60 span img
 { max-width: 234px;}

#download_banner input,
#download_banner_sec input {
  width: 100%;
  padding: 5px;
  background: #fff;
  border: 1px solid #ddd;
}

#download_banner .flex2,
#download_banner_sec .flex2 {align-items: flex-start;}


@media (max-width: 768px) {
  #download_condition .inner > p { margin-bottom: 8vw;}

  #download_condition li > em { padding-left: 2.67vw;}

  #download_condition li:not(:last-child) > em { margin-bottom: 2.67vw;}

  #download_condition li > em:before {
    top: 2.67vw;
    width: 1.6vw;
    height: 1.6vw;
  }

  #download_condition ul ul { margin: 0 0 5.34vw 2.67vw;}
  
  #download_condition ul ul li { font-size: 1.2rem;}
  
  #download_condition ul ul li:not(:last-child) { margin-bottom: 1.34vw;}
  
  #download_condition ul ul li:before {top: 2.4vw;}
    
  #download_logo,
  #download_logo_sec {margin-bottom: 8vw;}
  
  #download_logo > figure,
  #download_logo_sec > figure {width: 100%;}
  
  #download_logo ul > li:not(:last-child),
  #download_logo_sec ul > li:not(:last-child) {margin-bottom: 1.34vw;} 
  
  #download_banner img,
  #download_banner_sec img {margin: 0 auto 2.67vw;}
  
  #download_banner input,
  #download_banner_sec input { margin-top: 2.67vw;}
}



/*===== ■6. FAQ Page =====*/
#faq section > .inner {
  padding-bottom: 40px;
}

#faq section dd div .notice { margin-top: 10px;}

#faq section dl:not(:last-of-type){
  margin-bottom: 15px;
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
}

#faq section dt {
  display: flex;
  align-items: baseline;
  color: #666;
}

#faq section dd {
  display: flex;
  align-items: baseline;
}

#faq section dl i {
  width: 4.5rem;
  font-weight: bold;
  font-size: 4rem;
  text-align: center;
}

#faq section dd i { color: #d71518;}

#faq section dd div,
#faq section p.faq-read,
#faq section dd div *:not(.notice) { font-size: 1.8rem;}

#faq section dt span,
#faq section dd div { flex: 1;}

#faq section dd div em {
  color: #d71518;
  font-weight: bold;
}

#faq section dd div ul {
  padding-right: 40px;
}

#faq section dd div ul li {
  margin-bottom: 15px;
}

#faq section#faq_other p {
  margin-bottom: 15px;
}


@media (max-width: 768px) {
  #faq section > .inner {
    padding: 0 2.67vw 8vw;
  }
  
  #faq section dl:not(:last-of-type){
    margin-bottom: 4vw;
    padding-bottom: 5.34vw;
  }

  #faq section dl i {
    width: 3.5rem;
    font-size: 3rem;
  }

  #faq section dd div,
  #faq section dd div *:not(.notice) { font-size: 1.4rem;}

  #faq section dd div .notice { margin-top: 2.67vw;}
  
  #faq_foodexnavi a:first-child {
    margin-bottom: 4vw;
  }
  
  #faq_fair .flex2 {
    flex-direction: column;
  }
  
  #faq section dd div ul {
    padding-right: 0;
  }
  
  #faq section dd div ul li {
    margin-bottom: 4vw;
  }
  
  #faq section#faq_other p {
    margin-bottom: 4vw;
  }
  
  
}





/*===== ■7. Recovery Plan Page =====*/

#recovery_plan .label {
  position: relative;
  margin-bottom: 30px;
  padding: 10px;
  background: #d71518;
  border-radius: 5px;
  text-align: center;
  color:#fff;
}

#recovery_plan .font_bold{
  font-weight: bold;
}

#recovery_plan .label.black {background: #333;}

#recovery_plan .label span {
  position: absolute;
  top: 50%;
  width: 50px;
  height: 50px;
  left: 10px;
  transform: translateY(-50%);
  background: #fff;
  border-radius: 50%;
  border: 2px solid #333;
  font-size: 4rem;
  line-height: 4.7rem;
  color: #333;
}

#recovery_plan .flex2{
  margin-bottom: 40px;
}

#recovery_plan .flex2 > p:first-child {
  width: 100%;
  margin-bottom: 30px;
}

#recovery_plan p {
  margin-bottom: 10px;
  text-align: center;
}

#recovery_plan p:not(:first-of-type) {
  font-weight: bold;
}

#recovery_plan .arrow {
  position: relative;
  margin-bottom: 30px;
  text-align: center;
  font-weight: bold;
}

#recovery_plan .arrow:before {
  position: absolute;
  left: 50%;
  bottom: 35px;
  width: 60px;
  height: 20px;
  background: linear-gradient(to top right, rgba(255,255,255,0) 50%, #d71518 50.01%) no-repeat top left / 50% 100%, linear-gradient(to top left, rgba(255,255,255,0) 50%, #d71518 50.01%) no-repeat top right / 50% 100%;
  transform: translateX(-50%);
  content: ""; 
}

#recovery_plan .plus {
  position: relative;
  align-items: center;
}

#recovery_plan .plus:before,
#recovery_plan .plus:after {
  position: absolute;
  display:block;
  width: 40px;
  height: 5px;
  background: #d71518;
  content:"";	
}

#recovery_plan .plus:before {
  left: calc(50% - 20px);
  top: calc(50% + 20px);
  transform:rotate(90deg) translateX(-50%);
}

#recovery_plan .plus:after {
  left: 50%;
  top: 50%;
  transform:rotate(0deg) translateX(-50%);
}

#recovery_plan .list_dots {
  width: 100%;
  margin: 0 auto;
}

#recovery_plan .list_dots > li::before {
    top: 8px;
}
  
#recovery_plan .inner > div:last-child .label {margin-bottom: 30px;}

#recovery_plan figure {
  width: 50%;
  margin: 0 auto 0;
  padding: 20px;
  text-align: center;
} 

#recovery_plan #as_scheduled figure {
  width: 100%;
} 

#recovery_plan #cannot_be_held figure {
  width: 25%;
  margin: 0 0 0 20px;
  padding: 0;
} 

#recovery_plan #cannot_be_held .flex {
  justify-content: center;
}

#recovery_plan .flex2 > div:last-child figure:last-of-type {
  width: 100%;
}

#recovery_plan .flex2 > p + div figure {
  width: 100%;
}

#recovery_plan #recovery_bnr {
  margin: 20px 0 0;
  text-align: center;
}


@media (max-width: 768px) {
  
  #recovery_plan .inner {
    padding: 0 2.67vw 2.67vw;
  }
  
  #recovery_plan #plan_details .inner > p:first-child {
    margin-bottom: 4vw;
  }
  
  #recovery_plan p {
    margin-bottom: 2.67vw;
    text-align: left;
  }
  
  #recovery_plan .flex2 {
    margin-bottom: 5.34vw;
  }

  #recovery_plan .flex2 > p:first-child {
    margin-bottom: 2.67vw;
  }

  #recovery_plan .flex2 div .inner {
    margin: 0 2.67vw 2.67vw;
  }

  #recovery_plan .flex2 > div:first-of-type {
    margin-bottom: 16vw;
  }

  #recovery_plan .arrow:before {
    content: none;
  }
  #recovery_plan #plan_details .label {
    margin-bottom: 4vw;
    padding: 2.67vw;
    font-weight: normal;
  }
  #recovery_plan a.sp:first-child {
    margin-bottom: 2.67vw;
  }

  #recovery_plan a.sp {
    position: relative;
    padding: 2.67vw 2.67vw 2.67vw 8vw; 
    background: #fff;
    border-radius: 5px; 
    color: #8a0e10;
    text-decoration: none;
  }

  #recovery_plan a.sp:before {
    position: absolute;
    top: 50%;
    left: 2.67vw;
    transform: translateY(-50%);
    width: 4vw;
    height: 4vw;
    background: linear-gradient(to top right, rgba(255,255,255,0) 50%, #8a0e10 50.01%) no-repeat top left / 50% 100%, linear-gradient(to top left, rgba(255,255,255,0) 50%, #8a0e10 50.01%) no-repeat top right / 50% 100%;
    content: '';
  }

  #recovery_plan .inner > div:last-child {
    width: 100%;
  }

  #recovery_plan figure {
    width: 100%;
    padding: 2.67vw;
  }
  
  #recovery_plan #cannot_be_held figure {
    width: 100%;
    margin: 0;
    padding: 2.67vw;
  }

  #recovery_plan .arrow {
    margin-bottom: 4vw;
  }
  
  #recovery_plan .plus {
    text-align: left;
  }

  #recovery_plan .plus:before, 
  #recovery_plan .plus:after {
    width: 8vw;
    height: 1.34vw;
  }
  
  #recovery_plan .plus:before {
    left: calc(50% - 4vw);
  }

  #recovery_plan #as_scheduled02 .plus:before {
    top: 110.67vw;
  }

  #recovery_plan #as_scheduled .plus:before {
    top: 34.67vw;
  }

  #recovery_plan #as_scheduled02 .plus:after {
    top: calc(110.67vw - 4vw);
  }
  
  #recovery_plan #as_scheduled .plus:after {
    top: 30.67vw;
  }
  
  #recovery_plan .list_dots {
    margin-bottom: 2.67vw;
  }

  #recovery_plan .inner > div:last-child .label {
    margin-bottom: 2.67vw;
  }

  #recovery_plan .label span {
    width: 13.34vw;
    height: 13.34vw;
    left: 2.67vw;
    font-size: 3rem;
  }

  #recovery_plan .detail_anchor {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  #recovery_plan .detail_anchor li {
    width: calc(50% - .67vw);
    margin: 0 0 5.34vw;
  }

  #recovery_plan #cannot_be_held .detail_anchor li {
    width: 100%;
  }

  #recovery_plan .detail_anchor a{
    display: block;
    padding: 2.67vw 5.34vw 2.67vw 2.67vw;
    font-size: 1.2rem;
    justify-content: center;
    position: relative;
    border-radius: 50px;
    background: #666;
    color: #fff;
    line-height: 1;
    align-items: center;
    text-decoration: none;
  }

  #recovery_plan .detail_anchor a:after{
    position: absolute;
    top: 50%;
    right: 2.14vw;
    border-right: 1.06vw solid transparent;
    border-left: 1.06vw solid transparent;
    border-top: 1.6vw solid currentColor;
    transform: translateY(-50%);
    content: "";
  }
  #recovery_plan #as_scheduled .detail_anchor a {
    background: #fff;
    color: #8a0e10;
  }
  
  #recovery_plan #cannot_be_held .detail_anchor {
    justify-content: center;
  }
  
  #recovery_plan #cannot_be_held .detail_anchor a {
    background: #fff;
    color: #8a0e10;
  }
  
  #recovery_plan #recovery_bnr {
    margin: 2.67vw 2.67vw 0;
  }

}


/*===== ■8. Appointment Page =====*/

#etc_appointment tbody th,
#etc_appointment tbody td {
  font-size: 1.6rem; 
  text-align: left;
}

#etc_appointment thead th:first-child {
  width: 30%;
}

#etc_appointment thead th:nth-child(2) {
  width: 20%;
}

#etc_appointment thead th:nlast-child {
  width: 50%;
}

#appointment_about {
  margin: 40px 0 0;
  background: #fff;
}

#appointment_about .inner > p {
  text-align: center;
}

#appointment_about .inner > p:first-child {
  margin-bottom: 20px;
}

#appointment_about .inner > p + p {
  margin-bottom: 20px;
}

#appointment_about .inner > p > b {
  display: block;
  color: #d71518;
  font-weight: bold;
  font-size: 2.4rem;
}

#appointment_about .inner > p > em {
  font-weight: bold;
  font-size: 2.0rem;
}

#appointment_domestic .inner > p,
#appointment_overseas .inner > p {
  margin-bottom: 20px;
  text-align: center;
}

#appointment_steps h2 + .inner > dl {
  counter-increment: step;
}

#appointment_steps h2 + .inner > dl dt{
  margin-bottom: 10px;
  font-size: 2.0rem;
}

#appointment_steps h2 + .inner > dl dt::before {
  display: inline-block;
  width: 60px;
  padding: 10px;
  border-radius: 3px;
  background: #333;
  color: #fff;
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1;
  text-align: center;
  content: "Step0" counter(step);
}

#appointment_steps h2 + .inner > dl {
  margin-bottom: 20px;
}

#appointment_steps h2 + .inner > dl dd > span{
  display: block;
  padding-left: 1.2rem;
  text-indent: -1.2rem;
}

#appointment_steps .inner:last-child > p {
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
}



@media (max-width: 768px) {
  #etc_appointment .table_scroll {
    white-space: normal;
  }
  
   #etc_appointment .table_scroll table {
    width: 100%;
  }
  
  #appointment_about {
    margin-bottom: 8vw;
    padding: 5.34vw 2.67vw;
  }
  
  #appointment_about .inner > p + p {
    margin-bottom: 2.67vw;
    font-weight: normal;
  }
  
  #etc_appointment thead th:first-child {
    width: 50vw;
  }
  #etc_appointment thead th:nth-child(2) {
    width: 30vw;
  }
  #etc_appointment thead th:last-child {
    width: 70vw;
  }
  
  #etc_appointment tbody th, 
  #etc_appointment tbody td {
    padding: 2.67vw;
  }
  
  #appointment_about .inner > p {
    text-align: left;
  }
  
  #appointment_about .inner > p > b {
    text-align: center;
    font-size: 1.8rem;
  }
  
  #appointment_about .inner > p > em {
    font-weight: bold;
    font-size: 1.6rem;
  }
  
  #appointment_about .inner > p:first-child {
    margin-bottom: 2.67vw;
  }
  
  #appointment_domestic .inner > p, 
  #appointment_overseas .inner > p {
    margin-bottom: 2.67vw;
    text-align: left;
    font-weight: normal;
  }
  
  #appointment_steps h2 + .inner > dl {
    margin-bottom: 2.67vw;
  }
  
  #appointment_steps h2 + .inner > dl dt {
    margin-bottom: 1.34vw;
    font-size: 1.6rem;
  }
  
  #appointment_steps h2 + .inner > dl dt::before {
    display: inline-block;
    width: auto;
    padding: 1.34vw 2.67vw;
    border-radius: 5px;
    font-size: 1.6rem;
  }
  #appointment_steps dd {font-weight: normal;}
  
  #appointment_steps .inner:last-child > p {
    font-size: 1.6rem;
  }
}





/*===== ■9. Press Page =====*/
#press_detail .inner > p:first-child {
  margin-bottom: 30px;
}

#press_detail .inner > h3 + p {
  margin-bottom: 15px;
}

#press_detail .inner > dl {
  margin-bottom: 30px;
  padding: 10px;
  background: rgba(0, 0, 0, .05);
}

#press_detail .caution dt {
  margin-bottom: 15px;
  color: #d71518;
}

#press_detail .caution .tit_lines::before, 
#press_detail .caution .tit_lines::after {
  background-color: #d71518;
}

#press_detail .caution dd:not(:last-child) {
  margin-bottom: 15px
}

#press_detail p:last-child {
  font-weight: bold;
}

#press_detail p:last-child span {
  display: block;
  color: #d71518;
}


@media (max-width: 768px) {
  #press_detail .inner > p:first-child {
    margin-bottom: 5.34vw;
  }

  #press_detail .inner > h3 + p {
    margin-bottom: 2.67vw;
  }

  #press_detail .inner > dl {
    margin-bottom: 5.34vw;
    padding: 2.67vw;
  }

  #press_detail .caution dt {
    margin-bottom: 2.67vw;
  }

  #press_detail .caution dd:not(:last-child) {
    margin-bottom: 2.67vw;
  }

}



/*===== ■10. Sct Page =====*/

#sct #list_number li { counter-increment: num;}

#sct #list_number li > em {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  font-weight: bold;
  font-size: 1.8rem;
}

#sct #list_number li > em::before {
  display: block;
  margin-right: 10px;
  padding: 5px 10px;
  border-radius: 3px;
  background: #333;
  color: #fff;
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1;
  text-align: center;
  content: "0" counter(num);
}