@charset "utf-8";

/* =======================================
	reset
======================================= */
html,body,div,span,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;font-weight:normal;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ul{list-style:none !important}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle} button {background:none;border:none;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;padding:0;}

* {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;word-break:break-all;}

:root {
	--colorGold:#bf9833;
}

/* =======================================
	common
======================================= */
.pc {display:none;}
.pc-wide {display:none;}
.sp {display:block;}

body {
	position:relative;
	width:100%;
	min-height:100lvh;
	margin:0 auto;
	text-align:center;
	color:black;
	line-height:1;
	font-family:'Noto Sans JP', sans-serif;
}

body.hideBody {
	overflow:hidden;
}

body.showBody {
	overflow:visible;
}

img {max-width:100%;height:auto;vertical-align:bottom;display:block;}
table {width:100%;}
tr, td {vertical-align:top;}

a {
	outline:none;
	text-decoration:underline;
}

a:link {color:white;text-decoration:none;}
a:visited {color:white;text-decoration:none;}
a:hover {color:white;text-decoration:none;}
a:active {text-decoration:none;}


/* =======================================
	layout
======================================= */
.wrapper {
	position:relative;
	width:100%;
	margin:0 auto;
	min-width:unset;
}

main  {
	position:relative;
	width:100%;
	min-height:100lvh;
	max-width:640px;
	margin:0 auto;
}

main.wide  {
	max-width:unset;
	z-index:10;
}

aside {
	display:none;
}

section {
	position:relative;
	width:100%;
	margin:0 auto;
	z-index:1;
}


/* =======================================
	text
======================================= */
h1.sub01 {
	position:relative;
	width:81.8%;
	margin:2.4em auto;
}

h1.sub02 {
	position:relative;
	width:77.4%;
	margin:2.4em auto;
}

h2 {
	position:relative;
	width:19.5%;
	margin:0 auto 0.8em;
	display:flex;
	justify-content:center;
}

h3 {
	position:relative;
	width:100%;
	margin:3.6em auto 0;
	color:var(--colorGold);
	font-weight:bold;
	line-height:1.6;
	font-size:clamp(0.6rem, 0.216rem + 1.92vw, 1.2rem);
}

h3.top {
	margin:0 auto 1em;
}


/* =======================================
	index
======================================= */
body.index::before {
	content:"";
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100vh;
	background:url("../images/okawari/dia_gld_ptn.png") left top repeat;
}

header {
	display:flex;
	justify-content:center;
	align-items:center;
	position:relative;
	width:100%;
	height:100lvh;
	background:linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 5%, rgba(255,253,208,1) 100%);
	z-index:10;
}

header::before {
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	opacity:0;
	transition:opacity 0.2s ease;
	z-index:1;
}

canvas {
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:0;
	z-index:0;
}

header.withBG {
	height:auto;
	background:none;
}

header.withBG::before {
	opacity:1;
}

.loading {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:fff;
	display:flex;
	justify-content:center;
	align-items:center;
	z-index:9999;
}

.loading.hide {
	opacity:0;
	visibility:hidden;
	transition:opacity 0.5s ease, visibility 0.5s ease;
}

.kv-wrap {
	position:relative;
	width:100%;
	height:100%;
	padding:50% 0 10%;
	display:flex;
	justify-content:center;
	align-items:center;
	opacity:0;
	visibility:hidden;
	transition:opacity 0.3s ease;
}

.kv-catch {
	display:block;
	position:absolute;
	top:45%;
	width:90%;
	margin:0 auto;
	z-index:2;
	opacity:0;
	visibility:hidden;
	transition:opacity 0.3s ease;
}

.kv-wrap.loaded,
.kv-catch.loaded {
	opacity:1;
	visibility:visible;
}

.kv-main {
	width:67.7%;
	margin:0 auto;
	display:block;
	position:relative;
	z-index:4;
}

.kv-sub {
	width:92.8%;
	margin:-60% auto 0;
	display:block;
	position:absolute;
	z-index:3;
}

.kv-logo {
	width:47.7%;
	margin:60% 0 0 -3%;
	display:block;
	position:absolute;
	z-index:5;
}

.main-banners {
	width:100%;
	margin:0 auto;
}

.main-banners ul {
	width:84.4%;
	margin:0 auto;
	display:block;
}

.main-banners ul li:not(:last-child) {
	margin:0 auto 2.4em;
}

