/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

@media only screen and (min-width:751px) { /* for PC */
  html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
  }
}
@media only screen and (max-width:750px) { /* for SP */
  html {
    scroll-behavior: smooth;
    scroll-padding-top: 50px;
  }
}

/*------------------------------
	改行
-------------------------------*/
/* スマホだけ改行 */
.br-sp {
    display: none;
}

@media (max-width: 768px) {
    .br-sp {
        display: block;
    }
}

/*------------------------------
	共通タイトル
-------------------------------*/
h3.border_title{
  width: 100%;
  position: relative;
  padding: 14px 0px;
  text-align: center;
  color: #000;
}
h3.border_title:after {
  position: absolute;
  right: 35%;
  bottom: -3px;
  content: " ";
  display: block;
  border-top: solid 2px #000;
  width: 65%;
}
h3.border_title:before {
  position: absolute;
  left: 35%;
  top:3px;
  content: " ";
  display: block;
  border-bottom: solid 2px #000;
  width: 65%;
}
h3.border_title .e_txt{
  display: block;
  font-size: 60px;
  font-weight: 800;
}
h3.border_title .sub_txt{
  display: block;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: .4em;
  text-indent: .4em;
  margin-top:8px;
}
@media screen and (max-width: 480px) { /* SP */
h3.border_title:after {
  right: 15%;
  width: 85%;
}
h3.border_title:before {
  left: 15%;
  width: 85%;
}
h3.border_title .e_txt{font-size: 40px;}
h3.border_title .sub_txt{
  letter-spacing: .1em;
  text-indent: .1em;
}
}

/*------------------------------
	共通テキスト
-------------------------------*/
.common_section_txt{
  text-align: center;
  font-size: 18px;
  letter-spacing: .2em;
  text-indent: .2em;
  line-height: 2;
}
@media screen and (max-width: 480px) { /* SP */
.common_section_txt{
  font-size: 16px;
  letter-spacing: .1em;
  text-indent: .1em;
  line-height: 1.6;
}
}
/*------------------------------
	CTAボタン
-------------------------------*/
.cts_btn{
  width: 95%;
  max-width: 540px;
  margin: auto;
}
.cts_btn a{
  display: block;
  background-color: #0c749c;
  padding: 8px;
  color: #fff;
  text-decoration: none;
}
.cts_btn a:hover{
  background-color: #898989;
}

.cts_btn .top_txt{
  width: 100%;
  display: flex;
  align-items: center;
  font-size: 20px;
  margin: 0;
  padding: 0;
}
.cts_btn .top_txt:before,
.cts_btn .top_txt:after {
    content: "";
    height: 1px;
    flex-grow: 1;
    background-color: #fff;
}
.cts_btn .top_txt:before {margin-right: 1rem;}
.cts_btn .top_txt:after {margin-left: 1rem;}


.cts_btn .bottom_txt{
  position: relative;
  vertical-align: middle;
  font-size: 26px;
  margin: 0;
  padding: 0;
  text-align: center;
}
.cts_btn .bottom_txt::after{
  position: absolute;
  top: 0;
  bottom: 0;
  right: 20px;
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 0.4em; 
  height: 0.4em;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
@media screen and (max-width: 480px) { /* SP */
.cts_btn .top_txt{font-size: 14px;}
.cts_btn .bottom_txt{font-size: 20px;}
}

/*--------------------------------
	　navi
--------------------------------*/
.g_fixed {
  position: fixed!important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}
#g_menu {
  width: 100%;
  background-color: #000;
  padding: 6px;
}
#g_menu .inner_g_menu{
  width: 100%;
  max-width: 980px;
  margin:0px auto;
  padding: 0;
  display: flex;
  justify-content:center;
  align-items: center;
  list-style: none;
}
#g_menu .inner_g_menu .menu{
  text-align: center;
  padding: 16px 0px;
}
#g_menu .inner_g_menu .menu a{
  display: inline-block;
  border-left: 1px solid #fff;
  padding:4px 30px;
  color: #fff;
  font-size: 18px;
  letter-spacing: .4em;
  text-indent:1em;
  text-decoration:none;
}
#g_menu .inner_g_menu .menu a:hover{
  color: #898989;
}

