@charset "utf-8";

/* @acab/reset.css
----------------------------------------------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}:where([hidden]:not([hidden='until-found'])){display:none!important}:where(html){-webkit-text-size-adjust:none;color-scheme:dark light;tab-size:2}@media (prefers-reduced-motion:no-preference){:where(html:focus-within){scroll-behavior:smooth}}:where(body){line-height:1.5;font-family:system-ui,sans-serif;-webkit-font-smoothing:antialiased}:where(button){all:unset}:where(input,button,textarea,select){font:inherit;color:inherit}:where(textarea){resize:vertical;resize:block}:where(button,label,select,summary,[role='button'],[role='option']){cursor:pointer}:where(:disabled){cursor:not-allowed}:where(label:has(>input:disabled),label:has(+input:disabled)){cursor:not-allowed}:where(a){color:inherit;text-underline-offset:.2ex}:where(ul,ol){list-style:none}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block}:where(img,picture,svg,video){max-inline-size:100%;block-size:auto}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(h1,h2,h3){line-height:calc(1em + 0.5rem);text-wrap:balance}:where(hr){border:none;border-block-start:1px solid;color:inherit;block-size:0;overflow:visible}:where(:focus-visible){outline:3px solid CanvasText;box-shadow:0 0 0 5px Canvas;outline-offset:1px}:where(:focus-visible,:target){scroll-margin-block:8vh}:where(.visually-hidden:not(:focus-within,:active)){clip-path:inset(50%)!important;height:1px!important;width:1px!important;overflow:hidden!important;position:absolute!important;white-space:nowrap!important;border:0!important}

/* html
----------------------------------------------- */

img{
    margin: auto;
}


@keyframes focus {
    40% {
      opacity: 1;
      transform: rotate(0deg) scale(0.85);
    }
    100% {
      opacity: 1;
      transform: rotate(0deg) scale(1);
    }
  }



/* body
----------------------------------------------- */

body {
    margin: 0;
    padding: 0;
    color: #281414;
    font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
    font-weight: 600;
    background-color: #fffbf3;
    background-image: url(../images/bg_texture.png), url(../images/bg_number.png);
    background-size: auto, 100%;
  }

/* header
----------------------------------------------- */
header{
    position: absolute;
    top: 0;
    width: 100%;
}
.header__inner{
    display: flex;
    justify-content: space-between;
}
.hmb__btn{
    width: 75px;
    height: 75px;
    background-color: #281414 ;
    position: relative;
    cursor: pointer;
    z-index: 99;
}
.hmb__btn::before,
.hmb__btn::after{
    content: '';
    display: block;
    width: 40%;
    height: 5px;
    background-color: #ffff00;
    transition: all .3s;
    position: absolute;
    left: 30%;
}
.hmb__btn::before{
    top:36%; 
}
.hmb__btn::after{
    bottom:40%;
}
.hmb__btn.is-active{
	position: fixed;
	top: 0;
	right: 0;
}
.hmb__btn.is-active::before{
    transform: translateY(6px) rotate(-45deg);
}
.hmb__btn.is-active::after{
    transform: translateY(-6px) rotate(45deg);
}
.hmb__menu{
    display: none;
    position: fixed;
	right: 0;
    width: 100%;
	max-width: 450px;
    height: 100vh;
	color: #fff;
    background: #281414;
    transition: all 1s;
    z-index: 98;
}
.hmb__menu.is-visible{
    display: block;
    transform: translateX(0) ;
}
.hmb__menu:not(.is-visible){
    transform: translateX(-100%) ;
}
.hmb__links{
	margin-top: 80px;
}
.hmb__link{
	display: block;
	color: #fff;
	font-size: 28px;
    margin: 20px 20px 10px;
    padding: 20px;
	text-decoration: none;
	background-image: url(../images/line_white.png);
	background-repeat: repeat-x;
	background-position: 100% 100%;
}

