@charset "utf-8";

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
【 リセット 】
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* font set */
@font-face {
	font-family: 'yakuhan';
	src: url('font/yakuhan_medium.woff') format('opentype');
}
@font-face {
	font-family: 'yakuhanmp';
	src: url('font/yakuhanmp_medium.woff2') format('opentype');
}
@font-face {
	font-family: 'roboto';
	src: url('font/roboto.ttf') format('opentype');
}

:root{
  --page-wrap : 1040px;
  --base-font : 1.8rem;
  --font-min: "游明朝", YuMincho, "Hiragino Mincho", "ヒラギノ明朝", "Hiragino Mincho", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  --trans-time : .25s;
}

sup { font-size: 0.75em; line-height: 1; }
sub { font-size: 0.75em; line-height: 1; }
.content { font-family: yakuhan, roboto,'游ゴシック体', YuGothic, 'Yu Gothic', 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, sans-serif; }
.content img { width: 100%; }
.inliner { position: relative; display: inline-block; line-height: inherit; z-index: 100; }
.content { max-width: none; padding-right: 0; padding-left: 0; font-weight: 500; }
.page-txt { font-size: var(--base-font); line-height: 1.71; text-indent: 1em; }
.page-txt__label { font-weight: 700; display: block; text-indent: 0; margin-top: 2em; }
.page-txt + .page-txt { margin-top: 1.0em; }
.page-txt--name { font-weight: 700; margin-right: 1em; }
.page-note { font-size: 1.4rem; line-height: 1.5; }
.page-wrap { max-width: 990px; margin-left: auto; margin-right: auto; padding: 0 20px; }

