.example {
    position: relative;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    background: url('https://www.csc-biz.com/csc%20bland/light/new-mini/img/background.jpg');

  }
  
  .example a {/*aタグを画像の真ん中に*/
    position: absolute;
    bottom:65px;
    left:400px;

 
    /*以下装飾*/
    max-width: 430px;
    margin:0;/*余計な隙間を除く*/
    font-size: 36px;/*文字サイズ*/
    border: solid white 2px; /*線で囲う*/
    padding:35px;/*文字と線の間の余白*/
    color: white;/*文字色*/
    text-decoration: none;/*下線を表示させない*/
    }
  
  .example a:hover{/*カーソルを当てたとき*/
    background: rgba(255, 255, 255, 0.3);/*背景を半透明に*/
    }
  
  .example-top {
    max-width: 978px;
    vertical-align: bottom;/*下の謎余白の調整*/;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    
    }
.minin-img{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.wrap{
  height: 100px;
}

 /*イメージ画像部分文字の装飾*/
    .moji {
        position:absolute;
        bottom: 350px;
        right:130px;
        color:#FFF;
        font-size: 32px;
      }

      /*チェック装飾*/
      .list-003 {
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
        list-style-type: none;
        border: 2px solid #2C8C66;
        max-width: 500px;
        padding-top: 30px;
        padding-bottom: 10px;
        margin-top: 50px;
    }
    
    .list-003 li {
      font-size: 22px;
        display: flex;
        align-items: center;
        gap: 0 5px;
        padding: .3em;
        max-width: 700px;
    }
    
    .list-003 li::before {
        display: inline-block;
        width: 1em;
        height: 1em;
        background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%232589d0%22%20d%3D%22M8.2%2C20.6l-7.8-7.8c-0.5-0.5-0.5-1.2%2C0-1.7L2%2C9.4c0.5-0.5%2C1.2-0.5%2C1.7%2C0L9%2C14.7L20.3%2C3.4c0.5-0.5%2C1.2-0.5%2C1.7%2C0l1.7%2C1.7%20c0.5%2C0.5%2C0.5%2C1.2%2C0%2C1.7L9.8%2C20.6C9.4%2C21.1%2C8.6%2C21.1%2C8.2%2C20.6L8.2%2C20.6z%22%2F%3E%3C%2Fsvg%3E');
        content: '';
    }

    .heading-009 {
       font-size: 32px;
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
        position: relative;
        padding: .5em .7em;
        border-radius: 10px;
        background-color: #2C8C66;
        color: #fff;
        text-align: center;
        font-weight: bold;
    }
    

          @media screen and (max-width: 768px) {
        .heading-009  {
        font-size: 1.375rem;
    
  }
}

    .heading-009::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 30px;
        width: 0;
        height: 0;
        border: 11px solid transparent;
        border-top: 11px solid #2C8C66;

    }
/*見出し装飾*/
    .heading-028 {
        color: #4f4f4f;
        font-weight: 400;
        font-size: .75rem;
        letter-spacing: .04em;
        text-align: center;
    }
    
    .heading-028::before {
        display: block;
        font-weight: 700;
        font-size: 1.65rem;
        line-height: 1.5;
        letter-spacing: .02em;
        content: attr(data-label);
    }
/*セクションごとの背景*/
       .section1{
        margin-left: auto;
        margin-right: auto;
        vertical-align: bottom;
        padding-top: 50px;
        padding-bottom: 50px;

        }

        .section2{
        max-width: 1280px;
        margin-left: auto;
        margin-right: auto;
        background-color: #fff;

        }

        .section3{
        background-color: #E8F8F8; 
        padding: 10px 100px 50px 100px;   
        }

        .section4{
        max-width: 1180px;
        margin-left: auto;
        margin-right: auto;
        background-color: #fff;
        padding: 3rem;
        
        }

        .section7 {
          background-color: #E8F8F8;
        }


        .list-002 {
            max-width: 780px;
            margin-left: auto;
            margin-right: auto;
            counter-reset: li;
        }
        
        .list-002 li {
            display: flex;
            align-items: center;
            padding: .3em;
        }
        
        .list-002 li::before {
            display: inline-block;
            min-width: 1.7em;
            margin-right: 5px;
            background-color: #2589d0;
            color: #fff;
            font-weight: bold;
            font-size: .75em;
            line-height: 1.7em;
            text-align: center;
            content: counter(li);
            counter-increment: li;
        }



          .sample1 {
            margin-left: auto;
            margin-right: auto;
            max-width:	450px;
            height:			350px;
            overflow:		hidden;
            text-align: center;
            position:	relative;	/* 相対位置指定 */
        }
        
        .sample1 img{
          width:	100%;

        }

        .sample1 .caption {
            font-size:		100%;
            text-align: 		center;
            padding-top:		80px;
            color:			#fff;
        }
        .sample1 .mask {
            width:			100%;
            height:			100%;
            position:		absolute;	/* 絶対位置指定 */
            top:			0;
            left:			0;
            opacity:		0;	/* マスクを表示しない */
            background-color:	rgba(0,0,0,0.4);	/* マスクは半透明 */
            -webkit-transition:	all 0.2s ease;
            transition:		all 0.2s ease;
        }
        .sample1:hover .mask {
            opacity:		1;	/* マスクを表示する */
        }

/* 特徴部分の装飾 */
        .box {
          max-width: 1280px;
          margin-left: auto;
          margin-right: auto;
          margin: 20px 0;
          float: left;
          width: 94%;
        }
        .box img {
          max-width: 50%;
          float: left;
        }
        .p {
          margin: 0;
          padding: 10px;
        }
        .right {
          width: 50%;
          float: left;
        } 

        /* シーン部分の横並び装飾 */

        #box-list-scene {
          max-width: 1280px;
          margin-left: auto;
          margin-right: auto;
          width: 98%;
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;

      }

      .box-list-scene:nth-child(3n){
        margin-right:0;
      }

        .sample1 {
            width: 33%;/* 横並び３分割 */
            overflow: hidden;
            position: relative;
        }
        
