@charset "utf-8";

:root {
	--color_base: #EDF6EB;
	--color_main: #50875F;
	--color_accent: #bda781;
	--color_text: #525252;
	--color_text_wh: #fff;
}

:root {
	--font_size_note: 1rem;
	--font_size_txt: 1.6rem;
	--font_size_h3: 2rem;
	--font_size_h2: 3rem;
	--font_size_subttl: 1.6rem;
	--font_size_h2_en: 2.4rem;
	--font_size_h3_en: 1.8rem;
}

:root {
	--gap: 16px;
	--gap_content: 24px;
	--gap_content_l: 48px;
	--gap_section: 40px;
	--inner_width: min(90%, 800px);
}

@media screen and (min-width: 600px) {
	:root {
		--gap_section: 80px;
		--gap_content_l: 80px;
	}
}

@media screen and (min-width: 800px) {
	:root {
		--font_size_h2_en: 2.8rem;
		--font_size_h3_en: 2.2rem;
	}

	:root {
		--gap_section: 104px;
		--gap_content_l: 104px;
	}
}

@media screen and (min-width: 1000px) {
	:root {
		--font_size_note: 1.1rem;
		--font_size_txt: 1.8rem;
		--font_size_h3: 2.4rem;
		--font_size_h2: 4rem;
		--font_size_subttl: 2rem;
		--font_size_h2_en: 3.2rem;
	}

	:root {
		--gap: 16px;
		--gap_content: 40px;
		--gap_content_l: 140px;
		--gap_section: 100px;
		--inner_width: min(90%, 1300px);
	}
}



/*---------------*/

*:before,
*:after {
	box-sizing: border-box;
}

html,
body,
header,
article,
section,
footer,
div,
ol,
ul,
li,
dl,
dt,
dd,
h1,
h2,
h3,
h4,
h5,
p,
a,
figure,
img,
hr {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}



/*--------------*/

html {
	font-size: 62.5%;
	-webkit-text-size-adjust: 100%;
}

body {
	font-family: 'Lucida Grande', 'Hiragino kaku Gothic ProN', Meiryo, sans-serif;
	width: 100%;
	background: #fff;
	color: var(--color_text);
	font-size: 1.6rem;
	letter-spacing: 0.02em;
	margin: auto;
	overflow-x: hidden;
	position: relative;
}

header,
article,
section,
footer {
	width: 100%;
}

section {
	text-align: center;
}

h2 {
	font-size: var(--font_size_h2);
}

h3 {
	font-size: var(--font_size_h3);
}

img {
	display: block;
	width: 100%;
	margin: 0 auto;
}

a {
	text-decoration: none;
	color: inherit;
}

a:hover,
.hover:hover {
	opacity: 0.8;
}

a img {
	display: block;
}

a p {
	text-align: center;
}

/*------- classed -------*/

.en {
	font-family: "Poppins", 'Lucida Grande', 'Hiragino kaku Gothic ProN', Meiryo, sans-serif;
}

section {
	padding-top: var(--gap_section);
	padding-bottom: var(--gap_section);
}


.inner-l {
	padding-left: 16px;
	padding-right: 16px;
}

.inner {
	width: min(92%, 800px);
	margin-left: auto;
	margin-right: auto;
}

.marker {
	background: linear-gradient(transparent 50%, rgba(255, 250, 182, 0.76) 50%);
	display: inline;
	background-repeat: no-repeat;
	background-size: 0% 100%;
	transition: background-size 1.5s;
}

.marker.on {
	background-size: 100% 100%;
}

.appname {
	font-weight: 500;
}

h2 .appname {
	letter-spacing: 2px;
}

.sub_ttl {
	display: inline-block;
	padding-bottom: 8px;
	margin-bottom: 6px;
	border-bottom: 1px solid #ccc;
	font-size: var(--font_size_subttl);
}

.br {
	display: inline-block;
}


