@charset "utf-8";
/* ===================================================
	Promise CSS
====================================================== */


/* ---------------------------------------------------
#sec1
------------------------------------------------------ */
#sec1 { padding: 40px 0 80px;}
#sec1 h2 + p { text-align: center; margin-top: 15px;}
#sec1 > div { width: 96%; display: flex; justify-content: space-between; padding: 65px 3%; background: #fdfbf9; box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.15); margin: 80px auto 0;}
#sec1 > div:nth-of-type(3) { background: url(../../promise/img/promise03.png) no-repeat center right #fdfbf9; background-size: auto 100%;}
#sec1 > div:nth-of-type(4) { background: url(../../promise/img/promise04.png) no-repeat center right #fdfbf9; background-size: auto 100%;}
#sec1 .txt_box { width: 59%; position: relative;}
#sec1 .txt_box::before { content: ''; display: block; width: 100%; height: 1px; background: #ffae00; position: absolute; top: 70px; right: 0;}
#sec1 .txt_box h3 { display: inline-block; font-size: 97px; color: #ffae00; text-align: center; background: #fdfbf9; line-height: 1; padding-right: 15px; font-family: 'Montserrat', sans-serif; position: relative; z-index: 1;}
#sec1 .txt_box h3 span { display: block; font-size: 15px; font-weight: normal;}
#sec1 .txt_box dl { margin-top: 25px;}
#sec1 .txt_box dt { font-size: 25px; font-weight: bold; }
#sec1 .txt_box dd { margin-top: 30px;}
#sec1 .photo { width: 38%; text-align: center;}
#sec1 > div ul { width: 38%; display: flex; flex-wrap: wrap;}
#sec1 > div li { width: 30%; margin-right: 5%; padding-bottom: 15px;}
#sec1 > div li:nth-of-type(3n) { margin-right: 0;}
#sec1 > div li img { width: 100%;}
#sec1 > div li p { position: relative; margin-top: 10px; text-align: center;}
#sec1 > div li p::before { content: ''; display: block; width: 100%; height: 1px; position: absolute; top: 50%; left: 0; background: linear-gradient(to right, rgba(255,0,0,0), #ff7e00 7%, #ff7e00 93%, rgba(255,0,0,0));}
#sec1 > div li span { display: inline-block; padding: 0 5px; color: #ff7e00; position: relative; z-index: 1; background: #fdfbf9; line-height: 1.2;}

#sec1 > ul { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 140px;}
#sec1 > ul li { width: calc(50% - 5px); height: 40vw; max-height: 400px; position: relative; overflow: hidden;}
#sec1 > ul li a { display: block; height: 100%; padding: 60px 50px; box-sizing: border-box;}
#sec1 > ul li img { width: 100%; height: 40vw; max-height: 400px; position: absolute; top: 0; left: 0; z-index: -1; transition: transform 1s;}
#sec1 > ul .tit_border { color: #fff; font-size: 30px; text-align: left;}
#sec1 > ul .tit_border::before { left: 0;}
#sec1 > ul .btn { width: 190px; padding: 10px 0; position: absolute; bottom: 0; right: 0; background: #fff; text-align: center; text-decoration: underline;}
#sec1 > ul li a:hover img { opacity: 1; transform: scale(1.06);}
#sec1 > ul li a:hover .btn { background: #000; color: #fff;}


@media screen and (max-width: 600px) {
  #sec1 { padding: 10vw 0;}
  #sec1 h2 + p { text-align: left;}
  #sec1 > div { margin: 8vw auto 0; padding: 30px 3%; flex-wrap: wrap;}
  #sec1 .txt_box { width: 100%;}
  #sec1 .photo { width: 80%; margin: 15px auto 0;}
  #sec1 .txt_box::before { top: 20px;}
  #sec1 .txt_box h3 { font-size: 30px;}
  #sec1 .txt_box dl { margin-top: 10px;}
  #sec1 .txt_box dt { font-size: 18px; text-shadow: 1px 1px 3px #fdfbf9, 1px -1px 3px #fdfbf9, -1px 1px 3px #fdfbf9, -1px -1px 3px #fdfbf9;}
  #sec1 .txt_box dd { margin-top: 15px;}

  #sec1 > div:nth-of-type(3) { background: url(../../promise/img/promise03.png) no-repeat top right #fdfbf9; background-size: 50%;}
  #sec1 > div:nth-of-type(4) { background: url(../../promise/img/promise04.png) no-repeat top right #fdfbf9; background-size: 50%;}


  #sec1 > div ul { width: 100%; margin-top: 15px;}
  #sec1 > div li p { font-size: 13px;}
  #sec1 > div li span { padding: 0;}

  #sec1 > ul { margin-top: 10vw;}
  #sec1 > ul li { width: 100%; height: 55vw; margin-bottom: 10px; }
  #sec1 > ul li a { padding: 15px 4%;}
  #sec1 > ul li img { height: 55vw;}
  #sec1 > ul .tit_border { font-size: 22px;}
  #sec1 > ul .btn { width: 140px; padding: 5px 0;}
}



/* ---------------------------------------------------

------------------------------------------------------ */

@media screen and (max-width: 600px) {
}