img {
   width: 100%;
   max-width: inherit;
}

.wrap {
   max-width: 1200px;
}

.h-34 {
   font-weight: 700;
   font-size: 34px;
   letter-spacing: 0.05em;
   line-height: 50px;
}

@media only screen and (max-width: 768px) {
   .h-20 {
      font-size: 14px;
      line-height: 20px;
   }

   .h-34 {
      font-size: 20px;
      line-height: 31px;
   }
}

.article__list {
   display: flex;
   flex-wrap: wrap;
   gap: 60px;
}

.article__list .item {
   width: calc(33.33% - 40px);
}

.article__list .thumb a {
   display: block;
   width: 100%;
   padding-top: 100%;
   position: relative;
}

.article__list .thumb a.movie {
   padding-top: 56.25%;
}


.article__list .thumb a img {
   display: block;
   height: 100%;
   object-fit: cover;
   position: absolute;
   top: 0;
   left: 0;
}

.article__list .ttl {
   font-size: 18px;
   line-height: 27px;
   padding-top: 21px;
}

.article__list .ttl a { font-weight: 500; }

.article__list .cat {
   font-size: 12px;
   line-height: 17px;
   padding: 12px 0 0;
}

.article__list dl {
   display: flex;
   justify-content: space-between;
   border-top: 1px solid #000;
   padding-top: 15px;
   font-weight: 400;
   font-size: 12px;
   line-height: 15px;
   margin-top: 14px;
}

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

   .article__list .ttl {
      font-size: 14px;
      line-height: 21px;
      padding-top: 15px;
   }

   .article__list .cat {
      padding: 15px 0 8px;
   }

   .article__list dl {
      font-size: 10px;
      padding-top: 8px;
   }
}

/*------
------*/
#kv {
   width: 100%;
   height: 100vh;
   position: relative;
}

#kv .slick-track,
#kv .slick-list,
#kv .slick-active {
   width: 100%;
   height: 100%;
}

#kv .slide {
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   padding: 35px 60px;
   color: #fff;
}

#kv .col {
   width: 55%;
}

#kv .thumb {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   z-index: -1;
}

#kv .thumb:before {
   content: '';
   width: 100%;
   height: 40%;
   background-image: linear-gradient(to bottom, transparent, #000);
   position: absolute;
   bottom: 0;
   left: 0;
}

#kv .thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

#kv .cate {
   display: inline-block;
   vertical-align: middle;
}

#kv .cate a {
   display: block;
   border: 1px solid #fff;
   color: #fff;
   font-weight: 500;
   font-size: 14px;
   line-height: 20px;
   border-radius: 50px;
   padding: 7px 20px;
}

#kv time {
   display: inline-block;
   vertical-align: middle;
   font-weight: 500;
   font-size: 14px;
   line-height: 20px;
   padding-left: 15px;
}

#kv h3 {
   padding-top: 10px;
}

#kv h3 a {
   color: #fff;
}

#kv .slick-dots {
   display: flex;
   justify-content: center;
   gap: 5px;
   width: 100%;
   position: absolute;
   top: 100%;
   left: 0;
   margin-top: 20px;
}

#kv .slick-dots li {
   width: 78px;
   height: 7px;
   position: relative;
}

#kv .slick-dots button {
   display: block;
   width: 100%;
   height: 100%;
   background: #ccc;
   border: 0;
   cursor: pointer;
   transition: all 0.3s;
   font-size: 0;
}

#kv .slick-dots .slick-active button,
#kv .slick-dots li:hover button {
   background: linear-gradient(to right, #3C3190, #6D1486);
}

@media only screen and (max-width: 768px) {
   #kv {
      height: 100vw;
   }

   #kv .slide {
      padding: 65px 20px 15px;
   }

   #kv .col {
      width: 100%;
   }

   #kv .cate a {
      font-size: 11px;
      padding: 4px 16px;
   }

   #kv time {
      font-size: 11px;
   }

   #kv h3 {
      font-size: 17px;
      line-height: 25px;
      padding-top: 7px;
   }

   #kv .slick-dots {
      gap: 3px;
      margin-top: 15px;
   }

   #kv .slick-dots li {
      width: 50px;
      height: 5px;
   }

   #kv .slick-dots li:hover button {
      background: #ccc;
   }

   #kv .slick-dots li.slick-active button {
      background: linear-gradient(to right, #3C3190, #6D1486);
   }
}