@media (min-width: 1000px) {
    .hmb__btn{
        width: 75px;
        height: 75px;
    }
}
@media (max-width: 999px) {
    .header{
        height: 50px;
    }
    .header img{
        width: auto;
        max-height: 50px;
    }
    .hmb__btn{
        width: 50px;
        height: 50px;
    }
    .hmb__btn::before,
    .hmb__btn::after{
        height: 4px;
    }
    .hmb__btn::after{
        bottom: 33%;
    }
	.hmb__link{
		margin: 0 20px;
	}
}


/* footer
----------------------------------------------- */
.footer{
    padding-top: 100px;
}
.footer__author{
	font-weight: 700;
    text-align: center;
}
.footer__author-name{
	margin-top: 1em;
    margin-bottom: 4em;
}
.footer__privacy{
    text-align: center;
    margin: 30px auto;
}
.footer__privacy a{
    text-decoration: none;
}
.footer__privacy a:before{
    content: '';
    display: inline-block;
	width: 10px;
	height: 10px;
	border-style: solid;
	border-width: 3px 3px 0 0;
	border-color: #EB4302;
	transform: rotate(45deg);
	vertical-align: middle;
	margin-right: 10px;
	margin-top: -4px;
}
.footer__copyright{
    color: #fff;
	font-weight: 500;
    padding: 1em;
    text-align: center;
    background-color: #281414;
}
@media (min-width: 1000px) {
    .footer__author{
        font-size: 1.4rem;
        margin: 50px auto;
    }
    .footer__copyright{
        padding: 3em 1em;
    }
}
@media (max-width: 999px) {
    .footer{
        font-size: 12px;
    }
    .footer__copyright{
        font-size: 12px;
    }
}

/* common
----------------------------------------------- */

.sec{
    padding-top: 50px;
    padding-bottom: 50px;
}
[class$="heading"]{
    text-align: center;
}
[class$="heading"] img{
    margin: auto;;
}
.btn__block{
    padding: 3em 1em;
    text-align: center;
}
.btn{
    text-decoration: none;
    display: inline-block;
}
@media (min-width: 1000px) {
    .sp-only{
        display: none;
    }
    .sec{
        padding-top: 100px;
        padding-bottom: 100px;
    }
}
@media (max-width: 999px) {
    section > [class$="inner"]{
        margin-left: 15px;
        margin-right: 15px;
    }
}


/* circle
----------------------------------------------- */

@keyframes rotateAnim {
    0% { transform: rotate(0deg); }
    50%{ transform: rotate(180deg); }
    100% { transform: rotate(360deg); }
  }