#g_menu .inner_g_menu .banner{
  padding:4px 0px;
  font-size: 18px;
}
#g_menu .inner_g_menu .banner a{
  display: inline-block;
  background-color: #0c749c;
  border: 1px solid #fff;
  padding:8px 20px;
  color: #fff;
  font-size: 18px;
  letter-spacing: .4em;
  text-indent:.4em;
  text-decoration:none;
}
#g_menu .inner_g_menu .banner a span{
  display: inline-block;
  background-color: #fff;
  color: #0c749c;
  padding: 2px 10px;
  margin-right: 20px;
}
#g_menu .inner_g_menu .banner a:hover{
  background-color: #898989;
}

@media screen and (max-width: 780px) { /* SP、タブレット */
	#g_menu .inner_g_menu .menu{
  padding: 10px 0px;
}
  
  #g_menu .inner_g_menu .menu a{
  padding:4px 10px;
  color: #fff;
  font-size: 12px;
  letter-spacing:normal;
  text-indent:0;
}

#g_menu .inner_g_menu .banner{
  padding:4px 0px;
  font-size: 12px;
}
#g_menu .inner_g_menu .banner a{
  padding:4px 6px;
  color: #fff;
  font-size: 12px;
  letter-spacing:normal;
  text-indent:0;
}
#g_menu .inner_g_menu .banner a span{
  padding: 2px 4px;
  margin-right: 8px;
}
}

/*--------------------------------
	　KV
--------------------------------*/
.kv_top_txt{
  font-size: 26px;
  letter-spacing: .3em;
  text-align:center;
}
.kv_box{
  width: 100%;
  padding:20px 50px 50px 50px;
  color: #fff;
}
.kv_box .txt01{
  font-size: 26px;
}
.kv_box .logo{
  margin-top: 10px;
  width: 300px;
  padding:40px 0px;
  margin:0;
}
.kv_box .logo img{width: 100%;}

.kv_box h1{
  font-size: 50px;
  margin:0;
  padding: 0;
  color: #fff;
  line-height:1;
}
.kv_box .txt02{
  font-size: 22px;
}
.kv_box .txt03{
  line-height: 1.8;
  margin-top: 10px;
}