.wrap {
	padding: 32px 0;
}

.link_btn {
	width: 150px;
	margin: 0 auto;
	border: solid 1px var(--color_main);
	border-radius: 8px;
}

.link_btn p {
	padding: 7px 0 6px 0;
	color: var(--color_main);
	font-weight: 600;
}

@media screen and (min-width:1000px) {
	.sub_ttl {
		margin-bottom: 16px;
	}
}

/*------- en-page -------*/


.en-page h2 {
	font-size: var(--font_size_h2_en);
}

.en-page h3 {
	font-size: var(--font_size_h3_en);
}

.note {
	font-size: 1.1rem;
	line-height: 20px;
}

.p_top_24 {
	padding-top: 24px;
}

.p_top_40 {
	padding-top: 40px;
}

.m_le_40 {
	margin-left: 40px;
}

.m_bo_24 {
	margin-bottom: 24px;
}

/* hr {} */

/*----------------------------------
header
-----------------------------------*/

header {
	/* background-color: #4c92ff; */
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	justify-content: space-between;
	z-index: 20;
}

.header_h1 {
	color: #80b0ff;
	margin-top: 10px;
	margin-left: 10px;
	font-size: 1.2rem;
	font-weight: 100;
}

.header_h1 img {
	width: 100px;
}

.header_translate {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.header_translate a {
	margin-top: 10px;
	margin-right: 20px;
	padding: 0px 20px;
	font-size: 1.2rem;
	line-height: 2;
	font-weight: 550;
	background-color: #FFFFFF;
	color: #2F613C;
}

/*----------------------------------
fixed-header
-----------------------------------*/
#fixed-header {
	position: fixed;
	top: -64px;
	width: 100%;
	height: 64px;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	line-height: 64px;
	background-color: var(--color_main);
	transition: .5s;
	/* アニメーションタイミング */
	z-index: 10001;
}

#fixed-header.is-show {
	top: 0;
}

.fixed_logo {
	position: relative;
	width: 120px;
	margin: 0;
	padding-top: 9px;
}

.fixed-navi {
	width: calc(100% - 140px);
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.fixed-navi-lang {
	height: 24px;
	min-width: 66px;
	padding: 0px 16px;
	line-height: 24px;
	background-color: #FFFFFF;
	color: #2F613C;
	font-size: 1.1rem;
	font-weight: 550;
}

.fixed-navi-applink {
	width: 140px;
	min-width: 140px;
}


.app_qr {
	width: 116px;
	margin-left: auto;
	margin-right: auto;
}

.app_qr img {
	display: none;
}



/*----------------------------------
	メインビジュアル下の帯
----------------------------------*/

.maincopy_area {
	width: 100%;
	padding: var(--gap_content) var(--gap);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	text-align: center;
	background-color: var(--color_main);
}

.maincopy_area .sub_ttl {
	margin: 0;
	font-size: var(--font_size_txt);
}

.maincopy_area h2 {
	font-size: calc(2.2vw + 1.6rem);
	line-height: 1.4;
}

.maincopy_area .appname {
	font-size: 2.4rem;
}

.appname_ja {
	display: block;
	font-size: 1.2rem;
	line-height: 1.2;
	letter-spacing: 3px;
	font-weight: normal;
}

@media screen and (min-width:1000px) {
	.maincopy_area .appname {
		font-size: 2.8rem;
		letter-spacing: 4px;
	}

	.appname_ja {
		line-height: 2;
	}
}

@media screen and (min-width:1300px) {
	.maincopy_area_inner {
		gap: 12px;
	}

	.maincopy_area h2 {
		font-size: min(calc(2vw + 1.6rem), 48px);
	}

	.maincopy_area .appname {
		font-size: 3rem;
	}
}


/*------- en-page -------*/


.en-page .maincopy_area {
	padding-top: 48px;
	padding-bottom: 48px;
	gap: 16px;
}

.en-page .maincopy_area h2 {
	font-size: calc(1.4vw + 1.6rem);
	line-height: 1.4;
}

.en-page .maincopy_area .appname {
	font-size: 2.6rem;
	letter-spacing: 0.15em;
}

@media screen and (min-width:1000px) {
	.en-page .maincopy_area .sub_ttl {
		font-size: 2rem;
	}

	.en-page .maincopy_area h2 {
		font-size: 4rem;
	}

	.en-page .maincopy_area .appname {
		font-size: 3.2rem;
	}
}

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

	.en-page .maincopy_area h2 {
		font-size: 4.8rem;
	}
}