section#top-banners {
	padding:2em 0 2em;
}

section#top-movie {
	padding:2em 0 0;
}

.top-x {
	width:63%;
	margin:0 auto 4em;
	display:flex;
	justify-content:center;
}


.nbb-wrapper {
	position:relative;
	overflow:hidden;
	width:120px;
	height:auto;
}

.nbb {
	width:120px;
	height:auto;
}


/* =======================================
	nav
======================================= */
nav {
	width:100%;
	margin:0 auto;
	position:sticky;
	top:0;
	background:black;
	z-index:1000;
	transition:background 0.3s ease;
}

nav.special {
	background:rgba(0,0,0,0.5);
}

nav ul {
	display:flex;
	align-items:center;
	padding:8px 0;
}


nav ul li:nth-child(1) {
	width:25%;
	margin:0 auto;
	padding-left:10px;
	display:flex;
	justify-content:start;
	align-items:center;
}

nav ul li:nth-child(2) {
	width:50%;
	display:flex;
	justify-content:center;
	align-items:center;
}

nav ul li:nth-child(3) {
	width:25%;
	margin:0 auto;
	padding-right:10px;
	display:flex;
	justify-content:end;
	align-items:center;
}

nav img {
	height:48px;
}

.nav-hide {
	visibility:hidden;
}

#drawer-menu {
	position:fixed;
	top:-100%;
	left:0;
	width:100%;
	height:100dvh;
	background:url("../images/okawari/sp_10th_site_menu_bg.jpg") left top repeat-y;
	background-size:100% auto;
	transition:top 0.5s ease, background 0.5s ease;
	padding-top:10vh;
	text-align:center;
	overflow:hidden;
	z-index:999;
}

#drawer-menu ul {
	width:80%;
	margin:0 auto;
	display:flex;
	flex-wrap:wrap;
	gap:4%;
}

#drawer-menu ul li:not(:first-child) {
	width:48%;
	margin-bottom:12px;
}

#drawer-menu ul li:first-child {
	width:72%;
	margin:0 auto 32px;
}


#drawer-menu.open {
	top:0;
}

#menu-toggle {
	position:relative;
	z-index:1001;
}


/* =======================================
	10th_anniversary
======================================= */
body.anniversary::before {
	content:"";
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100vh;
	background:url("../images/okawari/uzu_ptnSP.png") left top repeat;
	background-size:100%;
}

body.anniversary main {
	position:relative;
	max-width:640px;
	padding:0 18px 60px;
}

body.anniversary main::before {
	content:"";
	width:18px;
	min-height:100lvh;
	position:absolute;
	top:0;
	left:0;
	height:100%;
	background:url("../images/okawari/bg_vertical.jpg");
	background-repeat:repeat-y;
	background-size:18px auto;
	animation:anniversaryL 30s infinite linear;
}

body.anniversary main::after {
	content:"";
	width:18px;
	min-height:100lvh;
	position:absolute;
	top:0;
	right:0;
	height:100%;
	background-image:url("../images/okawari/bg_vertical.jpg");
	background-repeat:repeat-y;
	transform:rotate(180deg);
	background-size:18px auto;
	animation:anniversaryR 30s infinite linear;
}

@keyframes anniversaryL {
	0% {background-position-y:0;}
	100% {background-position-y:-486px;}
}

@keyframes anniversaryR {
	0% {background-position-y:0;}
	100% {background-position-y:-486px;}
}

.anniversary-head {
	position:relative;
	width:100%;
	height:0;
	margin:0 auto;
	padding-top:calc(1200 / 820 * 100%);
	background:url("../images/okawari/header.jpg") left top no-repeat;
	background-size:cover;
}

.sc_collabo {
	position:relative;
	width:100%;
	height:0;
	margin:0 auto;
	padding-top:calc(879 / 820 * 100%);
	background:url("../images/okawari/sc_collabo.jpg") left top no-repeat;
	background-size:cover;
}

.sc_collabo_egg {
	width:32.6%;
	position:absolute;
	top:34%;
	left:0;
	right:0;
	margin:auto;
}

.sc_collabo_youtube {
	width:62%;
	position:absolute;
	bottom:5%;
	left:0;
	right:0;
	margin:auto;
}

.cp section {
	height:0;
}

.cp section:not(:last-of-type) {
	position:relative;
	margin-bottom:2em;
}

