@charset "UTF-8";
:root {
  --content-width: 600px;
  --content-side-margin: 0;
  --article-title-size: 24px;
  --article-headline-size: 20px;
  --article-font-size: 17px;
  --article-line-height: 31px;
  --color-key: #3695d7;
  --color-text: #1a1a1a;
  --color-text-gray: #767676;
  --color-text-hover: #919191;
  --color-text-article: #333333;
  --color-bg: #ffffff;
  --color-bg-lightgraybox: #f4f4f4;
  --color-border-lightgraybox: #dededf;
  --color-link: var(--color-key);
  --color-link-visited: #4b11a8;
  --color-link-highlight: rgba(0, 0, 0, 0.3);
  --color-shop: #eb4055;
  --img-bg-color: #f8f8f8;
  --size-8px: 8px;
  --size-9px: 9px;
  --size-10px: 10px;
  --size-12px: 12px;
  --size-14px: 14px;
  --size-15px: 15px;
  --size-16px: 16px;
  --size-17px: 17px;
  --size-18px: 18px;
  --size-20px: 20px;
  --size-22px: 22px;
  --size-24px: 24px;
  --size-26px: 26px;
  --image-facebook-oval: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Ccircle id='Oval' cx='15' cy='15' r='15' fill='%230866FF'/%3E%3Cpath d='M4.94,14.859H1.646V7.842H0v-2.7H1.646V3.516c0-2.2.929-3.517,3.57-3.517h2.2V2.7H6.04c-1.028,0-1.1.377-1.1,1.083l0,1.352h2.49l-.292,2.7H4.94v7.016Z' transform='translate(11.129 7.138)' fill='%23fff'/%3E%3C/svg%3E");
  --image-twitter-oval: url("data:image/svg+xml,%3Csvg id='Oval' xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath style='fill:%23000000;' d='M15,30c8.3,0,15-6.7,15-15S23.3,0,15,0S0,6.7,0,15S6.7,30,15,30z'/%3E%3Cpath style='fill:%23FFFFFF;' d='M16.3,13.9l5-5.8h-1.2l-4.3,5.1l-3.5-5.1h-4l5.3,7.6l-5.3,6.1h1.2l4.6-5.3l3.7,5.3h4L16.3,13.9L16.3,13.9zM14.7,15.8l-0.5-0.8L9.9,9h1.8l3.4,4.9l0.5,0.8l4.4,6.4h-1.8L14.7,15.8L14.7,15.8z'/%3E%3C/svg%3E");
  --image-line-oval: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Ccircle id='Oval' cx='15' cy='15' r='15' transform='translate(0 0)' fill='%232ab858'/%3E%3Cpath d='M7.387,16.1a.122.122,0,0,1-.115-.047c-.16-.286-.133-.416-.039-.9l0-.019c.034-.175.078-.394.124-.683a1.038,1.038,0,0,0-.11-.8.536.536,0,0,0-.428-.2.609.609,0,0,0-.061,0,8.594,8.594,0,0,1-2.7-.744,7.539,7.539,0,0,1-2.144-1.477A6.576,6.576,0,0,1,.507,9.2,6.112,6.112,0,0,1,0,6.759,5.85,5.85,0,0,1,.629,4.128,6.809,6.809,0,0,1,2.344,1.98,8.153,8.153,0,0,1,4.886.532a9.374,9.374,0,0,1,6.225,0A8.13,8.13,0,0,1,13.653,1.98a6.754,6.754,0,0,1,1.716,2.148A5.837,5.837,0,0,1,16,6.759a5.436,5.436,0,0,1-.631,2.517,9.143,9.143,0,0,1-1.588,2.152A27.22,27.22,0,0,1,9.86,14.776,7.4,7.4,0,0,1,7.387,16.1Zm.322-9.716h0L9.272,8.906H10.2V4.961H9.327V7.482L7.763,4.961H6.836V8.906h.873V6.389ZM5.455,4.961V8.906h.891V4.961Zm5.271,0V8.888h2.58V8.067H11.6v-.8h1.509V6.446H11.6V5.781h1.634v-.82Zm-8,0V8.888H4.89V8.067H3.619V4.961Z' transform='translate(6.988 7.522)' fill='%23fff'/%3E%3C/svg%3E");
  --image-caret-right: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='16' viewBox='0 0 8 16'%3E%3Cg transform='rotate(-90)'%3E%3Cpath d='M0,6.009,1.509,4.5,6.4,9.481,11.291,4.5,12.8,6.009,6.4,12.5Z' transform='translate(-14 -4)' fill='%231a1a1a' /%3E%3C/g%3E%3C/svg%3E%0A");
  --abutton-padding: .5em 1em;
  --link-hover-opacity: .65;
  --button-hover-opacity: .8;
}

