@charset "UTF-8";

/* ====================================
	共通スタイル
 ==================================== */
main {
	overflow: hidden;
	color: #222;
	font-weight: 400;
}

.black {
	color: #222;
}

.caption a {
    text-decoration: underline;
}
.caption a:hover {
    text-decoration: none
}

sup {
	font-size: 1.2rem;
	font-weight: 400;
	font-family: 'Noto Sans JP', sans-serif;
}

main[data-footer-type] {
	padding-bottom: 0;
}


#pageTop.default-v2 a {
	background: url(/bd/motto_smartphone/images/icon_return_top.svg) no-repeat center center;
}

.anime_fadein {
    animation-name: fadein;
    animation-fill-mode: both;
	animation-timing-function: ease;
}
@keyframes fadein {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.anime_fadein_up {
    animation-name: fadein_up;
    animation-fill-mode: both;
	animation-timing-function: ease;
}
@keyframes fadein_up {
    0% {
        opacity: 0;
        transform: translateY(80px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.anime_fadein_up_little {
    animation-name: fadein_up_little;
    animation-fill-mode: both;
	animation-timing-function: ease;
}
@keyframes fadein_up_little {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


/* メインビジュアル */
#mainVisual {
	z-index: -1;
    position: relative;
}

.mv_anime {
	overflow: hidden;
    position: relative;
    height: 50.7vw;
}

.motto_mv_circle,
.motto_mv_circle_txt {
    width: 31%;
    position: absolute;
    top: 17.5%;
    left: 65.5%;
}
.motto_mv_circle_balloon {
    width: 10.9%;
    position: absolute;
    top: 49.7%;
    left: 62.9%;
    animation-delay: 1.3s;
    animation-duration: 1s;
}


.motto_mv_circle {
	animation-delay: .5s;
    animation-duration: 1.5s;
}
.motto_mv_circle img {
    animation-name: motto_mv_circle;
    animation-duration: 50s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
@keyframes motto_mv_circle {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}


.motto_mv_circle_txt img {
    animation-name: motto_mv_circle_txt;
    transform-origin: center;
    animation-fill-mode: both;
	animation-delay: 1s;
    animation-duration: .3s;
}

@keyframes motto_mv_circle_txt {
    0% {
        opacity: 0;
        transform: scale(1.5);
    }
    95% {
        transform: scale(0.96);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.motto_mv_dots {
	width: 35%;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1;
}




/* section_top */
.section_top {
	margin-top: -11vw;
	padding-bottom: 8rem;
	position: relative;
}
.trial_box {
	display: flex;
	justify-content: space-between;
	max-width: 106rem;
	margin: auto;

	animation-delay: 1.6s;
    animation-duration: 1s;
}
.trial_item {
	width: 41%;
	font-size: 1.8rem;
	line-height: 2.2;
}
.trial_item + .trial_item {
	width: 52.8%;
}
.motto_trial_model {
	margin-top: 3.5rem;
}
.motto_trial_image {
	padding-top: 2rem;
}


.scene_navi {
	margin-top: 7.5rem;
}
.scene_navi_lists {
	display: flex;
    flex-wrap: wrap;
	justify-content: center;
    gap: 7.5rem 5rem;
    padding: 4.8rem 0 0 4rem;
    margin: 0 auto;
}
.scene_navi_list {
	opacity: 0;
}
.scene_navi_list {
	transition :rotate 0.5s ease 0s;
}
.scene_navi.scroll-in.passed .scene_navi_list {
	animation-duration: 1s;
	animation-name: fadein_up;
    animation-fill-mode: both;
}
.scene_navi.scroll-in.passed .scene_navi_list:nth-child(2){
	animation-delay: .2s;
}
.scene_navi.scroll-in.passed .scene_navi_list:nth-child(3){
	animation-delay: .4s;
}
.scene_navi.scroll-in.passed .scene_navi_list:nth-child(4){
	animation-delay: .6s;
}
.scene_navi.scroll-in.passed .scene_navi_list:nth-child(5){
	animation-delay: .8s;
}
.scene_navi.scroll-in.passed .scene_navi_list:nth-child(6){
	animation-delay: 1s;
}
.scene_navi_list>a {
	display: block;
	background-color: #fff;
    width: 33rem;
    padding: 3rem 1.5rem 1.5rem;
    position: relative;
    box-shadow: 0px 0rem 1.3rem 0 rgba(0, 0, 0, 0.2);
    border-radius: 1rem;
}
.scene_navi_list>a:hover {
	text-decoration: none;
}

@media (hover: hover) {
	.scene_navi_list:nth-child(odd):hover {
		rotate : -3deg;
	}
	.scene_navi_list:nth-child(even):hover {
		rotate : 3deg;
	}
}
@media (hover: none) {
	.scene_navi_list:nth-child(odd):active {
		rotate : -3deg;
	}
	.scene_navi_list:nth-child(even):active {
		rotate : 3deg;
	}
}


.scene_navi_txt {
	font-weight: 500;
	font-size: 2.2rem;
	text-align: center;
}
.scene_navi_img {
	margin-top: 1.3rem;
	border-radius: 0.7rem;
	overflow: hidden;
}
.scene_navi_num {
    width: 10.5rem;
    position: absolute;
    top: -4.8rem;
    left: -4rem;
}

.motto_bg_lines {
    z-index: -1;
    position: absolute;
    left: 50%;
    top: 6rem;
    width: 163rem;
    height: 103rem;
    transform: translateX(-50%);

	animation-delay: 2.2s;
    animation-duration: 1s;
}
.motto_bg_dots {
    z-index: -1;
    position: absolute;
    left: 50%;
    bottom: -93rem;
    width: 164rem;
    height: 105rem;
    transform: translateX(-50%);
}



/* section_scene */
.section_scene {
	padding: 20rem 0 10rem;
}
#scene01 {
	background-color: #FFEBE2;
}
#scene02 {
	background-color: #E4F1C0;
}
#scene03 {
	background-color: #FFFAC9;
}
#scene04 {
	background-color: #E1EDF7;
}
#scene05 {
	background-color: #FFEBD1;
}
#scene06 {
	background-color: #EEDCF0;
}

.scene_top {
	display: flex;
	justify-content: space-between;
}
#scene02 .scene_top,
#scene04 .scene_top,
#scene06 .scene_top {
	flex-direction: row-reverse;	
}

