@charset "UTF-8";
@media screen and (min-width: 768px),print {

.column-bottom{ padding: 0 2.6rem;}
#contentsmaincolumn{max-width: 816px;margin: 62px auto 70px auto;background: #fff;position: relative;border-radius: 20px;text-align: center;}
#contentsmaincolumn::before,
#contentsmaincolumn::after,
#contentsmaincolumn .inner-Box::before,
#contentsmaincolumn .inner-Box::after{ content: "";display: block;position: absolute;top: 20px;left: 20px;width: 8px; height: 8px;border-radius: 50%;z-index: 3; background: #4F181F;}
#contentsmaincolumn::after{left: auto;right: 20px;}
#contentsmaincolumn .inner-Box::before{top: auto;bottom: 20px;}
#contentsmaincolumn .inner-Box::after{top: auto;left: auto;right: 20px;bottom: 20px;}
#contentsmaincolumn .inner-Box{padding: 42px 40px 32px;}
#contentsmaincolumn .inner-Box span.icon{position: absolute;top: -34px;left: 50%;transform: translateX(-50%);}
#contentsmaincolumn .inner-Box h2{font-size: 2.5rem;letter-spacing: 0.5rem;font-weight: bold;line-height: 1.5;}
#contentsmaincolumn .inner-Box h2 span{background: linear-gradient(transparent 60%, #FAD7CA 60%);}

#contentspickupcolumn{ margin: 0 0 100px; }
#contentspickupcolumn .inner-Box{max-width: 1100px;margin: 0 auto;}
#contentspickupcolumn .photo{position: relative;width: 48.2%;border-radius: 30px;overflow: hidden;float: left;}
#contentspickupcolumn .photo img{width: 100%;height: 372px;  transition: transform 0.4s ease; transform: scale(1); transform-origin: center center;}
#contentspickupcolumn .photo .icon{position: absolute;top: 30px;background: #4F181F;width: 104px;height: 30px;font-weight: 700;font-size: 1.4rem;letter-spacing: 0.098rem;line-height: 1;padding: 9px 5px 5px 21px;color: #fff;border-radius: 0px 15px 15px 0px;z-index: 3;}
#contentspickupcolumn .text-box{width: 49%;float: left;position: relative;left: 30px;top: -4px;}
#contentspickupcolumn .date-cate{margin-bottom: 12px;}
#contentspickupcolumn .date-cate .date{font-size: 14px;}
#contentspickupcolumn .date-cate .cate{font-size: 1.2rem;color: #fff;display: inline-block;background: #FCA98B;border-radius: 20px;padding: 7px 12px;line-height: 1;position: relative;top: -2px;margin: 0 2px 0px 0;}
#contentspickupcolumn h3{font-size: 2rem;letter-spacing: 0.2rem;line-height: 1.5;background: url(../images/common/line.svg)repeat-x bottom;padding-bottom: 12px;margin-bottom: 13px;}
#contentspickupcolumn .text{font-size: 1.4rem;font-weight: 400;letter-spacing: 0.14rem;line-height: 2;margin-bottom: 15px;}
#contentspickupcolumn .text span{  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; overflow: hidden;}
#contentspickupcolumn .btn{width: 94px;margin: 0 0 0 auto;display: block;font-size: 1.4rem;position: relative;font-weight: bold;padding: 0 16px 4px 0;border-bottom: 1px solid #4F181F;}
#contentspickupcolumn .btn .arr{position: absolute;top: -5px;right: -2px;transition: all 0.3s ease-in-out;}
#contentspickupcolumn .btn .arr img{ width: 12px; height: auto; }
#contentspickupcolumn a{display: block;}
#contentspickupcolumn a:hover .photo img { transform: scale(1.05); }
#contentspickupcolumn a:hover .btn .arr{ right: -5px;}

}

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

    #contentsmaincolumn{margin: 12.93vw 5.3vw 7.97vw;background: #fff;position: relative;border-radius: 3.23vw;text-align: center;}
    #contentsmaincolumn::before,
    #contentsmaincolumn::after,
    #contentsmaincolumn .inner-Box::before,
    #contentsmaincolumn .inner-Box::after{ content: "";display: block;position: absolute;top: 5.33vw;left: 5.33vw;width: 2.13vw; height: 2.13vw;border-radius: 50%;z-index: 3; background: #4F181F;}
    #contentsmaincolumn::after{left: auto;right: 5.33vw;}
    #contentsmaincolumn .inner-Box::before{top: auto;bottom: 5.33vw;}
    #contentsmaincolumn .inner-Box::after{top: auto;left: auto;right: 5.33vw;bottom: 5.33vw;}
    #contentsmaincolumn .inner-Box{padding: 9.8vw 5.67vw 8.53vw 6.67vw;}
    #contentsmaincolumn .inner-Box span.icon{position: absolute;top: -9vw;left: 50%;transform: translateX(-50%);width: 17vw;}
    #contentsmaincolumn .inner-Box h2{font-size: 5.33vw;letter-spacing: 1.07vw;font-weight: bold;line-height: 1.8;}
    #contentsmaincolumn .inner-Box h2 span{background: linear-gradient(transparent 60%, #FAD7CA 60%);}
    
    #contentspickupcolumn{margin: 0 0 12.97vw;}
    #contentspickupcolumn .inner-Box{margin: 0 5.4vw;}
    #contentspickupcolumn .photo{position: relative;border-radius: 5.2vw;overflow: hidden;margin-bottom: 3vw;}
    #contentspickupcolumn .photo img{width: 100%;height: 55.20vw;transition: transform 0.4s ease;transform: scale(1);transform-origin: center center;}
    #contentspickupcolumn .photo .icon{position: absolute;top: 5.4vw;background: #4F181F;height: 7vw;font-weight: 700;font-size: 3.20vw;letter-spacing: 0.26vw;line-height: 1;padding: 2vw 3.33vw 1.33vw 3.9vw;color: #fff;border-radius: 0.0vw 4.0vw 4.0vw 0.0vw;z-index: 3;}
    #contentspickupcolumn .text-box{position: relative;top: 0vw;}
    #contentspickupcolumn .date-cate{margin-bottom: 2.2vw;}
    #contentspickupcolumn .date-cate .date{font-size: 3.73vw;}
    #contentspickupcolumn .date-cate .cate{font-size: 3.2vw;color: #fff;display: inline-block;background: #FCA98B;border-radius: 5.33vw;padding: 1.87vw 3.2vw;line-height: 1;position: relative;top: 0vw;margin: 0 0.53vw 0.0vw 0;}
    #contentspickupcolumn h3{font-size: 5.33vw;letter-spacing: 0.53vw;line-height: 1.5;background: url(../images/common/line.svg)repeat-x bottom;padding-bottom: 3.2vw;margin-bottom: 2.87vw;background-size: auto 0.6vw;}
    #contentspickupcolumn .text{font-size: 3.73vw;font-weight: 400;letter-spacing: 0.37vw;line-height: 2;margin-bottom: 4.0vw;}
    #contentspickupcolumn .text span{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 9;overflow: hidden;}
    #contentspickupcolumn .btn{margin: 0 0 0 auto;display: block;font-size: 3.73vw;position: relative;font-weight: bold;padding: 0 4.27vw 1.07vw 0;border-bottom: 0.47vw solid #4F181F;width: 25vw;}
    #contentspickupcolumn .btn .arr{position: absolute;top: -1.5vw;right: 0vw;transition: all 0.3s ease-in-out;width: 3.1vw;}
    #contentspickupcolumn .btn .arr img{  height: auto; }
    #contentspickupcolumn a{display: block;}
    #contentspickupcolumn a:hover .photo img { transform: scale(1.05); }
    #contentspickupcolumn a:hover .btn .arr{ right: 0vw;}
    
}