@charset "utf-8";

#content { max-width: 100%; margin: 0;color: #333333;letter-spacing: 0.05em; }
#content img{ height: auto; vertical-align: bottom; max-width: 100%; }
#content .container {max-width: 1226px;padding-left: 13px;padding-right: 13px;margin: 0 auto;box-sizing: border-box;}
#content a.link-blank {color: #333333;transition: opacity 0.3s ease;}
#content .link-blank {display: flex;align-items: center;gap: 4px;font-size: 1.2857142857143em;color: #333333;text-decoration: none;font-weight: 500;}
#content .link-txt {color: #000000;text-decoration: underline;transition: opacity 0.3s ease;}
#content .link-blank img {width: 17px;height: 14px;}
#content .anchor {margin-top: 54px;}
#content .anchor-list {display: grid;column-gap: calc(15 / 1200 * 100%);}
#content .anchor-item {box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.08);border: 1px solid #cc0000;border-radius: 4px;}
#content .anchor-item a {display: block;color: #000000;text-align: center;font-size: 1.4285714285714em;line-height: 1.5;padding: 26px 0 56px;position: relative;height: 100%;letter-spacing: 0.1em;}
#content .anchor-item a::before {position: absolute;content: "";bottom: 22px; background-color: #cc0000;border-radius: 50%;width: 24px;height: 24px;left: 50%;transform: translateX(-50%);}
#content .anchor-item a::after {position: absolute;content: ''; width: 6px; height: 6px; border-top: solid 2px #fff; border-right: solid 2px #fff; position: absolute; left: 50%;transform: translateX(-50%) rotate(135deg); bottom: 32px; transition: transform 0.3s ease;}
#content .ef--fade, .ef--bottom{ transition-property: transform,opacity; transition-timing-function: ease-out; transition-duration: .6s; }
#content .ef--fade{ opacity:0 }
#content .ef--fade.is-play{ opacity:1 }
#content .ef--bottom{ transform:translateY(50px);opacity:0 }
#content .ef--bottom.is-play{ transform:translateY(0);opacity:1 }
/* トランジションが開始されるまでの時間をずらせる */
@media only screen and (min-width: 641px) {
#content .ef--delay-1{ transition-delay:.2s }
#content .ef--delay-2{ transition-delay:.4s }
#content .ef--delay-3{ transition-delay:.6s }
#content .ef--delay-4{ transition-delay:.8s }
}
/*
related
================================================ */
#content .related-list {margin-top: 44px;display: grid;grid-template-columns: repeat(3, 1fr);column-gap: calc(48 / 1200 * 100%);row-gap: 56px;}
#content a.related-item {color: #333333;}
#content a.related-item:hover {text-decoration: none;}
#content .related-item__img {overflow: hidden;border-radius: 4px;}
#content .related-item__img img{border-radius: 4px;transition: transform .6s ease;}
#content .related-item__content {margin-top: 24px;}
#content .related-item__txt {margin-top: 17px;font-size: 1.2857142857143em;line-height: 1.8;}
#content .related-illust__item {position: absolute;top: 0;left: 0;z-index: 1;}
#content .related-illust__item--01 {top: -40.8%;left: 21.24%;}
#content .related-illust__item--02 {top: -15%; left: auto; right: 17.5%;}

@media only screen and (min-width: 641px) and (max-width: 1080px) {
#content .anchor-item a {font-size: calc(16 / 14 * 1em);}
}

@media only screen and (min-width: 641px) {
#content .sp_only_inline { display: none !important; }
#content .sp_only { display: none !important; }
#content .pc_only { display: block !important; }
#content .pc_only_inline { display: inline !important; }
#content a.link-blank:hover {opacity: 0.6;}
#content a.related-item:hover .related-item__img img{transform: scale(1.06);}
#content .link-txt:hover {opacity: 0.6;}
#content .anchor-item a:hover {text-decoration: underline;}
}

@media only screen and (max-width: 640.98px) {
#content .pc_only_inline { display: none !important; }
#content .sp_only_inline { display: inline!important; }
#content .sp_only { display: block!important; }
#content .pc_only { display: none!important; }
#content .container {padding-left: 20px;padding-right: 20px;}
#content .link-blank { gap: 8px; font-size: 1.1428571428571em; }
#content .related-list { margin-top: 25px; display: grid; grid-template-columns: 1fr; row-gap: 36px; }
#content .related-item__txt { margin-top: 12px; font-size: 1.1428571428571em; line-height: 2;letter-spacing: 0;}
#content .anchor {margin-top: 28px;}
#content .anchor-item a {padding: 10px 0 28px; font-size: calc(14/14*1em); line-height: calc(23/14);letter-spacing: 0.05em;}
#content .anchor-item a::before {bottom: 8px; width: 17px; height: 17px;}
#content .anchor-item a::after {bottom: 15px; width: 4px; height: 4px; border-top-width: 1px; border-right-width: 1px;}
}