/*------
------*/
#sec1 {
   display: flex;
   flex-wrap: wrap;
   gap: 130px;
   padding: 150px 0 135px;
}

#sec1 .photo {
   width: calc(50% - 65px);
}

#sec1 .col {
   width: calc(50% - 195px);
}

#sec1 .desc {
   font-size: 14px;
   line-height: 27px;
   padding-top: 32px;
}

#sec1 .list {
   padding-top: 65px;
}

#sec1 .list article a {
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
   gap: 30px;
   padding-bottom: 20px;
}

#sec1 .list article a>div {
   width: calc(100% - 130px);
}

#sec1 .list article .thumb {
   width: 100px;
   padding-top: 100px;
   position: relative;
}

#sec1 .list article .thumb img {
   display: block;
   height: 100%;
   object-fit: cover;
   position: absolute;
   top: 0;
   left: 0;
}

#sec1 .list article .no {
   display: inline-block;
   vertical-align: middle;
   width: 90px;
   font-weight: 500;
   font-size: 14px;
   line-height: 20px;
   border: 1px solid #000;
   margin-right: 13px;
   padding: 2px 0;
   text-align: center;
}

#sec1 .list article .cat {
   display: inline-block;
   vertical-align: middle;
   /* font-weight: 500; */
   font-size: 14px;
   line-height: 20px;
}

#sec1 .list article .text {
   font-weight: 500;
   font-size: 18px;
   line-height: 27px;
   margin-top: 10px;
}

#sec1 .list article+article a {
   border-top: 1px solid #E6E6E6;
   padding-top: 20px;
}

@media only screen and (max-width: 768px) {
   #sec1 {
      flex-direction: column;
      flex-wrap: nowrap;
      gap: 0px;
      padding: 40px 0 75px;
   }

   #sec1 .desc {
      line-height: 24px;
      letter-spacing: 0.05em;
      padding-top: 18px;
   }

   #sec1 .col {
      width: 100%;
      padding: 0 20px;
      box-sizing: border-box;
   }

   #sec1 h2 {
      text-align: center;
   }

   #sec1 .list {
      padding-top: 45px;
   }

   #sec1 .list article a {
      gap: 20px;
      padding-bottom: 15px;
   }

   #sec1 .list article+article a {
      padding-top: 15px;
   }

   #sec1 .list article .no {
      display: block;
      width: 55px;
      font-size: 11px;
      line-height: 18px;
   }

   #sec1 .list article .cat {
      display: block;
      font-size: 12px;
      line-height: 17px;
      padding-top: 5px;
   }

   #sec1 .list article .text {
      font-size: 15px;
      line-height: 24px;
   }
}

/*------
------*/
#sec2,
#sec3,
#sec5 {
   padding: 0 60px 110px;
}

#sec2 .photo-main,
#sec3 .photo-main,
#sec5 .photo-main {
   margin: 0 -60px 80px;
}

#sec2 .desc,
#sec3 .desc,
#sec5 .desc {
   padding-top: 20px;
}

#sec2 .article__list,
#sec3 .article__list,
#sec5 .article__list {
   padding-top: 65px;
}

#sec2 .button,
#sec3 .button,
#sec5 .button {
   padding-top: 80px;
}

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

   #sec2,
   #sec3,
   #sec5 {
      padding: 0 20px 60px;
   }

   #sec2 .photo-main,
   #sec3 .photo-main,
   #sec5 .photo-main {
      margin: 0 -20px 40px;
   }

   #sec2 .desc,
   #sec3 .desc,
   #sec5 .desc {
      letter-spacing: 0.05em;
      line-height: 24px;
      padding-top: 10px;
   }

   #sec2 .article__list,
   #sec3 .article__list,
   #sec5 .article__list {
      margin-right: -20px;
      padding-top: 35px;
   }

   #sec2 .article__list .item,
   #sec3 .article__list .item,
   #sec5 .article__list .item {
      width: 71vw;
      margin-right: 28px;
   }

   #sec2 .button,
   #sec3 .button,
   #sec5 .button {
      padding-top: 40px;
   }
}

/*------
------*/
#sec4 {
   padding: 0 60px 150px;
}