/*----------------------------------
サイドの固定 QRコード
------------------------------------*/
#fixed_app {
	display: none;
	position: fixed;
	right: 0;
	bottom: -200px;
	z-index: 10;
	width: 110px;
	padding: 8px 0;
	border-radius: 8px 0 0 8px;
	background-color: var(--color_main);
	color: var(--color_text_wh);
	transition: .5s;
}

#fixed_app.is-show {
	bottom: 0;
}

#fixed_app .app_qr {
	width: 100px;
}

#fixed_app .note {
	font-size: 1.1rem;
	line-height: 1.2;
	text-align: center;
}

@media screen and (min-width: 1000px) {
	#fixed_app {
		display: block;
	}

}


/*----------------------------------


.promotion,
.promotion_en {
	background-color: #B99664;
	color: #FFFFFF;
	font-weight: 600;
}

.promotion {
	padding: 24px 16px 20px 16px;
	line-height: 40px;
}

.promotion_en {
	padding: 21px 16px 22px 16px;
	line-height: 36px;
}

.promotion p span {
	font-size: 3.4rem;
	vertical-align: middle;
	padding-left: 4px;
}

.promotion_en p span {
	font-size: 3rem;
	vertical-align: middle;
	line-height: 44px;
}


/*----------------------------------
	たった3タップで
----------------------------------*/

.tap1-3 h2 {
	margin-top: 1.6rem;
	font-size: min(calc(2.8vw + 6px), 2.2rem);
}

.bg_marker {
	padding-bottom: 6px;
}

.bg_marker p {
	display: inline;
	padding: 1rem;
	/* font-size: 3.4rem; */
	font-size: min(calc(2.8vw + 1.4rem), 3.2rem);
	font-weight: 600;
	line-height: 64px;
	color: #fff;
	background: linear-gradient(transparent 5%, #bda781 5% 90%, transparent 90%);
}

.bg_marker span {
	font-size: 4.2rem;
	vertical-align: bottom;
}

.tap1-3__ttl .note {
	margin: 24px auto;
}

.tap1-3__ttl .note p {
	background-color: var(--color_base);
	padding: 1rem 6px;
	border-radius: 8px;
	line-height: 1.4;
	color: #666;
}

.superscript {
	font-size: 0.8rem;
	line-height: 32px;
	vertical-align: top;
	padding: 0 1px 0 3px;
}

.superscript_en {
	font-size: 1.2rem;
	line-height: 36px;
	vertical-align: top;
	padding: 0 1px 0 3px;
}

.tap1-3__content {
	margin-top: var(--gap_content);
}


.wrap_tap {
	margin: 0 auto;
	max-width: 570px;
	padding: 40px 16px;
}

.tap_title {
	color: #FFFFFF;
	font-size: 3.4rem;
	font-weight: 600;
	line-height: 40px;
	padding: 8px 0 2px 8px;
	background-image: url(../images/tap_title_bg.svg);
	background-repeat: no-repeat;
	background-position: center;
}

.tap h3 {
	padding: 24px 0 16px 0;
}

.tap img {
	margin: 24px auto;
	width: 60%;
	max-width: 250px;
}

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

	.bg_marker {
		padding-bottom: 16px;
	}

	.bg_marker p {
		font-size: 3.8rem;
		line-height: 80px;
	}

	.bg_marker span {
		font-size: 6.4rem;
	}

	.en-page .bg_marker span {
		font-size: 6rem;
		margin-left: 0.5rem;
	}
}

