@charset "UTF-8";
/* =====================================
	全体設定
===================================== */

html{
    font-size: 62.5%;
}

a{
	color:#000;
	text-decoration:none;
    transition: 0.3s all ease;
}

a:hover{
	opacity: 0.6;
}

.sp{
	display:none !important;
}

body{
	position: relative;
	margin: 0 auto;
	font-size: 1.8rem;
	font-family: "Noto Sans JP", serif;
    font-weight: 500;
    font-style: normal;
	color: #000;
    line-height: 1.67;
	text-align: left;
	text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;/*Chrome,Safari*/
	-ms-text-size-adjust: 100%;/*EgdeMobile*/
	-moz-text-size-adjust: 100%;/*firefox*/
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "palt";
    letter-spacing: 0.1em;
}

img{
    max-width: 100%;
}

.en{
    font-family: "Oswald", sans-serif;
}

sup{
    font-size: 60%;
}

/* =====================================
	visual
===================================== */

.visual{
    width: 100%;
    height: min(460px, 32.857vw);
    background: url("../img/bg01.jpg") center no-repeat;
    background-size: cover;
    position: relative;
}

.visual::before{
    content: "";
    width: min(229px, 16.357vw);
    height: min(392px, 28vw);
    background: url("../img/illust01.png") center no-repeat;
    background-size: contain;
    position: absolute;
    top: 3.47826%;
    left: 50%;
    transform: translateX(max(-600px, -42.857vw))
}

.visual::after{
    content: "";
    width: min(228px, 16.2857vw);
    height: min(345px, 24.642857vw);
    background: url("../img/illust02.png") center no-repeat;
    background-size: contain;
    position: absolute;
    top: 13.69565%;
    left: 50%;
    transform: translateX(min(362px, 25.857vw))
}

.visual h1{
    width: min(719px, 51.357vw);
    position: absolute;
    top: 3.47826%;
    left: 50%;
    transform: translateX(-50%);
}

.cv{
    width: 100%;
    background: #ececec;
    padding: 50px 40px;
}

.cv p{
    font-size: 2.6rem;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    padding: 0 10px;
    position: relative;
    display: table;
    margin: 0 auto;
}

.cv p::before{
    content: "";
    width: 3px;
    height: 27px;
    background: #000;
    position: absolute;
    top: calc(50% + 1px);
    right: 0;
    transform: rotate(30deg) translateY(-50%);
}

.cv p::after{
    content: "";
    width: 3px;
    height: 27px;
    background: #000;
    position: absolute;
    top: calc(50% + 1px);
    left: 0;
    transform: rotate(-30deg) translateY(-50%);
}

.cv a{
    display: table;
    margin: 15px auto 0;
}

.cv a img{
    filter: drop-shadow(0px 5px 7px rgba(51,51,51,0.3));
}

.manga{
    width: 100%;
    padding: 80px 40px 120px;
}

.manga .txt01 img{
    margin: 0 auto 40px;
}

.manga h2 img{
    margin: 0 auto 30px;
}

.manga .tabArea{
    width: 100%;
    max-width: 912px;
    margin: 0 auto 86px;
}

.manga .tabArea .tab{
    display: flex;
}

.manga .tabArea .tab li{
    width: 33.55263%;
    cursor: pointer;
}

.manga .tabArea .tab li.active{
    cursor: default;
}

.manga .tabArea .tab li:nth-child(1){
    background: url("../img/tab01_off.png") center no-repeat;
    background-size: contain;
}

.manga .tabArea .tab li:nth-child(2){
    width: 32.89474%;
    background: url("../img/tab02_off.png") center no-repeat;
    background-size: contain;
}

.manga .tabArea .tab li:nth-child(3){
    background: url("../img/tab03_off.png") center no-repeat;
    background-size: contain;
}

.manga .tabArea .tab li img{
    opacity: 0;
    transition: 0.3s all ease;
}

.manga .tabArea .tab li.active img,
.manga .tabArea .tab li:hover img{
    opacity: 1;
}