a.button {
  display: inline-block;
  border: 1px solid var(--color-border-lightgraybox);
  padding: var(--abutton-padding);
  font-size: var(--size-16px);
  background-color: var(--color-bg);
  font-weight: 700;
  color: var(--color-text);
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.0588235294);
  border-radius: 0.3em;
  transition: all 0.3s ease-out;
}
a.button:hover {
  text-decoration: none;
  color: var(--color-text-hover);
}
a.button.sky {
  color: var(--color-key);
  border-color: var(--color-key);
  background-color: #fff;
}
a.button.sky:hover {
  color: #fff;
  background-color: var(--color-key);
}
a.button.skybg {
  color: #fff;
  border-color: var(--color-key);
  background-color: var(--color-key);
}
a.button.skybg:hover {
  opacity: var(--button-hover-opacity);
}
a.button.shopbg {
  color: #fff;
  background-color: var(--color-shop);
  border-color: var(--color-shop);
}
a.button.shopbg:hover {
  opacity: var(--button-hover-opacity);
}

span.sponsored {
  display: inline-block;
  vertical-align: bottom;
  padding: 0.33em var(--size-10px);
  margin: 0 1.5px;
  border: 1px solid #dededf;
  border-radius: 1em;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
}

.list-item {
  margin: 0 0 1.5em;
}
.list-item a {
  display: block;
  color: var(--color-text);
}
.list-item .image {
  margin-bottom: 0.5em;
}
.list-item .image img {
  transition: all 0.3s ease-out;
  border: 1px solid var(--color-border-lightgraybox);
  border-radius: 0.25em;
}
.list-item .text {
  line-height: 1.3;
}
.list-item h1,
.list-item h2,
.list-item h3 {
  margin: 0;
  font-size: var(--size-18px);
  font-feature-settings: "palt";
  line-height: 1.3;
  letter-spacing: 0.05em;
  font-weight: 700;
}
.list-item .date,
.list-item .description {
  margin-top: 0.5em;
  font-size: var(--size-14px);
}
.list-item .date {
  color: var(--color-text-gray);
}
.list-item.side {
  margin: 0 0 var(--size-16px);
}
.list-item.side a {
  display: flex;
  margin: 0 0 var(--size-16px);
}
.list-item.side .image {
  margin-bottom: 0;
}
.list-item.side .image img {
  width: 80px;
  min-width: 80px;
  max-width: 80px;
  border: 1px solid var(--color-border-lightgraybox);
  border-radius: 0.25em;
}
.list-item.side .text {
  padding-left: var(--size-12px);
}
.list-item.side h1,
.list-item.side h2,
.list-item.side h3 {
  margin: 0;
  font-size: var(--size-14px);
  font-weight: 400;
  line-height: 1.5;
}
.list-item.side .date,
.list-item.side .description {
  margin-top: 0.5em;
}
.list-item.side.reverse a {
  flex-direction: row-reverse;
}
.list-item.side.reverse .text {
  padding-left: 0;
}
.list-item a:hover {
  text-decoration: none;
}
.list-item a:hover .image img {
  opacity: var(--button-hover-opacity);
}
.list-item a:hover h1, .list-item a:hover h2, .list-item a:hover h3 {
  text-decoration: underline;
  color: var(--color-link);
}

.content-list .list-item.side {
  margin-bottom: var(--size-20px);
}
.content-list .list-item.side .image img {
  height: 80px;
  -o-object-fit: cover;
     object-fit: cover;
}
.content-list .list-item.side a .text {
  padding-left: var(--size-12px);
}
.content-list .list-item.side .text h2 {
  font-weight: 600;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: var(--size-17px);
}
.content-list .list-item.side .text .description {
  display: none;
}

span.icon {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 30px 30px;
  overflow: hidden;
  vertical-align: middle;
}
span.icon.facebook {
  background-image: var(--image-facebook-oval);
}
span.icon.twitter {
  background-image: var(--image-twitter-oval);
}
span.icon.line {
  background-image: var(--image-line-oval);
}

blockquote.twitter-tweet {
  border: 1px solid #ccc;
  margin: 1.5em auto;
  padding: 1em;
  max-width: 550px;
}

blockquote.twitter-tweet p {
  margin: 0;
  width: auto;
}

.sns-outer {
  max-width: 500px;
  margin: 0 auto;
}

.sns-outer iframe {
  max-width: 100%;
}