.kv_box .kv_btn{ 
  margin-top: 30px;
}
.kv_box .kv_btn a{
  display:inline-block;
  width:100%;
  max-width:420px;
  background-color: #0c749c;
  border: 1px solid #fff;
  padding:8px 20px;
  color: #fff;
  font-size: 22px;
  text-decoration:none;
}
.kv_box .kv_btn a:hover{
  background-color: #898989;
}
.kv_box .kv_btn .arrow{
  position: relative;
  vertical-align: middle;
}
.kv_box .kv_btn .arrow::after{
  position: absolute;
  top: 0;
  bottom: 0;
  right: 20px;
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 0.4em; 
  height: 0.4em;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

@media screen and (max-width: 480px) { /* SP */
  .kv_top_txt{
  font-size: 16px;
  letter-spacing: 1px;
}
.kv_box{
  padding:30px 14px 40px 14px;
}
.kv_box .txt01{
  font-size: 16px;
}
.kv_box .logo{
  margin-top: 10px;
  width: 300px;
} 
.kv_box .logo{margin-top: 10px;}
.kv_box h1{
  font-size: 26px;
  margin: 4px;
}
.kv_box .txt02{
  font-size: 18px;
}
.kv_box .txt03{
  font-size: 12px;
  line-height: 1.4;
}
.kv_box .kv_btn{ 
  margin-top: 20px;
}
.kv_box .kv_btn a{
  width:95%;
  padding:8px 14px;
  color: #fff;
  font-size: 18px;
}  
}

/*--------------------------------
	　sectionお悩みタイトル
--------------------------------*/
h4.worries_title{
  background-color: #000;
  text-align: center;
  color: #fff;
  padding: 14px;
  font-weight: 400;
  letter-spacing: .2em;
  text-indent: .2em;
}
@media screen and (max-width: 480px) { /* SP */
h4.worries_title{
  padding: 13px;
  letter-spacing: 0;
  text-indent: 0;
}
}

/*--------------------------------
	　sectionお悩み(担当者)
--------------------------------*/
.worries03_box{
  width: 100%;
  margin: auto;
  padding: 30px;
  display: flex;
  justify-content:space-between;
  align-content: space-between;
  flex-wrap:wrap;
  align-items:flex-start;
}
.worries03_box .inner{
  width:49%;
  text-align: center;
  display: flex;
  justify-content:space-between;
  align-items: center;
  margin-top: 22px;
}

.worries03_box .inner figure{
  width: 100%;
  max-width: 90px;
  text-align: center;
  margin: 0 auto;
}
.worries03_box .inner figure img{width: 100%;}

.worries03_box .inner .txt_box{
  width: 70%;
  width : -webkit-calc(100% - 100px) ;
  width : calc(100% - 100px) ;
  padding: 20px;
  margin: 0;
  text-align: left;
  font-size: 14px;
}

.worries03_box .inner .txt_box h4.worries03_title{
  margin: 0;
  padding:0px 0px 6px 0px;
  font-weight: 900;
  color:#000;
  font-size: 20px;
}

@media screen and (max-width: 480px) { /* SP */
 .worries03_box{
  display:block;
  width: 100%;
  padding: 18px;
}
.worries03_box .inner{
  width: 100%;
  text-align: center;
  display:block;
  margin-top: 24px;
}
.worries03_box .inner .txt_box{
  width: 100%;
  padding: 8px;
  }
}


/*--------------------------------
	　パナソニックのサポートSupport
--------------------------------*/
h4.p_support_title{
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: baseline;
  color: #fff;
}
h4.p_support_title .e_txt{
  display: block;
  font-size: 70px;
  font-weight: 800;
}
h4.p_support_title .j_txt{
  display: block;
  font-size: 24px;
}
@media screen and (max-width: 480px) { /* SP */
h4.p_support_title{display: block;}
h4.p_support_title .e_txt{font-size: 40px; text-align: center;}
h4.p_support_title .j_txt{text-align: center;}
}
.p_support_box{
  width: 100%;
  padding: 50px 20px;
  background-color: #fff;
  box-shadow: 2px 2px 4px gray;
}

.p_support_box h4.b_titile{
  width: 100%;
  max-width: 730px;
  margin: auto;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
  padding-bottom: 8px;
  border-bottom: 2px solid #000;
  color:#000;
}
.p_support_box .txt{
  width: 100%;
  max-width: 730px;
  margin:30px auto 0 auto;
  text-align: center;
  line-height: 2;
}
/*--------------------------------
	　Detail
--------------------------------*/
.detail_box{
  width: 100%;
  border: 2px solid #000;
  padding: 20px;
    text-shadow:2px 2px 0 #FFF, -2px -2px 0 #FFF,
              -2px 2px 0 #FFF, 2px -2px 0 #FFF,
              0px 2px 0 #FFF,  0 -2px 0 #FFF,
              -2px 0 0 #FFF, 2px 0 0 #FFF;
}
.detail_box h4{ font-size: 28px; color:#000;}
.detail_box .txt01{
  font-size: 20px;
  line-height:2.4;
}
.detail_box .txt02{
  font-size: 16px;
  margin-top: 20px;
}
.detail_box ul{
  margin-top: 14px;
  font-size: 16px;
}
@media screen and (max-width: 480px) { /* SP */
.detail_box{ padding-top:77%;}
.detail_box h4{ font-size: 24px;}
.detail_box .txt01{
  font-size: 18px;
  line-height:1.6;
}
.detail_box .txt02{
  font-size: 14px;
  margin-top: 16px;
}
.detail_box ul{font-size: 14px;}
}
/*--------------------------------
	　メリット4点
--------------------------------*/
h4.merit_title{
  width: 100%;
  font-size: 30px;
  text-align: center;
  color:#000;
  border-bottom: 2px solid #000;
  padding-bottom: 5px;
}

.merit_card_box{
  width: 100%;
  display: flex; 
  justify-content: space-around;
  box-sizing: border-box;
}
.merit_card_box .inner{
  display: flex;
  flex-direction: column;
  width: 23%;
  border: 2px solid #000;
  padding:10px;
}
@media screen and (max-width: 760px) { /* SP */
.merit_card_box{
  width: 95%;
  flex-wrap: wrap;
  margin: auto;
}
.merit_card_box .inner{
  width: 95%;
  margin:20px auto 0 auto;
}
}
.merit_card_box .merit_card_no{
  width: 46px;
  height: 46px;
  margin: 0 auto;
  padding-top: 8px;
  font-size:20px;
  background-color: #727171;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  box-sizing: border-box;
}
.merit_card_box h4{
  color: #000;
  font-size: 15px;
  text-align: center;
  margin-top:12px;
}
.merit_card_box .arrow{
  margin: auto;
  width: 30px;
  height: 30px;
  border: 2px solid;
  border-color:  transparent transparent #565656 #565656;
  transform: rotate(-45deg);
}
.merit_card_box .merit_card_txt{
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
  margin-top: 20px;
  flex-grow: 1;
}
.merit_card_step_txt{
  font-size: 18px;
  text-align: center;
  margin: 20px 0 0 0;
  color: #898989!important;
}
.merit_card_step_txt span{ font-size: 26px;}
.merit_card_box .card_btn{
  width: 100%;
  margin: 0;
}
.merit_card_box .card_btn a{
  display: block;
  width:100%;
  background-color: #000;
  color: #fff!important;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
}
.merit_card_box .card_btn a:hover{
  background-color: #898989;
}
.merit_card_box .card_btn .dli-arrow-down {
  display: inline-block;
  vertical-align: middle;
  color: #fff;
  line-height: 1;
  position: relative;
  width: 0.1em;
  height: 1em;
  background: currentColor;
  margin-right: 20px;
}

.merit_card_box .card_btn .dli-arrow-down::before {
  content: '';
  width: 0.65em;
  height: 0.65em;
  border: 0.1em solid currentColor;
  border-top: 0;
  border-right: 0;
  transform: rotate(-45deg);
  transform-origin: bottom left;
  position: absolute;
  left: 50%;
  bottom: -0.05em;
  box-sizing: border-box;
}

/*--------------------------------
	　STEP
--------------------------------*/
.step_common_box{
  width: 100%;
  max-width: 980px;
  font-size: 16px;
  letter-spacing: .1em;
  text-indent: .1em;
  line-height: 1.6;
}

.step_common_box .inner_left{
  width: 100%;
  min-height: 570px;
  padding: 10px 410px 10px 0px;
  box-sizing: border-box;
}
.step_common_box .inner_right{
  width: 100%;
  min-height: 570px;
  padding: 10px 0px 10px 410px;
  box-sizing: border-box;
}
@media screen and (max-width: 760px) { /* SP */
.step_common_box .inner_left{padding: 10px 10px 10px 10px;}
.step_common_box .inner_right{padding: 10px 10px 10px 10px;}
}

@media screen and (min-width: 761px) { /* PCのみ背景 */
.step_common_box .step1_bg{
  background: url("https://22668684.fs1.hubspotusercontent-na1.net/hubfs/22668684/step1_bg.jpg") no-repeat right top;
  background-size: 390px auto;
}
.step_common_box .step2_bg{
  background: url("https://22668684.fs1.hubspotusercontent-na1.net/hubfs/22668684/step2_bg.jpg") no-repeat left top;
  background-size: 390px auto;
}
.step_common_box .step3_bg{
  background: url("https://22668684.fs1.hubspotusercontent-na1.net/hubfs/22668684/step3_bg.jpg") no-repeat right top;
  background-size: 390px auto;
}
.step_common_box .step4_bg{
  background: url("https://22668684.fs1.hubspotusercontent-na1.net/hubfs/22668684/step4_bg.jpg") no-repeat left top;
  background-size: 390px auto;
}
.step_common_box .step5_bg{
  background: url("https://22668684.fs1.hubspotusercontent-na1.net/hubfs/22668684/step5_bg.jpg") no-repeat right top;
  background-size: 390px auto;
}
.step_common_box .step6_bg{
  background: url("https://22668684.fs1.hubspotusercontent-na1.net/hubfs/22668684/step6_bg.jpg") no-repeat left top;
  background-size: 390px auto;
}
}

.step_common_box .top_txt{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  line-height: 1;
  margin-top:30px;
}
.step_common_box .top_txt_left{}
.step_common_box .top_txt_left .txt01{font-size: 20px;}
.step_common_box .top_txt_left .txt02{font-size: 28px; margin-top: 2px;}
.step_common_box .top_txt_left .txt03{font-size: 16px; margin-top: 2px;}
.step_common_box .top_txt_right{
  color: #898989;
  font-size: 40px;
  text-align: right;
  font-weight: 700:
}
.step_common_box .top_txt_right span{font-size: 80px;}

.step_common_box h4{
  font-size: 26px;
  font-weight: 500;
  line-height: 1.6;
  color:#000;
  margin-top:40px;
}
.step_common_box .main_txt{ margin-top: 30px;}
@media screen and (max-width: 480px) { /* SP */
 .step_common_box .inner_right{min-height: auto; padding-bottom:40px;}
 .step_common_box .inner_left{min-height: auto; padding-bottom:40px;}
 .step_common_box .top_txt_right{font-size: 18px;}
 .step_common_box .top_txt_right span{font-size: 40px;}
.step_common_box h4{font-size: 18px; margin-top:30px;}
}

/*--------------------------------
	　STEP　資料SAMPLE
--------------------------------*/
.step_materials_box{
  width: 100%;
  max-width: 980px;
  font-size: 14px;
  line-height: 1.2;
  display: flex;
  justify-content: space-between;
}
.step_materials_inner{
  width: 40%;
  width : -webkit-calc(50% - 25px) ;
  width : calc(50% - 25px) ;
  border: 2px solid #000;
  padding: 15px;
  box-sizing: border-box;
  background: url("https://22668684.fs1.hubspotusercontent-na1.net/hubfs/22668684/sample_bg.png") no-repeat top 10px right 10px;
}
.step_materials_arrow{
  width: 20px;
  height: 20px;
  margin: auto;
  text-align: center;
  border: 2px solid;
  border-color:  transparent transparent #565656 #565656;
  transform:translateX(-25%) rotate(-135deg);
}
@media screen and (max-width: 760px) { /* SP */
.step_materials_box{
  display: block;
}
.step_materials_inner{
  width: 95%;
  margin:20px auto 0 auto;
}
.step_materials_arrow{
  transform:translateX(-25%) rotate(-45deg);
}
}

.step_materials_inner h4{
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  color: #000;
  margin: 0;
}

.step_materials_img_box{
  display: flex;
  justify-content: space-between;
  margin: 20px 0 0 0 ;
}
.step_materials_inner ul{margin: 0 0 0 -10px;}
.step_materials_inner ul li{margin: 10px 0 0 0;}

.step_materials_img_box .sample_img_box{
  display: block;
  width: 180px;
  margin: 0;
  padding: 0;
}

/*--------------------------------
	　STEP　資料拡大
--------------------------------*/
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 50%;
  top: 50%;
  transform: translateX(-50%)
             translateY(-50%);
  height: 100vh;
  width: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.8);
  
}
.modal .modal-box {
    background-color: #fff;
    margin: 10% auto;
    max-width: 880px;
    width: 90%;
    animation-name: modalopen;
    animation-duration: 1s;
    position: relative;
padding:30px;
  
}
.modal .modalClose{
  width:80px;
  margin-left: auto;
  text-align:center;
  cursor: pointer;
  color: #fff;
  border:1px solid #000;
  padding:6px;
  background:#000;
}