.manga .tabArea .tabCnt{
    width: 100%;
    border-radius: 0 0 min(2.01613vw, 20px) min(2.01613vw, 20px);
    border: min(0.60484vw, 6px) solid #797979;
    border-top: none;
    padding: 50px 0 45px;
}

.manga .tabArea .tabCnt li{
    display: none;
}

.manga .tabArea .tabCnt li.active{
    display: block;
}

.manga .tabArea .tabCnt li img{
    margin: 0 auto;
}

.manga .tabArea .tabCnt li img.more{
    margin: 30px auto 0;
    cursor: pointer;
    transition: 0.3s all ease;
}

.manga .tabArea .tabCnt li img.more:hover{
    opacity: 0.6;
}

.manga .tabArea .tabCnt li .hidden{
    display: none;
}

.manga .tabArea .tabCnt li .hidden img{
    margin-top: 30px;
}

.manga .tabArea .tabCnt li .hidden .note{
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.5;
    width: 100%;
    max-width: 690px;
    margin: 0 auto;
    padding-left: 2.2em;
    text-indent: -2.2em;
}

.manga .tabArea .tabCnt li:nth-child(3) .hidden .note{
    padding-left: 1.5em;
    text-indent: -1.5em;
}

.manga .tabArea .tabCnt li .hidden .note li{
    display: block;
}

.manga .txt02 img{
    margin: 0 auto 22px;
}

.manga a{
    display: table;
    margin: 0 auto;
}

.reason{
    width: 100%;
}

.reason .ttlArea{
    width: 100%;
    padding: 80px 40px;
    background: #f4f4f4;
    position: relative;
}

.reason .ttlArea::before{
    content: "";
    background: url("../img/illust03.png") center no-repeat;
    background-size: contain;
    width: 150px;
    height: 179px;
    position: absolute;
    top: 30px;
    left: 50%;
    margin-left: min(26.826923vw, 279px);
}

.reason .ttlArea h2{
    font-size: 4.8rem;
    font-weight: bold;
    line-height: 1.35;
    text-align: center;
}

.reason .ttlArea h2 small{
    font-size: 62.5%;
    display: block;
}

.reason .ttlArea h2 strong{
    color: #e60000;
}

.reason .ttlArea ul{
    width: 100%;
    max-width: 960px;
    display: flex;
    justify-content: space-between;
    margin: 25px auto 0;
}

.reason .ttlArea ul li{
    width: 23.4375%;
}

.reason h3{
    width: 100%;
    height: 214px;
    background: #e60000;
    padding: 0 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
    font-size: 4.4rem;
    font-weight: bold;
    line-height: 1.25;
    color: #fff;
    text-align: center;
}

.reason #reason04 h3{
    font-size: 5.8rem;
}

.reason h3 small{
    font-size: 51.724138%;
    display: block;
}

.reason #reason01 p{
    padding: 0 40px;
    font-size: 2.0rem;
    line-height: 1.6;
    text-align: center;
    margin: 54px 0 24px;
}

.reason #reason01 .wrap{
    width: 100%;
    max-width: 960px;
    padding: 0 40px;
    margin: 0 auto 81px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.reason #reason01 .wrap .imgArea{
    width: 53.4091%;
}

.reason #reason01 .wrap .imgArea img{
    width: 100%;
}

.reason #reason01 .wrap .illustArea{
    width: 41.02273%;
}

.reason #reason01 .wrap .illustArea img{
    width: 100%;
}

.reason #reason02 .wrap{
    width: 100%;
    max-width: 880px;
    padding: 0 40px;
    font-size: 2.2rem;
    line-height: 1.9;
    margin: 62px auto 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.reason #reason02 .wrap .imgArea{
    width: 33.25%;
    padding-left: 3.625%;
}

.reason #reason02 .wrap .imgArea img{
    width: 77.63713%;
}

.reason #reason02 .wrap p strong{
    color: #e60000;
}

.reason #reason02 .wrap p{
    width: 66.75%;
}

.reason #reason02 picture img{
    margin: 0 auto 97px;
    padding: 0 40px 0 calc(40px + 2%);
}