/*----------------------------------
  さらに
----------------------------------*/

.sarani {
	padding-top: var(--gap_content);
}


.sarani_title,
.sarani_title_en {
	display: flex;
	justify-content: center;
	align-items: flex-end;
}

.sarani_title>p,
.sarani_title_en>p {
	color: #FFFFFF;
	font-size: 3.4rem;
	font-weight: 600;
	line-height: 40px;
	background-repeat: no-repeat;
	background-position: center;
}

.sarani_title>p {
	padding: 8px 24px 0 24px;
	background-image: url(../images/sarani_title_bg.svg);
	background-repeat: no-repeat;
}

.sarani_title_en>p {
	padding: 5px 26px 2px 28px;
	background-image: url(../images/sarani_title_bg_en.svg);
	background-repeat: no-repeat;
}

.sarani_title>img,
.sarani_title_en>img {
	width: 60px;
	margin: 0 0 0 8px;
}

.wrap_sarani {
	margin: 0 auto;
	max-width: 570px;
	padding: 16px;
}

.sarani_sup {
	color: #FF0000;
	margin-top: 16px;
}


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

	.tap1-3 .note p {
		margin-left: auto;
		margin-right: auto;
		width: -moz-fit-content;
		width: fit-content;
		padding: 1.6rem;
	}
}

@media screen and (min-width:1000px) {
	.tap1-3 h2 {
		margin-top: 1.6rem;
		font-size: min(calc(1vw + 14px), 2.8rem);
	}
}

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

	.tap_flex,
	.sarani_flex {
		display: flex;
		justify-content: center;
	}

	.wrap_tap {
		margin: 0;
	}

	.wrap_sarani {
		margin: 0;
		padding: 16px 40px 0 40px;
	}

	.tap {
		width: 350px;
	}

	.tap_flex_ord,
	.tap_sarani_ord {
		display: flex;
		flex-direction: column;
	}

	.tap_flex_ord p {
		order: 1;
	}

	.tap img {
		margin: 4px auto 24px auto;
		width: 100%;
	}

	.tap_sarani_ord>div {
		order: 1;
	}

	.tap_sarani_ord>img {
		margin: 18px auto 24px auto !important;
		width: 230px;
	}

}


/*----------------------------------
  帯 ロゴ・AppStoreへのリンク
----------------------------------*/

.applink-area {
	width: 100%;
	background-color: var(--color_main);
	color: var(--color_text_wh);
}

.app_logo {
	width: 70%;
	max-width: 250px;
}

.app_icon {
	border: solid 1px #FFFFFF;
	border-radius: 20px;
	width: 130px;
	margin: 16px auto;
}

.bg_gry {
	background-color: #F9F9F9;
	padding: 40px 0;
}


.tokkyo>div,
.tokkyo_en>div {
	margin: 0 auto;
	font-size: 1.4rem;
}

.tokkyo>div {
	width: 180px;
	letter-spacing: 0.1em;
}

.tokkyo_en>div {
	width: 180px;
	letter-spacing: 0;
}

.tokkyo .note,
.tokkyo_en .note {
	display: inline-block;
	padding-top: 4px;
	border-top: 1px solid #fff;

}

.app_ios {
	width: 220px;
	margin-left: auto;
	margin-right: auto;
	margin: 16px auto;
}

/*----------------------------------
  紹介動画
------------------------------------*/



.sec_mv_text {
	margin-top: var(--gap_content);
	margin-bottom: var(--gap_content);
}

.sec_mv_content {
	margin-left: auto;
	margin-right: auto;
	text-align: left;

}

.movie_max {
	width: 100%;
	max-width: 860px;
	margin: 0 auto;
}