.scene_top_item {
	width: 50%;
}
.scene_top_item:nth-child(2) {
	width: 43%;
	position: relative;
}
.scene_top_item > * {
	z-index: 1;
	position: relative;
}

.scene_top_item:nth-child(2)::before {
	opacity: 0;
    position: absolute;
    content: "";
    background-color: #000;
    width: 83rem;
    height: 92rem;
    border-radius: 3rem;
    z-index: 0;
	transform-origin:bottom center;
	top: 44%;
    left: 73%;
}
#scene01 .scene_top_item:nth-child(2)::before,
#scene03 .scene_top_item:nth-child(2)::before,
#scene05 .scene_top_item:nth-child(2)::before {
	left: 69%;
}
#scene02 .scene_top_item:nth-child(2)::before,
#scene04 .scene_top_item:nth-child(2)::before,
#scene06 .scene_top_item:nth-child(2)::before {
	left: 32%;
}
#scene01 .scene_top_item:nth-child(2)::before {
	background-color: #FFF6F0;
}
#scene02 .scene_top_item:nth-child(2)::before {
	background-color: #F4F9E7;
}
#scene03 .scene_top_item:nth-child(2)::before {
	background-color: #FFFDE5;
}
#scene04 .scene_top_item:nth-child(2)::before {
	background-color: #F0F7FA;
}
#scene05 .scene_top_item:nth-child(2)::before {
	background-color: #FFF5E8;
}
#scene06 .scene_top_item:nth-child(2)::before {
	background-color: #F5EDF8;
}
.scene_top.scroll-in.passed .scene_top_item:nth-child(2)::before {
    animation-delay: .4s;
	animation-duration: .7s;
    animation-fill-mode: both;
}
#scene01 .scene_top.scroll-in.passed .scene_top_item:nth-child(2)::before,
#scene03 .scene_top.scroll-in.passed .scene_top_item:nth-child(2)::before,
#scene05 .scene_top.scroll-in.passed .scene_top_item:nth-child(2)::before {
	animation-name: scene_top_item_before_RtoL;
}
#scene02 .scene_top.scroll-in.passed .scene_top_item:nth-child(2)::before,
#scene04 .scene_top.scroll-in.passed .scene_top_item:nth-child(2)::before,
#scene06 .scene_top.scroll-in.passed .scene_top_item:nth-child(2)::before {
	animation-name: scene_top_item_before_LtoR;
}
@keyframes scene_top_item_before_RtoL {
    0% {
		opacity: 0;
        transform: translate(-50%,-50%) rotate(50deg);
    }
	75% {
        transform: translate(-50%,-50%) rotate(-14deg);
    }
    100% {
		opacity: 1;
		transform: translate(-50%,-50%) rotate(-13deg);
    }
}
@keyframes scene_top_item_before_LtoR {
    0% {
		opacity: 0;
        transform: translate(-50%,-50%) rotate(-50deg);
    }
	75% {
        transform: translate(-50%,-50%) rotate(14deg);
    }
    100% {
		opacity: 1;
		transform: translate(-50%,-50%) rotate(13deg);
    }
}