@media screen and (max-width: 480px) { /* SP */
.modal .modal-box {
}
}

/*--------------------------------
	　無料サポートをご利用いただいた感想
--------------------------------*/
h3.impressions{
  background-color: #000;
  width: 100%;
  padding: 8px;
  margin: 0;
  text-align: center;
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: .4em;
  text-indent: .4em;
  box-sizing: border-box;
}
.impressions_box{
  margin: 0;
  border: 2px solid #000;
  background-color: #EFEFEF;
  background-image: url("https://22668684.fs1.hubspotusercontent-na1.net/hubfs/22668684/impressions_bg-2.png");
  background-repeat: no-repeat;
  background-size: 20% auto;
  background-position: left 20px center;
}
.impressions_box .inner{
  max-width: 980px;
  width: 100%;
  margin:0 auto;
  padding: 30px 0 30px 20%;
  box-sizing: border-box;
  line-height: 2;
  font-size: 16px;
}
@media screen and (max-width: 480px) { /* SP */
.impressions_box{
  background-image:none;
}
.impressions_box .inner{
  padding: 20px 10px ;
}
}

/*--------------------------------
	　資料ダウンロードボタン
--------------------------------*/
.btn_dl{width: 100%;}
.btn_dl a{
  display: block;
  background: url("https://22668684.fs1.hubspotusercontent-na1.net/hubfs/22668684/btn_dl.png") no-repeat center top;
  background-size: 100% auto;
  background-color: #000;
  width: 100%;
  height: 0;
  padding-top:15.17%;
  overflow: hidden; 
}
.btn_dl a:hover{
  background-color: #898989;
}
@media screen and (max-width: 480px) { /* SP */
.btn_dl a{
  display: block;
  background: url("https://22668684.fs1.hubspotusercontent-na1.net/hubfs/22668684/btn_dl_sp.png") no-repeat center top;
  background-color: #000;
  background-size: 100% auto;
  width: 100%;
  height: 0;
  padding-top:30.2%;
  overflow: hidden; 
}
}