.reason #reason03 .txt01{
    padding: 0 40px;
    font-size: 2.0rem;
    line-height: 1.6;
    text-align: center;
    margin: 54px auto 52px;
    position: relative;
    display: table;
}

.reason #reason03 .txt01 strong{
    color: #e60000;
}

.reason #reason03 .txt01::before{
    content: "";
    width: 128px;
    height: 128px;
    background: url("../img/illust06.png") no-repeat center;
    background-size: contain;
    position: absolute;
    top: 50%;
    left: -108px;
    transform: translateY(-50%);
}

.reason #reason03 ul{
    width: 100%;
    max-width: 1040px;
    padding: 0 40px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.reason #reason03 li{
    width: 48.95833%;
    padding: 35px 40px 37px;
    background: #f8f8f8;
    border-radius: 20px;
}

.reason #reason03 li h4{
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 1.33;
    text-align: center;
}

.reason #reason03 li img{
    width: 100%;
    max-width: 297px;
    margin: 25px auto 0;
}

.reason #reason03 li p{
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1.67;
    margin-top: 25px;
}

.reason #reason03 li small{
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.4167;
    margin-top: 10px;
    display: block;
    letter-spacing: 0.05em;
}

.reason #reason03 .note{
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.5;
    width: 100%;
    max-width: 1040px;
    padding: 0 40px;
    margin: 15px auto 0;
}

.reason #reason03 .colmun{
    width: min(calc(100% - 80px), 800px);
    padding: 35px 40px 37px 30px;
    background: #ffeaea;
    border-radius: 20px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    margin: 55px auto 0;
}

.reason #reason03 .colmun h4{
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 1.33;
    text-align: center;
    width: 100%;
    margin-bottom: 28px;
}

.reason #reason03 .colmun .imgArea{
    width: 33.5616%;
}

.reason #reason03 .colmun .imgArea img{
    width: 100%;
}

.reason #reason03 .colmun p{
    width: 65%;
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1.67;
    letter-spacing: 0.03em;
}

.reason #reason03 .cv{
    background: none;
    padding: 60px 40px 80px;
}

.reason #reason04 ul{
    width: 100%;
    max-width: 1040px;
    padding: 0 40px;
    margin: 60px auto 0;
    display: flex;
    justify-content: space-between;
}

.reason #reason04 li{
    width: 48.95833%;
    padding: 30px 40px 37px;
    background: #f8f8f8;
    border-radius: 20px;
}

.reason #reason04 li:nth-child(1) img{
    width: 79.23077%;
    margin: 0 auto 23px;
}

.reason #reason04 li:nth-child(2) img{
    width: 53.33%;
    margin: 10px auto 33px;
}

.reason #reason04 li p{
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1.67;
}

.reason #reason04 li small{
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.4167;
    margin-top: 10px;
    display: block;
    letter-spacing: 0.05em;
}

.reason #reason04 > img{
    margin: 33px auto 0;
}

.reason #reason04 .colmun{
    width: min(calc(100% - 80px), 800px);
    padding: 35px 40px 37px 55px;
    background: #ffeaea;
    border-radius: 20px;
    margin: 55px auto 100px;
}

.reason #reason04 .colmun h4{
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 1.33;
    text-align: center;
    margin-bottom: 24px;
}

.reason #reason04 .colmun img{
    margin: 0 auto 23px;
}

.reason #reason04 .colmun p{
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1.67;
    letter-spacing: 0.03em;
}

.movie{
    width: 100%;
    padding: 100px 40px;
    background: #f4f4f4;
    position: relative;
}

.movie::before{
    content: "";
    background: url("../img/illust09.png") no-repeat center;
    background-size: contain;
    width: 136px;
    height: 136px;
    position: absolute;
    top: 43px;
    left: 50%;
    transform: translateX(max(-41.32653vw, -405px));
}

.movie h2{
    font-size: 3.6rem;
    font-weight: 600;
    text-align: center;
    line-height: 1;
    padding-left: 70px;
    height: 39px;
    background: url("../img/icon02.png") no-repeat center left;
    background-size: 55px auto;
    margin: 0 auto 31px;
    display: table;
}