.flex-3col {
  display: flex;
  flex-wrap: wrap;
}
.flex-3col .item {
  width: 33.3%;
}
.flex-3col .item a {
  display: block;
  padding: 2px;
}

.center-button {
  margin: 1em 0;
  padding: 0 var(--content-side-margin);
  text-align: center;
}
.center-button .button {
  width: 100%;
  max-width: 768px;
}

#rensai-list h3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--size-16px);
}

.scroll-to-top-icon {
  display: inline-block;
  background: var(--color-key);
  padding: 12px;
  border-radius: 4px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transform: translate3d(0, 0, 0);
  transition: 0.3s ease-in-out;
}

.series {
  text-align: center;
}
.series a {
  width: 300px;
}

.category {
  display: flex;
  align-content: flex-start;
  flex-wrap: wrap;
}
.category a {
  width: 144px;
  height: 56px;
  text-align: center;
  padding: 14px 0;
  margin-right: 8px;
  margin-bottom: 8px;
  font-weight: 400;
}
.category a:nth-of-type(4) {
  margin-right: 0;
}

form#gearsearch {
  width: 100%;
  display: flex;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.0588235294);
}
form#gearsearch input.input-form {
  width: 100%;
  height: 46px;
  box-sizing: border-box;
  margin: 0;
  border: 1px solid var(--color-border-lightgraybox);
  padding: var(--abutton-padding);
  font-size: var(--size-16px);
  background-color: var(--color-bg);
  color: var(--color-text);
  border-radius: 0.3em 0 0 0.3em;
}
form#gearsearch button.search-button {
  width: 46px;
  height: 46px;
  margin: 0;
  border: 1px solid var(--color-key);
  border-left: none;
  border-radius: 0 0.3em 0.3em 0;
  background-image: url("https://i.gimg.jp/resource/lesson/layout2022/icon_search.png");
  background-repeat: no-repeat;
  background-size: 20px 20px;
  background-position: center;
  background-color: var(--color-key);
  transition: 0.3s;
}
form#gearsearch button:hover {
  cursor: pointer;
  opacity: var(--button-hover-opacity);
}

.searchform {
  margin: 8px 0 0 0;
}

.split-wrapper {
  font-family: "YakuHanJP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  box-sizing: border-box;
  display: flex;
  margin: 0;
  padding: 0 10px;
  font-size: 16px;
}
.split-wrapper * {
  box-sizing: border-box;
}
.split-wrapper figure {
  margin: 0;
  padding: 0;
}
.split-wrapper .main-column {
  width: 660px;
  padding-right: 60px;
}
.split-wrapper .main-column.single {
  width: 100%;
  padding-right: 0;
}
.split-wrapper .sub-column {
  width: 300px;
}
.split-wrapper img {
  max-width: 100%;
  width: auto;
  height: auto;
}
.split-wrapper .list header {
  display: flex;
}
.split-wrapper .list header .sns {
  flex-grow: 1;
  margin: 0 0 2em;
}
.split-wrapper section > h1, .split-wrapper section > h2, .split-wrapper section > h3 {
  font-size: var(--size-20px);
  font-weight: 700;
  margin: 2em 0 1em;
  position: relative;
  color: var(--color-text);
}
.split-wrapper section > h1 span.sponsored, .split-wrapper section > h1 a, .split-wrapper section > h2 span.sponsored, .split-wrapper section > h2 a, .split-wrapper section > h3 span.sponsored, .split-wrapper section > h3 a {
  position: absolute;
  right: 0;
}
.split-wrapper section > h1 span.sponsored, .split-wrapper section > h2 span.sponsored, .split-wrapper section > h3 span.sponsored {
  bottom: 0.3em;
}
.split-wrapper section > h1 a, .split-wrapper section > h2 a, .split-wrapper section > h3 a {
  color: var(--color-text);
  font-size: var(--size-14px);
  font-weight: 400;
  padding-right: 1.5em;
  bottom: 0.2em;
}
.split-wrapper section > h1 a:visited, .split-wrapper section > h2 a:visited, .split-wrapper section > h3 a:visited {
  color: var(--color-text);
}
.split-wrapper section > h1 a:after, .split-wrapper section > h2 a:after, .split-wrapper section > h3 a:after {
  position: absolute;
  width: 0.5em;
  height: 1em;
  content: "";
  background-image: var(--image-caret-right);
  background-repeat: no-repeat;
  background-size: 0.5em 1em;
  right: 0.5em;
  top: calc(50% - .5em);;
}

.column-2 {
  display: flex;
  flex-wrap: wrap;
  margin-left: -20px;
}
.column-2 > .item {
  flex-basis: 50%;
  max-width: 50%;
  min-width: 50%;
  width: 50%;
  padding-left: 20px;
}