.movie_max:has(.youtube_9_16) {
	width: min(100%, 380px);
	aspect-ratio: 9 / 16;
}

/* .sec_mv .movie_max:has(.youtube_9_16) {
	margin: 0 auto 0 0;
}

.sec_howtomv .movie_max:has(.youtube_9_16) {
	margin: 0 0 0 auto;
} */

.youtube_16_9 {
	padding-top: 56.25%;
	width: 100%;
	position: relative;
}

.youtube_9_16 {
	padding-top: 177.78%;
	width: 100%;
	position: relative;
}

.youtube_16_9 iframe,
.youtube_9_16 iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
}

.tv_link {
	border: solid 1px var(--color_main);
	border-radius: 8px;
	margin: 20px auto 0 auto;
}

.tv_link p {
	padding: 12px 16px 6px 16px;
}

.tv_link .linktxt {
	color: var(--color_main);
	font-weight: 600;
	line-height: 32px;
}

/*----------------------------------*/

.sec_howtomv {
	text-align: left;
	background-color: var(--color_base);
}

.sec_ttl {
	text-align: center;
	margin-bottom: 0 8px 40px;
}

.sec_mv_wrap {
	margin-top: var(--gap_content_l);
}

.sec_mv_wrap:has(.youtube_9_16) .sec_mv_content {
	width: fit-content;
}

.sec_howtomv li {
	border-left: 1px solid var(--color_accent);
	list-style: none;
	padding: 12px 0 12px 24px;
	position: relative;
}

.sec_howtomv ol li::after {
	content: "";
	display: block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background-color: var(--color_accent);
	left: -5px;
	top: calc(12px + 0.9rem);
	position: absolute;
}

.sec_mv .sec_mv_wrap:first-child,
.sec_howtomv .sec_mv_wrap:first-child {
	flex-direction: row-reverse;
}

.sec_howtomv dl {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
}

.sec_howtomv dt {
	width: 25%;
}

.sec_howtomv dd {
	width: 100%;
}

@media screen and (min-width:400px) {
	.sec_howtomv dl {
		flex-direction: row;
	}

	.sec_howtomv dt {
		text-align: center;
	}

	.sec_howtomv dd {
		width: 75%;
	}


}

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

	.sec_howtomv .appname,
	.sec_mv .appname {
		padding: 0 0.2em;
		line-height: 53px;
	}
}

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


	.sec_mv_wrap {
		margin-top: var(--gap_content_l);
		display: flex;
		gap: 4%;
	}

	.sec_mv_wrap:has(.youtube_9_16) {
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}

	.sec_mv .sec_mv_wrap:has(.youtube_9_16) .sec_mv_content {
		width: calc(100% - 380px);
	}

	.sec_mv_wrap>div {
		width: 48%;
	}

	.ja .sec_howtomv .movie_max {
		width: 60%;
		/* max-width: 60%; */
	}

	.ja .sec_howtomv .movie_max:has(.youtube_9_16) {
		max-width: 380px;
	}

	/* .sec_howtomv .sec_mv_content {
		width: calc(100% - 624px);
	} */

}



/*----------------------------------
  お知らせ 注意事項 SNS
----------------------------------*/

.information,
.attention {
	padding: var(--gap_content) 0;
}

.wrap_info {
	margin: 20px auto 26px auto;
}

.attention {
	background-color: var(--color_base);
}

section:has(.wrap_sns) {
	padding-top: 0;
	padding-bottom: 0;
}

.wrap_sns {
	padding: 40px 16px 22px 16px;
}

.sns_icon {
	display: flex;
	justify-content: center;
	margin: 0 auto;
	width: 280px;
}

.sns_icon img {
	width: 40px;
}

/*----------------------------------
  フッター
------------------------------------*/

.wrap_footer {
	padding: 16px;
}

footer {
	font-size: 1.0rem;
	text-align: center;
	color: #ffffff;
	background: #332F2B;
	height: 24px;
}