.scene_image {
	opacity: 0;
	box-shadow: 0px 0rem 1.3rem 0 rgba(0, 0, 0, 0.2);
    border-radius: 1rem;
	overflow: hidden;
	position: relative;
}
.scene_top.scroll-in.passed .scene_image {
	animation-delay: .3s;
	animation-duration: .8s;
	animation-name: fadein_up_little;
    animation-fill-mode: both;
}
.scene_top.scroll-in.passed .scene_arrow + .scene_image {
	animation-delay: 1.1s;
}

.scene_image_txt {
    position: absolute;
    color: #A24A98;
    font-weight: 500;
    font-size: 2.2rem;
    text-align: center;
    width: 100%;
    padding-top: 1%;
}
.scene_top.scroll-in.passed .scene_arrow + .scene_image .scene_image_txt {
	color: #004098;
}

.scene_arrow {
	opacity: 0;
	width: 6.5%;
    margin: 2rem auto;
}
.scene_top.scroll-in.passed .scene_arrow {
	animation-delay: .5s;
	animation-duration: .5s;
	animation-name: scene_arrow;
    animation-fill-mode: both;
}
@keyframes scene_arrow {
    0% {
		opacity: 0;
        transform: scale(1,0);
    }
	75% {
        transform: scale(1,1.05);
    }
    100% {
		opacity: 1;
        transform: scale(1,1);
    }
}