/* 以下ミニが解決の装飾*/
        .heading-016 {
          font-size: 32px;
            max-width: 1280px;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 2em;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #4D4D4D;
            font-weight: bold;
        }
        
        .heading-016::before,
        .heading-016::after {
            width: 3px;
            height: 40px;
            background-color: #2C8C66;
            content: '';
        }
        
        .heading-016::before {
            transform: rotate(-35deg);
            margin-right: 30px;
        }
        
        .heading-016::after {
            transform: rotate(35deg);
            margin-left: 30px;
        }

         @media screen and (max-width: 768px) {
          .heading-016  {
              font-size: 1.623em;
            }
}
 

        
/* 以下ミニが解決の装飾*/
        .heading-017 {
            font-size: 28px;
            max-width: 1280px;
            margin: 1rem;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #FFF;
            font-weight: bold;
        }
        
        .heading-017::before,
        .heading-017::after {
            width: 3px;
            height: 40px;
            background-color: #ffffff;
            content: '';
        }
        
        .heading-017::before {
            transform: rotate(-35deg);
            margin-right: 30px;
        }
        
        .heading-017::after {
            transform: rotate(35deg);
            margin-left: 30px;
        }









        .info-action {
          margin:0;/*余計な隙間を除く*/
          font-weight: bold;
          padding-top: 1em;
          padding-bottom: 1em;
          font-size: 32px;
          display: flex;
          justify-content: center;
          color: #0A2C87;
        }

/* 以下ミニの特徴3つ書きの装飾*/
        .box-021 {
          display: flex;
            position: relative;
            max-width: 500px;
            margin: 1em auto;
            padding: 1em 1.5em;
            border: 2px solid #2589d0;
            border-radius: 3px;
            color: #4D4D4D;
        }
        
        .box-021::before {
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: -1em;
            left: -1em;
            width: 2em;
            height: 2em;
            border-radius: 50%;
            background-color: #2589d0;
            color: #fff;
            font-weight: 600;
            content: attr(data-number);
        }


        .list-recipe li{
          max-width: 980px;
          margin-left: auto;
          margin-right: auto;
          display:flex;
          align-items:center;
          margin-top: 1rem;
        }
      
        .list-recipe li:nth-child(2){
          flex-direction: row-reverse;
        }
              
        .list-recipe li:nth-child(4){
          flex-direction: row-reverse;
        }

        .list-recipe li:nth-child(6){
          flex-direction: row-reverse;
        }

          @media screen and (max-width: 768px) {
           .list-recipe li {
              display: block;
              font-size: 1.325em;
              padding: 1rem;
  }
}
        
        .setumei-title-blue {
          font-family: 'Noto sans Jp','Yu Gothic black',sans-serif,'メイリオ';
          letter-spacing: .06em;
          line-height: 1.312em;
          color: #28AA79;
          font-size: 28px;
          font-weight: bold;
          padding: 1rem;
        }

          @media screen and (max-width: 768px) {
            .item-comparison  {
                font-size: 16px;
      }
    }


        .sideimage {
          object-fit: cover;
          max-width: 520px; /*画像サイズ指定*/
          height: auto;
          margin: 10;
          padding: 0;
          overflow: hidden;
          position: relative;
        }
        
        .recipi-image{
          max-width: 520px;
        }

        .recipe-info{
          max-width: 520px; /*画像サイズ指定*/
          color: #4D4D4D;
        }

/* 以下シーンの番号説明*/

.item-list{
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    overflow:		hidden;
    flex-wrap: wrap;
  }
  .item-list .item{
    max-width: 300px;
    margin-left: 50px;
    margin-right: 50px;
    margin-top: 30px;
    margin-bottom: 30px;
    display: flex;
    flex-wrap: wrap;
  }
  

/* 以下説明画像左言葉右装飾*/


.box-img,
.box-text{
  display: inline-block;
}

/* 以下説明画像右言葉左装飾*/
          .box-img,
.box-text{
  display: inline-block;
}


           /* 商品説明ミニ横並び */

.mini-n {
    display: flex; /*横並び*/
  }


    @media screen and (max-width: 768px) {
.mini-n {
    font-size: 1.325em;
    display: block;
    text-align: center;
  }
}


  .mini-n .image {
    width: 640px; /*画像サイズ指定*/
    margin: 10;
    padding: 0;
    overflow: hidden;
    position: relative;
  }

    @media screen and (max-width: 768px) {
.mini-n .image {
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;


  }
}


  .mini-n .right {
    margin: 10 10 10 10;
    padding: 0;
  }
  .mini-n .title {
    font-family:'Noto Sans JP',sans-serif;
    letter-spacing: .06em;
    line-height: 2em;
    color: #20783C;
    margin-bottom: 0.5px;
    font-weight: bold;
    font-size: 26px;
    text-align: left;
  }
  .mini-n.text {
    margin: 3px 10px 10px;
    padding: 0;
  }
  
  /* 画像を天地中央表示 */
  
  .mini-n .image {
    overflow: hidden;
    position: relative;
  }
  .mini-n .image::before {
    content: "";
    display: block;
    padding-top: 58%;
  }
  .mini-n .image img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }

  

 /* 下記比較ライト */

.item-comparison {
    display: flex;
    justify-content: space-between;
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1em;
    margin-bottom: 1em;
    padding-bottom: 30px;
  }

  @media screen and (max-width: 768px) {
.item-comparison  {
    font-size: 16px;
    display: block;
  }
}

  .item-comparison .item {
    display: flex;
    flex-direction: column;

    margin: 0;
    padding: 2.5rem;
    box-sizing: border-box;
  }

  @media screen and (max-width: 768px) {
.item-comparison .item {
    max-width: 100%;
  }
}

  .item-comparison .item .image {
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
  }

  .item-comparison .item .image img {
    max-width: 100%;
  }

  .item-comparison .item .title {
    font-family: 'Noto sans Jp','Yu Gothic black',sans-serif,'メイリオ';
    color: #20783C;
    margin: 10px 0 0;
    padding: 0 20px;
    font-weight: bold;
    font-size: 20px;
    text-align: center;

  }

  .item-comparison .item .description {
    font-family: 'Noto sans Jp','Yu Gothic black',sans-serif,'メイリオ';
    letter-spacing: .06em;
    line-height: 1.5em;
    color: #4D4D4D;
    margin: 5px 0 20px;
    padding: 5px 20px;
    font-size: 18px;
    flex: 1;
  }

  .item-comparison .item .link {
    margin: 20px 0 0;
    padding: 0 20px;
    font-size: 16px;
    text-align: center;
  }

  .item-comparison .item .link a{
    display: inline-block;
    padding: 10px 20px;
    text-align: center;
    background: #20783C;
    color: #FFF;
    font-weight: bold;
    text-decoration: none;
    box-sizing: border-box;
    border-radius:  4px;
  }

   /* 下記比較ライト下2段 */

  .item-comparison-2 {
    display: flex;
    justify-content: space-between;
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1em;
    margin-bottom: 1em;
    padding-bottom: 30px;
  }

  .item-comparison-2 .item {
    display: flex;
    flex-direction: column;
    width: 42%;
    margin: 0;
    padding: 10px 5px 20px 5px;
    box-sizing: border-box;
    background: #fff;

  }

  .item-comparison-2 .item .image {
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
  }

  .item-comparison-2 .item .image img {
    width: 100%;
  }

  .item-comparison-2 .item .title {
    font-family: 'Noto sans Jp','Yu Gothic black',sans-serif,'メイリオ';
    color: #21783C;
    margin: 10px 0 0;
    padding: 0 20px;
    font-weight: bold;
    font-size: 20px;
    text-align: center;

  }

  .item-comparison-2 .item .description {
    font-family: 'Noto sans Jp','Yu Gothic black',sans-serif,'メイリオ';
    letter-spacing: .06em;
    line-height: 1.5em;
    color: #4D4D4D;
    margin: 5px 0 20px;
    padding: 5px 20px;
    font-size: 18px;
    flex: 1;
  }

  .item-comparison-2 .item .link {
    margin: 20px 0 0;
    padding: 0 20px;
    font-size: 16px;
    text-align: center;
  }

  .item-comparison-2 .item .link a{
    display: inline-block;
    padding: 10px 20px;
    text-align: center;
    background: #2589d0;
    color: #FFF;
    font-weight: bold;
    text-decoration: none;
    box-sizing: border-box;
    border-radius:  4px;
  }


  /* 下記おすすめ業種 */
  .heading-007 {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
    position: relative;
    color: #4D4D4D;
    height: 40px;
}

  @media screen and (max-width: 768px) {
    .heading-007  {
      font-size: 16px;
     }  
    }