/*
#sub-column {
  position: sticky;
  top: 1em;
}
*/
.sponsored-area {
  max-width: var(--content-width);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--content-side-margin);
}
.sponsored-area .link-box {
  background-color: var(--color-bg-lightgraybox);
  border: 1px solid var(--color-border-lightgraybox);
  margin: 2.2em auto;
  padding: 20px 0 10px 0;
  text-align: center;
  border: 1px solid var(--color-border-lightgraybox);
  border-radius: 0.25em;
}
.sponsored-area .link-box img {
  margin-bottom: 1em;
}
.sponsored-area .link-box a {
  margin-bottom: 1em;
  width: 85%;
}

.rectangle {
  margin: 2.2em auto;
  text-align: center;
}

.pager {
  max-width: var(--content-width);
  width: 100%;
  margin: 1.5em auto;
  padding: 0 var(--content-side-margin);
}
.pager .text-link {
  display: block;
  line-height: 1.3;
  text-align: center;
  color: var(--color-key);
  font-weight: 700;
  font-feature-settings: "palt";
  letter-spacing: 0.025em;
  margin-bottom: 1.3em;
}
.pager .text-link:before {
  display: inline-block;
  width: 0.5em;
  height: 1.3em;
  margin-right: 0.5em;
  vertical-align: bottom;
  content: "";
  background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='16' viewBox='0 0 8 16'%3E%3Cg transform='rotate(-90)'%3E%3Cpath d='M0,6.009,1.509,4.5,6.4,9.481,11.291,4.5,12.8,6.009,6.4,12.5Z' transform='translate(-14 -4)' fill='%233695d7' /%3E%3C/g%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-size: 0.5em 1.3em;
}
.pager .number-link {
  text-align: center;
  display: flex;
  justify-content: center;
}
.pager .number-link a {
  display: flex;
  width: 2.85em;
  height: 2.85em;
  align-items: center;
  justify-content: center;
  font-size: var(--size-14px);
  color: var(--color-key);
  margin-right: 0.71em;
  border: 1px solid var(--color-key);
  border-radius: 0.25em;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.0588235294);
  transition: all 0.3s ease-out;
  text-decoration: none;
}
.pager .number-link a:last-child {
  margin-right: 0;
}
.pager .number-link a:hover {
  color: #fff;
  background-color: var(--color-key);
}
.pager .number-link a.current {
  color: var(--color-bg);
  background-color: var(--color-key);
  box-shadow: none;
  pointer-events: none;
}
.pager .number-link span {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--size-14px);
  color: var(--color-key);
  margin-right: 0.71em;
}

.related-link {
  font-size: var(--size-16px);
  margin: 2.2em auto;
}
.related-link ul {
  padding-left: 1.5em;
}
.related-link li {
  list-style-type: disc;
  margin-bottom: 1em;
}
.related-link a {
  font-feature-settings: "palt";
  font-size: var(--size-15px);
  line-height: 1.3;
  font-weight: 700;
  color: var(--color-text);
}
.related-link a:hover {
  color: var(--color-key);
  text-decoration: underline;
}

.relatedLink li {
  margin-left: 0;
  list-style-type: none;
  background-image: none;
  position: relative;
  margin-bottom: 8px;
  line-height: var(--article-line-height);
  letter-spacing: 0.3px;
  padding: 0 0 0 8px;
}
.relatedLink li:before {
  position: absolute;
  top: 0;
  left: 0;
  content: "-";
}

.gearbox-wrapper {
  border: 1px solid var(--color-border-lightgraybox);
  border-radius: 0.25em;
  padding: var(--size-20px);
  max-height: 60vh;
  overflow-y: auto;
}
.gearbox-wrapper .gearbox {
  width: 100%;
  padding-bottom: var(--size-20px);
  margin-bottom: var(--size-20px);
  border-bottom: 1px solid var(--color-border-lightgraybox);
  display: grid;
  grid-template-columns: 100px 1em 1fr;
  grid-template-rows: min-content min-content 1fr;
  color: var(--color-text);
}
.gearbox-wrapper .gearbox:last-child {
  border: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}
