@charset "UTF-8";

/* ---------------------
contents_title
--------------------- */
#contents_page_title{ background: url(business_images/page_title_back.jpg) center no-repeat; background-size: cover;}

/* ---------------------
page_style
--------------------- */
#content #main{ color: #444;}
#content #main h2.basic_h2{ margin-bottom: 70px;}

.koshi_title{ width: 100%; height: 260px; position: relative; margin-bottom: 100px; background: url(business_images/h2back.jpg) center no-repeat; background-size: cover;}
.koshi_title::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,0.4);}
.koshi_title .inner{ position: absolute; width: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); text-align: center;}
.koshi_title .inner p{ font-size: 20px; margin-bottom: 15px; color: #fff;}
.koshi_title .inner h3{ font-size: 35px; line-height: 1.4; color: #fff;}
.icon_list_ttl{font-size:30px;font-weight:700;margin-bottom:50px;text-align:center;}
.icon_list{ display: flex; justify-content: center; text-align: center; margin-bottom: 130px;}
.icon_list dl{ width: calc((100% - 180px)/ 7); margin-right: 30px;}
.icon_list dl:last-child{ margin-right: 0;}
.icon_list dl dt{ width: 100%; margin-bottom: 10px; border-radius: 100vh; overflow: hidden; margin: 0 auto 10px;}
.icon_list dl dt p{ position: relative; padding-top: 100%; height: 0;}
.icon_list dl dt p img{ width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; right: 0;}
.icon_list dl dd{ font-size: 12px;}

@media screen and (min-width:768px){
  .pc_none{ display: none;}
}

@media screen and (max-width:767px){
  #content #main #content_menu_btn ul li:nth-child(1) a,
  #content #main #content_menu_btn ul li:nth-child(1) span{ padding-top: 15px;}
  #content #main #content_menu_btn ul li:nth-child(2) a,
  #content #main #content_menu_btn ul li:nth-child(2) span{ padding-top: 22px;}
  #content #main #content_menu_btn ul li:nth-child(3) a,
  #content #main #content_menu_btn ul li:nth-child(3) span{ padding-top: 22px;}

  #content #main h2.basic_h2{ margin-bottom: 50px;}
  .koshi_title{ height: 150px; margin-bottom: 50px;}
  .koshi_title .inner p{ font-size: 15px; margin-bottom: 10px;}
  .koshi_title .inner h3{ font-size: 18px;}
  .icon_list_ttl{font-size:20px;margin-bottom:20px;}
  .icon_list{ flex-wrap: wrap; margin-bottom: 50px;}
  .icon_list dl{ width: calc((100% - 30px)/ 4); margin-bottom: 20px; margin-right: 10px;}
  .icon_list dl:nth-child(4n){ margin-right: 0;}
}

.step_list{ text-align: center; width: 65%; margin: 0 auto 30px;}
.step_list h4{ font-size: 30px; margin-bottom: 40px; font-weight: 700;}
.step_list > p{ font-size: 15px; line-height: 22px; margin-bottom: 60px;}
.step_list .stepbar{ position: relative; margin: 0; padding: 0; display: flex; justify-content: space-between;}
.step_list .stepbar li { width: 25%; position: relative; list-style: none; text-align: center; color: #444; font-weight: bold; padding: 0 2px; box-sizing: border-box; position: relative;}
.step_list .stepbar li a{ display: block; margin-top: 70px; color: #fff; text-decoration: none; height: 300px; position: relative; background-image: linear-gradient(135deg, #0688c5, #0d3387);}
.step_list .stepbar li:before { display: block; width: 18px; height: 18px; margin: 0.5em auto; content: ""; text-align: center; border-radius: 50%; background-color: #fff; border: 1px solid #000; position: absolute; top: 80px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%);}
.step_list .stepbar li:after { z-index: -1; position: absolute; top: 95px; left: 0; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); width: 100%; height: 1px; content: ""; background-color: #000;}
.step_list .stepbar li:first-child:after { content: none;}
.step_list .number{ margin-bottom: 30px;}
.step_list .number span{ display: block;}
.step_list .number span:nth-child(1){ font-size: 15px; margin-bottom: 5px;}
.step_list .number span:nth-child(2){ font-size: 40px;}
.step_list .icon_title .icon{ width: 90px; margin: 0 auto 20px;}
.step_list .icon_title .icon img{ width: 100%; height: auto;}
.step_list .icon_title .step_title{ font-size: 17px;}
.step_list .icon_title{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);}

@media screen and (min-width:768px){
  .step_list .stepbar li a{ transition: 0.2s ease-in-out;}
  .step_list .stepbar li a:hover{ -webkit-filter: brightness(1.4); filter: brightness(1.4);}
}

@media screen and (max-width:767px){
  .step_list{ width: 100%; margin: 0 auto 0;}
  .step_list h4{ font-size: 20px; margin-bottom: 20px;}
  .step_list > p{ font-size: 14px; line-height: 22px; margin-bottom: 30px;}
  .step_list .stepbar li a{ height: 150px; margin-top: 55px;}
  .step_list .stepbar li:before { top: 55px;}
  .step_list .stepbar li:after{ top: 70px;}
  .step_list .number{ margin-bottom: 20px;}
  .step_list .number span{ display: block;}
  .step_list .number span:nth-child(1){ font-size: 12px; margin-bottom: 5px;}
  .step_list .number span:nth-child(2){ font-size: 27px;}
  .step_list .icon_title .icon{ width: 55px; margin: 0 auto 10px;}
  .step_list .icon_title .icon img{ width: 100%; height: auto;}
  .step_list .icon_title .step_title{ font-size: 14px;}
}

.flow_box{ padding-top: 100px; display: flex; justify-content: space-between;}
.text_box{ display: flex; align-items: center; margin-bottom: 50px; width: calc(100% - 690px);}
.text_box .icon{ width: 120px; margin-bottom: 10px; border-radius: 100vh; overflow: hidden; margin: 0 auto; background-color: #0d3387; margin-right: 30px;}
.text_box .icon span{ display: block; position: relative; padding-top: 100%; height: 0;}
.text_box .icon span img{ width: 65px; height: 65px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);}
.text_box .text{ width: calc((100% - 100px) - 40px);}
.text_box .text .number_box{ display: flex; align-items: center; margin-bottom: 25px;}
.text_box .text .number_box .number{ display: flex; align-items: center; margin:0 20px 0 0;}
.text_box .text .number_box .number span{ display: block; font-weight: 700;}
.text_box .text .number_box .number span:nth-child(1){ font-size: 15px;}
.text_box .text .number_box .number span:nth-child(2){ font-size: 40px;}
.text_box .text .number_box .step_title{ font-size: 34px; font-weight: 700;}
.text_box .text .detail{ font-size: 15px; line-height: 28px;}

.photo_box{ display: flex; width: 650px;}
.photo_box .box{ display: block; width:calc((100% - 5px)/2); height:100%;}
.photo_box .box + .box{margin-left:5px;}
.photo_box .box span{ display: block; width: 100%; height: 0; background-color: #F5F5F5; padding-top: 75%; overflow: hidden; position: relative;}
.photo_box .box span img{ width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0;}
.point{ padding-top: 20px;}
.point .txt_ttl{ font-size: 15px; font-weight: 700; color: #fff; line-height: 28px; margin-right: 1.5em; padding: 5px 15px; background-color: #0d3387; border-radius: 0.25em; display: inline-block; margin-bottom: 5px;}
.point .text{ width: 100%; font-size: 15px;line-height: 28px;}

.point_box{ margin-top: 70px; background-color: #ebeef5; width: 100%; box-sizing: border-box; border: 5px solid #0d3387;}
.point_box .inner{ display: flex; justify-content: space-between;}
.point_box .inner .text{ padding:40px 50px 50px; box-sizing: border-box; width: calc(100% - 300px);}
.point_box .inner .text .point_title{ display: flex; align-items: center; margin-bottom: 20px;}
.point_box .inner .text .point_title span{ display: block;}
.point_box .inner .text .point_title span:nth-child(1){ display: inline-block; font-size: 17px; line-height: 1em; padding: 7px 25px; margin-right: 15px; color: #fff; background-color: #0d3387; box-sizing: border-box;}
.point_box .inner .text .point_title span:nth-child(2){ font-size: 25px; line-height: 1.4em; font-weight: 700; color: #0d3387;}
.point_box .inner .text p{ font-size: 15px; line-height: 28px;}
.point_box .inner .text ul{margin:0 0 1em;}
.point_box .inner .text ul li{ font-size: 15px; line-height: 28px; text-indent: -1em; padding: 0 0 0 1em;}
.point_box .inner .photo{ width: 400px; overflow: hidden;}
.point_box .inner .photo img{ width: 400px; height: 100%; object-fit: cover;}

#topics{margin:-70px 0 0;padding:140px 0 0;}
#topics > .inner{text-align:center;background-color:#ebeef5;padding:40px 50px 30px;box-sizing:border-box;border:5px solid #0d3387;}
#topics .ttl{font-size:17px;line-height:1;color:#fff;display:inline-block;background-color:#0d3387;margin:0 0 20px;padding:7px 25px;box-sizing:border-box;}
#topics .txt{font-size:15px;line-height:1.8;margin:0 0 20px;}
#topics .img_box_wrap{display:flex;margin:0 -10px;}
#topics .img_box_wrap ul{display:flex;flex-wrap:wrap;width:66.666%;}
#topics .img_box_wrap li{width:calc(50% - 20px);margin:0 10px 32px;}
#topics .img_box_wrap li .img_box .img{font-size:1px;line-height:0;display:block;background-color:#fff;border:1px solid #ddd;position:relative;}
#topics .img_box_wrap li .img_box .img img{height:auto;width:100%;}
#topics .img_box_wrap li .img_box .caption{font-size:13px;line-height:1.3;text-align:left;margin-top:5px;display:block;}
#topics .img_box_wrap .img_vertical{width:33.333%;}
#topics .img_box_wrap .img_vertical .img{font-size:1px;line-height:0;display:block;background-color:#fff;margin:0 10px;border:1px solid #ddd;}
#topics .img_box_wrap .img_vertical .img img{height:auto;width:100%;}
#topics .img_box_wrap .img_vertical .caption{font-size:13px;line-height:1.3;text-align:left;display:block;margin:5px 10px 0;}

@media screen and (min-width:768px){
  .flow_box:nth-child(2n) .text_box{ order: 2;}
  .flow_box:nth-child(2n) .photo_box{ order: 1;}
  .flow_box ul li a img{ transition: .2s cubic-bezier(0.45, 0, 0.55, 1);}
  .flow_box ul li a:hover img{opacity: 0.7;}
}

@media screen and (max-width:767px){
  .flow_box{ padding-top: 60px; display: block;}
  .text_box{ display: block; margin-bottom: 20px; width: 100%;}
  .text_box .icon{ width: 90px; margin: 0 auto 25px;}
  .text_box .icon span{ display: block; position: relative; padding-top: 100%; height: 0;}
  .text_box .icon span img{ width: 50px; height: 50px;}
  .text_box .text{ width: 100%;}
  .text_box .text .number_box{ text-align: center; justify-content: center; margin-bottom: 20px;}
  .text_box .text .number_box .number{ margin:0 15px 0 0;}
  .text_box .text .number_box .number span:nth-child(1){ font-size: 13px;}
  .text_box .text .number_box .number span:nth-child(2){ font-size: 28px;}
  .text_box .text .number_box .step_title{ font-size: 24px;}
  .text_box .text .detail{ font-size: 14px; line-height: 25px;}
      
  .photo_box{ display: block; width: 100%; height: auto;}
  .photo_box .box{ width: 100%; height:100%;}
  .photo_box .box + .box{margin:10px 0 0;}

  .flow_box ul{ display: block;}
  .flow_box ul li{ width: 100%; margin-right: 0; margin-bottom: 10px;}
  .flow_box ul.photo2 li{ width: 100%;}
  .flow_box .wrap{display: block;}
  .point .txt_ttl{font-size: 14px;text-align: center;margin-right: 0;margin-bottom: 0.5em;padding: 0.2em 1em;}
  .point .text{font-size: 14px;line-height: 25px;}
  .flow_box .wrap .text br{display: none;}

  .point_box{ margin-top: 30px;}
  .point_box .inner{ display: block;}
  .point_box .inner .text{ padding: 30px; width: 100%;}
  .point_box .inner .text .point_title{ display: block; text-align: center;}
  .point_box .inner .text .point_title span:nth-child(1){ font-size: 14px; line-height: 1em; padding: 5px 25px; margin-right: 0; margin-bottom: 10px;}
  .point_box .inner .text .point_title span:nth-child(2){ font-size: 17px; line-height: 26px;}
  .point_box .inner .text p{ font-size: 14px; line-height: 25px;}
  .point_box .inner .text ul li{ font-size: 14px; line-height: 25px;}
  .point_box .inner .photo{ width: 100%; height: 200px;}
  .point_box .inner .photo img{ width: 100%; height: 200px;}

  #topics{margin:-20px 0 0;padding:50px 0 0;}
  #topics > .inner{padding:30px 30px 10px;}
  #topics .ttl{font-size:14px;margin:0 0 10px;padding:5px 25px;}
  #topics .txt{font-size:14px;margin:0 0 20px;text-align:left;}
  #topics .img_box_wrap{display:block;margin:0;}
  #topics .img_box_wrap ul{display:block;width:100%;margin:0;}
  #topics .img_box_wrap li{width:100%;margin:0 0 20px;}
  #topics .img_box_wrap li .img_box .img{height:auto;}
  #topics .img_box_wrap li .img_box .img img{height:auto;width:100%;position:relative;left:auto;top:auto;transform:none;}
  #topics .img_box_wrap li .img_box .caption{font-size:12px;}
  #topics .img_box_wrap .img_vertical{width:100%;margin:0 0 20px;}
  #topics .img_box_wrap .img_vertical .img{margin:0;}
  #topics .img_box_wrap .img_vertical .caption{font-size:12px;margin:5px 0 0;}
}