#sec4 .desc {
   padding-top: 20px;
}

#sec4 .box {
   display: flex;
   flex-wrap: wrap;
   gap: 60px;
   padding-top: 60px;
   padding-bottom: 60px;
}

#sec4 .box .item {
   width: calc(33.33% - 40px);
}

#sec4 .box .thumb a {
   display: block;
   width: 100%;
   padding-top: 56.25%;
   position: relative;
}

#sec4 .box .thumb a img {
   display: block;
   height: 100%;
   object-fit: cover;
   position: absolute;
   top: 0;
   left: 0;
}

#sec4 .box .ttl {
   font-weight: 500;
   font-size: 18px;
   line-height: 27px;
   padding-top: 21px;
}

#sec4 .box .tag {
   font-weight: 500;
   font-size: 14px;
   line-height: 20px;
   padding-top: 30px;
}

@media only screen and (max-width: 768px) {
   #sec4 {
      padding: 0 20px 70px;
   }

   #sec4 .desc {
      letter-spacing: 0.05em;
      line-height: 24px;
      padding-top: 10px;
   }

   #sec4 .box {
      margin-right: -20px;
      padding-top: 25px;
      padding-bottom: 0;
   }

   #sec4 .box .item {
      width: 71vw;
      margin-right: 28px;
   }

   #sec4 .box .ttl {
      font-size: 14px;
      line-height: 26px;
      padding-top: 10px;
   }

   #sec4 .box .cat {
      padding-top: 10px;
   }

   #sec4 .box .cat a {
      font-weight: 500;
      font-size: 13px;
      line-height: 20px;
      color: #969696;
   }

   #sec4 .box .tag {
      font-size: 12px;
      line-height: 20px;
      padding-top: 10px;
   }

   #sec4 .button {
      padding-top: 40px;
   }
}

/*------
magazine1
------*/
#kv01 {
   display: flex;
   align-items: center;
   width: 100%;
   height: 380px;
   padding: 0 60px;
   position: relative;
   background: url("https://artory.blue/artory.co.jp/images/magazine/photo19.jpg") no-repeat center/cover;
}

#kv01:before {
   content: '';
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.35);
   position: absolute;
   top: 0;
   left: 0;
}

#kv01 h1 {
   font-weight: 500;
   font-size: 26px;
   line-height: 36px;
   letter-spacing: 0.05em;
   color: #fff;
   position: relative;
   z-index: 1;
}

#kv01 h1 span {
   display: block;
   color: #E8E8E8;
   font-weight: 500;
   font-size: 72px;
   line-height: 86px;
   letter-spacing: 0;
   padding-bottom: 10px;
}

@media only screen and (max-width: 768px) {
   #kv01 {
      height: 180px;
      padding: 0 20px;
   }

   #kv01 h1 {
      font-size: 15px;
      line-height: 20px;
   }

   #kv01 h1 span {
      font-size: 30px;
      line-height: 36px;
      padding-bottom: 0;
   }
}

#magazine1__list {
   padding: 70px 60px 110px;
}

#magazine1__list .desc {
   padding-top: 20px;
}

#magazine1__list .article__list {
   padding-top: 60px;
}

#magazine1__list .navi {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 15px;
   padding-top: 100px;
}

#magazine1__list .navi a,
#magazine1__list .navi span {
   display: flex;
   align-items: center;
   justify-content: center;
   border: 1px solid #707070;
   width: 47px;
   height: 47px;
   box-sizing: border-box;
   font-weight: 500;
   font-size: 17px;
   line-height: 34px;
   text-align: center;
}

#magazine1__list .navi a:hover {
   background-color: #000;
   color: #fff;
   opacity: 1;
}

#magazine1__list .navi .current {
   background-color: #000;
   color: #fff;
}