.movie > p{
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1.67;
    text-align: center;
    margin-bottom: 34px;
}

.movie ul{
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.movie ul li{
    width: 48.22%;
    background: #fff;
    border-radius: 20px;
    padding: 28px 37px 24px;
}

.movie ul li h3{
    font-size: 2.4rem;
    font-weight: 600;
    text-align: center;
    line-height: 1;
    margin-bottom: 17px;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 8px;
}

.movie ul li h3 span{
    font-size: 1.8rem;
    font-weight: normal;
    text-align: center;
    line-height: 1;
    color: #fff;
    border-radius: 6px;
    background: #142458;
    padding: 4px 7px 6px;
    margin-top: 4px;
}

.movie iframe{
    aspect-ratio: 16 / 9;
    width: 100%;
}

.movie ul li p{
    font-size: 1.6rem;
    text-align: center;
    line-height: 1.5;
    margin-top: 10px;
}

.step{
    width: 100%;
    padding: 75px 40px 100px;
}

.step > img{
    margin: 0 auto 27px;
}

.step h2{
    font-size: 4.8rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.25;
    margin: 0 auto 31px;
}

.step p img{
    margin: 0 auto;
}

.caution{
    width: 100%;
    background: #f4f4f4;
    padding: 53px 40px;
}

.caution .inner{
    width: 100%;
    max-width: 936px;
    margin: 0 auto;
}

.caution .inner h2{
    font-size: 2.0rem;
    font-weight: 600;
    line-height: 1.5;
}

.caution .inner ul li{
    font-size: 1.6rem;
    line-height: 1.875;
}

.caution .inner ul li a{
    color: #004eff;
    text-decoration: underline;
}

.company{
    width: 100%;
    padding: 53px 40px;
}

.company .inner{
    width: 100%;
    max-width: 936px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.company .inner .left,
.company .inner .right{
    width: 48%;
    letter-spacing: 0.02em;
}

.company .inner h2{
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 12px;
}

.company .inner ul li,
.company .inner p{
    font-size: 1.6rem;
    line-height: 1.875;
}

.company .inner dl{
    font-size: 1.6rem;
    line-height: 1.875;
    margin-top: 12px;
}

.pagetop{
    position: fixed;
    bottom: 130px;
    right: 50px;
    z-index: 10;
}

.floating{
    width: 100%;
    padding: 15px 40px;
    background: rgb(255,255,255,0.9);
    position: fixed;
    bottom: 0;
    left: 0;
}

.floating a{
    margin: 0 auto;
    display: table;
}

.floating a img{
    margin: 0 auto;
    filter: drop-shadow(0px 5px 7px rgba(51,51,51,0.3));
}

/* 初期は非表示（どのdisplayでもOK。fixed要素なら余白も出ません） */
.pagetop, .floating{
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s linear, visibility .25s linear;
  /* クリック無効化で誤タップ防止（表示時に戻す） */
  pointer-events: none;
}
.pagetop.is-on, .floating.is-on{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}


/* =====================================
	footer
===================================== */

footer{
    width: 100%;
    padding: 20px 40px;
    border-top: 4px solid #e60000;
    font-size: 1.2rem;
    text-align: center;
    line-height: 1;
    letter-spacing: 0.02em;
}



@media screen and (max-width:768px){

.pc{
	display:none !important;
}

.sp{
	display:block !important;
}

a:hover{
	opacity: 1;
}

body{
    font-size: 3.467vw;
    width: 100%;
    overflow-x: hidden;
    letter-spacing: 0;
}

/* =====================================
	visual
===================================== */

.visual{
    height: auto;
}

.visual::before{
    display: none;
}

.visual::after{
    display: none;
}

.visual h1{
    width: 100%;
    position: static;
    top: auto;
    left: auto;
    transform: translateX(0);
}

.cv{
    padding: 8vw 0;
}

.cv p{
    font-size: 4.524vw;
    padding: 0 1.33vw;
}

.cv p::before{
    width: 0.533vw;
    height: 3.733vw;
    top: calc(50% + 0.133vw);
}

.cv p::after{
    width: 0.533vw;
    height: 3.733vw;
    top: calc(50% + 0.133vw);
}

.cv a.sp{
    margin: 1.733vw auto 0;
    display: table !important;
}

.cv a img{
    width: 86.67vw;
    filter: drop-shadow(0px 0.67vw 0.933vw rgba(51,51,51,0.3));
}

.manga{
    padding: 10.67vw 0 13.33vw;
}

.manga .txt01 img{
    width: 72.8vw;
    margin: 0 auto 7.33vw;
}

.manga h2 img{
    width: 83.5467vw;
    margin: 0 auto 4vw;
}

.manga .tabArea{
    max-width: 100%;
    margin: 0 auto 10vw;
}

.manga .tabArea .tab{
    display: block;
}

.manga .tabArea .tab li{
    width: 100%;
}

.manga .tabArea .tab li:nth-child(1){
    background: url("../img/sp/tab01_off.png") center no-repeat;
    background-size: contain;
}

.manga .tabArea .tab li:nth-child(2){
    width: 100%;
    background: url("../img/sp/tab02_off.png") center no-repeat;
    background-size: contain;
}

.manga .tabArea .tab li:nth-child(3){
    background: url("../img/sp/tab03_off.png") center no-repeat;
    background-size: contain;
}

.manga .tabArea .tab li img{
    opacity: 0;
}

.manga .tabArea .tabCnt{
    width: 92vw;
    border-radius: 0 0 2.67vw 2.67vw;
    border: 0.8vw solid #797979;
    border-top: none;
    padding: 10.267vw 0 10.67vw;
    margin: 0 auto;
}

.manga .tabArea .tabCnt li img{
    width: 80vw;
}

.manga .tabArea .tabCnt li img.more{
    width: 53.6vw;
    margin: 8.533vw auto 0;
}

.manga .tabArea .tabCnt li img.more:hover{
    opacity: 1;
}

.manga .tabArea .tabCnt li .hidden img{
    margin-top: 6vw;
}

.manga .tabArea .tabCnt li .hidden .note{
    font-size: 2.4267vw;
    max-width: 80vw;
    margin-top: 1.67vw;
    padding-left: 1.8em;
    text-indent: -1.8em;
}

.manga .tabArea .tabCnt li:nth-child(3) .hidden .note{
    padding-left: 1.2em;
    text-indent: -1.2em;
}

.manga .txt02 img{
    width: 86.67vw;
    margin: 0 0 4vw 5.733vw;
}

.manga a img{
    width: 92vw;
}

.reason .ttlArea{
    padding: 13.33vw 0;
}

.reason .ttlArea::before{
    width: 20vw;
    height: 23.867vw;
    top: 20.267vw;
    left: 78vw;
    margin-left: 0;
}

.reason .ttlArea h2{
    font-size: 7.76533vw;
    line-height: 1.2;
}

.reason .ttlArea h2 small {
    margin-bottom: 1vw;
}

.reason .ttlArea ul{
    max-width: 89.33vw;
    flex-wrap: wrap;
    margin: 5.4vw auto 0;
    row-gap: 3.733vw;
}

.reason .ttlArea ul li{
    width: 42.67vw;
}

.reason h3{
    height: 35.33vw;
    padding: 0;
    font-size: 7.04vw;
}

.reason #reason04 h3{
    font-size: 9.28vw;
}

.reason #reason01 p{
    padding: 0;
    font-size: 4vw;
    margin: 6.67vw 0 5.33vw;
}

.reason #reason01 .wrap{
    max-width: 89.33vw;
    padding: 0;
    margin: 0 auto 9.467vw;
    display: flex;
    flex-wrap: wrap;
}