.br_360,
.br_360-680,
.br_360-720,
.br_390-720,
.br_400-1400,
.br_449,
.br_540,
.br_612,
.br_780,
.br_1000-1300,
.br_1300 {
	display: none;
}


/**
 * MediaQuery Break Point
 *      - 479	：スマホ(縦)
 *  480 - 767	：スマホ(横)・タブレット
 *  768 - 		：タブレット・PC
**/

@media screen and (min-width: 360px) {
	.br_360 {
		display: block;
	}

	.br_360-680 {
		display: block;
	}

	.br_360-720 {
		display: block;
	}
}

@media screen and (min-width: 390px) {
	.br_390-720 {
		display: block;
	}
}

@media screen and (min-width: 400px) {
	.br_400-1400 {
		display: block;
	}

}

@media screen and (min-width: 450px) {
	.br_450 {
		display: none;
	}

	.br_449 {
		display: block;
	}

	.app_qr img {
		display: block;
	}

	.applink_logo_tokkyo {
		width: 180px;
	}

	.applink_wrap .app_ios {
		width: 140px;
	}
}

@media screen and (min-width: 520px) {
	.br_520-1300 {
		display: none;
	}
}

@media screen and (min-width: 540px) {
	.br_540 {
		display: block;
	}
}

@media screen and (min-width: 600px) {
	.br_600 {
		display: none;
	}
}

@media screen and (min-width: 612px) {
	.br_612 {
		display: block;
	}
}

@media screen and (min-width: 680px) {
	.br_360-680 {
		display: none;
	}

}

@media screen and (min-width: 720px) {
	.br_360-720 {
		display: none;
	}

	.br_u720,
	.br_390-720 {
		display: none;
	}
}

@media screen and (min-width: 780px) {
	.br_780 {
		display: block;
	}
}

@media screen and (min-width: 1000px) {
	body {
		font-size: 1.8rem;
		line-height: 30px;
	}

	/* h3 {
		font-size: 2.6rem;
		line-height: 36px;
	} */

	#fixed-header {
		padding-left: 20px;
		padding-right: 20px;
	}

	#fixed-header::before {
		content: "";
		display: block;
		width: 89px;
		height: 0;
	}

	.fixed_logo {
		width: 140px;
	}

	.fixed-navi {
		width: auto;
	}

	.fixed-navi-lang {
		font-size: 1.2rem;
		padding: 0px 20px;
	}

	.fixed-navi-applink {
		display: none;
	}

	.note {
		font-size: 1.3rem;
		line-height: 24px;
	}

	.bg_img {
		background-image: url(../images/main_bg_pc.png);
	}


	.header_logo {
		width: 200px;
	}

	.tokkyo {
		margin: 0;
	}


	.tokkyo_en>p {
		font-size: 1.1rem !important;
		line-height: 20px !important;
	}


	.promotion p {
		line-height: 64px;
		font-size: 3rem;
	}

	.promotion p span {
		font-size: 4.4rem;
		padding-left: 8px;
	}

	.promotion_en p {
		line-height: 48px;
		font-size: 2.2rem;
	}

	.promotion_en p span {
		font-size: 4rem;
	}

	.inner {
		max-width: 860px;
	}


	.wrap {
		padding: 60px 0;
	}

	.br_1000-1300 {
		display: block;
	}

	.br_u1000 {
		display: none;
	}

}

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

	#fixed_app {
		position: fixed;
		background-color: var(--color_main);
		color: #fff;
		padding: 8px 0;
		width: 136px;
		border-radius: 8px 0 0 8px;
		z-index: 10;
	}

	#fixed_app.is-show {
		bottom: 8px;
	}

	#fixed_app .app_qr {
		width: 120px;
	}

	.inner {
		width: 90%;
		max-width: 970px;
	}

	.br_400-1400 {
		display: none;
	}

	.br_1000-1300 {
		display: none;
	}

	.br_520-1300 {
		display: block;
	}

	.br_u1300 {
		display: none;
	}
}

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

	.inner {
		width: 90%;
		max-width: 1300px;
	}

	.br_u1500 {
		display: none;
	}
}