#cp1 {
	background:url("../images/okawari/cp1.png");
	padding-top:calc(2054 / 820 * 100%);
	background-size:cover;
}

#cp2 {
	background:url("../images/okawari/cp2.png");
	padding-top:calc(1325 / 820 * 100%);
	background-size:cover;
}

#cp3 {
	background:url("../images/okawari/cp3.png");
	padding-top:calc(929 / 820 * 100%);
	background-size:cover;
}

#cp4 {
	background:url("../images/okawari/cp4.png");
	padding-top:calc(954 / 820 * 100%);
	background-size:cover;
}

#cp5 {
	background:url("../images/okawari/cp5.png");
	padding-top:calc(1099 / 820 * 100%);
	background-size:cover;
}

#cp6 {
	background:url("../images/okawari/cp6.png");
	padding-top:calc(1184 / 820 * 100%);
	background-size:cover;
}

#cp7 {
	background:url("../images/okawari/cp7.png");
	padding-top:calc(1179 / 820 * 100%);
	background-size:cover;
}

#cp8 {
	background:url("../images/okawari/cp8.png");
	padding-top:calc(1004 / 820 * 100%);
	background-size:cover;
}

#cp9 {
	background:url("../images/okawari/cp9.png");
	padding-top:calc(860 / 820 * 100%);
	background-size:cover;
}

#cp10 {
	background:url("../images/okawari/cp10.png");
	padding-top:calc(811 / 820 * 100%);
	background-size:cover;
	margin-bottom:3em;
}

#other_cp {
	margin-top:2em;
	background:url("../images/okawari/other_cp1.png");
	padding-top:calc(780 / 820 * 100%);
	background-size:cover;
}

#other_cp2 {
	background:url("../images/okawari/other_cp2.png");
	padding-top:calc(880 / 820 * 100%);
	background-size:cover;
}

#other_cp3 {
	background:url("../images/okawari/other_cp3.png");
	padding-top:calc(541 / 820 * 100%);
	background-size:cover;
}

.dt_btn {
	width:60%;
	position:absolute;
	margin:auto;
	bottom:5%;
	left:0;
	right:0;
}

.dt_btn-blue {
	width:54.6%;
	position:absolute;
	margin:auto;
	bottom:5%;
	left:0;
	right:0;
}

.cp-head-wrapper {
	position:relative;
	width:100%;
	background-color:#eb0000;
	overflow:hidden;
	padding:8px 0;
}

.cp-head {
	width:100%;
	height:20px;
	background:url("../images/okawari/black_txt.png") left center repeat-x;
	background-size:200px 20px;
	animation:marquee 3s infinite linear;
	will-change:background-position;
}

@keyframes marquee {
	0% {background-position:0;}
	100% {background-position:-200px;}
}

.cp-head-yellow {
	width:100%;
	height:18px;
	background:url("../images/okawari/yellow_txt.png") left center repeat-x;
	background-size:304px 18px;
	animation:marquee-yellow 3s infinite linear;
	will-change:background-position;
}

@keyframes marquee-yellow {
	0% {background-position:0;}
	100% {background-position:-304px;}
}


/* =======================================
	10th_special
======================================= */
body.special::before {
	content:"";
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100vh;
	background:url("../images/okawari/sp_10th_special_bg.jpg"),url("../images/okawari/dia_ptn.png");
	background-position:left top;
	background-repeat:repeat-y,reepat;
	background-size:100% auto,82px;
	background-blend-mode:overlay;
}

body.special main {
	padding-bottom:60px;
}

.special-contents {
	width:91.4%;
	margin:0 auto;
}

.special-contents section:not(:last-of-type) {
	margin-bottom:2em;
}


/* =======================================
	footer
======================================= */
.wave {
	position:relative;
	width:100%;
	height:0;
	margin-top:-8px;
	padding-top:calc(16 / 640 * 100%);
	background:url("../images/okawari/waveSP.png") left top no-repeat;
	background-size:100% auto;
	z-index:9;
}

footer {
	position:relative;
	background:black;
	z-index:9;
	padding-top:0.2em;
}

.footerNav {
	width:100%;
	max-width:980px;
	color:white;
}

.footerDesc {
	text-align:left;
}