.gearbox-wrapper img, .gearbox-wrapper amp-img {
  grid-row: 1/4;
  grid-column: 1/2;
  width: 100%;
  height: auto;
  border: 1px solid var(--color-border-lightgraybox);
  border-radius: 0.25em;
}
.gearbox-wrapper .maker {
  grid-row: 1/2;
  grid-column: 3/4;
  font-size: var(--size-14px);
  margin-bottom: 0.5em;
}
.gearbox-wrapper h3 {
  grid-row: 2/3;
  grid-column: 3/4;
  line-height: 1.3;
  margin: 0;
  font-size: var(--size-16px);
  font-weight: 400;
}
.gearbox-wrapper .text {
  grid-row: 3/4;
  grid-column: 3/4;
  font-size: var(--size-14px);
  line-height: 1.4;
  align-self: flex-start;
  margin-top: 0.5em;
}
.gearbox-wrapper .text span {
  font-size: var(--size-10px);
}
.gearbox-wrapper a.button {
  grid-column: 1/4;
  margin-top: var(--size-10px);
  text-align: center;
}

.gearbox-wrapper.article-related {
  padding: var(--size-16px);
}
.gearbox-wrapper.article-related .gearbox {
  padding-bottom: var(--size-16px);
  margin-bottom: var(--size-16px);
  grid-template-columns: 100px var(--size-20px) 165px 1fr;
  grid-template-rows: min-content min-content min-content 1fr;
}
.gearbox-wrapper.article-related .gearbox:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}
.gearbox-wrapper.article-related a.button {
  color: #fff;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.168627451);
  font-weight: 400;
}
.gearbox-wrapper.article-related a.button.sky {
  width: 155px;
  grid-column: 3/4;
  grid-row: 4/5;
  background: var(--color-link);
}
.gearbox-wrapper.article-related a.button.sky:hover {
  background: #5eaade;
}
.gearbox-wrapper.article-related a.button.shop {
  width: 200px;
  grid-column: 4;
  grid-row: 4;
  background: var(--color-shop);
  border-color: var(--color-shop);
}
.gearbox-wrapper.article-related a.button.shop:hover {
  background: #e66978;
}

.content-ranking {
  margin: 2.6em auto;
}
.content-ranking .tab {
  margin: 0 calc(var(--content-side-margin) * -1) 1em;
  display: flex;
  width: calc(100% + var(--content-side-margin) * 2);
  border-bottom: 1px solid var(--color-border-lightgraybox);
  justify-content: space-between;
}
.content-ranking .tab span {
  min-width: 18%;
  text-align: center;
  font-weight: 700;
  border-bottom: 4px solid transparent;
  padding: 1em 0.5em calc(1em - 4px);
  cursor: pointer;
}
.content-ranking .tab span.current {
  border-color: var(--color-key);
  color: var(--color-key);
}
.content-ranking .tab span:hover {
  color: var(--color-key);
}
.content-ranking .ranking-items {
  display: none;
}
.content-ranking .ranking-items.current {
  display: block;
}
.content-ranking .ranking-items .list-item {
  position: relative;
}
.content-ranking .ranking-items .list-item:after {
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  content: "";
  background-color: var(--color-text);
  opacity: 1;
  color: var(--color-bg);
  width: 1.43em;
  height: 1.43em;
  font-size: var(--size-14px);
  font-weight: 700;
  text-align: center;
  line-height: 1.43em;
  border-radius: 0.1875em 0 0 0;
}
.content-ranking .ranking-items .list-item:nth-child(1):after {
  content: "1";
}
.content-ranking .ranking-items .list-item:nth-child(2):after {
  content: "2";
}
.content-ranking .ranking-items .list-item:nth-child(3):after {
  content: "3";
}
.content-ranking .ranking-items .list-item:nth-child(4):after {
  content: "4";
}
.content-ranking .ranking-items .list-item:nth-child(5):after {
  content: "5";
}