/*----------------------------------
メインビジュアル
-----------------------------------*/


.bg_img {
	color: #FFFFFF;
	background-image: url(../images/main_bg_sp.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: left center;
}

.main_title_img {
	position: relative;
	margin: auto;
	width: 100%;
	height: clamp(667px, 100vh, 852px);

}

.main_img_0620 {
	position: absolute;
	bottom: 0;
	width: calc(100% + 140px);
	left: -70px;
	right: -70px;
}

.main_img_0620_bg {
	position: absolute;
	bottom: 0;
	width: min(100%, 1020px);
	height: 100%;
	background-image: url(../images/iPhone_te.png);
	background-repeat: no-repeat;
	background-position: 50% bottom;
	background-size: min(calc(100% + 120px), 700px);
}

.main_img_0620_bg.bg_en {
	background-image: url(../images/iPhone_te_en.png);
}

.main_title_0620 {
	position: absolute;
	right: 0;
	left: 0;
	margin: auto;
	filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.3));
	animation-name: fadeUpAnime;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
	opacity: 0;
	object-fit: contain;
	width: clamp(200px, 64%, 380px);
	top: 60px;
}

@keyframes fadeUpAnime {
	from {
		opacity: 0;
		transform: translateY(100px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media screen and (min-width: 400px) {
	.main_title_img {
		height: clamp(800px, 100vh, 932px);
	}

	.main_img_0620 {
		width: calc(100% + 160px);
		left: -80px;
		right: -80px;
	}

	.main_img_0620_bg {
		background-size: min(calc(100% + 160px), 760px);
	}

}


@media screen and (min-width: 450px) {
	.main_title_img {
		height: clamp(840px, 100vh, 1194px);
	}

	.main_img_0620 {
		width: min(calc(90% + 180px), 840px);
		left: -90px;
		right: -90px;
	}

	.main_img_0620_bg {
		background-size: min(calc(90% + 180px), 800px);
	}

	.main_title_0620 {
		width: min(64%, 380px);
		top: 80px;
	}

}

@media screen and (min-width: 600px) {
	.main_title_img {
		height: clamp(940px, 100vh, 1080px);
	}
}

@media screen and (min-width: 1000px) {
	.bg_img {
		background-image: url(../images/main_bg_pc.png);
		background-position: center center;
	}

	.main_title_img {
		height: clamp(750px, calc(100vh - 287px), 1280px);
	}

	.main_img_0620 {
		width: 830px;
		left: auto;
		right: calc(52% - 160px);
	}

	.main_img_0620_bg {
		width: 830px;
		background-size: 100%;
		left: auto;
		right: calc(52% - 160px);
		background-position: center bottom;
	}

	.main_title_0620 {
		width: 480px;
		margin: auto 0;
		left: calc(58% - 148px);
		top: 0;
		bottom: 0;
	}

	@keyframes fadeUpAnime {
		from {
			opacity: 0;
			transform: translateY(70px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
}

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

	.br_1300 {
		display: block;
	}

	.main_title_img {
		height: clamp(750px, calc(100vh - 247px), 1180px);
	}

	.main_img_0620 {
		width: 880px;
	}

	.main_img_0620_bg {
		width: 880px;
	}

	.main_title_0620 {
		width: 520px;
	}
}

/*------- en-page -------*/

@media screen and (min-width: 1000px) {
	.en-page .main_title_img {
		height: clamp(750px, calc(100vh - 309px), 1180px);
	}
}

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

	.en-page .main_title_img {
		height: clamp(750px, calc(100vh - 331px), 1180px);
	}
}

.en-page.en2 .information {
	background-color: var(--color_base);
}