.heading-007:before {
    content: '';
    display: inline-block;
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background-color: #2589d0;

}

/* 下記関連商品 */
.sample05 {
  width: 300px;
	height: 400px;
	vertical-align: top;
	margin: 10px 8px;
	border-radius: 6px;
	box-shadow: 0px 2px 4px #aaa;
	display: inline-block;
	position: relative;
}
.sample05 .card05 {
	width: 100%;
	height: 100%;
}
.sample05 h2 {
	font-size: 18px;
	padding: 4px 16px;
}
.sample05 p {
	padding: 4px 16px;
}
.sample05 .caption {
	font-size: 28px;
	text-align: center;
	padding-top: 90px;
	color: #fff;
}
.sample05 img {
	width: 300px;
	height: 200px;
	border-radius: 6px 6px 0 0;
}
.sample05 .mask {
	width: 300px;
	height: 200px;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	border-radius: 6px;
	background: rgba(0,0,55,0.5);
	-webkit-transition: all 0.2s ease;
	transition: all 0.2s ease;
}
.sample05:hover .mask {
	opacity: 0.7;
}

.kanrensyouhin {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

/* 3つ横並び要素、動きなしバージョン */
.content {
  max-width: 1160px;
  margin-left: auto;
  margin-right: auto;
  line-height: 0.85em;
  color: #4D4D4D;
  padding: 1rem;
}

.scene-wrap{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.scene-list img {
  width: 100%;
  max-width: 300px;
}

.scene-list-title {
  color: #0c4e34;
  font-size: 24px;
  font-weight: bold;
  margin: 30px 0;
  text-align: center;
}

  @media screen and (max-width: 768px) {
.style-daimei {
    font-size: 1.325em;
  }
}


.scene-list-text{
font-size: 16px;
line-height: 1.6;
max-width: 300px;
font-weight: bold;
}

  /* 下記h2 title style */
  .style-daimei {
    color: #4D4D4D;
    font-size: 36px;
    max-width: 960px;
    padding-top: 1.5em;
    margin-bottom: 60px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    position: relative;
    font-weight: bold;
}

.style-daimei:before {
  content: '';
  display: inline-block;
  position: absolute;
  bottom: -20px; /* 下線の距離*/
  left: 50%;
  transform: translateX(-50%);
  width: 70px;/* 下線の長さ*/
  height: 6px;/* 下線の高さ*/
  background-color: #28AA79;
}

  @media screen and (max-width: 768px) {
.style-daimei {
    font-size: 1.325em;
  }
}


.style-kigyou-style{
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.style-kigyou{
  font-size: 20px;
  line-height: 1.5;
  margin-top: 5px;
  position: relative;
  padding-left: 15px;
}

.style-kigyou:before{
content: '';
position: absolute;
top: 0.3em;
left: 0;
-webkit-transform: rotate(50deg);
-ms-transform: rotate(50deg);
transform: rotate(50deg);
width: 5px;
height: 10px;
border-right: 3px solid #8b6b4e;
border-bottom: 3px solid #8b6b4e;
}


  /*============================================================
  
    Common
    
  ============================================================*/
  
  body {
    background:#FFF;
    line-height:200%;
      font-size: 13px;
    color:#000;
    margin:0;padding:0;
    font-family:'Noto Sans JP',sans-serif;
    font-weight:400;
  }
    
  @media (max-width: 640px) { body { font-size: 13px; line-height: 22px; }}
  
  
  /* text-select-color */
  ::selection {
      background: #2FB0CF;
      color: #fff;
  }
  
  /*Firefox*/
  ::-moz-selection {
      background: #2FB0CF;
      color: #fff;
  }
  
  /* tel PC無効 */
  
  @media print, screen and (min-width:769px) {
  
  a[href^="tel:"] {
      pointer-events: none;
  }
  
  }
  
  
  /*------------------  useful --------------------------*/
  
  .bold { font-weight:bold;}
  .center {text-align:center;}
  .t_left {text-align:left;}
  .t_right {text-align:right;}
  .clear {clear:both;}
  .f_left {float:left;}
  .f_right {float:right;}
  
  
  .b_red { background:#F6C2C2;}
  .b_orange { background:#FFE5CB;}
  .b_blue { background:#01499B;}
  .b_liteblue { background:#F3F7FA;}
  .b_green { background:#B2DCB2;}
  .b_glay {background:#F3F1F0;}
  .glay_bdr { border:1px solid #999; background:#FFF;}
  .pink {color:#E54B70;}
  .s_pink {color:#F85F4B;}
  .d_pink {color:#BF504C;}
  .green {color:#80BA2C;}
  .yellow {color:#F8C53E;}
  .orange {color:#EA5F1F;}
  .blue {color:#00489A;}
  .d_blue {color:#00316C;}
  
  a:hover {text-decoration:none;}
  
  .clearfix:after{
    font-size: 16px;
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
  }
  
  .clearfix{display:inline-block;}
  
  /* Hides from IE-mac \*/
  * html .clearfix{height:1%;}
  .clearfix{display:block;}
  /* End hide from IE-mac */
  
  
  /* txt,caption */
  .font22 {font-size:22px;}
  .font20 {font-size:20px;}
  .font18 {font-size:18px;}
  .font16 {font-size:16px;}
  .font14 {font-size:14px;}
  .font12 {font-size:12px;}
  .font10 {font-size:10px;}
  .note {font-size:68%;line-height:150%;}
  
  .var_center {text-align:center !important;}
  @media only screen and (max-width : 768px){
  .var_center {text-align:left !important;}
  }
  
  
  /* pc_del,sp_del */
  @media print, screen and (min-width:768px) {
  .pc_del {display:none;}
  }
  @media print, screen and (max-width:768px) {
  .sp_del {display:none;}
  }
  
  
  /* sp_width */
  @media print, screen and (max-width:768px) {
  .sp_width {width:90%;margin-left:auto;margin-right:auto;}
  }
  @media print, screen and (max-width:768px) {
  .sp_width_ful {width:100% !important;}
  }
  
  
  /*------------------  margin --------------------------*/
  
  .mtb10 {margin:10px 0 !important;}
  .mtb20 {margin:20px 0 !important;}
  .mtb30 {margin:30px 0 !important;}
  .mtb40 {margin:40px 0 !important;}
  
  .ptb20 {padding:10px 0 !important;}
  .ptb50 {padding:50px 0 !important;}
  .ptb70 {padding:70px 0 !important;}
  
  .mt10 { margin-top:10px !important;}
  .mb10 { margin-bottom:10px !important;}
  .mt15 { margin-top:15px !important;}
  .mb15 { margin-bottom:15px !important;}
  .mt20 { margin-top:20px !important;}
  .mb20 { margin-bottom:20px !important;}
  .mt30 { margin-top:30px !important;}
  .mb30 { margin-bottom:30px !important;}
  .mt40 { margin-top:40px !important;}
  .mb40 { margin-bottom:40px !important;}
  .mb40 { padding-top:40px !important;}
  .mt50 { margin-top:50px !important;}
  .mb50 { margin-bottom:50px !important;}
  .mt60 { margin-top:60px !important;}
  .mb60 { margin-bottom:60px !important;}
  .mt70 { margin-top:70px !important;}
  .mb70 { margin-bottom:70px !important;}
  .mt80 { margin-top:80px !important;}
  .mb80 { margin-bottom:80px !important;}
  .mt90 { margin-top:90px !important;}
  .mb90 { margin-bottom:90px !important;}
  
  .lh150 {line-height:150%;}
  
  
  
   /** common
  ===========================================*/
  
  #contents {margin:0 0 0 0;}
 
  
  
  .title1 {margin:0;padding:0;font-size:36px;text-align:center;color:#0A2D89;font-weight:800;line-height:130%;}
  @media print, screen and (max-width:768px) {
  .title1 {font-size:26px;}
  }
  
  .dis_flex {display:flex;justify-content:space-between;}
  @media print, screen and (max-width:768px) {
  .dis_flex {flex-direction: column;}
  }
  
  .info_tel {width: 50%;margin:0;padding:0;list-style:none;}
  .info_tel li {margin:0;padding:0 1% 0 0;color:#FFF;float:left;line-height:130%;}
  .info_tel li.tel_no {font-size:36px;font-family: 'Roboto', sans-serif;font-weight:550;}
  @media print, screen and (max-width:768px) {
  .info_tel li.tel_no {font-size:36px;}
  }
  
  .to_contact {width:47%;background:#FFFF00 url(https://www.csc-biz.com/contact/) no-repeat center right;text-align:center;font-size:16px;font-weight:600;}
  .to_contact a {width:60%;color:#01499B;text-decoration:none;display:block;padding:3% 20%;}
  .to_contact:hover {opacity: 0.8;}
  @media print, screen and (max-width:920px) {
  .to_contact a {padding:10% 20% 3% 20%;}
  }
  @media print, screen and (max-width:768px) {
  .info_tel {width:100% !important;}
  .to_contact {width:100% !important;margin-top:10px !important;}
  .to_contact a {padding: 3% 20%;}
  }
  
  
  
  
  .t_copy {font-size:36px;text-align:center;line-height:100%;}
  [data-ruby] { position: relative;}
  [data-ruby]::before {
      content: attr(data-ruby);
      position: absolute;
      top: -1.5em;
      left: 0;
      right: 0;
      margin: auto;
      font-size: 10px;
    font-weight:normal;
  }
  
  .bg_del {background:none !important;}
  
  @media print, screen and (max-width:768px) {
  .t_copy {font-size:22px;line-height:150%;}
  }
  
  #pagetop {margin:-120px 0 0 0;padding:0;right:50px;position:absolute;z-index:10;}
  #pagetop a {margin:0;padding:0;}
  
  @media print, screen and (max-width:768px) {
  #pagetop {display:none;}
  }
  
  
  /** header
  ===========================================*/
  
  #head {width:100%;background:url(../img/bg_header.jpg) top right;padding:10px 0 40px 0;}
  #head p {margin:0;padding:0;}
  #head p img {vertical-align:bottom;}
  @media print, screen and (max-width:768px) {
  #head {background-size:cover;}
  }
  
  
  
  
  /** footer
  ===========================================*/
  
  #foot {background:#0072BD;color:#FFF;}
  #f_body {width:960px;margin:0 auto;padding:30px 0;}
  #f_body p {border-bottom:1px solid #2C8AC8;margin-bottom:15px;padding-bottom:15px;font-size:12px;line-height:150%;}
  #f_body ul {margin:0 80px 0 0;padding:0;float:left;}
  #f_body li {margin:0;padding:2px 0;list-style-type:none;font-size:12px;line-height:150%;}
  
  #f_body li a:link { color: #FFF; text-decoration: none;	}
  #f_body li a:visited { color: #FFF; text-decoration: none;	}
  #f_body li a:hover { color: #FFF; text-decoration: underline;	}
  #f_body li a:active { color: #FFF; text-decoration: underline;	}
  #f_body li a:focus { color: #FFF;  text-decoration: underline;	}
  
  #f_address {width:960px;margin:43px auto 0 auto;}
  #f_address .clearfix p {float:left;margin:0 30px 0 0;font-size:14px;line-height:150%;}
  p.copyright {text-align:right;font-size:10px;color:#777;}
  
  #f_address a:link { color: #0C79BF; text-decoration: underline;	}
  #f_address a:visited { color: #0C79BF; text-decoration: underline;	}
  #f_address a:hover { color: #0C79BF; text-decoration: none;	}
  #f_address a:active { color: #0C79BF; text-decoration: none;	}
  #f_address a:focus { color: #0C79BF;  text-decoration: none;	}
  
  @media print, screen and (max-width:980px) {
  #f_body {width:90%;}
  #f_address {width:90%;}
  #f_address .clearfix p {margin:0 0 20px 0;}
  p.copyright {text-align:center;}
  }
  @media print, screen and (max-width:768px) {
  #f_body ul {float:none;}
  }
  
   /** top
  ===========================================*/
  
  #tv_pickup {margin:40px 0 0 0;display:flex;justify-content:space-between;}
  #tv_pickup p {margin:0;padding:0;font-size:12px;line-height:150%;}
  #tv_pickup p img {margin:0 0 15px 0;}
  #tv_pickup ul {margin:0 0 10px 0;padding:0;list-style:none;}
  #tv_pickup li {margin:0;padding:0;font-size:10px;line-height:150%;letter-spacing:-0.1em;}
  @media print, screen and (max-width:980px) {
  #tv_pickup p {}
  #tv_pickup p img {width:100%;}
  #tv_pickup ul {margin-left:5%;}
  #tv_pickup li img {width:100%;}
  }
  @media print, screen and (max-width:768px) {
  #tv_pickup {flex-direction: column;}
  #tv_pickup ul {margin:0;}
  #tv_pickup li {margin:20px 0 0 0;}
  }
  
  .inquiry_box {background:#C7E8FB;padding:12px 16px;}
  .inquiry_box .info_tel {width:55%;margin:10px 0 0 1%;}
  .inquiry_box .info_tel li {margin:0;padding:0 3% 0 0;color:#000;}
  .inquiry_box .info_tel li.tel_no {font-size:32px;color:#0A2D89;font-weight:800;line-height:100%;}
  .inquiry_box .to_contact {width:47%;}
  @media print, screen and (max-width:920px) {
  .inquiry_box .to_contact a {padding:7% 20% 3% 20%;}
  }
  @media print, screen and (max-width:768px) {
  .inquiry_box .to_contact a {padding:3% 20%;}
  }
  
  .copy_light1 {margin:0;padding:0 0 15px 0;color:#FFF;text-align:center;font-size:20px;font-weight:600;background:url(../img/underallow.jpg) no-repeat bottom center;letter-spacing:0.03em;}
  .copy_light1 span {font-size:32px;color:#FFFF0D;}
  .copy_light2 {margin:0;padding:13px 0 0 0;color:#FFF;text-align:center;font-size:30px;font-weight:700;line-height:86px;}
  .copy_light2 span {font-size:86px;color:#FFFF0D;letter-spacing:-0.1em;}
  .copy_light2 span b {font-weight:100 !important;}
  .copy_light3 {margin:0;padding:0;list-style:none;display:flex;justify-content:space-between;}
  .copy_light3 li {margin:0;padding:0;color:#FFF;text-align:center;font-size:16px;font-weight:400;letter-spacing:-0.1em;}
  .copy_light3 li img {border:4px solid #FFF;margin-bottom:15px;}
  .copy_light3 li span {font-size:26px;color:#FFFF0D;font-weight:600;}
  .copy_light4 dl {margin:0;padding:0;}
  .copy_light4 dt {margin:0;padding:35px 0 20px 0;font-size:22px;font-weight:600;line-height:150%;}
  .copy_light4 dd {margin:0;padding:0;font-size:14px;}
  .copy_light4 p {margin:0;padding:0;}
  .copy_light5 {margin:16px 0 0 0;padding:0;}
  .copy_light5 dt {margin:0;padding:7px 20px;color:#FFF;background:#01499B;font-size:16px;}
  .copy_light5 dd {margin:0;padding:15px 0 0 0;font-size:14px;}
  @media print, screen and (max-width:980px) {
  .copy_light3 li {width:31%;}
  .copy_light3 li img {width:100%;}
  }
  @media print, screen and (max-width:768px) {
  .copy_light1 {font-size:16px;}
  .copy_light1 span {font-size:24px;}
  .copy_light2 {font-size:16px;}
  .copy_light2 span {font-size:40px;}
  .copy_light3 {flex-direction: column;}
  .copy_light3 li {width:100%;margin-bottom:25px;}
  .copy_light4 p {margin:10px 0 0 0;}
  .copy_light {flex-direction: column;}
  }
  
  .work_box1 {margin:0;padding:0;display:flex;justify-content:space-between;}
  .work_box1 dt {width:231px;margin:0;padding:60px 0 0 0;background:#C7E8FB;font-size:20px;text-align:center;font-weight:500;line-height:200%;letter-spacing:-0.1em;}
  .work_box1 dd {width:231px;margin:0;padding:10px 0 0 0;background:#0A2D89;color:#FFF;font-size:16px;text-align:center;font-weight:500;}
  .work_box1 dd img {margin:10px 0 0 0;padding:0;vertical-align:bottom;}
  .work_box2 {width:49%;margin:0 0 30px 0;padding:0;}
  .work_box2 dt {margin:0 0 15px 0;padding:0 0 15px 0;color:#0A2D89;font-size:20px;font-weight:600;border-bottom:2px solid #0A2D89;}
  .work_box2 dd {margin:0;padding:0;font-size:14px;}
  @media print, screen and (max-width:980px) {
  .work_box1 dt {width:25%;padding:30px 0 0 0;}
  .work_box1 dd {width:25%;}
  .work_box1 dd img {width:100%;}
  }
  @media print, screen and (max-width:768px) {
  .work_box1 {flex-direction: column;}
  .work_box1 dt {width:100%;margin-bottom:15px;padding:3% 0;}
  .work_box1 dd {width:100%;margin-bottom:15px;}
  .work_box1.mt15 {margin-top:0 !important;}
  .work_box2 {width:100% !important;}
  }
  
  .bg_voice 
  .voice_box {width:42%;margin:30px 0 0 0;padding:3%;background:#FFF;}
  .voice_box dt {margin:0 0 14px 0;padding:0 0 14px 0;border-bottom:2px solid #E7E7E7;text-align:center;font-size:24px;font-weight:600;}
  .voice_box dt span {font-size:14px;color:#0A2C87;}
  .voice_box dd {margin:0;padding:0;font-size:14px;}
  .voice_box dd img {margin-left:15px;float:right;}
  .voice_box dd a {display:block;background:#0A2C87 url(../img/allow_w.png) no-repeat center right;text-align:center;font-size:16px;font-weight:600;color:#FFF;text-decoration:none;margin-top:15px;padding:8px 0;}
  .voice_box dd a:hover {opacity: 0.8;}
  @media print, screen and (max-width:768px) {
  .bg_voice {background-size:cover;}
  .voice_box {width:92% !important;}
  }
  
  
  .lineup_box p {width:49%;margin:0;padding:0;}
  .lineup_box p img {width:100%;max-width:469px;}
  .lineup_box dl {width:49%;margin:0;padding:0;}
  .lineup_box dt {margin:0 0 20px 0;padding:30px 0 25px 0;font-size:28px;font-weight:600;border-top:4px solid #0A2D89;border-bottom:1px solid #DEDEDE;}
  .lineup_box dt span {font-size:16px;color:#0A2C87;font-weight:600;}
  .lineup_box dd {font-size:14px;margin:0;padding:0;color:#333;}
  .lineup_box dd.lineup_info {padding:6px;background:#E1F2FA;border:1px solid #AFDCF1;font-size:12px;line-height:150%;}
  .lineup_box dd.lineup_info img {float:left;margin-right:8px;}
  @media print, screen and (max-width:768px) {
  .lineup_box p {width:100% !important;}
  .lineup_box p img {max-width:100%;}
  .lineup_box dl {width:100% !important;}
  .lineup_box dd.lineup_info {padding:15px;}
  .lineup_box dd.lineup_info img {width:100%;float:none;margin-right:0;}
  .lineup_order {order: 1;}
  }
  
  
  .spec_tbl {width:100%;margin:0;padding:0;background:#ccc;}
  .spec_tbl th {width:15%;margin:0;padding:7px 0;background:#eee;}
  .spec_tbl td {margin:0;padding:7px 0;background:#fff;text-align:center;}
  @media print, screen and (max-width:768px) {
  .spec_tbl th {width:30%;}
  }
  
  
  
  
  
  
  
  
   /** contact
  ===========================================*/
  
  .inquiry {margin:0;padding:0;border-top:1px solid #BBB;
      display:-webkit-box;
      display:-moz-box;
      display:-ms-flexbox;
      display:-webkit-flex;
      display:-moz-flex;
      display:flex;
      -webkit-box-lines:multiple;
      -moz-box-lines:multiple;
      -webkit-flex-wrap:wrap;
      -moz-flex-wrap:wrap;
      -ms-flex-wrap:wrap;
      flex-wrap:wrap;
  }
  .inquiry dt {width:25%;margin:0;padding:20px 0;border-bottom:1px solid #BBB;float:left;font-size:16px;font-weight:bold;line-height:130%;}
  .inquiry dd {width:75%;margin:0;padding:20px 0;border-bottom:1px solid #BBB;float:left;font-size:14px;line-height:180%;}
  
  .inquiry dt span {color:#F30;}
  
  .inquiry input[type="text"] {width:85%;padding:5px 2%;border:1px solid #BBB;line-height:200%;margin-bottom:7px;}
  .inquiry input[type="text"].short {width:50%;}
  .inquiry textarea {width:85%;height:200px;padding:5px 2%;border:1px solid #BBB;line-height:200%;margin-bottom:7px;}
  
  
  
  .to_submit {width:280px;margin:50px auto;font-size:16px;font-weight:bold;letter-spacing:0em;text-align:center;}
  .to_submit a {padding:18px 25px;display:block;background:#01499B url(../img/allow_w.png) no-repeat right center;color:#FFF;border-radius:10px;text-decoration:none;}
  .to_submit a:hover {opacity: 0.8;}
  .to_submit img {vertical-align:baseline;margin-right:15px;}
  
  .to_back {width:280px;margin:50px auto;font-size:16px;font-weight:bold;letter-spacing:0em;text-align:center;}
  .to_back a {padding:18px 25px;display:block;background:#666 url(../img/allow_w.png) no-repeat right center;color:#FFF;border-radius:10px;text-decoration:none;}
  .to_back a:hover {opacity: 0.8;}
  
  .confirm_btn {width:700px;margin:0 auto;}
  
  @media print, screen and (max-width:980px) {
  .inquiry {padding-top:20px;}
  .inquiry dt {width:100%;margin:0;padding:10px 0 0 0;float:none;border-bottom:none;}
  .inquiry dd {width:100%;margin:0 0 10px 0;padding-bottom:20px;float:none;line-height:130%;}
  }
  
  @media print, screen and (max-width:768px) {
  .confirm_btn {width:100%;margin:0;}
  .confirm_btn .f_left,.confirm_btn .f_right {width:80%;margin:20px auto;float:none;}
  }
  
  
  
  
  /* =========================================================================== */
  /*	accordion                                                                    */
  /* =========================================================================== */
  
  @media print, screen and (max-width:768px) {
  .tbl_fee tr.inner {}
  
  .tbl_fee tr {background:#F3F1F0; border-radius:0 0 10px 10px;padding:3% 0;display:block;}
  .tbl_fee tr.accordion {margin-top:3%;padding:0;display:block;border-radius:5px;background:#FFD9E0 url(../img/bt_on.png) no-repeat center right;}
  .tbl_fee tr.accordion td {margin:0; padding:2% 3%;border:none; text-align:left;font-weight:700;}
  }
  
  .max img {
    max-width: 100%;
    height: auto;
    text-align: center;
  }
  

  .tel-info {
    margin:0;/*余計な隙間を除く*/
    background-color: #C7E8FB;
    margin-left: auto;
    margin-right: auto;
  }
  .tel-info-wrap{
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
  }


  .naiyou{
    font-family: 'Noto sans Jp','Yu Gothic black',sans-serif,'メイリオ';
    letter-spacing: .03em;
    line-height: 1.8em;
    color: #4D4D4D;
    font-size: 20px;
    font-weight: 500;
  }

     /*枠線が伸びて出現*/
.line{
  position: relative; /* 枠線が書かれる基点*/
}

/*上下線*/
.line::before,
.line::after{
  position: absolute;
  content:"";
  width:0;
  height:1px;
  background:#333;/* 枠線の色*/
}

/*左右線*/
.line2::before,
.line2::after{
  position: absolute;
  content:"";
  width: 1px;
  height:0;
  background:#333;/* 枠線の色*/
}

/*上線*/
.line::before {
    top:0;
    left:0;
    animation: lineAnime .5s linear 0s forwards;/*表示されて0秒後に上線が0.5秒かけて表示*/
}

/*右線*/
.line2::before{ 
    top:0;
    right:0;
    animation: lineAnime2 .5s linear .5s forwards;/*表示されて0.5秒後に右線が0.5秒かけて表示*/
}

/*下線*/
.line::after { 
    bottom:0;
    right:0;
    animation: lineAnime .5s linear 1s forwards;/*表示されて1秒後に下線が0.5秒かけて表示*/
}

/*左線*/
.line2::after{ 
    bottom:0;
    left:0;
    animation: lineAnime2 .5s linear 1.5s forwards;/*表示されて1.5秒後に左線が0.5秒かけて表示*/
}

@keyframes lineAnime {
    0% {width:0%;}
    100%{width:100%;}
}

@keyframes lineAnime2 {
    0% {height:0%;}
    100%{height:100%;}
}

/*枠線内側の要素*/
.line .lineinappear{
    animation: lineInnerAnime .5s linear 1.5s forwards;/*1.5秒後に中央のエリアが0.5秒かけて表示*/
    opacity: 0;/*初期値を透過0にする*/	
}

@keyframes lineInnerAnime{
    0% {opacity:0;}
    100% {opacity:1;}
}

  
.photo-image{
  display:flex;
  margin-left: auto;
  margin-left: auto;
  justify-content: space-evenly;

}

.naiyou-graph{
  font-family: 'Noto sans Jp','Yu Gothic black',sans-serif,'メイリオ';
  letter-spacing: .03em;
  line-height: 1.5em;
  color: #4D4D4D;
  font-size: 20px;
  text-align: center;

}


  .cta_btn09 {
    font-weight: bold; /* 文字の太さ */
    text-align: center;
    letter-spacing: 0.1em;
    align-items: center;
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    margin: 0px 30px 40px 0px;
    padding: 10px 0px 50px 0px;
  }
  
  .cta_btn09-contact , .cta_btn09-tel {
    font-size: 16px;
    color: #fff; /* 文字色 */
    position: relative;
    display: inline-block;
    text-decoration: none;
    padding: 1em 1em 1em 60px;
    border-radius: 100vh;
    width: 100%; /* ボタン幅 */
    max-width: 350px; /* 最低ボタン幅 */
    transition: 0.3s;
  }
  
  .cta_btn09-contact {
    background: #F88400; /* お問い合わせボタン色 */
  }
  
  .cta_btn09-tel {
    background: #4D9BC1; /* 電話ボタン色 */
  }
  
  .cta_btn09-contact::before,
  .cta_btn09-tel::before {
    content: '';
    position: absolute;
    left: 45px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    background-repeat: no-repeat;
    background-size: cover;
  }
  .cta_btn09-contact::before {
    width: 50px;
    height: 41px;
    background-image: url(https://find-a.jp/seotimes/wp-content/uploads/mail.png); /* メールアイコン */
  }
  
  .cta_btn09-tel::before {
    object-fit: cover;
    width: 100%;
    max-width: 40px;
    height: 40px;
    background-image: url(https://www.csc-biz.com/csc%20bland/light/new-mini/img/demoki-image.png); /* デモ機アイコン */
  }
  
  .cta_btn09 .copy_txt {
    line-height: 1;
    display: inline-block;
    padding: 0.6em 1.8em;
    letter-spacing: 0;
    background: #fff; /* 下文字背景色 */
    font-size: 90%; /* 下文字サイズ */
    border-radius: 8px;
  }
  
  .cta_btn09-contact .copy_txt {
    color: #F88400; /* 下文字色 */
    font-size: 16px;
  }
  
  .cta_btn09-tel .copy_txt {
    color: #4D9BC1; /* 下文字色 */
    font-size: 16px;
  }
  
  .cta_btn09 img {
      width: 1em;
      margin-right: 0.5em;
  }
  
  /* マウスオーバーした際のデザイン */
  .cta_btn09-contact:hover,
  .cta_btn09-tel:hover {
    transform: scale(1.05);
  }

   .hukidashi {
    font-weight: bold; /* 文字の太さ */
    text-align: center;
    letter-spacing: 0.1em;
    color: #4D4D4D;
    font-size: 16px;
    position: relative;
     margin-bottom: 2em;
     padding: 0.8rem 1.6rem;
     border-radius: 10px;
     background: #eee;
   }
   
   .hukidashi:before,
   .hukidashi:after {
     position: absolute;
     content: '';
     border-radius: 50%;
     background: #eee;
   }
   
   .hukidashi:before {
     right: 30px;
     bottom: -15px;
     width: 30px;
     height: 30px;
   }
   
   .hukidashi:after {
     right: 50px;
     bottom: -30px;
     width: 15px;
     height: 15px;
   }
           

   .clear{
    font-weight: bold;
    color: #4D4D4D;
    font-size: 16px;
   }

   .movie {
    text-align: center;
    background-color: #1d704f;
    color: #FFF;
    border-radius: 10px;
    padding: 1rem;
   }


  

   .circle_btn02 {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    max-width: 280px; /* ボタンの最大幅 */
    padding: 1em 2em;
    color: initial; /* 文字色 */
    transition: 0.3s ease-in-out;
    font-weight: bold;
    text-decoration: none;
    margin-left: auto;
    margin-right: auto;
  }
  
  .circle_btn02::before, .circle_btn02::after {
    content: "";
    position: absolute;
    display: block;
    top: 50%;
  }
  
  .circle_btn02::before {
    width: 0.5em;
    height: 0.5em;
    left: 1em;
    border-top: solid 2px #fff; /* 矢印の色 */
    border-right: solid 2px #fff; /* 矢印の色 */
    z-index: 2;
    transform: translateY(-50%) rotate(45deg);
    transition: all 0.3s;
  }
  
  .circle_btn02::after {
    left: 0;
    background:#21783C; /* 背景色 */
    z-index: 1;
    width: 3em;
    height: 3em;
    border-radius: 3em;
    transform: translateY(-50%);
    transition: all 0.5s;
  }
  
  .circle_btn02 span {
    position: relative;
    transition: all 0.3s;
    z-index: 3;
    color: #4D4D4D;
  }
  
  /* マウスオーバーした際のデザイン */
  .circle_btn02:hover span {
    color: #fff; /* 文字色 */
  }
  
  .circle_btn02:hover:before {
    left: 2rem;
  }
  
  .circle_btn02:hover:after {
    right: 0;
    width: 100%;
  }

 .section10-wrap {
    width: 1180px;
    margin-left: auto;
    margin-right: auto;
    font-size: 16px;
    padding: 3.5rem;
  }

.setseen-4 {
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  text-align:center;
  justify-content: space-between;
  width: 1060px;
  padding-top: 1.8rem;
}


.setseen-2 {
  text-align: center;
  font-size: 16px;
  font-weight: bold;
}

.daimei {
    width: 960px;
    font-size: 24px;
    text-align: left;
    padding: 0.25em 0.5em;
    color: #494949;
    background: transparent;
    border-left: solid 5px #7db4e6;
    font-weight: bold;
}



    
.table-wrap {
  padding: 0.5rem;
  text-align: left;
}

    @media screen and (max-width: 768px) {
.table-wrap {
    font-size: 1.325em;
    margin: 1em;
  }
}



table{
  border-collapse: collapse;
  margin-left: auto;
  margin-right: auto;
}
.tb01 th,
.tb01 td{
  padding: 16px;
  border: solid 1px #ccc;
  box-sizing:border-box;
}
.tb01 th {
  font-weight: bold;  
  text-align:center;
  background-color: #eeeeee;
  color: #4D4D4D;
}

.tb01 td img {
 max-width: 80px;
 text-align:left;
}
@media screen and (max-width: 640px) {
  .tb01 {
    width: 100%;
  }
  table.tb01 th,
  table.tb01 td {
    display: block;
    width: 100%;
    border-bottom:none;
  }
  .tb01 tr:last-child{
    border-bottom: solid 1px #ccc;
  }
}

.graph2 {
  width: 100%;
  text-align: left;
  border-spacing: 0;
  padding-left: 50px;
  padding-bottom: 2.5rem;
 }
 .graph2 th {
  padding: 18px;
  border-bottom: solid 4px #778ca3;
  color: #778ca3;
  background-color: transparent;
  text-align: left;
 }
 
 .graph2 td {
  padding: 10px;
  font-size: 16px;
  color: #4D4D4D;
  text-align: left;
 }

.navigation {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

.navigation ol {
  display: flex;
  justify-content: space-between;
  margin:0px;
}

  @media screen and (max-width: 768px) {
.navigation ol  {
    display: block;
    text-align: center;
    font-size: 1.352em;
  }
}




.navigation ol li{
  position: relative;
  display: inline-block;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background-color: #2c8c66;
}

.navigation-text {
  position: absolute;
  display: inline-block;
  left: 6%;
  top: 25%;
  width: 90%;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  color: #FFFF0D;
  margin: 0;
  font-size: 30px;
}
.cta-btn-2 {
  background-color:#0C4E34;
  margin-left: auto;
  margin-right: auto;
  padding: 1rem;
}


.cta-btn2-wrap{
  color: #FFF;
  font-size: 20px;
  font-weight: bold;

}

.cta-btn-list {
  max-width: 650px;
text-align: center;
  display: flex;
  flex-wrap: wrap;
  margin-left: auto;
  margin-right: auto;
  justify-content: space-between;
  text-decoration: none;
}


  @media screen and (max-width: 768px) {
.cta-btn-list  {
    font-size: 1.375rem;
    display: block;
  }
}


.cta-text-yellow {
color: #ecec09;
font-size: 22px;
padding: 1rem;
}


.cta-btn-yellow {
	display: block;
	text-align: center;
	text-decoration: none;
	width: 280px;
  margin-top: 0.5rem;
	font-weight: bold;
	border: 2px solid #e7e70b;
	background: #e7e70b;
	color: #0C4E34;
	transition: 0.5s;
  margin-bottom: 1rem;
}

.cta-btn-yellow a {
	display: block;
	text-align: center;
	text-decoration: none;
	margin: auto;
  margin-top: 1rem;
	font-weight: bold;
	color: #0C4E34;
	transition: 0.5s;
  margin-bottom: 1rem;
  font-size: 16px;
}

.cta-btn-yellow:hover {
	color: #FFF;
	background: #f6ff00;
}

  @media screen and (max-width: 768px) {
.cta-btn-yellow  {
    width: 100%;
  }
}

/* CTA_05 */

.cta05-cvset {
  padding: 100px 0 0;
  background-color: #cbede0;
}



.cta05-cvset .cta05-inner {

  padding: 10px 0 20px;
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}


.cta05-inner-img {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}




.cta05-cvset .cta05-inner ul {
  list-style:none;
  margin-top: 3em;
  padding-inline-start:0;
  border: none;
  padding: 1rem;
}

.cta05-cvset-title {
  position: relative;
  font-size: 1.8em;
  line-height: 0.6em;
  font-weight: 800;
  font-style: normal;
  letter-spacing: .1em;
  position: absolute;
  top: -10px;
  left: 0;
  text-align: center;
  width: 100%;
  color: #4D4D4D;
}
.cta05-cvset-title .deco {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 20px;
  color: #20783C;
  white-space: nowrap;
  padding-bottom: 8px;
  margin-bottom: 16px;
}

.cta05-cvset-title .deco:before, .cta05-cvset-title .deco:after {
  display: inline-block;
  position: absolute;
  top: 42%;
  width: 28px;
  height: 2px;
  border-radius: 3px;
  background-color: #20783C;
  content: "";
  margin: auto -35px;
}
.cta05-cvset-title .deco:before {
  left: 0;
  -webkit-transform: rotate(50deg);
  transform: rotate(50deg);
}

.cta05-cvset-title .deco:after {
  right: 0;
  -webkit-transform: rotate(-50deg);
  transform: rotate(-50deg);
}

.cta05-cvset-list {
  display: flex;
  width: 100%;
  max-width: 780px;
  justify-content: space-between;
  margin: 0 auto;
}


  @media screen and (max-width: 768px) {
.cta05-cvset-list {
    font-size: 1.325em;
    display: block;
  }
}




.cta05-cvset-list li {
  max-width: 360px;
  width: 100%;
  margin: 0 5px;
}
.cta05-cvset-list img {
  width:100%;
  text-align:center;
}

.cta05-button.dwl, .cta05-button.etm {
  background-color: #fff;
  border: 3px solid #20783C;
  color: #20783C;
}
.cta05-button.dwl, .cta05-button.dmo, .cta05-button.etm {
  height: 96px;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.4em;
  text-align: center;
  flex-direction: column;
  white-space: nowrap;
  text-decoration: none;
}
.cta05-button.dmo {
  background-color:#20783C;
  border: 3px solid #20783C;
  color: #fff;
}
.cta05-button {
  position: relative;
  display: flex;
  width: 100%;
  height: 72px;
  text-align: center;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 12px;
  margin: 0;
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 6px 10px -2px rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.2);
  transition: 0.2s ease-in-out;
}


.cta05-button.dwl:hover, .cta05-button.dmo:hover, .cta05-button.etm:hover {
  background-color: #39b183;
  box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.15), 0 0 5px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}
.cta05-button.dwl small, .cta05-button.dmo small, .cta05-button.etm small {
  display: block;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2em;
  letter-spacing: 0;
  margin-bottom: 4px;
  white-space: nowrap;
}

.light-wrap {
  padding: 0.5rem;
  background-color: #E8F8F8;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}
.light-daimei{ 
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  background-color: #0c4e34;
  padding: 0.8rem;
  color: #FFF;
  width: 300px;
  margin-left: auto;
  margin-right: auto;
}

.light-wrap-2 {
  padding: 0.5rem;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}