/* =======================================
	.pagetop
======================================= */
.pagetop {
	width:56px;
	z-index:9999;
	position:fixed;
	bottom:20px;
	right:20px;
	opacity:0;
	transform:translateY(100px);
	transition:opacity 0.5s, transform 0.5s;
}


/* =======================================
	cpBtn
======================================= */
.cpBtn-container {
	position:fixed;
	left:-180px;
	bottom:20px;
	display:flex !important;
	flex-direction:column;
	gap:10px;
	z-index:1000;
}

.cpBtn {
	width:72px;
	height:90px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:5px;
	opacity:0;
	transform:translateX(-50px);
	transition:all 0.5s ease;
}

.cpBtn.visible {
	opacity:1;
	transform:translateX(200px);
}

.cpBtn.hidden {
	opacity:0;
	transform:translateX(-50px);
}


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

.sp {display:none;}
.pc {display:block;}
.pc-wide {
	display:block;
	visibility:hidden;
	opacity:0;
	transition:opacity 0.3s, visibility 0.3s;
}

a {
	cursor:pointer;
	-webkit-transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	-o-transition:all 0.3s ease;
	transition:all  0.3s ease;
}

nav a:hover,
footer a:hover,
.pc-nav a:hover,
.swiper01 a:hover {
	 -moz-opacity:0.5;
	 opacity:0.5;
}

img.effect {
	display:block;
	width:100%;
	height:auto;
	transition:transform 0.3s ease, filter 0.3s ease;
}

img.effect:hover {
	opacity:1;
	transform:scale(1.05);
}

.wrapper {
	position:relative;
	width:100%;
	margin:0 auto;
	display:flex;
}

main.wide  {
	width:100%;
}

aside:nth-of-type(1) {
	position:relative;
	display:block;
	width:calc((100% - 640px ) * 0.45);
	z-index:1;
}

aside:nth-of-type(2) {
	position:relative;
	display:block;
	width:calc((100% - 640px ) * 0.55);
	z-index:1;
}

h1.sub01 {
	max-width:563px;
}

h1.sub02 {
	max-width:587px;
}

h2 {
	width:100%;
	max-width:159px;
	margin:0 auto 3.2em;
}

h3 {
	margin:3.6em auto 2.4em;
}

.main-banners ul {
	width:90%;
	max-width:1095px;
	display:flex;
	gap:6%;
}

header {
	position:relative;
	width:100%;
	height:100vh;
	padding-top:0;
}

header::before {
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	opacity:0;
}

.kv-wrap {
	width:54%;
	min-width:840px;
	max-width:1251px;
	padding:6vw 0 4vw;
}

.kv-catch {
	display:block;
	position:absolute;
	top:45%;
	width:65.1%;
	max-width:800px;
	margin:0 auto;
	z-index:2;
}

.kv-main {
	width:46%;
	max-width:646px;
	margin:0 auto;
	display:block;
	position:relative;
	z-index:4;
}

.kv-sub {
	width:100%;
	max-width:1411px;
	margin:-6.5% 0 0 -6%;
	display:block;
	position:absolute;
	z-index:3;
}

.kv-logo {
	width:35%;
	max-width:391px;
	margin:41% 0 0 -2%;
	display:block;
	position:absolute;
	z-index:5;
}

.top-x {
	width:50%;
	max-width:517px;
}

.nbb-wrapper {
	position:relative;
	overflow:hidden;
	width:160px;
	height:auto;
}

.nbb {
	width:160px;
	height:auto;
}

nav {
	position:relative;
}

nav.special {
	position:sticky;
}

nav ul {
	padding:12px 0;
}

nav ul li:nth-child(1) {
	visibility:hidden;
}

nav ul li:nth-child(2) {
	width:50%;
	display:flex;
	justify-content:center;
	align-items:center;
}

nav ul li:nth-child(3) {
	visibility:hidden;
}

nav img {
	height:64px;
}

body.anniversary::before {
	background-image:url("../images/okawari/10th_site_bg.jpg"),url("../images/okawari/uzu_ptnPC.png");
	background-position:left top;
	background-repeat:repeat-y,repeat;
	background-size:100% auto,601px;
	background-blend-mode:overlay;
	z-index:-1;
}

body.anniversary main {
	width:640px;
	padding:0 36px 0;
}

body.anniversary main::before {
	width:36px;
	background-size:36px auto;
	animation:anniversaryL 20s infinite linear;
}