.article header {
  max-width: var(--content-width);
  width: 100%;
  margin: 1em auto;
  padding: 0 var(--content-side-margin);
  display: grid;
  grid-template-columns: 1fr 110px;
}
.article header .corner {
  grid-row: 1/2;
  grid-column: 1/2;
}
.article header .date {
  grid-row: 2/3;
  grid-column: 1/2;
}
.article header h1, .article header h2, .article header h3 {
  grid-row: 3/4;
  grid-column: 1/3;
}
.article header .rensai {
  grid-row: 4/5;
  grid-column: 1/3;
}
.article header .sns {
  grid-row: 1/3;
  grid-column: 2/3;
  text-align: right;
}
.article header .corner, .article header .date {
  font-size: var(--size-14px);
  line-height: 1.2;
  padding-bottom: 0.5em;
}
.article header .corner .sponsored, .article header .date .sponsored {
  font-size: var(--size-9px);
}
.article header .date {
  font-size: var(--size-12px);
  color: var(--color-text-gray);
}
.article header h1, .article header h2, .article header h3 {
  font-size: var(--article-title-size);
  font-weight: 700;
  font-feature-settings: "palt";
  line-height: 1.3;
  letter-spacing: 0.05em;
  margin: 0;
  color: var(--color-text);
}
.article header .rensai {
  font-size: var(--size-14px);
  font-feature-settings: "palt";
  line-height: 1.3;
  letter-spacing: 0.05em;
  margin-top: 1rem;
}
.article header .sns a {
  display: inline-block;
}
.article header .sns a span {
  transition: all 0.3s ease-out;
}
.article header .sns a:hover span {
  opacity: var(--link-hover-opacity);
}
.article header .sns svg {
  cursor: pointer;
}
.article header .sns a + a {
  margin-left: 0.5em;
}
.article .tag-list ul {
  max-width: var(--content-width);
  width: 100%;
  margin: 0 auto var(--size-12px);
  padding: 0.3rem 0 0.3rem var(--content-side-margin);
  font-size: var(--size-12px);
  line-height: 1;
  overflow-x: scroll;
  white-space: nowrap;
}
.article .tag-list ul::-webkit-scrollbar {
  display: none;
}
.article .tag-list li {
  display: inline-block;
  margin-right: 0.5em;
}
.article .tag-list a {
  display: block;
  padding: 1em;
  color: var(--color-text);
  border: 1px solid var(--color-border-lightgraybox);
  border-radius: 0.25em;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.0588235294);
  transition: all 0.3s ease-out;
}
.article .tag-list a:hover {
  color: var(--color-text-hover);
  text-decoration: none;
}
.article .content-text {
  max-width: var(--content-width);
  width: 100%;
  margin: 1em auto;
  padding: 0 var(--content-side-margin);
  color: var(--color-text);
}
.article .content-text h2 {
  font-size: var(--article-headline-size);
  font-weight: 700;
  line-height: 1.3;
  margin: 2em 0 0.88em;
  letter-spacing: 0.05em;
  font-feature-settings: "palt";
}
.article .content-text p {
  font-size: var(--article-font-size);
  line-height: var(--article-line-height);
  letter-spacing: 0.025em;
  margin: 1em 0;
  text-align: justify;
  word-break: break-all;
}
.article .content-text a {
  color: var(--color-key);
}
.article .content-text .content-image {
  margin: 1em auto;
}
.article .content-text .content-image img {
  display: block;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 0.25em;
  transition: all 0.3s ease-out;
}
.article .content-text .content-image figcaption {
  font-size: var(--size-14px);
  line-height: 1.3;
  color: var(--color-text-gray);
  margin: 0.5em 0;
}
.article .content-text .content-image.fullwidth {
  margin: 1em calc(-1 * var(--content-side-margin));
}
.article .content-text .content-image.fullwidth figcaption {
  margin: 0.5em var(--content-side-margin);
}
.article .content-text .content-image a:hover img {
  opacity: var(--link-hover-opacity);
}
.article .content-text .content-image a:hover figcaption {
  color: var(--color-key);
}
.article .content-text .section-related-link {
  font-size: var(--size-15px);
  line-height: 1.6;
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
}
.article .content-text .section-related-link li {
  position: relative;
  margin-bottom: 0.5em;
  padding: 0 0.5em 0 1em;
}
.article .content-text .section-related-link li:before {
  position: absolute;
  top: 0;
  left: 0;
  content: "-";
}
.article .content-text .toc-list {
  margin: var(--article-line-height) 0;
  padding: 1em 1em 0;
  background-color: var(--color-bg-lightgraybox);
  border: 1px solid var(--color-border-lightgraybox);
  border-radius: 0.25em;
}
.article .content-text .toc-list h3 {
  font-size: var(--size-18px);
  margin: 0;
}
.article .content-text .toc-list ul {
  margin-top: 0.5em;
}
.article .content-text .toc-list li {
  border-bottom: 1px solid var(--color-border-lightgraybox);
}
.article .content-text .toc-list li:last-child {
  border: 0;
}
.article .content-text .toc-list a {
  display: block;
  padding: 1em 0;
  line-height: 1.3;
  color: var(--color-text-article);
  font-feature-settings: "palt";
  letter-spacing: 0.025em;
}
.article .content-text .youtube {
  margin: var(--article-line-height) 0;
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
}
.article .content-text .youtube iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.article .content-text .section-link {
  margin: 1em 0;
  position: relative;
  border: 1px solid var(--color-border-lightgraybox);
  border-radius: 0.25em;
}
.article .content-text .section-link:after {
  position: absolute;
  width: 0.5em;
  height: 1em;
  content: "";
  background-image: var(--image-caret-right);
  background-repeat: no-repeat;
  background-size: 0.5em 1em;
  right: 0.5em;
  top: calc(50% - .5em);;
}
.article .content-text .section-link a {
  padding: 1em 1.5em 1em 1em;
  align-items: center;
}
.article .content-text .section-link h3 {
  font-size: var(--size-14px);
  font-weight: 700;
}
.article .content-text .section-link .description {
  color: var(--color-text-gray);
}
.article.photo .content-image img {
  display: block;
  margin: 0 auto;
  border-radius: 0.25em;
}