@media only screen and (max-width: 768px) {
   #magazine1__list {
      padding: 35px 20px 50px;
   }

   #magazine1__list .desc {
      letter-spacing: 0.05em;
      line-height: 24px;
      padding-top: 10px;
   }

   #magazine1__list .article__list {
      gap: 0px;
      padding-top: 35px;
   }

   #magazine1__list .article__list .item {
      display: flex;
      flex-direction: column;
      width: 100%;
      min-height: 100px;
      position: relative;
      padding-left: 115px;
      box-sizing: border-box;
      padding-bottom: 20px;
      border-bottom: 1px solid #E6E6E6;
   }

   #magazine1__list .article__list .item .thumb {
      width: 100px;
      position: absolute;
      top: 0;
      left: 0;
   }

   #magazine1__list .article__list .item .cat {
      order: 1;
      padding: 0;
   }

   #magazine1__list .article__list .item .ttl {
      order: 2;
      padding-top: 0;
      font-size: 15px;
      line-height: 24px;
   }

   #magazine1__list .article__list .item dl {
      order: 3;
      border-top: 0;
      font-size: 12px;
      margin-top: 5px;
   }

   #magazine1__list .article__list .item+.item {
      padding-top: 20px;
   }

   #magazine1__list .article__list .item+.item .thumb {
      top: 20px;
   }

   #magazine1__list .navi {
      gap: 10px;
      padding-top: 35px;
   }

   #magazine1__list .navi a,
   #magazine1__list .navi span {
      width: 36px;
      height: 36px;
   }
}

#magazine__detail .tag {
   padding-top: 25px;
}

#magazine__detail .desc {
   padding-top: 25px;
}

#magazine__detail .the_content {
   line-height: 36px;
   background-image: linear-gradient(to bottom, transparent, rgba(60, 44, 44, 0.7));
   padding: 60px 0 0;
}

#magazine__detail .the_content .inner {
   background-color: #fff;
   padding: 90px 100px;
}
#magazine__detail .the_content .inner .inner {
   background-color: transparent;
   padding: 0;
   width: auto;
   margin-right: 0;
   margin-left: 0;
}
#magazine__detail .the_content p {
   line-height: 36px;
   font-size: 18px;
   padding: 20px 0 0;
}

#magazine__detail #outline {
   padding-top: 75px;
}

#magazine__detail #outline h3 {
   display: flex;
   align-items: center;
   gap: 10px;
   font-weight: 500;
   font-size: 18px;
   line-height: 26px;
   border-bottom: 1px solid #707070;
   padding-bottom: 10px;
}

#magazine__detail #outline h3 span {
   font-weight: 600;
   font-size: 30px;
   line-height: 38px;
   font-family: neue-haas-grotesk-display, sans-serif;
}

#magazine__detail #outline .txt {
   padding-top: 40px;
}

#magazine__detail #index {
   border: 1px solid #E0E0E0;
   margin-top: 40px;
   padding: 50px 60px;
}

#magazine__detail #index h4 {
   font-weight: 700;
   font-size: 18px;
   line-height: 26px;
   border-bottom: 1px solid #707070;
   padding-bottom: 15px;
}

#magazine__detail #index ul {
   padding-top: 25px;
}

#magazine__detail #index ul li {
   font-weight: 500;
   line-height: 36px;
}

#magazine__detail #index article:not(:first-child) {
	padding: 40px 0 0;
}

#magazine__detail #detail {

}

#magazine__detail #detail h4 {
   font-weight: 700;
   font-size: 24px;
   line-height: 35px;
   border-bottom: 1px solid #707070;
   padding-top: 60px;
   padding-bottom: 15px;
}

#magazine__detail #detail figure {
   padding-top: 35px;
}

#magazine__detail #detail figure figcaption {
   font-weight: 500;
   font-size: 12px;
   line-height: 20px;
   padding-top: 10px;
}
#magazine__detail #detail .youtube {
   position: relative;
   width: 100%;
   padding-bottom: 56.25%;
   overflow: hidden;
   margin-top: 35px;
}

#magazine__detail #detail .youtube iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}
#magazine__detail #detail p {
   padding-top: 20px;
   font-size: 18px;
}
#magazine__detail #detail{overflow: initial;}
#magazine__detail #detail p span.tag{line-height: 36px; font-weight: 400; display: inline-block; padding: 0 0 0 26px;font-size: 18px;position: relative;}
#magazine__detail #detail p span.tag:before{content: ""; display: block; width: 26px; height: 26px; position: absolute; top: 50%; transform: translateY(-50%); left: 0;}
#magazine__detail #detail p span.artory:before{background: url(../user_images/magazine/115/icon01.png) no-repeat center center; background-size: 100%;}
#magazine__detail #detail p span.customer_1:before{background: url(../user_images/magazine/115/icon02.png) no-repeat center center; background-size: 100%;}
#magazine__detail #detail p span.customer_2:before{background: url(../user_images/magazine/115/icon03.png) no-repeat center center; background-size: 100%;}
#magazine__detail #detail p span.customer_2:before{background: url(../user_images/magazine/115/icon04.png) no-repeat center center; background-size: 100%;}
#magazine__detail #detail p span {
  font-weight: bold;
  display: block;
  padding: 0 0 5px;
}
#magazine__detail #detail h5 {
   font-size: 16px;
   padding-top: 50px;
}