.reason #reason01 .wrap .imgArea{
    width: 100%;
}

.reason #reason01 .wrap .illustArea{
    width: 100%;
    margin-top: 5.467vw;
}

.reason #reason01 .wrap .illustArea img{
    width: 65.067vw;
    margin: 0 auto;
}

.reason #reason02 .wrap{
    padding: 0;
    font-size: 4vw;
    text-align: center;
    margin: 6.67vw auto 5.067vw;
    display: block;
}

.reason #reason02 .wrap .imgArea{
    display: none;
}

.reason #reason02 .wrap p{
    width: 100%;
}

.reason #reason02 picture img{
    margin: 0 auto 10.4vw;
    padding: 0;
    width: 92.133vw;
}

.reason #reason03 .txt01{
    padding: 0;
    font-size: 4vw;
    text-align: left;
    margin: 6.67vw 0 9.33vw 39.2vw;
}

.reason #reason03 .txt01::before{
    width: 28.67vw;
    height: 28.67vw;
    left: -33.6vw;
}

.reason #reason03 ul{
    max-width: 89.33vw;
    padding: 0;
    flex-wrap: wrap;
    gap: 5.33vw;
}

.reason #reason03 li{
    width: 100%;
    padding: 7.067vw 8vw 7.467vw;
    border-radius: 2.67vw;
}