.scene_num {
	opacity: 0;
	width: 18.5rem;
    margin: 7.5rem auto 4rem;
}
.scene_top.scroll-in.passed .scene_num {
	animation-delay: .7s;
	animation-duration: .5s;
	animation-name: scene_num;
    animation-fill-mode: both;
}
@keyframes scene_num {
    0% {
        opacity: 0;
        transform: scale(1.3);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.scene_tit {
	opacity: 0;
    font-family: 'M PLUS 1p', sans-serif;
    font-weight: bold;
    font-size: 4.6rem;
    line-height: 1.75;
    text-align: center;
}
.scene_top.scroll-in.passed .scene_tit {
	animation-delay: .8s;
	animation-duration: .5s;
	animation-name: fadein_up_little;
    animation-fill-mode: both;
}
.scene_tit sup {
    font-size: 1.2rem;
    top: -2.5em;
}

.scene_ribbon {
	opacity: 0;
	margin: 1.2rem 0 2.5rem;
}
.scene_top.scroll-in.passed .scene_ribbon {
	animation-delay: .8s;
	animation-duration: .5s;
	animation-name: scene_ribbon;
    animation-fill-mode: both;
	transform-origin: left;
}
@keyframes scene_ribbon {
    0% {
        opacity: 0;
        transform: scale(0,1);
    }
    100% {
        opacity: 1;
        transform: scale(1,1);
    }
}

.scene_txt {
	opacity: 0;
	font-size: 2rem;
	line-height: 1.9;
	padding: 0 2%;
}
.scene_top.scroll-in.passed .scene_txt {
	animation-delay: .8s;
	animation-duration: .5s;
	animation-name: fadein;
    animation-fill-mode: both;
}

.marker_yellow {
    font-weight: bold;
	background: linear-gradient(transparent 14%, #FFFF2D 0%);
    background-position-y: -0.05em;
}


.scene_bottom {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-top: 10rem;
	padding-top: 3rem;
}

.scene_colorbox {
	border: 1px solid #000;
	border-radius: 3rem;
	position: relative;
	
}
.scene_bottom_item {
	width: 58.5%;
	z-index: 1;
	margin-left: 2rem;
}
.scene_bottom_item:nth-child(2) {
	width: 36%;
}
#scene01 .scene_colorbox {
	background-color: #FFFCFB;
	background-image: repeating-linear-gradient( -45deg, #FFEDEF, #FFEDEF 1px, #fff 0, #fff 7px );
}
#scene02 .scene_colorbox {
	background-color: #FAFCF3;
	background-image: repeating-linear-gradient( -45deg, #EFF6DB, #EFF6DB 1px, #fff 0, #fff 7px );
}
#scene03 .scene_colorbox {
	background-color: #FFFDF7;
	background-image: repeating-linear-gradient( -45deg, #FDF6DF, #FDF6DF 1px, #fff 0, #fff 7px );
}
#scene04 .scene_colorbox {
	background-color: #FBFCFD;
	background-image: repeating-linear-gradient( -45deg, #E6F1F8, #E6F1F8 1px, #fff 0, #fff 7px );
}
#scene05 .scene_colorbox {
	background-color: #FFFBF6;
	background-image: repeating-linear-gradient( -45deg, #FFF0DE, #FFF0DE 1px, #fff 0, #fff 7px );
}
#scene06 .scene_colorbox {
	background-color: #FCFBFC;
	background-image: repeating-linear-gradient( -45deg, #F6EFF4, #F6EFF4 1px, #fff 0, #fff 7px );
}

#scene01 .scene_bottom_item:nth-child(2) .scene_colorbox::after,
#scene03 .scene_bottom_item:nth-child(2) .scene_colorbox::after,
#scene05 .scene_bottom_item:nth-child(2) .scene_colorbox::after,
#scene02 .scene_bottom_item:nth-child(1) .scene_colorbox::after,
#scene04 .scene_bottom_item:nth-child(1) .scene_colorbox::after,
#scene06 .scene_bottom_item:nth-child(1) .scene_colorbox::after {
	content: "";
    position: absolute;
	background-image: url(/bd/motto_smartphone/images/motto_scene_circle.svg);
    background-repeat: no-repeat;
    background-size: contain;
	top: -14.3rem;
	width: 29rem;
    height: 29rem;
	z-index: -1;
}
#scene01 .scene_bottom_item:nth-child(2) .scene_colorbox::after,
#scene03 .scene_bottom_item:nth-child(2) .scene_colorbox::after,
#scene05 .scene_bottom_item:nth-child(2) .scene_colorbox::after{
    right: -9rem;
}
#scene02 .scene_bottom_item:nth-child(1) .scene_colorbox::after,
#scene04 .scene_bottom_item:nth-child(1) .scene_colorbox::after,
#scene06 .scene_bottom_item:nth-child(1) .scene_colorbox::after {
    left: -9rem;
}

.scene_colorbox {
	position: relative;
}
.scene_colorbox_tit_wrap {
	position: absolute;
	top: -3rem;
    left: -2rem;
}
#scene01 .scene_colorbox_tit_wrap {
	color: #F86381;
}
#scene02 .scene_colorbox_tit_wrap {
	color: #8CC900;
}
#scene03 .scene_colorbox_tit_wrap {
	color: #EBB800;
}
#scene04 .scene_colorbox_tit_wrap {
	color: #2F90CA;
}
#scene05 .scene_colorbox_tit_wrap {
	color: #FF9000;
}
#scene06 .scene_colorbox_tit_wrap {
	color: #B6659B;
}

#scene01 .scene_colorbox,
#scene01 .scene_colorbox_tit {
	border-color: #F86381;
}
#scene02 .scene_colorbox,
#scene02 .scene_colorbox_tit {
	border-color: #8CC900;
}
#scene03 .scene_colorbox,
#scene03 .scene_colorbox_tit {
	border-color: #EBB800;
}
#scene04 .scene_colorbox,
#scene04 .scene_colorbox_tit {
	border-color: #2F90CA;
}
#scene05 .scene_colorbox,
#scene05 .scene_colorbox_tit {
	border-color: #FF9000;
}
#scene06 .scene_colorbox,
#scene06 .scene_colorbox_tit {
	border-color: #B6659B;
}

