@charset "utf-8";
/* ------------------------------------------------------------ common */


/* ------------------------------------------------------------ keywords */
#keywords{ padding: 100px 0; }
#keywords .flex{ display: flex; justify-content: space-between; }

#keywords .txt{ width: 400px; }
#keywords h2{ padding: 0 0 90px; text-align: left!important;  }

#keywords .txt .tags,
#keywords .txt .txt-hide{ text-align: left; }
#keywords .txt .tags span,
#keywords .txt .txt-hide span{ display: inline-block; margin: 0 8px 8px 0; padding: 8px 17px 10px; font-family: 'Noto-Sans-JP-Medium'; font-size: 16px; text-align: center; border-radius: 50px; border: 1px solid #BEBEBE; }

#keywords .SP.more{ display: none; }

#keywords .txt .txt-hide { }

#keywords .txt .viemore{ transition: all 1s; font-family: neue-haas-grotesk-display, sans-serif; font-weight: 500; font-style: normal; position: relative; display: block; width: 345px; height: 50px; font-size: 16px;  margin: 35px 0 0; background: #000; color: #fff; text-align: center; }
#keywords .txt .viemore:after{ transition: all 1s; position: absolute; top: 17px; right: 15px; content: ""; width: 9px; height: 9px; border-right: 1px solid #fff; border-bottom: 1px solid #fff; transform: rotate(45deg); }

/* view more */
.txt-hide{ display: none; }
#keywords .txt .viemore.on-click:after{ transform: rotate(-135deg); top: 22px; }


#keywords .pic{ width: 900px; }
#keywords .pic .item{ width: 100%; height: auto; }
#keywords .pic .detail{ padding: 55px 0 135px; text-align: left; }
#keywords .pic .detail h4{ padding: 0 0 30px; font-size: 30px; }
#keywords .pic .detail p{ font-size: 16px; line-height: 220%;  }

#keywords .word{ padding: 0 0 80px; }




/* ------------------------------------------------------------
	mobile 
------------------------------------------------------------ */
@media only screen and (max-width: 640px) {




/* ------------------------------------------------------------ keywords */
#keywords{ padding: 50px 0 80px; }
#keywords .txt h2{ font-size: 13px; padding: 0 0 50px; }
#keywords .txt h2 span{ font-size: 38px; }

#keywords h2{ padding: 0 0 50px; text-align: left!important;  }

#keywords .flex{ flex-direction: column-reverse; }

#keywords .txt{ width: 100%; padding: 0 0 75px; }
#keywords .txt .tags span{ margin: 0 0px 11px 0; }
#keywords .txt .viemore{ width: 100%; margin: 30px 0 0; }

#keywords .pic{ width: 100%; }
#keywords .pic .item{ width: 100vw; margin: 0 calc(50vw - 100%); }
#keywords .pic .detail{ padding: 40px 0 80px; }
#keywords .pic .detail h4{ padding: 0 0 20px; font-size: 20px; }
#keywords .pic .detail p{ line-height: 210%;  }

#keywords .word{ padding: 0 0 40px; }

#keywords .PC.more{ display: none; }
#keywords .SP.more{ display: block; }




}