@charset "Shift_JIS";
          
/*====================================================================
Detail template style
prefix: k036_td_20190418_katazuku_detailhtml
====================================================================*/
/* PCSP common */


.k036_td_20190418_katazuku_detailhtml {
  text-align: left;
  margin: 20px auto 50px;
}

.k036_td_20190418_katazuku_detailhtml .sepalater {
    border-top: 1px solid #333;
    margin: 0 15px;
    height: 25px;
}


/* 見出し */
.k036_td_20190418_katazuku_detailhtml .heading03_katazuku {
    position: relative;
}
            .k036_td_20190418_katazuku_detailhtml .heading03_katazuku .image {
                width: 50%;
                margin: 0 auto;
            }
            .k036_td_20190418_katazuku_detailhtml .heading03_katazuku .photo img {
                position: absolute;
            }
            .k036_td_20190418_katazuku_detailhtml .heading03_katazuku .photo img:first-child {
                width: 14%;
                left: 7%;
                top: 22%;
            }
            .k036_td_20190418_katazuku_detailhtml .heading03_katazuku .photo img:last-child {
                width: 19%;
                right: 3%;
                top: 0;
            }

            
/* カラムベース・共通 */
.k036_td_20190418_katazuku_detailhtml .column_outer {
    position: relative;
}

.k036_td_20190418_katazuku_detailhtml .column {
    position: relative;
}

.k036_td_20190418_katazuku_detailhtml .column2 + .column2 {
    margin-top: 10px;
}

.k036_td_20190418_katazuku_detailhtml .column2 + .column1 {
    margin-top: 10px;
}

.k036_td_20190418_katazuku_detailhtml .column2 + .column1 {
    margin-top: 10px;
}

    
    .k036_td_20190418_katazuku_detailhtml a:hover img {
        opacity: 0.9;
    }

    .k036_td_20190418_katazuku_detailhtml .sepalater {
        display: none;
    }
    
    .k036_td_20190418_katazuku_detailhtml .section {
        margin-top: 35px;
    }

    
/* カラム内要素 */
.k036_td_20190418_katazuku_detailhtml .column .link_detail {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 35%;
}

.k036_td_20190418_katazuku_detailhtml .column .link_detail_sub {
    position: absolute;
    right: 40px;
    bottom: 10px;
    width: 40%;
}

.k036_td_20190418_katazuku_detailhtml .column1 .link_detail {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 17.5%;
}


.k036_td_20190418_katazuku_detailhtml .separate {
    position: absolute;
    left: 50%;
    bottom: 10px;
    width: 1px;
    height: 98%;
    border-left: 2px dotted #ccc;
}




    
@media screen and (max-width: 699px) {
	/* SP可変 Liquid Layout */
        
    .k036_td_20190418_katazuku_detailhtml {
        overflow-x: visible;
    }
  
    .k036_td_20190418_katazuku_detailhtml .sepalater {
        display: block;
    }
    .k036_td_20190418_katazuku_detailhtml .pc {
        display: none !important;
    }
    .k036_td_20190418_katazuku_detailhtml .section {
        margin-top: 15px;
    }
    
    .k036_td_20190418_katazuku_detailhtml .column1,
    .k036_td_20190418_katazuku_detailhtml .column2 {
        padding: 0 15px;
    }
        
        
/* 見出し */
.k036_td_20190418_katazuku_detailhtml .heading03_katazuku {
    position: relative;
}
            .k036_td_20190418_katazuku_detailhtml .heading03_katazuku .image {
                width: 100%;
                margin: 0 auto;
            }

             
    /* カラムベース */
    .k036_td_20190418_katazuku_detailhtml .column {
        margin-bottom: 20px;
    }

    /* カラム内要素 */
    .k036_td_20190418_katazuku_detailhtml .column .link_detail {
        position: absolute;
        right: 10px;
        bottom: 10px;
        width: 40%;
    }

    .k036_td_20190418_katazuku_detailhtml .column .link_detail_sub {
        position: absolute;
        right: 6%;
        bottom: 3%;
        width: 32%;
    }

    .k036_td_20190418_katazuku_detailhtml .column1 .link_detail {
        position: absolute;
        right: 10px;
        bottom: 10px;
        width: 40%;
    }

}

@media screen and (min-width: 700px) {
    
            /* PC common */
            .k036_td_20190418_katazuku_detailhtml .sp {
                display: none;
            }
            
            .k036_td_20190418_katazuku_detailhtml .column_outer {
                box-sizing: border-box;
              padding: 0 15px;
            }

            .k036_td_20190418_katazuku_detailhtml .column {
              float: left;
              margin-bottom: 15px;
            }
            .k036_td_20190418_katazuku_detailhtml .column1 .column {
              margin-bottom: 0;
            }

            .k036_td_20190418_katazuku_detailhtml .column .image img {
              width: 100%;
              height: auto;
            }

            .k036_td_20190418_katazuku_detailhtml .column .image + .text {
              margin-top: 5px;
            }
           
}

@media screen and (min-width: 700px) and (max-width: 959px) {
	/* 960pxで固定 fixed */
  .k036_td_20190418_katazuku_detailhtml {
    width: 960px;
    margin: 20px auto 0;
  }

  /* pattern1 column2 */
  .k036_td_20190418_katazuku_detailhtml .column2 {
    width: 960px;
  }

  .k036_td_20190418_katazuku_detailhtml .column2 .column {
    width: 450px;
    margin-right: 30px;
  }

  .k036_td_20190418_katazuku_detailhtml .column2 .column:last-child {
    margin-right: 0;
  }
  
    .k036_td_20190418_katazuku_detailhtml .column .link_detail_sub {
        position: absolute;
        right: 30px;
        bottom: 7px;
        width: 140px;
    }
  

}

@media screen and (min-width: 960px) and (max-width: 1279px) {
	/* この範囲で可変 Liquid Layout */

      /* pattern1 column2 */
      .k036_td_20190418_katazuku_detailhtml .column2 .column {
        width: 49%;
      }

      .k036_td_20190418_katazuku_detailhtml .column2 .column:nth-of-type(odd) {
        margin-right: 2%;
      }
      
    .k036_td_20190418_katazuku_detailhtml .column .link_detail_sub {
        position: absolute;
        right: 37px;
        bottom: 7px;
        width: 140px;
    }

}

@media screen and (min-width: 1280px) {
    /* 1240pxで固定 fixed */
  .k036_td_20190418_katazuku_detailhtml {
    width: 1240px;
    margin: 20px auto 0;
  }

  /* pattern1 column2 */
  .k036_td_20190418_katazuku_detailhtml .column2 {
    width: 1250px;
  }
            .k036_td_20190418_katazuku_detailhtml .column2 .column {
              width: 585px;
              margin-right: 40px;
            }
            .k036_td_20190418_katazuku_detailhtml .column2 .column:nth-child(2) {
              margin-right: 0;
            }
            

.k036_td_20190418_katazuku_detailhtml .column .link_detail_sub {
    position: absolute;
    right: 43px;
    bottom: 8px;
    width: 168px;
}

}


/* アニメーション */
@keyframes k036_td_20190418_katazuku_detailhtml_show {
      0% {
        display: none;
        opacity: 0;
      }

      1% {
        display: block;
        opacity: 0;
      }

      100% {
        display: block;
        opacity: 1;
      }
}

.k036_td_20190418_katazuku_detailhtml .fadein {
    opacity : 0;
    transform : translate(0, 20px);
    transition : all 500ms;
}
.k036_td_20190418_katazuku_detailhtml .fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
}




.clear {/*確認用*/
    clear: both;
}