.scene_colorbox_tit {
	position: relative;
	display: block;
	border-radius: 3rem;
	font-size: 3rem;
	font-weight: 500;
	padding: 0.1em 1em 0.17em;
	background-color: #fff;
	border: 1px solid #000;
}
.scene_colorbox_tit::before {
    content: "";
    position: absolute;
    display: block;
    right: 20%;
    bottom: -1px;
    width: 2rem;
    height: 1px;
	background-color: #fff;
}
.scene_colorbox_tit::after {
    content: "";
    position: absolute;
    display: block;
    right: 19.5%;
    bottom: -0.55rem;
    width: 1.4rem;
    height: 1px;
	background-color: #000;
    transform: rotate(54deg);
}
#scene01 .scene_colorbox_tit::after {
    background-color: #F86381;
}
#scene02 .scene_colorbox_tit::after {
    background-color: #8CC900;
}
#scene03 .scene_colorbox_tit::after {
	background-color: #EBB800;
}
#scene04 .scene_colorbox_tit::after {
	background-color: #2F90CA;
}
#scene05 .scene_colorbox_tit::after {
	background-color: #FF9000;
}
#scene06 .scene_colorbox_tit::after {
	background-color: #B6659B;
}

.useage_box {
    padding: 7rem 5% 7.5rem;
}
.useage_tit {
	font-size: 2.4rem;
	font-weight: 500;
	max-width: 90%;
    margin: 0 auto 5rem;
}


.useage_contents_multi {
	display: flex;
	justify-content: space-between;
}

.useage_contents_multi .useage_content {
    width: 46%;
}
.useage_contents:not(.useage_contents_multi) .useage_content{
	max-width: 47rem;
	margin: auto;
}

.useage_item_tit {
    text-align: center;
    font-size: 1.8rem;
    margin-bottom: 3.5rem;
}

.useage_item_tit_num {
	width: 5rem;
	position: relative;
	margin: auto;
}
.useage_item_tit_num::after {
    content: attr(data-num);
    position: absolute;
    top: 48%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 1.45em;
    font-weight: 500;
}
#scene02 .useage_item_tit_num::after {
	color: #8CC900;
}
#scene03 .useage_item_tit_num::after {
	color: #EBB800;
}
#scene06 .useage_item_tit_num::after {
	color: #B6659B;
}


.useage_item_txt {
	font-size: 1.8rem;
	margin-top: 3.5rem;
}

.use_app {
    padding: 7rem 5% 6rem;
}
.use_app_top {
	display: flex;
	align-items: center;
}
.use_app_mark {
    width: 26%;
    margin: 0 9% 0 3%;
}
.use_app_txt {
	width: 50%;
	font-size: 1.8rem;
	font-weight: 500;
}
.basic_btn {
    display: block;
    font-size: 1.85rem;
    font-weight: 500;
    color: #fff;
	text-align: center;
    padding: 0.6em 1em;
    border-radius: 1rem;
    background-color: #F19200;
	max-width: 37rem;
    margin-left: auto;
	margin-right: auto;
    margin-top: 5rem;
    box-shadow: 0px 0rem 1rem 0 rgba(0, 0, 0, 0.2);
    background-position: right 0.8em center;
    background-repeat: no-repeat;
    background-size: 0.6em;
    padding-right: 2em;
    background-image: url(/bd/motto_smartphone/images/icon_arrow.svg);
}
#scene01 .basic_btn {
	background-color: #F86381;
}
#scene02 .basic_btn {
	background-color: #8CC900;
}
#scene03 .basic_btn {
	background-color: #EBB800;
}
#scene04 .basic_btn {
	background-color: #2F90CA;
}
#scene05 .basic_btn {
	background-color: #FF9000;
}
#scene06 .basic_btn {
	background-color: #B6659B;
}
.basic_btn:hover {
	text-decoration: none;
	color: #fff;
}