.list header h1 {
  font-size: var(--size-26px);
  font-feature-settings: "palt";
  line-height: 1.3;
  letter-spacing: 0.05em;
  margin: 0;
}
.list header .sns {
  margin: 1em 0;
  text-align: right;
}

.author {
  margin: 48px auto 48px;
}
.author .imageTitleTextBox {
  border: 1px dotted var(--color-border-lightgraybox);
  background-color: var(--color-bg-lightgraybox);
  padding: var(--size-16px);
  display: flex;
  border: 1px solid var(--color-border-lightgraybox);
  border-radius: 0.25em;
  margin-bottom: 0.75em;
}
.author .imageTitleTextBox:last-child {
  margin-bottom: 0;
}
.author .impAdImage {
  margin-right: var(--size-12px);
}
.author .impAdImage img {
  width: 100px;
  height: auto;
  max-width: none;
  border: 1px solid var(--color-border-lightgraybox);
  border-radius: 0.25em;
}
.author .impAdText dl dt {
  font-size: var(--size-14px);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 4px;
}
.author .impAdText dl dd {
  font-size: var(--size-12px);
  font-weight: 400;
  color: var(--color-text);
  letter-spacing: 0.24px;
  line-height: 1.6;
}

.recommend div {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.recommend div a {
  display: block;
  width: 48%;
  margin-bottom: var(--size-16px);
}
.recommend div a:nth-of-type(even) {
  margin-left: 4%;
}
.recommend div a img {
  width: 100%;
  height: auto;
  border: 1px solid var(--color-border-lightgraybox);
  border-radius: 0.25em;
}
.recommend div a p {
  font-size: var(--size-14px);
  color: var(--color-text);
  font-feature-settings: "palt";
  line-height: 1.3;
  letter-spacing: 0.05em;
  margin-top: 0.4rem;
}

.features h2 {
  margin-top: 8px;
}
.features .list-item.side a .text h3 {
  font-size: var(--size-14px);
  font-weight: 600;
  margin-bottom: 0.4rem;
  line-height: 1.4;
}
.features .list-item.side a .text .summary {
  font-size: var(--size-12px);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  letter-spacing: 0.05em;
}

.related-photos img {
  border-radius: 0.25rem;
}
.related-photos .thumbm {
  border-radius: 0.25rem;
}
.related-photos .thumbm.current img {
  border-radius: unset;
}

.breadcrumb {
  width: 100%;
  margin: 0 auto var(--size-15px);
  overflow-y: hidden;
  overflow-x: scroll;
  white-space: nowrap;
  -ms-overflow-style: none;
  width: 960px;
  font-size: 14px;
  color: var(--color-text);
  overflow-x: unset;
}
.breadcrumb::-webkit-scrollbar {
  display: none;
}
.breadcrumb li {
  display: inline;
}
.breadcrumb li:not(:last-child):after {
  content: "＞";
  margin: 0 0.3rem;
}
.breadcrumb a {
  color: var(--color-key);
}

.article header {
  margin-top: 0;
}

.article .content-text {
  margin-top: 20px;
}

.sponsored-area .link-box {
  margin-top: 0;
}

.content-ranking .tab {
  margin: -10px 0 20px;
}
.content-ranking .tab span {
  font-size: var(--size-14px);
  min-width: unset;
  padding: 0.5em 0.5em calc(1em - 4px);
}

.sns-bottom {
  margin: 2.5em auto;
  text-align: center;
  line-height: 1;
  font-size: var(--size-12px);
}
.sns-bottom a {
  font-weight: 700;
  color: var(--color-text);
  padding-left: 35px;
  position: relative;
  transition: all 0.3s ease-out;
}
.sns-bottom a + a {
  margin-left: 1em;
}
.sns-bottom a:hover {
  opacity: var(--link-hover-opacity);
}
.sns-bottom span.icon {
  position: absolute;
  left: 0;
  top: -0.5em;
  transition: all 0.3s ease-out;
}

.gearbox-wrapper.article-related img {
  grid-row: 1/5;
}
.gearbox-wrapper.article-related .maker, .gearbox-wrapper.article-related h3, .gearbox-wrapper.article-related .text {
  grid-column: 3/5;
}
.gearbox-wrapper.article-related .maker {
  margin-bottom: 0;
}
.gearbox-wrapper.article-related .text {
  margin-top: 0.2em;
}
.gearbox-wrapper.article-related .text br {
  display: none;
}
.gearbox-wrapper.article-related a.button {
  grid-row: 4/5;
  grid-column: 3/4;
  padding: 0.2em;
  margin-right: 1em;
  font-size: var(--size-14px);
  font-weight: 400;
}
.gearbox-wrapper.article-related a.button.shopbg {
  grid-column: 4/5;
}

.column-2 .list-item h2 {
  font-size: var(--size-16px);
  font-weight: 700;
}
.column-2 .list-item img {
  border: 1px solid var(--color-border-lightgraybox);
  border-radius: 0.25em;
  border-color: transparent;
}
.column-2 .list-item.fullwidth {
  min-width: 100%;
}
.column-2 .list-item.fullwidth h2 {
  font-size: var(--size-20px);
}
.column-2 .list-item.fullwidth img {
  width: 600px;
  height: 300px;
  -o-object-fit: cover;
     object-fit: cover;
  font-family: "object-fit: cover;";
}
.column-2 .list-item.side {
  min-width: 100%;
}
.column-2 .list-item.side a {
  align-items: center;
}
.column-2 .list-item.side .image, .column-2 .list-item.side img {
  min-width: 290px;
}

@media all and (-ms-high-contrast: none) { /* IE11 */
  *::-ms-backdrop, span.icon.facebook {
    background-image: url(https://i.gimg.jp/pts/img/icon/facebook-oval.svg);
  }
  *::-ms-backdrop, span.icon.twitter {
    background-image: url(https://i.gimg.jp/pts/img/icon/twitter-oval.svg);
  }
  *::-ms-backdrop, span.icon.line {
    background-image: url(https://i.gimg.jp/pts/img/icon/line-oval.svg);
  }
}
.main-column.single .article header {
  max-width: 100%;
}

.article header .rensai {
  font-size: var(--size-16px);
  color: var(--color-text);
}

.list-item .date {
  font-size: var(--size-12px);
}

.scroll-to-top-icon {
  bottom: 20px;
  position: fixed;
  right: calc(50% - 544px);
}
.scroll-to-top-icon.disable {
  opacity: 0;
}

.bruder h2 img {
  position: relative;
  top: -6px;
  margin-right: var(--size-10px);
}
.bruder .list-item {
  display: flex;
  width: 100%;
}
.bruder .list-item a {
  width: 32%;
  margin-bottom: var(--size-12px);
}
.bruder .list-item a:nth-of-type(2) {
  margin: 0 2% 0;
}
.bruder .list-item a .text h3 {
  font-weight: 400;
  font-size: var(--size-14px);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.bruder .list-item a .text .tag {
  margin-top: 8px;
}
.bruder .list-item a .text .tag span.sponsored:first-of-type {
  margin-left: 0;
}

.recommend div a {
  display: block;
  width: 23%;
  margin-bottom: var(--size-16px);
  margin-right: 2.6666666667%;
}
.recommend div a img {
  transition: all 0.3s ease-out;
}
.recommend div a:nth-of-type(even) {
  margin-left: 0;
}
.recommend div a:nth-of-type(4n) {
  margin-right: 0;
}
.recommend div a:hover {
  color: var(--color-link);
}
.recommend div a:hover img {
  opacity: var(--link-hover-opacity);
}
.recommend div a:hover p {
  color: var(--link-hover-opacity);
}

.features .list-item.side a .text {
  padding-left: var(--size-10px);
}
.features .list-item.side a .text h3 {
  font-size: var(--size-14px);
  font-weight: 600;
}

.list.contentsList header h1 {
  font-weight: 600;
  color: var(--color-text);
}

.content-list .list-item.side {
  margin-bottom: var(--size-24px);
}
.content-list .list-item.side .image img {
  width: 100px;
  height: 100px;
  max-width: 100px;
  max-height: 100px;
}
.content-list .list-item.side a .text {
  padding-left: var(--size-16px);
}
.content-list .list-item.side a .text h2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  font-size: var(--size-18px);
}
.content-list .list-item.side a .text h2 br {
  display: none;
}
.content-list .list-item.side a .text .description {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.5;
  letter-spacing: 0.05em;
}/*# sourceMappingURL=pc-styles.css.map */