.circle_bg{
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
.circle{
/*
    position: absolute;
    left: -50%;
    right: -50%;
    margin-left: -100%;
    transform: translate(-25%, 50%);
*/
    width: 4500px;
    height: 4500px;
    margin: auto;
    margin-top: 1800px;
    /*transform: translate(-30%, 37%);*/
    position: absolute;
    left: calc( (100% - 4500px) / 2);
}

.circle__inner {
    position: relative;
    margin: 0 auto;
    width: 420px;
    height: 530px;
    border-radius: 50%;
    transform-origin: center; 
    will-change: transform;
}
.circle_bg.is-visible .circle__inner {
    animation: rotateAnim 90s linear infinite;
}
.circle__item {
    position: absolute;
    width: 420px;
    height: 580px;
    will-change: transform;
/*    -webkit-box-reflect: below 25px -webkit-gradient(linear, left bottom, left top, from(rgba(255,255,255,.4)), color-stop(0.3, transparent), to(transparent));*/
}
.circle__img {
    width: 100%;
    height: 530px;
    background-color: #999;
    background-position: center bottom;
    background-size: cover;
}
.circle__ref {
	margin-top: 25px;
    width: 100%;
    height: 40px;
    -webkit-mask-image: linear-gradient(transparent,black);
    mask-image: linear-gradient (transparent,black);
    transform: scale(1, -1);
    background-size: 100% auto;
    background-position: bottom center;
	opacity: .5;
}
@media (max-width: 999px) {
    
}


/* circle -min
----------------------------------------------- */
.circlem_parent{
	position: relative;
    overflow: hidden;
}
.circlem_bg{
    position: absolute;
    /*z-index: -1;*/
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.circlem{
    width: 2300px;
    height: 2300px;
    margin: auto;
    margin-top: -400px;
    transform: translate(-50%, 0);
    position: absolute;
    left: 50%;
}

.circlem__inner {
    position: relative;
    margin: 0 auto;
    width: 150px;
    height: 200px;
    border-radius: 50%;
    transform-origin: center; 
    will-change: transform;
}
.circlem_bg.is-visible .circlem__inner {
    animation: rotateAnim 90s linear infinite;
}
.circlem__item {
    position: absolute;
    width: 150px;
    height: 200px;
}
.circlem__img{
    width: 150px;
    height: 200px;
    background-color: #999;
    background-position: center bottom;
    background-size: cover;
    transform: scale(1, -1);
}

@media (max-width: 999px) {
	.circlem_parent{
		padding-bottom: 200px;
	}
    .circlem__inner,
    .circlem__item,
    .circlem__img{
        width: 90px;
        height: 120px;
    }
    .circlem{
        width: 1500px;
        height: 1500px;
        margin-top: -250px;
    }
}



/* kv
----------------------------------------------- */
.kv{
    margin: 0 auto;
    padding-top: 450px;
    padding-bottom: 100px;
    text-align: center;
  /*  height: 100vh;*/
}
.kv__heading{
    margin-bottom: 50px;
}
.kv__heading::after{
    content:'';
    display: block;
    width: 100%;
    height: 10px;
    margin-top: 30px;
    background-image: url(../images/title_main_border.png);
    background-position: 50%;
    background-repeat: no-repeat;
}
.kv__logo{
    text-align: center;
}
.kv_desc{
    line-height: 2;
}
@media (min-width: 1000px) {
    .kv{
        padding-bottom: 200px;
}
    .kv_desc{
        font-size: 28px;
        line-height: 2;
    }
}
@media (max-width: 999px) {
	.kv{
		padding-left: 10px;
		padding-right: 10px;
	}
    .kv_desc p{
        margin-bottom: 1em;
    }
}


/* watch
----------------------------------------------- */
.watch{
	padding-top: 1px;
	background-color: rgba(255,255,255,.2);
    /*background-color: #fff;
    background-image: url(../images/bg_texture.png);*/
}
.watch__heading{
	margin-top: -50px;
    margin-bottom: 50px;
    text-align: center;
}
.watch .swiper{
    overflow-y: visible;
}
.watch__body{
    margin-bottom: 100px;
}
.watch__item{
    width: 200px;
	position: relative;
	transition: .5s;
}
.watch__item:nth-of-type(2n){
    margin-top: 20px;
}
.watch__item:nth-of-type(3n){
    margin-top: 40px;
}
.watch__item::after{
	content:'';
	width: 0;
	height: 0;
	top: 50%;
	left: 50%;
	transition: .5s;
}
.watch__item.has-baloon::after{
	content: '';
	display: block;
	background: url(../images/baloon_click.svg) 100% no-repeat;
	width: 146px;
	height: 104px;
	position: absolute;
	z-index: 10;
}
.watch__item.has-baloon.-next::after{
	top: -50px;
	left: 30px;
}
.watch__item.has-baloon.-prev::after{
	top: 50px;
	right: 30px;
	background: url(../images/baloon_click2.svg) 100% no-repeat;
}
.watch__item img{
    -webkit-box-reflect: below 15px -webkit-gradient(linear, left bottom, left top, from(rgba(255,255,255,.4)), color-stop(0.3, transparent), to(transparent));
    transition: 2s;
	cursor: pointer;
}
.watch__item.has-baloon img{
    transform:rotateY(360deg);
}
.watch__item:hover img{
    transform:rotateY(360deg);
    transition: 2s;
}
@media (min-width: 1000px) {
	.watch{
		padding-bottom: 300px;
	}
}
@media (max-width: 999px) {
    .watch__heading{
        margin-right: 30px;
    }
	section > .watch__inner{
		margin: 0;
	}
}

.art__container{
    gap: 20px;
	overflow-y: auto;
    max-height: calc( 90vh - 30px);
}
.art__content-title{
    font-weight: 600;
    margin-bottom: 0.25em;
}
.art__content-title span{
    font-weight: 600;
    color: #eb4301;
    display: block;
}
.art__content-title rt{
    font-size: 40%;
}
.art__content-data{
    display: flex;
	justify-content: space-between;
    align-items: end;
}
.art__copyright{
	font-size: 13px;
	color: #666;
}
.art__share{
    display: flex;
    gap: 15px;
    justify-content: end;
    margin-top: 1em;
    margin-left: auto;
}
.art__share-link{
    display: flex;
    width: 60px;
    height: 60px;
    padding: 24%;
    background-color: #fff;
    border-radius: 100%;
    background-image: url(../images/frame_circle.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
@media (min-width: 1000px) {
    .art__container{
        display: flex;
        gap: 20px;
    }
    .art__img{
        width: 40%;
        max-height: 550px;
        flex-shrink: 0;
    }
    .art__content{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 30px 20px 10px 30px;
    }
    .art__content-title{
        font-size: 48px;
    }
    .art__content-desc{
        font-size: 24px;
        line-height: 2;
    }
}
@media (max-width: 999px) {
	.art__content-title{
        font-size: 28px;
	}
    .art__content-desc{
        font-size: 18px;
        line-height: 2;
    }
    .art__share-link{
        width: 30px;
        height: 30px;
    }
}
@media (orientation: landscape) {
    .art__container{
        display: flex;
        gap: 20px;
    }
    .art__img{
        width: 40%;
        max-height: 550px;
        flex-shrink: 0;
    }
	.art__share{/*
		position: absolute;
		right: 10px;
		*/
	}
}
@media (orientation: portrait) {
    .art__img img{
        max-height: 50vh;
    }
}

/* play
----------------------------------------------- */
.play{
    background-color: #fff2d8;
    background-image: url(../images/bg_texture.png), url(../images/bg_cards2.png);
    background-position: center, left bottom;
    background-repeat: repeat, repeat-x;
}
.play__inner{
    border-image: url('../images/frame.svg')  15 fill / 15px / 5px;
    min-height: 800px;
}
.play__heading{
    
}
.play__heading-img img{
    position: relative;
}
.play__heading-txt{
    line-height: 2;
    text-align: left;
}
.play__main{
    position: relative;
}
.play__main-img{
    margin: auto;
    text-align: center;
    background-image: url(../images/baloon_bg.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    max-width: 690px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10% 25% 14%;
}
.play__main-img img{
    display: inline-block;
    margin: auto;
    -webkit-box-reflect: below 10px -webkit-gradient(linear, left bottom, left top, from(rgba(255,255,255,.3)), color-stop(0.1, transparent), to(transparent));
}
.play__subbtn{
    font-weight: 600;
    text-align: center;
    position: absolute;
    bottom: 0;
	transform: translateY(-50%);
}
.play__subbtn.-hint{
    left: calc( 50% - 690px / 2 - 123px );
}
.play__subbtn.-reload{
    right: calc( 50% - 690px / 2 - 123px );
}
.play__subbtn img{
    display: block;
    margin: 0 auto 5px;
}

.play__swiper{
    overflow-y: visible;
}
.play__slide{
	width: 330px;
	height: 180px;
	padding: 0 20px 40px;
	background-color: #fff;
	background-image: url(../images/line.svg), url(../images/line.svg);
	background-repeat: repeat-x, repeat-x;
	background-position: 0 0, 0 100%;
	text-align: center;
	opacity: .4;
	transition: .5s;
	display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.play__slide:not(.swiper-slide-active){
	
}
.play__slide.swiper-slide-active{
	opacity: 1;
	cursor: pointer;
}
.play__slide:after{
	content: '';
	display: block;
	width: 100%;
	height: 15px;
	background-image: url(../images/icon_arrow_down.svg);
	background-position: 50%;
	background-repeat: no-repeat;
	position: absolute;
	left: 0;
	bottom: 20px;
}
.play__slide-chap {
	margin-top: -10px;
	margin-bottom: 10px;
}
.play__slide-chap em{
	color: #fff;
	font-size: 40px;
	font-style: normal;
	width: 66px;
	height: 66px;
	margin: 0 5px;
	text-align: center;
	display: inline-block;
	background-image: url(../images/circle_blue.svg);
	background-repeat: no-repeat;
	background-size: 100%;
}
.play__slide-ttl {
	font-size: 24px;
	font-weight: 600;
	margin-bottom: 15px;
}
.play__slide-desc {
	height: 0;
	padding: 0 15px;
	overflow: hidden;
	text-align: left;
	transition: .5s;
}

.play__slide.is-open{
	height: auto;
}
.play__slide.is-open:after{
	background-image: url(../images/icon_close_s.svg);
}
.play__slide.is-open .play__slide-desc{
	height: auto;
}
.play__slide.article-disabled{
	filter: grayscale(100%);
}
.play__slide.article-disabled .play__slide-ttl,
.play__slide.article-disabled .play__slide-desc,
.play__slide.article-disabled:after{
	opacity: 1;
}

.btn__decide{
    font-weight: 600;
    width: 100%;
    height: 3em;
    max-width: 510px;
    max-height: 90px;
    text-align: center;
    display: block;
    margin: auto;
	margin-top: 30px;
    position: relative;
    line-height: 3em;

}
.btn__decide::before{
    content:'';
    display: block;
    width: 100%;
    height: 100%;
    background-color: #ffff55;
    position: absolute;
    right: -13px;
    bottom: -10px;
}
.btn__decide:hover::before{
    background-color: #ffff00;
    right: 0;
    bottom: 0;
}

.btn__decide::after{
    content:'';
    display: block;
    width: 100%;
    height: 100%;
    border-image: url(../images/btn_frame.png) 5 fill / 5px / 0px;
    position: absolute;
    top: 0;
}
.btn__decide i{
	position: absolute;
	top: -34px;
	left: 50%;
	margin-left: -22px;
    display: block;
	width: 44px;
	height: 35px;
	background: url(../images/btn_frame_arw.png) 100% no-repeat;
}
.btn__decide-label{
	position: relative;
}
.btn__decide-label::before{
    content:'＼';
    margin-right: 1em;
}
.btn__decide-label::after{
    content:'／';
    margin-left: 1em;
}
@media (min-width: 1000px) {
	.play{
        background-position: center, 0 450px;
	}
    .play__inner{
        max-width: 90%;
        margin: 100px auto;
    }
    .play__heading{
        position: relative;
        margin: 0 50px 50px;
        display: flex;
        align-items: end;
    }
    .play__heading-img{
        position: absolute;
        bottom: 0;
        flex-shrink: 0;
        padding: 30px 50px 0;
    }
    .play__heading-img::before{
        content: '';
		display: block;
		width: 100%;
		height: 300px;
        background-color: #fff2d8;
        background-image: url(../images/bg_texture.png);
		position: absolute;
		bottom: 0;
		left: 0;
    }
    .play__heading-txt{
        font-size: 20px;
        line-height: 2;
        text-align: left;
        width: 45%;
        margin-top: 80px;
        margin-left: auto;
        z-index: +1;
    }
	.play__content{
		padding-bottom: 70px;
	}
	.play__main{
		margin-bottom: 30px;
	}
	.play__main-img{
		background-size: 94%;
	}
    .play__main-img img{
        max-width: 360px;
    }
    .btn__decide{
        font-size: 26px;
    }
}
@media (max-width: 999px) {
    .play__heading{
        padding: 20px 15px;
    }
    .play__inner{
        border-image-width: 10px;
    }
	.play__heading-img{
		 margin-top: -75px; 
	}
    .play__heading-txt{
		font-size: 16px;
        margin-top: 1em;
    }
    .play__main{
        margin: 10px;
    }
    .play__subbtn{
        font-size: 12px;
        position: absolute;
        top: 50%;
        bottom: auto;
        max-width: 25%;
    }
    .play__subbtn.-hint{
        left: 25%;
        transform: translate( -100%, -50%);
		padding-right: 10px;
    }
    .play__subbtn.-reload{
        right: 25%;
        transform: translate( 100%, -50%);
		padding-left: 10px;
    }
    .play__subbtn img{
        width: 40px;
    }
	.play__slide{
		/*padding: 0 10px 30px;*/
	}
	.play__slide-ttl{
		font-size: 24px;
	}
    .btn__decide{
        font-size: 18px;
    }
}

.result-block{
	background: rgba(0,0,0,.5);
	position: fixed;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s;
	z-index: 100;
}
.hint__content{
    background: #fff;
    width: 250px;
    height: 250px;
    text-align: center;
    border-radius: 100%;
    align-items: center;
    display: flex;
    padding: 20px;
    justify-content: center;
}



/* know
----------------------------------------------- */
.know{
    background-color: rgba(255,255,255,.4);
}
.know__heading{
    text-align: center;
}
.know__content{
    max-width: 1200px;
    margin: auto;
}
.know__qa{
    width: 100%;
    margin: 50px auto;
    background-color: #fff;
    border-image: url('../images/frame_small.svg')  5 fill / 5px / 5px;
}
.know__qa-ttl{
    padding: 20px 60px 20px 20px;
    position: relative;
    cursor: pointer;
}
.know__qa-ttl:after{
    content: '';
    display: inline-block;
    width: 30px;
    height: 30px;
    background-image: url(../images/icon_plus.svg);
    background-repeat: no-repeat;
    background-position: 50%;
    position: absolute;
    top: 40%;
    right: 50px;
}
.know__qa-ttl.is-active:after{
    background-image: url(../images/icon_minus.svg);
}
.know__qa-desc{
    padding: 1em 3em;
    transition: .3s;
}
.know__qa-ttl:not(.is-active) + .know__qa-desc{
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
}
.know__qa-desc p{
    font-size: 22px;
    line-height: 2;
    margin-bottom: 1em;
}
@media (min-width: 1000px) {
    .know__content{
        padding: 0 50px 50px;
    }
    .know__qa:nth-child(1){
        margin-left: -50px;
    }
    .know__qa:nth-child(2){
        margin-right: -50px;
    }
    .know__qa-ttl{
        padding: 30px 90px 30px 50px;
    }
}
@media (max-width: 999px) {
    .know__qa-ttl{
        border-image: url('../images/frame_small.svg')  10 fill / 5px / 5px;
    }
    .know__qa-ttl:after{
        right: 20px;
        width: 20px;
        height: 20px;
    }
	.know__qa-desc{
		padding: 1.5em 1.5em;
	}
	.know__qa-desc p{
		font-size: 16px;
	}
}

.sns{
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: auto;
}
.sns__item-link{
    display: flex;
    width: 98px;
    height: 98px;
    padding: 24%;
    background-color: #fff;
    border-radius: 100%;
    background-image: url(../images/frame_circle.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
@media (min-width: 1000px) {
    .sns{
        gap: 50px;
    }
}
@media (max-width: 999px) {
    .sns__item-link{
        width: 58px;
        height: 58px;
    }
}

/* forteachers
----------------------------------------------- */
.forteachers{
    background-color: #fff;
    background-image: url(../images/bg_texture.png);
}
.forteachers__inner{
    margin: 0 auto;
    max-width: 960px;
}
.forteachers__heading{
    font-weight: 600;
    margin: 0 auto 1em;
    text-align: center;
}
@media (min-width: 1000px) {
    .forteachers{
        padding-top: 0;
        padding-bottom: 300px;
    }
    .forteachers__inner{
        margin: 100px auto;
    }
    .forteachers__heading{
        font-size: 3em;
    }
}
@media (max-width: 999px) {
    .forteachers__heading{
        font-size: 1.8em;
    }
}


.btn__frame{
    font-weight: 600;
    width: 100%;
    height: 2.7em;
    max-width: 452px;
    max-height: 65px;
    text-align: center;
    display: block;
    margin: auto;
    position: relative;
    line-height: 2.7em;
    border-image: url(../images/btn_frame.svg) 5 fill / 5px / 0px;
}
.btn__frame::before{
    content:'';
    display: block;
    width: 100%;
    height: 100%;
    background-color: #ffff55;
    position: absolute;
    right: -10px;
    bottom: -8px;
    z-index: -1;
}
.btn__frame:hover::before{
    background-color: #ffff00;
    right: 0;
    bottom: 0;
}
@media (min-width: 1000px) {
    .btn__frame{
        font-size: 24px;
    }
}
@media (max-width: 999px) {
    
}


/* swiper
----------------------------------------------- */
.swiper {
    width: 100%;
    height: auto;
    min-height: 100px;
}
.swiper-button-next, .swiper-button-prev{
    width: auto;
    height: auto;
	transition: .5s;
}
.swiper-button-next:hover, 
.swiper-button-prev:hover{
	transform: scale(1.2);
}
.swiper-button-next::after, 
.swiper-button-prev::after{
    content: '';
    display: block;
    width: 121px;
    height: 121px;
    background-image: url(../images/btn_next.png);
    background-size: 100%;
}
.swiper-button-prev::after{
    transform: scale(-1, 1);
}
@media (min-width: 1000px) {

}
@media (max-width: 999px) {
    .swiper-button-prev::after,
    .swiper-button-next::after{
      width: 50px;
      height: 50px;
    }
}

/* modal
----------------------------------------------- */
    /* モーダル */
    .modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        padding: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: opacity 0.3s;
        pointer-events: none;
        opacity: 0;
        z-index: 100;
        background-color: rgba(120, 123, 131, 0.8);
      }
  
      /* モーダルがactiveの時 */
      .modal.is-active {
        opacity: 1;
        pointer-events: auto;
      }
  
      /* モーダル背景のオーバーレイ部分 */
      .modal__overlay {
        position: absolute;
        width: 100%;
        height: 100%;
        cursor: pointer;
      }
  
      /* モーダルのコンテンツ */
      .modal__content {
        position: relative;
        width: 100%;
        max-width: 1080px;
        max-height: 90vh;
        /*padding: 15px;
        background-color: #fff;*/
      }
  
      /* モーダルを閉じるボタン */
      .modal__close-btn {
        position: absolute;
        right: -30px;
        top: -38px;
        width: 76px;
        height: 74px;
        background: url(../images/btn_close.svg) no-repeat;
		  background-size: contain;
        text-indent: -999px;
        cursor: pointer;
        z-index: 10;
      }
      .modal .swiper-button-prev{
        left: -25px;
      }
      .modal .swiper-button-next{
        right: -25px;
      }
      .modal .swiper-button-prev::after,
      .modal .swiper-button-next::after{
        width: 50px;
        height: 50px;
      }
      .modal__slide{
        padding: 15px;
        background-color: #fff;
      }
@media (max-width: 999px) {
      .modal__close-btn {
        right: -20px;
        top: -20px;
        width: 40px;
        height: 40px;
      }
}