.reason #reason03 li h4{
    font-size: 4.14933vw;
}

.reason #reason03 li img{
    max-width: 51.467vw;
    margin: 4.267vw auto 0;
}

.reason #reason03 li p{
    font-size: 3.128vw;
    margin-top: 4.533vw;
}

.reason #reason03 li small{
    font-size: 2.08533vw;
    margin-top: 2vw;
}

.reason #reason03 .note{
    font-size: 2.4267vw;
    max-width: 89.33vw;
    padding: 0;
    margin: 2.67vw auto 0;
}

.reason #reason03 .colmun{
    width: 89.33vw;
    padding: 7.067vw 6vw 6.67vw;
    border-radius: 2.67vw;
    margin: 7.2vw auto 0;
}

.reason #reason03 .colmun h4{
    font-size: 4.16vw;
    margin-bottom: 4vw;
}

.reason #reason03 .colmun .imgArea{
    width: 100%;
}

.reason #reason03 .colmun .imgArea img{
    width: 57.067vw;
    margin: 0 auto 2.67vw;
}

.reason #reason03 .colmun p{
    width: 100%;
    font-size: 3.12vw;
}

.reason #reason03 .cv{
    padding: 8vw 0 13.33vw;
}

.reason #reason04 ul{
    max-width: 89.33vw;
    padding: 0;
    margin: 8vw auto 0;
    flex-wrap: wrap;
    gap: 5.33vw;
}

.reason #reason04 li{
    width: 100%;
    padding: 8vw 8vw 6.933vw;
    border-radius: 2.67vw;
}

.reason #reason04 li:nth-child(1) img{
    width: 53.467vw;
    margin: 0 auto 5.867vw;
}

.reason #reason04 li:nth-child(2) img{
    width: 36.267vw;
    margin: 0 auto 5.867vw;
}

.reason #reason04 li p{
    font-size: 3.12267vw;
}

.reason #reason04 li small{
    font-size: 2.08267vw;
    margin-top: 1.33vw;
}

.reason #reason04 > img{
    width: 81.2vw;
    margin: 5.33vw auto 0;
}

.reason #reason04 .colmun{
    width: 89.33vw;
    padding: 7.2vw 8vw 9.6vw;
    border-radius: 2.67vw;
    margin: 8vw auto 16vw;
}

.reason #reason04 .colmun h4{
    font-size: 4.16vw;
    margin-bottom: 4.533vw;
}

.reason #reason04 .colmun img{
    width: 73.6vw;
    margin: 0 auto 4.267vw;
}

.reason #reason04 .colmun p{
    font-size: 3.12vw;
}

.movie{
    padding: 13.33vw 0;
}

.movie::before{
    display: none;
}

.movie h2{
    font-size: 6.24133vw;
    padding-left: 12vw;
    height: 6.8vw;
    background: url("../img/icon02.png") no-repeat center left;
    background-size: 9.467vw auto;
    margin: 0 auto 4.67vw;
}

.movie > p{
    font-size: 4vw;
    text-align: left;
    margin: 0 0 6.67vw;
    padding-left: 39.2vw;
    background: url("../img/illust09.png") no-repeat center left 5.33vw;
    background-size: 28.533vw auto;
}