#magazine__detail #detail .demo {
	position: relative;
	padding: 30px 0;
	border: 1px solid #000;
	margin: 80px 0 0;
	text-align: center;
	
}

#magazine__detail #detail .demo img {
	position: absolute;
	left: 60px;
	top: 0;
	bottom: 0;
	margin: auto;
	height: 350px;
	width: auto;
}

#magazine__detail #detail .demo .box {
	float: right;
	padding: 10px 50px 0 280px;
	
}

#magazine__detail #detail .demo .box h4 {
	font-size: 24px;
	line-height: 150%;
	padding: 0;
	text-align: left;
	border: 0;
	margin-bottom: 30px;
}

#magazine__detail #detail .demo .box p.text {
	padding: 0 0 30px;
	font-size: 14px;
}

#magazine__detail #detail .demo .box p.btn { text-align: center; }
#magazine__detail #detail .demo .box p.btn a {
	display: inline-block;
	border: 1px solid #000;
	text-align: center;
	width: 390px;
	height: 60px;
	line-height: 60px;
	background: url(../../images/works/dx/detail/arw.png) no-repeat 94% center;
	background-size: 11px auto;
}


#magazine__detail #list-series {
   padding-top: 100px;
}

#magazine__detail #list-series h2 {
   font-weight: 700;
   font-size: 24px;
   line-height: 35px;
}

#magazine__detail #list-series ul {
   padding-top: 25px;
}

#magazine__detail #list-series ul li a {
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
   gap: 20px;
   border-top: 1px solid #E6E6E6;
   border-bottom: 1px solid #E6E6E6;
   padding: 20px 0;
}

#magazine__detail #list-series ul li a>div {
   width: calc(100% - 120px);
}

#magazine__detail #list-series ul li+li a {
   border-top: 0;
}

#magazine__detail #list-series ul li img {
   display: block;
   width: 80px;
}

#list-series li a div {
	display: flex;
	flex-wrap: wrap;
	align-content: center;
}

#magazine__detail #list-series ul li p {
   /* font-weight: 500; */
   font-size: 14px;
   line-height: 20px;
   width: 100%;
}

#magazine__detail #list-series ul li p span {
   display: inline-block;
   width: 90px;
   /* font-weight: 500; */
   font-size: 14px;
   line-height: 20px;
   border: 1px solid #000;
   margin-right: 13px;
   padding: 1px 0;
   text-align: center;
}

#magazine__detail #list-series ul li h3 {
   font-weight: 500;
   font-size: 18px;
   line-height: 27px;
   margin-top: 10px;
}

#magazine__detail .sns {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 70px;
   background-color: #fff;
   padding: 40px 0;
}

#magazine__detail .sns h3 {
   font-weight: 500;
   font-size: 30px;
   line-height: 38px;
}

#magazine__detail .sns ul {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 35px;
}

#magazine__detail .sns ul img {
   width: auto;
   height: 27px;
}