/*--------------------------------
	　Case
--------------------------------*/
.case_box{
  padding: 20px;
}
.case_box h4{
  font-size: 26px;
  font-weight: 500;
  line-height: 1.6;
  color:#000;
  margin-top:40px;
}

.case_box .top_txt_box{
  border-bottom: 2px solid #000;
  padding-bottom: 20px;
}
.case_box .txt_box{
  width: 40%;
  background-color: #666666;
  padding: 4px;
  text-align: center;
  color: #fff;
  margin-top: 20px;
}
.case_box .txt01{font-size: 14px; margin-top: 14px;}
.case_box .main_txt_box{
  margin-top: 20px;
  font-size: 14px;
  line-height: 1.8;
}
@media screen and (max-width: 480px) { /* SP */
 .case_box h4{
  font-size: 20px;
  margin-top:20px;
}
}

/*--------------------------------
	　Case(バナー)
--------------------------------*/
ul.case_banner_list{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
}
ul.case_banner_list li{
  width: 25%;
  margin-top: 20px;
}
ul.case_banner_list li img{ width: 100%;}

@media screen and (max-width: 480px) { /* SP */
ul.case_banner_list li{
  width: 33%;
}
}


/*------------------------------
	電話とLINE
-------------------------------*/
.line_tel_box{
  padding: 10px;
}
.line_tel_box h4{
  color: #000;
  font-size: 20px;
  font-size: 500;
}
.line_tel_box ul li{
  text-indent: -1em;
  padding-left: 1em;
}
.line_tel_box .tel_txt{
  margin-top: 20px;
  font-size: 30px;
}
.line_tel_box .tel_txt a{ color: #000;}


/*------------------------------
	コラム
-------------------------------*/
.column_box{
  border: 2px solid #000;
  padding: 30px 10px;
}
.column_box .inner{
  width: 100%;
  max-width: 980px;
  margin: auto;
}
.column_box h4.column_title{
  color: #000;
  font-size: 26px;
}
.column_box .txt_box{
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
  margin-top: 20px;
}
.column_box .main_txt{
  width : 70% ;
   width : -webkit-calc(100% - 390px) ;
   width : calc(100% - 390px) ;
  font-size: 16px;
  line-height: 2.4;
  margin: 16px 0px 20px 0px;
}
.column_box .main_img{
  width: 370px;
  margin-top: 16px;
}
.column_box .main_img img{ width: 100%;}

.column_box .column_btn{
  width: 280px;
  margin: 20px auto;
}
.column_box .column_btn a{
  display: block;
  background-color: #000;
  color: #fff;
  padding: 10px;
  text-align: center;
}
.column_box .column_btn a:hover{
  background-color: #898989;
}

@media screen and (max-width: 480px) { /* SP */
 .column_box h4.column_title{font-size: 22px;}
.column_box .txt_box{
  display:block;
}
.column_box .main_txt{
  width : 100% ;
  font-size: 16px;
  line-height: 1.6;
  margin:0 auto;
  padding: 20px;
}
.column_box .main_img{
  width: 90%;
  max-width: 370px;
  margin: 16px auto;
}
}