.movie ul{
    max-width: 89.33vw;
    flex-wrap: wrap;
    gap: 5.33vw;
}

.movie ul li{
    width: 100%;
    border-radius: 2.67vw;
    padding: 8vw;
}

.movie ul li h3{
    font-size: 4.164vw;
    margin-bottom: 3.067vw;
    column-gap: 1.33vw;
}

.movie ul li h3 span{
    font-size: 3.12267vw;
    border-radius: 0.8vw;
    padding: 0.9143vw 1.6vw 1.37143vw;
    margin-top: 4px;
}

.movie ul li img{
    width: 62.4vw;
    margin: 0 auto;
}

.movie ul li p{
    font-size: 2.776vw;
    line-height: 1;
    margin-top: 2vw;
}

.step{
    padding: 9.067vw 0 18.67vw;
}

.step > img{
    width: 68.933vw;
    margin: 0 auto 2.8vw;
}

.step h2{
    font-size: 7.14vw;
    margin: 0 auto 3.733vw;
}

.step p{
    width: 100%;
    overflow-x: scroll;
    padding-bottom: 10vw;
}

.simplebar-scrollbar::before {
    background: #e60000;
    border-radius: 0;
    height: 5px !important;
    margin-left: 2px;
    margin-top: 3px;
}
.simplebar-scrollbar.simplebar-visible::before {
    opacity: 1;
}
.simplebar-track {
    background: #f4f4f4;
    height: 15px !important;
    width: 92vw;
    margin: 0 auto;
}

.step p img{
    max-width: inherit;
    width: 237.2vw;
    margin: 0 0 0 4vw;
    padding-right: 4vw;
}

.caution{
    padding: 10vw 5.33vw;
}

.caution .inner h2{
    font-size: 3.467vw;
}

.caution .inner ul li{
    font-size: 2.7733vw;
}

.company{
    padding: 10vw 5.33vw;
}

.company .inner{
    display: block;
}

.company .inner .left,
.company .inner .right{
    width: 100%;
}

.company .inner h2{
    font-size: 3.467vw;
    margin-bottom: 1.6vw;
}

.company .inner ul li,
.company .inner p{
    font-size: 2.7733vw;
}

.company .inner dl{
    font-size: 2.7733vw;
    margin: 1.6vw 0 6vw;
}

.pagetop{
    bottom: 22vw;
    right: 4vw;
    width: 9.33vw;
}

.floating{
    padding: 2.67vw 6.67vw;
}

.floating a img{
    filter: drop-shadow(0px 0.67vw 0.933vw rgba(51,51,51,0.3));
}


/* =====================================
	footer
===================================== */

footer{
    padding: 5.067vw 0;
    border-top: 0.8vw solid #e60000;
    font-size: 2.67vw;
}
}





/* =====================================
	モーダルボタンのカバー
===================================== */
@media screen and (max-width:768px){
    .modalOpenWrap {
        width: 92vw;
        margin: 0 auto;
    }
}


/* =====================================
	SP時 横スクロール画像に矢印表示
===================================== */
@media screen and (max-width: 768px) {
	body{
		--scroll-hint-opacity: 1;
	}
	.sp-scroll {
		padding-bottom: 16px;
		overflow-x: auto;
		position: relative;
		-webkit-overflow-scrolling: touch;
	}
	.sp-scroll::before {
		content: "";
		position: absolute;
		width: 100px;
		height: 100px;
		background-image: url("/2024renew_assets/imgs/common/icon_scroll_hint.png");
		background-size: contain;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 10;
		opacity: var(--scroll-hint-opacity);
		transition: opacity 0.3s ease;
		pointer-events: none;
	}
	.sp-scroll img {
		display: inline-block;
		width: auto;
		height: auto;
		max-height: 80vh;
		max-width: none;
	}
}

/* =====================================
	メインビジュアル位置
===================================== */
body {
	padding-top: 127px;
}

@media screen and (max-width: 767px) {
	body {
		padding-top: 55px;
	}
}