body.anniversary main::after {
	width:36px;
	background-size:36px auto;
	animation:anniversaryR 20s infinite linear;
}

body.anniversary .main-inner {
	position:relative;
	padding-bottom:100px;
}

body.anniversary .main-inner::before {
	content:"";
	position:fixed;
	top:0;
	left:calc((100% - 640px ) * 0.45 + 36px);
	margin:auto;
	width:604px;
	height:100vh;
	background:white url("../images/okawari/uzu_ptnPC.png") left top repeat;
	background-size:601px;
}

.pc-logo {
	position:sticky;
	top:2em;
	display:flex;
	justify-content:center;
	margin:0 auto;
	width:80%;
	max-width:200px;
}

@keyframes horizontalShake {
	0% { transform:translateX(0); }
	10% { transform:translateX(-20px); }
	20% { transform:translateX(20px); }
	30% { transform:translateX(-20px); }
	40% { transform:translateX(20px); }
	50% { transform:translateX(0); }
	100% { transform:translateX(0); }
}

.special-contents {
	width:604px;
}

.special-logo {
	display:block;
	position:fixed;
	width:12%;
	max-width:340px;
	top:16%;
	left:5%;
	z-index:1000;
}

.wave {
	width:100%;
	height:25px;
	margin-top:-25px;
	padding-top:0;
	background:url("../images/okawari/wavePC.png") left top repeat-x;
	background-size:72px 25px;
	z-index:999;
}

footer {
	z-index:999;
	padding-top:40px;
}

.cpBtn {
	width:110px;
	height:120px;
}

.cpBtn.visible {
	transform:translateX(calc((100vw - 640px ) * 0.45 + 48px));
}

.pagetop {
	cursor:pointer;
	width:64px;
}

.pagetop img {
	-webkit-transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	-o-transition:all 0.3s ease;
	transition:all  0.3s ease;
}

.dt_btn {
	max-width:456px;
}

.dt_btn-blue {
	max-width:448px;
}

.cp-head-wrapper {
	padding:10px 0;
}

.cp-head {
	height:38px;
	background:url("../images/okawari/black_txt.png") left center repeat-x;
	background-size:377px 38px;
}

@keyframes marquee {
	0% {background-position:0;}
	100% {background-position:-377px;}
}

.cp-head-yellow {
	width:100%;
	height:38px;
	background:url("../images/okawari/yellow_txt.png") left center repeat-x;
	background-size:642px 38px;
	animation:marquee-yellow 4s infinite linear;
	will-change:background-position;
}

@keyframes marquee-yellow {
	0% {background-position:0;}
	100% {background-position:-642px;}
}

#cp10 {
	margin-bottom:4.2em;
}

}


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

.sp {display:none;}
.pc {display:block;}
.pc-wide {visibility:visible;opacity:1;}

.pagetop {
	width:75px;
}

}


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

.nbb-wrapper {
	position:relative;
	overflow:hidden;
	width:200px;
	height:auto;
}

.nbb {
	width:200px;
	height:auto;
}

.pc-nav ul {
	position:sticky;
	top:1.6em;
	width:80%;
	margin:0 auto;
	display:flex;
	flex-wrap:wrap;
	gap:4%;
}

.pc-nav ul li:not(:first-child) {
	width:48%;
	max-width:344px;
	margin:0 auto 12px;
}

.pc-nav ul li:first-child {
	width:64%;
	margin:0 auto 32px;
}

}


@media screen and (min-width:640px) and (max-width:1150px),
       screen and (min-width:640px) and (max-height:380px) {

.pc-nav ul {
	position:absolute;
	top:1.6em;
	left:0;
	right:0;
	width:80%;
	margin:0 auto;
	display:flex;
	flex-direction:column;
}

.pc-nav ul li:not(:first-child) {
	width:64%;
	margin:0 auto 12px;
}

.pc-nav ul li:first-child {
	width:64%;
	margin:0 auto 16px;
}

}

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

.pc-nav ul {
	position:sticky;
	top:1.6em;
	width:80%;
	margin:0 auto;
	padding-bottom:90px;
	display:flex;
	flex-wrap:wrap;
	gap:4%;
}

.pc-nav ul li:not(:first-child) {
	width:48%;
	margin:0 auto 12px;
}

.pc-nav ul li:first-child {
	width:72%;
	max-width:476px;
	margin:0 auto 32px;
}

}