.visual { background: #afc3ea; height: clamp(360px,calc(31.25vw + 120px),520px); overflow: hidden; opacity: 0;  animation: visualAnime calc(var(--trans-time) * 4) forwards; }
.visual-wrap { position: relative; max-width: 1240px; margin: 0 auto; }
.visual-title { position: absolute; content: ""; inset: 0 clamp(-20px,calc(17.58vw + -156px),70px) 0 auto; margin: auto 0; max-width: clamp(515px,calc(48.83vw + 140px),765px); width: 100%; aspect-ratio: 1530/550; z-index: 1000; opacity: 0; transform: translate(-30px,15px); animation: visualAnime2 calc(var(--trans-time) * 4) forwards .5s; }
.visual-bg { width: clamp(600px,calc(50.79vw + 210px),860px); display: block; transform: translateX(clamp(-100px,calc(50.51vw + -388px),0px)); z-index: 100; }
.visual-btn { position: absolute; content: ""; inset: auto auto 35px 20px; width: clamp(120px,calc(13.68vw + 15px),190px); aspect-ratio: 1; filter: drop-shadow(0 5px 5px rgb(0, 0, 0, .25)); z-index: 1000; transition: .25s; animation-name: move; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; animation-duration: 3s; }

@keyframes visualAnime{
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes visualAnime2{
  0%   { opacity: 0; transform: translate(-30px,15px); }
  100% { opacity: 1; transform: translate(0px,0px); }
}
@media (max-width: 767px) {
  @keyframes visualAnime2{
  0%   { opacity: 0; transform: translate(-15px,8px); }
  100% { opacity: 1; transform: translate(0px,0px); }
  }
}


@keyframes move {
	0% { transform: translate(0,0px); }
  100% { transform: translate(0,-15px) }
}

.pagebtn { margin-top: 20px; max-width: 1140px; margin-left: auto; margin-right: auto; padding: 0 20px; opacity: 0;  animation: visualAnime calc(var(--trans-time) * 4) forwards; }
.pagebtn-next { text-align: right; }
.pagebtn__area { position: relative; display: inline-flex; min-height: 52px; flex-wrap: wrap; align-items: center; justify-content: center; color: #fff; font-family: var(--font-min); font-weight: 700; background: #000; line-height: 1.2; }
.pagebtn__area--prev { margin-right: auto; padding: 10px 10px 10px 70px; }
.pagebtn__area--prev::before { position: absolute; content: ""; inset: -5px auto 0 19px; margin: auto 0; width: 10px; height: 1.5px; background: #fff; transform: rotate(-35deg); }
.pagebtn__area--prev:after { position: absolute; content: ""; inset: 0 auto 0 20px; margin: auto 0; width: 35px; height: 1px; background: #fff; }
.pagebtn__area--next { margin-left: auto; padding: 10px 70px 10px 10px; }
.pagebtn__area--next::before { position: absolute; content: ""; inset: -5px 19px 0 auto; margin: auto 0; width: 10px; height: 1.5px; background: #fff; transform: rotate(35deg); }
.pagebtn__area--next:after { position: absolute; content: ""; inset: 0 20px 0 auto; margin: auto 0; width: 35px; height: 1px; background: #fff; }

.arti { margin-top: 90px; }
.arti-inner { opacity: 0;  animation: visualAnime calc(var(--trans-time) * 4) forwards; }
.arti-head { position: relative; font-size: clamp(2rem,calc(2.66vw + 12px),4.5rem); line-height: 1.55; font-family: var(--font-min); text-align: center; max-width: 950px; margin-inline-start: auto; margin-inline-end: auto; padding: 0 15px; }
.arti-head span:first-child::first-letter { font-size: clamp(4.2rem,calc(4.69vw + 27px),8.6rem); line-height: 1; }
.arti-head--p1::before { position: absolute; content: ""; inset: -45px auto auto -200px; width: 330px; aspect-ratio: 654/398; background: url(../images/acce_art2.webp) no-repeat center/contain; z-index: 1; }
.arti-head--p2::before { position: absolute; content: ""; inset: -60px auto auto -80px; width: 380px; aspect-ratio: 380/233; background: url(../images/acce_art1.webp) no-repeat center/contain; z-index: 1; }
.arti-lead { text-align: center; font-family: var(--font-min); font-size: 1.9rem; line-height: 2; margin-top: 30px; position: relative; z-index: 10; padding: 0 15px; }
.arti-content { margin-top: 100px; }

.sct + .sct { margin-top: 80px; }
.sct-head { position: relative; font-size: clamp(2rem,calc(4.84vw + 5px),3.2rem); font-family: var(--font-min); border-bottom: 1px solid #000; line-height: 1.5; padding-bottom: 5px; display: inline-flex; margin-bottom: 60px; z-index: 100; }
.sct-head--p1-2::before { position: absolute; content: ""; inset: -160px auto auto -170px; width: 450px; background: url(../images/acce_art4.webp) no-repeat center/contain; aspect-ratio: 1158/676; z-index: 10; }
.sct-head--p2-3 { margin-top: 60px; }
.sct-head--p2-3::before { position: absolute; content: ""; inset: -150px auto 0 -75px; z-index: 10; width: 205px; aspect-ratio: 398/476; background: url(../images/acce_art7.webp) no-repeat center/contain; }

.sct-wrap { display: flex; flex-wrap: wrap; gap: 30px 50px; }
.p1-sct1 { max-width: 1080px; margin-left: clamp(20px,calc(50% + -475px),485px); z-index: 1000; position: relative; }
.sct-sent { position: relative; z-index: 100; }
.sct-sent + .sct-sent { margin-top: 40px; }
.p1-sct1 .sct-sent { padding-right: clamp(20px,calc(50vw + -475px),130px); }
.sct-img__cap { margin-top: 10px; font-size: 1.5rem; line-height: 1.31; }
.sct-img__cap--right { text-align: right; }
.sct-img__cap-name { margin-top: 10px; font-size: 3rem; }
.sct-img__cap-name__tag { font-size: 1.5rem; }

.p1-sct1__img { position: relative; float: right; width: clamp(350px,calc(30.49vw + 116px),500px); margin-left: 50px; margin-bottom: 50px; }
.p1-sct1__img::after { position: absolute; content: ""; inset: auto -270px -180px auto; width: 725px; aspect-ratio: 1598/596; background: url(../images/acce_art3.webp) no-repeat center/contain; }
.p1-sct1__img-item { position: relative; z-index: 100; }

.p1-sct1__img2 { max-width: 700px; margin: 75px auto 0 125px; position: relative; z-index: 100; }
.p1-sct2__img { width: 340px; margin-left: clamp(0px,calc(22.36vw + -172px),110px); }
.p1-sct2__label { background: #eceeed; text-align: right; padding: 5px 35px; margin-bottom: 15px; }
.p1-sct2__label-main { font-weight: 700; font-size: 1.6rem; line-height: 1.31; }
.p1-sct2__label-sub { font-size: 1.3rem; line-height: 1.31; }

.p2-sct1__img { float: right; max-width: 320px; margin-left: 50px; font-family: var(--font-min); font-weight: 700; margin-bottom: 50px; position: relative; }
.p2-sct1__img-item { position: relative; }
.p2-sct1__img-item img { position: relative; z-index: 100; }
.p2-sct1__img-item::after { position: absolute; content: ""; inset: auto -140px -115px auto; width: 240px; aspect-ratio: 480/324; background: url(../images/acce_art8.webp) no-repeat center/contain; z-index: 1; }
.p2-sct2 { position: relative; z-index: 1000; }
.p2-sct2__img { position: relative; margin: 20px auto 0; width: 100%; z-index: 100; }
.p2-sct2__inner { margin-inline-start: auto; margin-inline-end: auto; padding: 15px 20px 20px; background: #edeef2; max-width: 720px; }
.p2-sct2__label { font-weight: 700; font-size: 1.9rem; text-align: center; }
.p2-sct2__label::after { content: ""; display: block; width: 210px; aspect-ratio: 870/63; margin: 5px auto 0; background: url(../images/acce_fuki.svg) no-repeat center/contain; margin-top: 10px; }
.p2-sct2__wrap { display: flex; flex-wrap: wrap; gap: 30px 0; margin-top: 10px; }
.p2-sct2__item { width: 50%; }
.p2-sct2__batch { position: relative; min-height: 40px; display: flex; flex-wrap: wrap; align-items: center; padding-left: 70px; font-weight: 700; font-size: clamp(1.8rem,calc(2.42vw + 11px),2.4rem); }
.p2-sct2__item:nth-child(1) .p2-sct2__batch { color: #36a8ff; }
.p2-sct2__item:nth-child(2) .p2-sct2__batch { color: #c10f44; }
.p2-sct2__item:nth-child(1) .p2-sct2__batch::before { position: absolute; content: ""; inset: 0 auto 0 15px; margin: auto 0; width: 40px; aspect-ratio: 1; background: url(../images/icon_maru.svg) no-repeat center/contain; filter: drop-shadow(2px 2px 2px rgb(0, 0, 0, .25)); }
.p2-sct2__item:nth-child(2) .p2-sct2__batch::before { position: absolute; content: ""; inset: 0 auto 0 15px; margin: auto 0; width: 40px; aspect-ratio: 1; background: url(../images/icon_batsu.svg) no-repeat center/contain; filter: drop-shadow(2px 2px 2px rgb(0, 0, 0, .25)); }
.p2-sct2__list { margin-top: 10px; padding: 15px 0 15px 60px; }
.p2-sct2__item:nth-child(1) .p2-sct2__list { background: #9de9e9; }
.p2-sct2__item:nth-child(2) .p2-sct2__list { background: #ffd6d4; }
.p2-sct2__items { position: relative; padding-left: 1em; font-size: clamp(1.5rem,calc(1.21vw + 12px),1.8rem); font-weight: 700; line-height: 1.31; }
.p2-sct2__items::before { position: absolute; content: ""; inset: 0.3em auto auto 0; width: 0.8em; height: 0.8em; border-radius: 100%; background: #a4a6a3; }
.p2-sct2__items:nth-child(n+2) { margin-top: 5px; }
.p2-sct3__img { max-width: 640px; width: 100%; margin: 30px auto 90px; }

.sct-ex { flex: 1; }

.txt-talk { font-weight: 700; padding-left: 2em; position: relative; text-indent: 0; }
.txt-talk::before { position: absolute; content: ""; inset: .85em auto 0 0; width: 1.6em; height: 1px; background: #000; }

.aside { position: relative; padding-bottom: 65px; }
.aside::before { position: absolute; content: ""; inset: 0 auto auto 0; width: 0; height: 0; border-style: solid; border-width: 150px 100vw 0 0; border-color: #fff transparent transparent transparent; z-index: 1000; }
.p1-aside { background: #f9ebeb; }
.p1-aside::after { position: absolute; content: ""; inset: 100px auto 0 clamp(-80px,calc(50vw + -710px),250px); width: 360px; aspect-ratio: 666/434; background: url(../images/acce_art5.webp) no-repeat center/contain; z-index: 10; mix-blend-mode: multiply; }
.p2-aside { background: #edeef2; }
.p2-aside::after { position: absolute; content: ""; inset: 100px auto 0 clamp(-80px,calc(50vw + -710px),250px); width: 270px; aspect-ratio: 580/490; background: url(../images/acce_art6.webp) no-repeat center/contain; z-index: 10; mix-blend-mode: multiply; }

.aside-wrap { position: relative; padding-top: clamp(160px,calc(-8.14vw + 263px),200px); z-index: 100; }
.p1-aside__wrap::before { position: absolute; content: ""; inset: 0 auto auto 0; background: url(../images/acce_art8.webp) no-repeat center/contain; }
.p2-aside__wrap::before { position: absolute; content: ""; inset: 0 auto auto 0; background: url(../images/acce_art7.webp) no-repeat center/contain; }
.aside-batch { position: absolute; content: ""; inset: clamp(100px,calc(12.2vw + 7px),160px) auto auto -110px; width: 110px; aspect-ratio: 1;z-index: 10; }
.aside-head { font-size: clamp(2rem,calc(3.23vw + 10px),2.8rem); line-height: 1.5; font-family: var(--font-min); margin-top: 35px; text-align: center; }

.aside-fig { max-width: 690px; margin: 30px auto; }
.aside-img { max-width: 690px; margin: 60px auto; display: block; background: #fff; padding: 15px; }

.aside-label { font-weight: 700; font-size: var(--base-font); margin-bottom: 5px; line-height: 1.5; }
.aside-sent + .aside-sent { margin-top: 30px; }
.aside-cont + .aside-cont { margin-top: 55px; }

.aside-btn { margin-top: 60px; }
.aside-btn__area { position: relative; border: 2px solid #000; padding: 15px 40px 15px 30px; text-align: center; border-radius: 50px; max-width: 800px; width: 100%; display: block; margin-inline-start: auto; margin-inline-end: auto; color: #000; line-height: 1.31; }
.aside-btn__area::after { position: absolute; content: ""; inset: 0 20px 0 auto; margin: auto 0; background: url(../images/icon_link.svg) no-repeat center/contain; width: 16px; aspect-ratio: 75/67; }
.aside-prof { margin-top: 60px; border-top: 2px dashed #000; border-bottom: 2px dashed #000;  padding: 35px 0 30px;}
.aside-prof__wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 30px; font-size: 1.6rem; line-height: 1.5; }
.aside-prof__name { width: 300px; font-size: 3.3rem; font-weight: 700; font-family: var(--font-min); text-align: center; }
.aside-prof__ex { flex: 1; }
.aside-prof__address { margin-top: 10px; }

.pagelink-btn { margin: 70px auto; text-align: center; }
.pagelink-btn__area { position: relative; display: inline-flex; align-items: center; background: #000; margin: 0 auto; color: #fff; font-family: var(--font-min); min-height: 60px; padding: 10px 0; font-size: clamp(1.7rem,calc(2.83vw + 8px),2.4rem); text-align: left; line-height: 1.31; }
.p1-pagelink-btn__area { padding-left: clamp(15px,calc(75vw + -225px),90px); padding-right: 100px; }
.p1-pagelink-btn__area::before { position: absolute; content: ""; inset: 0 25px 0 auto; margin: auto 0; width: 55px; height: 1px; background: #fff; }
.p1-pagelink-btn__area::after { position: absolute; content: ""; inset: -9px 24px 0 auto; margin: auto 0; width: 14px; height: 1.5px; background: #fff; transform: rotate(35deg); }
.p2-pagelink-btn__area { padding-right: 15px; padding-left: 100px; }
.p2-pagelink-btn__area::before { position: absolute; content: ""; inset: 0 auto 0 25px; margin: auto 0; width: 55px; height: 1px; background: #fff; }
.p2-pagelink-btn__area::after { position: absolute; content: ""; inset: -9px auto 0 24px; margin: auto 0; width: 14px; height: 1.5px; background: #fff; transform: rotate(-35deg); }



@media screen and (min-width: 769px) {
  
}

@media screen and (max-width: 1260px) {
  .aside-batch { inset: clamp(60px,calc(-8.14vw + 163px),100px) 0 auto 0; margin: 0 auto; width: 110px; }
}

@media screen and (max-width: 990px) {
  .p1-sct1__img2 { margin: 45px auto 0; }
}

@media screen and (max-width: 767px) {
  .page-wrap { max-width: 598px; padding: 0 15px; }
  .page-wrap__right { max-width: 598px; padding: 0 15px; }
  .page-wrap__left { max-width: 598px; padding: 0 15px; }
  .page-txt { font-size: 1.5rem; }
  .page-txt + .page-txt { margin-top: 1em; }
  .page-note { font-size: 1.3rem; }
  
  .visual-title { width: clamp(420px,calc(47.98vw + 147px),515px); }
  .arti-lead { text-align: left; max-width: 598px; margin-inline-start: auto; margin-inline-end: auto; font-size: 1.6rem; }
  .arti-lead__txt { line-height: 1.71; }
  
  .arti { margin-top: 60px; }
  .arti-content { margin-top: 40px; }
  
  .sct-head { margin-bottom: 30px; }
  .sct-head--p2-3 { margin-top: 30px; }
  .sct-ex { flex: 0 1 auto; width: 100%; display: flex; flex-wrap: wrap; flex-direction: column; }
  .sct-sent { flex: 0 1 auto; order: 1; }
  .sct-sent + .sct-sent { margin-top: 20px; }
  .p1-sct1 { padding: 0 15px; max-width: 598px; margin-inline-start: auto; margin-inline-end: auto; }
  .p1-sct1 .sct-sent { padding-right: 0; }
  .p1-sct1__img { float: none; width: 100%; margin: 0 auto 20px; }
  .p1-sct1__img2 { margin-top: 0; }
  .p1-sct2__label { padding: 5px; }
  .p1-sct2__img { max-width: 320px; width: 100%; margin: 0 auto; }
  .p2-sct1__img { float: none; margin: 0 auto 30px; }
  .p2-sct2__batch { padding-left: 40px; }
  .p2-sct2__item:nth-child(1) .p2-sct2__batch::before { inset: 0 auto 0 0; width: 30px; }
  .p2-sct2__item:nth-child(2) .p2-sct2__batch::before { inset: 0 auto 0 0; width: 30px; }
  .p2-sct2__item { width: 100%; }
  .p2-sct2__list { padding: 15px 0 15px 20px; }
  .p2-sct3__img { margin: 20px auto 40px; }
  
  .aside { padding-top: 60px; }
  .aside::before { border-width: 60px 100vw 0 0; }
  
  .p1-aside::after { inset: 0px 0 auto 0; margin: 0 auto; width: 360px; }
  .p2-aside::after { inset: 0px 0 auto 0; margin: 0 auto; width: 270px; }
  .aside-batch { position: relative; inset: 0; margin: 0 auto; }
  .aside-head { margin-top: 20px; text-align: left; }
  .aside-head .inliner { display: inline; }
  
  .aside-fig { margin: 20px auto; }
  .aside-img { margin: 30px auto; padding: 10px; }
  
  .aside-sent + .aside-sent { margin-top: 20px; }
  .aside-cont + .aside-cont { margin-top: 35px; }
  .aside-btn { margin-top: 40px; }
  
  .aside-prof { margin-top: 40px; padding: 35px 0 30px; }
  .aside-prof__wrap { font-size: 1.4rem; }
  .aside-prof__name { width: 290px; font-size: 2.8rem; margin-inline-start: auto; margin-inline-end: auto; }
  .aside-prof__ex { flex: 0 1 auto; }
  .aside-prof__address { margin-top: 10px; }
}

@media (max-width: 568px) {
  .visual { height: auto; }
  .visual-title { width: 100%; inset: clamp(15px,calc(10.09vw + -18px),40px) 0 auto 0; margin: 0 auto; padding: 0 10px; }
  .visual-bg { width: 100%; transform: translateX(0); }
  .visual-btn { inset: auto auto clamp(80px,calc(20.17vw + 16px),130px) 15px; width: clamp(110px,calc(28.23vw + 20px),180px); }
  
  .pagebtn { margin-top: 0; padding: 0; }
  .pagebtn__area { width: 100%; }
  .pagebtn__area--prev:after { width: 30px; }
  .pagebtn__area--next:after { width: 30px; }
}
@media (min-width: 769px) {
  .pagebtn__area { transition: .5s; }
  .pagebtn__area:hover { transform: translateY(5px); }
  .aside-btn__area { transition: .5s; }
  .aside-btn__area::after { transition: .5s; }
  .aside-btn__area:hover { background: #000; color: #fff; }
  .aside-btn__area:hover::after { background: url(../images/icon_link_w.svg) no-repeat center/contain; }
  .pagelink-btn__area { transition: .5s; }
  .pagelink-btn__area:hover { transform: translateY(5px); }
}


.preload .pointer { transition: 0s !important; animation-duration: 0s !important; }

.pointer.active { display: block; opacity: 1; transform: translateY(0px); }
.pointer { display: block; opacity: 0; transform: translateY(50px); transition: calc(var(--trans-time) * 3); }