/* section_last */
.section_last {
	padding: 14rem 0 8rem;
	background-image: url(/bd/motto_smartphone/images/motto_dl_dots.png);
    background-position: top left;
    background-repeat: no-repeat;
    background-size: 74rem 17.5rem;
	position: relative;
	overflow: hidden;
}

.last_content + .last_content {
	margin-top: 14rem;
}

.last_content_tit {
    position: relative;
    display: inline-block;
    border-radius: 5rem;
    font-size: 4rem;
    font-weight: 500;
    padding: 0.28em 1.3em 0.38em;
	background: 
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(100deg, #E5657B, #F9C862) border-box;
	border: 2px solid transparent;
	margin-bottom: 10rem;
}
.last_content_tit::before {
    content: "";
    position: absolute;
    display: block;
    right: 11%;
    bottom: -2px;
    width: 5rem;
    height: 2px;
    background-color: #fff;
}
.last_content_tit::after {
    content: "";
    position: absolute;
    display: block;
    right: 12%;
    bottom: -1rem;
    width: 2.6rem;
    height: 1px;
    border: 1px solid transparent;
    border-image: linear-gradient(to right, #E5657B 0%, #F9C862 100%);
    border-image-slice: 1;
    transform: rotate(59deg);
}

.dl_lists {
    display: flex;
    gap: 1%;
}
.dl_list {
	border-radius: 3rem;
	background: 
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(100deg, #E5657B, #F9C862) border-box;
	border: 1px solid transparent;
	padding: 5rem 3%;
	display: flex;
    flex-direction: column;
}
.dl_list_link {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.dl_list_link + .dl_list_link {
    margin-top: 3.5rem;
}
.dl_list_img {
	width: 9rem;
	margin: auto;
	margin-top: 0;
}
.dl_list_tit {
	font-size: 2rem;
	font-weight: 500;
	text-align: center;
	line-height: 1.75;
    display: flex;
    align-items: center;
    justify-content: center;
	height: 100%;
	margin: 2rem 0 2.5rem;
}
.dl_list_link_mark {
	width: 62%;
}
.dl_list_link_qr {
	width: 36%;
}



.connect_products {
	display: flex;
	justify-content: space-between;
	border-radius: 2rem;
	background: 
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(100deg, #E5657B, #F9C862) border-box;
	border: 1px solid transparent;
	padding: 7rem 5%;
}
.connect_product {
	width: 47.5%;
}
.connect_product_tit {
	color: #fff;
	font-size: 2.2rem;
	font-weight: 500;
	text-align: center;
	background-color: #222;
	border-radius: 1rem;
	padding: 0.4em 1% 0.5em;
}
.connect_product + .connect_product .connect_product_tit {
	background-color: #0068B7;
}
.connect_product_img {
	margin: 9rem 0 7rem;
	padding: 0 6%;
}
.connect_product .basic_btn {
	max-width: 30rem;
}


.caption_area {
	margin-top: 8rem;
	padding: 1.5rem;
	background-color: rgb(255 255 255 / 80%);
}


.section_last .motto_bg_lines {
    top: 20rem;
}
.section_last .motto_bg_dots {
    bottom: -32rem;
}

/* ====================================
	スマートフォン専用スタイル
===================================== */
@media only screen and (max-width: 767px) {

	#pageTop.default-v2 {
		height: 9rem;
	}
	#pageTop.default-v2 a {
		width: 50px;
		height: 50px;
	}


	 /* メインビジュアル */
	.motto_mv_circle, .motto_mv_circle_txt {
		width: 42.5%;
		top: 13.2%;
		left: 55.5%;
	}
	.motto_mv_circle_balloon {
	    width: 17.2%;
		top: 52.9%;
		left: 49.7%
	}
	.mv_anime {
		overflow: hidden;
		position: relative;
	    height: 54.5vw;
		max-height: none;
	}
	.motto_mv_dots {
        width: 100%;
    }

	.section_top {
		margin-top: 5rem;
	}
    .trial_box {
        flex-direction: column;
    }
    .trial_item {
        width: 100%!important;
        text-align: center;
		font-size: 1.6rem;
    }
	.motto_trial_image {
		margin-top: 4.5rem;
	}
	.scene_navi {
		margin-top: 9.5rem;
	}
	.scene_navi_lists {
		justify-content: space-between;
		gap: 4rem 0;
		padding: 0;
	}
	.scene_navi_list {
		width: 48.5%;
	}


	.scene_navi_list>a {
		width: 100%;
		padding: 9.5% 4% 4%;
		box-shadow: 0px 0rem 0.6rem 0 rgba(0, 0, 0, 0.2);
	}
	.scene_navi_txt {
		font-size: 1.2rem;
		line-height: 1.375;
	}
	.scene_navi_num {
		width: 27%;
		top: -15%;
		left: -3%;
	}
	.scene_navi_img {
		margin-top: 5%;
	}

	.motto_bg_lines {
		width: calc(163rem/1.7);
		height: calc(103rem/1.7);
		top: 11rem;
	}
	.motto_bg_dots {
		width: calc(164rem/1.7);
		height: calc(103rem/1.7);
		bottom: -15rem;
	}


	

	.section_scene,
	.section_last {
		padding-top: 8rem;
		padding-bottom: 8rem;
	}


	/* section_scene */

	.scene_top {
		flex-direction: column!important;
	}
	.scene_top_item,
	.scene_top_item:nth-child(2) {
		width: 100%;
	}
	.scene_top_item:nth-child(2)::before {
		width: 145%;
		height: 105%;
		top: 57%;
		left: 50%!important;
		border-radius: 0;
	}
	#scene02 .scene_top.scroll-in.passed .scene_top_item:nth-child(2)::before,
	#scene04 .scene_top.scroll-in.passed .scene_top_item:nth-child(2)::before,
	#scene06 .scene_top.scroll-in.passed .scene_top_item:nth-child(2)::before {
		animation-name: scene_top_item_before_RtoL;
	}
	@keyframes scene_top_item_before_RtoL {
		0% {
			opacity: 0;
			transform: translate(-50%,-50%) rotate(50deg);
		}
		75% {
			transform: translate(-50%,-50%) rotate(-7deg);
		}
		100% {
			opacity: 1;
			transform: translate(-50%,-50%) rotate(-6deg);
		}
	}

	.scene_num {
		opacity: 0;
		width: 35%;
		margin: 0 auto 2.5rem;
	}
	.scene_tit {
		font-size: 3rem;
		margin-bottom: 5rem;
	}
	.scene_tit sup {
		top: -1.5em;
	}
	.scene_arrow {
		margin: 1.2rem auto;
	}
	.scene_txt {
		font-size: 1.6rem;
		padding: 0;
		margin-top: 5rem;
	}
	.scene_image_txt {
		font-size: 3.2vw;
	}
	.scene_top.scroll-in.passed .scene_num {
		animation-delay: .3s;
	}
	.scene_top.scroll-in.passed .scene_tit {
		animation-delay: .4s;
	}
	.scene_top.scroll-in.passed .scene_image {
		animation-delay: .7s;
	}
	.scene_top.scroll-in.passed .scene_arrow {
		animation-delay: .9s;
	}
	.scene_top.scroll-in.passed .scene_arrow + .scene_image {
		animation-delay: 1.1s;
	}
	.scene_top.scroll-in.passed .scene_top_item:nth-child(2)::before {
		animation-delay: 1.3s;
	}
	.scene_top.scroll-in.passed .scene_txt {
		animation-delay: 1.6s;
	}

	.scene_bottom {
		flex-direction: column;
		padding-top: 1.8rem;
	}
	.scene_bottom_item {
		margin-left: 0;
	}
	.scene_bottom .scene_bottom_item,
	.scene_bottom .scene_bottom_item:nth-child(2) {
		width: 100%;
	}
	.scene_bottom_item + .scene_bottom_item {
		margin-top: 7.8rem;
	}
	.scene_colorbox {
		border-radius: 0 2rem 2rem 2rem;
	}
	.scene_bottom_item:nth-child(1) .scene_colorbox::after,
	.scene_bottom_item:nth-child(2) .scene_colorbox::after {
		display: none!important;
	}
	.scene_colorbox_tit_wrap {
		position: absolute;
		top: -1.8rem;
		left: -1px;
	}
	.scene_colorbox_tit {
		font-size: 1.8rem;
		padding: 0.1em 1.2em 0.19em;
	}
	.useage_box,
	.use_app {
		padding: 4.5rem 5% 6rem;
	}
	.useage_tit {
		font-size: 1.8rem;
		line-height: 1.75;
		font-weight: 500;
		max-width: 100%;
	}
	.useage_contents_multi {
		flex-direction: column;
	}
	.useage_contents_multi .useage_content {
		width: 84%;
		margin: auto;
	}
	.useage_contents_multi .useage_content + .useage_content {
		margin-top: 5.5rem;
	}
	.useage_contents:not(.useage_contents_multi) .useage_content {
		max-width: initial;
	}
	.useage_item_tit {
		font-size: 1.6rem;
		margin-bottom: 2.5rem;
	}
	.useage_item_txt {
		font-size: 1.6rem;
		margin-top: 2.5rem;
	}
	.use_app_top {
		flex-direction: column;
	}
	.use_app_mark {
		width: 35%;
		margin: 0 auto 2.5rem;
	}
	.use_app_txt {
		width: 100%;
		font-size: 1.6rem;
		text-align: center;
	}
	.basic_btn {
		font-size: 1.4rem;
		padding: 0.5em 2em 0.6em 1em;
		background-position: right 1.2em center;
		margin-top: 3rem;
		max-width: 26rem;
	}


	/* section_last */
	.section_last {
		background-size: calc(74rem/2.6) calc(17.5rem/2.6);
	}
	.last_content_tit {
		font-size: 2rem;
		border: 1px solid transparent;
		margin-bottom: 4rem;
		width: 100%;
	}
	.last_content_tit::before {
		bottom: -1px;
		width: 2.5rem;
		height: 1px;
	}
	.last_content_tit::after {
		right: 11.5%;
		bottom: -0.8rem;
		width: 1.6rem;
	}
	.dl_lists {
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 1.5rem 1%;
	}
	.dl_list {
		width: 49%;
		border-radius: 1rem;
		padding: 3rem 3% 2.5rem;
	}
	.dl_list_img {
		width: 51%;
		line-height: 1.5;
	}
	.dl_list_tit {
		font-size: 1.4rem;
		margin: 2.5rem 0;
	}
	.dl_list_link_mark {
		width: 100%;
	}
	.dl_list_link + .dl_list_link {
		margin-top: .8rem;
	}



	/* .section_last */
	.last_content + .last_content {
		margin-top: 6rem;
	}
	.connect_products {
		flex-direction: column;
		padding: 3rem 5%;
	}
	.connect_product {
		width: 100%;
	}
	.connect_product + .connect_product {
		margin-top: 6rem;
	}
	.connect_product_tit {
		font-size: 1.6rem;
	}
	.connect_product_img {
		margin: 6rem 0;
		padding: 0%;
	}
	.connect_product .basic_btn {
		max-width: 18.5rem;
	}
	.caption_area {
		margin-top: 6rem;
		padding: 0;
	}
	.section_last .motto_bg_lines {
		top: 46rem;
	}
	.section_last .motto_bg_dots {
		bottom: 25rem;
	}
}

/* ====================================
	PC&タブレット、印刷専用スタイル
===================================== */
@media print , screen and (min-width: 768px) {
	#pageTop.default-v2 {
		height: 12rem;
	}
	#pageTop.default-v2 a {
		width: 80px;
		height: 80px;
	}
}

/* ====================================
	タブレット、印刷専用スタイル(このページでは、max-widthを1079pxから1230pxに変更)
===================================== */
@media print , screen and (min-width: 768px) and (max-width: 1230px) {
	.scene_navi_list>a {
		width: 25.6vw;
	}
	.scene_navi_num {
		width: 8.537vw;
	}
	.scene_navi_txt {
		font-size: 1.789vw;
	}
	.scene_image_txt {
		font-size: 1.789vw;
	}
	.scene_top_item:nth-child(2)::before {
		width: 67.480vw;
		height: 76.797vw;
		top: 39vw;
	}
	.scene_num {
		width: 15.041vw;
	}
	.scene_tit {
		font-size: 3.7vw;
	}
	.scene_txt {
		font-size: 1.626vw;
	}
	.scene_txt .caption,
	.scene_txt sup  {
		font-size: max(0.976vw,1rem);
	}
}

/* ====================================
	PC専用スタイル
===================================== */
@media only screen and (min-width: 1080px) {
}