@media only screen and (max-width: 768px) {
   #magazine__detail .firstview {
      height: 100vw;
   }

   #magazine__detail .firstview img {
      height: 100%;
      object-fit: cover;
   }

   #magazine__detail .tag {
      line-height: 24px;
      padding-top: 15px;
   }

   #magazine__detail .desc {
      letter-spacing: 0.05em;
      line-height: 27px;
      padding-top: 30px;
   }

   #magazine__detail .the_content {
      line-height: 36px;
      background-image: linear-gradient(to bottom, transparent, rgba(60, 44, 44, 0.7));
      padding: 40px 0 0;
   }

   #magazine__detail .the_content .inner {
      width: 100%;
      background-color: #fff;
      padding: 0 20px;
      box-sizing: border-box;
   }
   
   #magazine__detail .the_content .inner .inner {
	  width: auto;
      background-color: transparent;
      padding: 0 ;
   }
   
   #magazine__detail .the_content p {
      line-height: 28px;
   }

   #magazine__detail #outline h3 {
      font-size: 20px;
      line-height: 26px;
   }

   #magazine__detail #outline h3 span {
      font-size: 29px;
      line-height: 35px;
   }

   #magazine__detail #outline .txt {
      padding-top: 25px;
   }

   #magazine__detail #index {
      margin-top: 25px;
      padding: 20px 25px;
   }

   #magazine__detail #index h4 {
      font-size: 16px;
      line-height: 24px;
      padding-bottom: 10px;
   }

   #magazine__detail #index ul {
      padding-top: 30px;
   }

   #magazine__detail #index ul li {
      line-height: 24px;
      text-indent: -16px;
      padding-left: 16px;
   }

   #magazine__detail #index ul li+li {
      padding-top: 10px;
   }

   #magazine__detail #detail h4 {
      font-size: 19px;
      line-height: 28px;
      padding-bottom: 12px;
   }

   #magazine__detail #detail figure {
      padding-top: 30px;
   }

   #magazine__detail #detail figure figcaption {
      padding-top: 10px;
   }
   
   #magazine__detail #detail .youtube {
	 margin-top: 30px;
   }

   #magazine__detail #detail p {padding-top: 30px;}
   #magazine__detail #detail p span.tag{line-height: 28px;}
	
	#magazine__detail #detail h5 {
	   font-size: 14px;
	   padding-top: 30px;
	}
	#magazine__detail #detail .demo {
		padding: 20px 20px 0;
		margin: 60px 0 0;
	}
	#magazine__detail #detail .demo img {
		left: 22px;
		width: 30%;
		height: auto;
		max-width: 116px;
	}
	#magazine__detail #detail .demo .box p.text {
		padding: 0 0 30px;
		text-align: left;
		font-size: 12px;
		line-height: 180%;
	}
	
	
	#magazine__detail #detail .demo .box {
		padding: 0 0 0 40%;
		float: none;
	}
	#magazine__detail #detail .demo .box h4 {
		padding: 0;
		font-size: 16px;
		line-height: 150%;
	}
	#magazine__detail #detail .demo .box p.btn { padding: 0 0 20px; }
	#magazine__detail #detail .demo .box p.btn a {
		height: 35px;
		line-height: 35px;
		width: 100%;
		background-size: 7px auto;
		font-size: 12px;
	}

   #magazine__detail #list-series {
      padding-top: 50px;
   }

   #magazine__detail #list-series h2 {
      font-size: 19px;
      line-height: 28px;
   }

   #magazine__detail #list-series ul {
      padding-top: 20px;
   }

   #magazine__detail #list-series ul li img {
      width: 100px;
   }

   #magazine__detail #list-series ul li div p {
      display: block;
      font-size: 12px;
      line-height: 20px;
   }
   
   #magazine__detail #list-series ul li div p span {
	  display: block;
      width: 55px;
      font-weight: 500;
      font-size: 11px;
      line-height: 20px;
      margin-right: 0;
      padding: 0;
      margin-bottom: 6px;
   }

   #magazine__detail #list-series ul li div h3 {
      font-size: 15px;
      line-height: 24px;
      margin-top: 8px;
   }

   #magazine__detail .sns {
      gap: 35px;
   }

   #magazine__detail .sns h3 {
      font-size: 23px;
      line-height: 30px;
   }

   #magazine__detail .sns ul {
      gap: 25px;
   }

   #magazine__detail .sns ul img {
      height: 22px;
   }
}

#magazine__recommend {
   padding: 100px 60px;
}

#magazine__recommend h2 {
   font-weight: 600;
}

#magazine__recommend .article__list {
   padding-top: 40px;
}

#magazine__recommend .button {
   padding-top: 60px;
}

@media only screen and (max-width: 768px) {
   #magazine__recommend {
      padding: 60px 20px;
   }

   #magazine__recommend .article__list {
      padding-top: 20px;
   }

   #magazine__recommend .article__list .item {
      width: 71vw;
      margin-right: 28px;
   }

   #magazine__recommend .button {
      padding-top: 35px;
   }
}