@charset "utf-8";
/*
Theme Name: aoieir
Version: 1.0
Template: arkhe
*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Urbanist:wght@400;500;600&display=swap');

:root {
	--ark-padding--container: min(28px, 3vw);
	--keycolor: #2e7cd0;
	--gfonts: "Noto Sans JP", sans-serif;
}


img
{
	pointer-events: none;
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-moz-touch-callout:none;
	-moz-user-select:none;
	user-select:none;
}

.container-loading
{
	position: fixed;
	z-index: 1000;
	width: 100%;
	height: 100vh;
	background-color: var(--keycolor);
	
	&.hide {
		opacity: 0;
		pointer-events: none;
		transition: opacity 1s;
	}
	
	.loading {
		width:150px;
		height:150px;
		position:absolute;
		top:50%;
		left:50%;
		margin-top:-75px;
		margin-left:-75px;

		& .loading-block {
			width:40px;
			height:40px;
			position:absolute;
			
			& img
			{
				width: 100%;
				height: 100%;
				object-fit: contain;
			}
		}

		& .loading-block:nth-child(1) {
			animation: top-left 3s infinite;
		}

		& .loading-block:nth-child(2) {
			animation: top-right 3s infinite;
		}

		& .loading-block:nth-child(3) {
			animation: bottom-left 3s infinite;
		}

		& .loading-block:nth-child(4) {
			animation: bottom-right 3s infinite;
		}
	}

}
@-webkit-keyframes top-left {
	0%  { left: 25px; top:25px; }
	25% { left: 75px; top:25px; transform: rotate(90deg) }
	50% { left: 75px; top: 75px; transform: rotate(180deg) }
	75% { left: 25px; top: 75px; transform: rotate(270deg) }
	100%  { left: 25px; top: 25px; transform: rotate(360deg) }
}
@-webkit-keyframes top-right {
	0% { left: 75px; top: 25px; }
	25% { left: 75px; top: 75px; }
	50% { left: 25px; top: 75px; }
	75%  { left: 25px; top: 25px; }
	100% { left: 75px; top: 25px; }
}
@-webkit-keyframes bottom-left {
	0% { left: 75px; top: 75px; }
	25% { left: 25px; top: 75px; transform: rotate(90deg) }
	50%  { left: 25px; top: 25px; transform: rotate(180deg) }
	75%  { left: 75px; top: 25px; transform: rotate(270deg) }
	100% { left: 75px; top: 75px; transform: rotate(360deg) }
} 
@-webkit-keyframes bottom-right {
	0% { left: 25px; top: 75px; }
	25%   { left: 25px; top: 25px; }
	50% { left: 75px; top: 25px; }
	75% { left: 75px; top: 75px; }
	100% { left: 25px; top: 75px; }
}

.l-header__body
{
	background-image: url("assets/img/bg_header.webp");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}


/* ======================================
    Global Menu
====================================== */
.c-drawerNav
{
	font-family: barlow-condensed, sans-serif;
	font-size: 1.4rem;
	font-weight: 400;
	text-align: center;
	
	& .wpml-ls-menu-item
	{
		font-size: 1.1rem;
	}
	& .wpml-ls-menu-item a
	{
		justify-content: center;
		padding-left: var(--ark-nav-padding--R, .5rem);
		padding: var(--ark-nav-padding--Y, .75rem) var(--ark-nav-padding--R, .5rem) var(--ark-nav-padding--Y, .75rem) var(--ark-nav-padding--R, .5rem);
	}
	& .wpml-ls-native:lang(ru), .wpml-ls-native:lang(ja), .wpml-ls-native:lang(zh-hans), .wpml-ls-native:lang(zh-hant), .wpml-ls-native:lang(ko)
	{
		font-size: .8em;
	}
}

.p-drawer {
    background-color: rgba(14, 86, 164, 0.95)
}
.c-drawerNav
{
    border-bottom: none;
    border-top: none;
}
.c-drawerNav .menu-item
{
    border-bottom: none;
}

.drawer-relation-links {
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 40px;
}
.drawer-relation-links a {
    width: 30px;
    height: 30px;
    display: block;
	position: relative;
		
	& span
	{
		position: absolute;
		bottom: -1.2em;
		left: 50%;
		transform: translateX(-50%);
		color: #fff;
		line-height: 1;
		font-size: 0.74rem;
		text-align: center;
	}
}
.drawer-relation-links img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.c-iconBtn {
	animation: blinking 1s ease-in-out infinite alternate;
}
@keyframes blinking {
	0% {opacity: 0.6;}
	100% {opacity: 1;}
}
.c-iconBtn__icon
{
    height: 28px !important;
    width: 28px !important;
}



.l-header__center {
    grid-area: left;
}


/* ======================================
    Layout
====================================== */

.bg
{
	& .content-visual
	{
		display: none;
	}
}

.l-content
{
	padding-bottom: 30px;
	
	
	& .content-visual
	{
		position: relative;
		
		& img
		{
			vertical-align: bottom;
		}
			
		& .kv-logo
		{
			width: 50%;
			position:absolute;
			top:0;
			bottom:0;
			right:0;
			left:0;
			margin:auto;
			
			& img
			{
				width: 100%;
				height: 100%;
				object-fit: contain;
			}
		}
			
		&::before
		{
			content: "";
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0,0,0,0.35);
		}
	}
}
@media only screen and (min-width: 768px)
{
	.bg
	{
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		
		& .content-visual
		{
			position: relative;
			display: block;
			top: 0;
			height: 100%;
			background-color: var(--color-02);
			left: 0;
			width: calc(100% - (var(--ark-width--container) + var(--ark-padding--container)*2));

			& img
			{
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
			& .kv-logo
			{
				position:absolute;
				top:0;
				bottom:0;
				right:0;
				left:0;
				margin:auto;
				width: 30%;
				max-width: 300px;
			
				& img
				{
					width: 100%;
					height: 100%;
					object-fit: contain;
				}
			}
			
			&::before
			{
				content: "";
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0,0,0,0.35);
			}
		}
	}

	.l-content
	{
		& .content-visual
		{
			display: none;
		}
	}
}

/* トップページはアイキャッチ上のオーバーレイを非表示 */
.home .content-visual::before
{
	display: none;
}


.no-unauthorized-reproduction
{
	font-size: .8em;
	
	& strong 
	{
		color: crimson;
	}
}



/* ======================================
    SNS for fotter
====================================== */
.fotter-sns-links
{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #222;
    margin: 0 calc(var(--ark-padding--container)* -1) 30px;
    padding: 20px var(--ark-padding--container);
	
	& a
	{
		width: 24px;
		display: block;
		line-height: 24px;
		margin: 0 10px;
		display: flex;
		align-items: center;
		position: relative;
		
		& span
		{
			position: absolute;
			bottom: -1.2em;
			left: 50%;
			transform: translateX(-50%);
			color: #fff;
			line-height: 1;
			font-size: 0.74rem;
			text-align: center;
		}
	}
}



.l-footer__widgets>.l-container {
	display:inherit;
}
.l-footer__widgets .w-footer+.w-footer {
	margin-left: 0;
}
#icl_lang_sel_widget-2 {
    display: flex;
    justify-content: center;
    margin: 30px 0 0;
}

/* ======================================
    Front Page
====================================== */
.front-header h2
{
	color: var(--keycolor);
	font-family: barlow-condensed, sans-serif;
	font-size: 2rem;
	font-weight: 400;
    line-height: 1;
    margin-bottom: 1em;
    letter-spacing: .2em;
}


.c-postContent
{
	padding-top: 30px;
	padding-bottom: 30px;
}


/* ======================================
    NEWS for Front Page
====================================== */
.sec-front-news
{
    background-color: #000;
    color: #fff;
	margin: 0 calc(var(--ark-padding--container) * -1) 50px;
	padding: 50px var(--ark-padding--container);
}
.viewall {
    color: var(--keycolor);
    display: flex;
	font-size: 0.9rem;
    align-items: center;
    justify-content: flex-end;
    text-decoration: none;
	margin-top: 20px;
	
	& img {
		height: 2em;
	}
}
@media only screen and (min-width: 768px)
{
	.sec-front-news
	{
		margin: 0 calc(var(--ark-padding--container) * -1) 60px;
		padding: 60px var(--ark-padding--container);
	}
}


/* ======================================
    DISCOGRAPHY for Front Page
====================================== */
.sec-front-discography
{
    margin-bottom: 60px;
	
	& .splide__slide
	{
		font-size: 0.85rem;
		
		& .title-release_day
		{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 8px 0;
		}
		
		& .title
		{
			font-family: var(--gfonts);
			font-weight: 700;
			font-size: 1.2rem;
		}
		
		& .type
		{
			background-color: #99c2eb;
			padding: 4px 6px;
			line-height: 1;
			font-size: 0.8rem;
			margin-right: 1em;
		}
		& .release_day
		{
			line-height: 1;
		}
		.sell_type
		{
			list-style: none;
			padding: 0;
			line-height: 1;
			margin-top: 10px;
			
			& li
			{
				padding: 4px 8px;
				background-color: #e5e5e5;
				display: inline-block;
				border-radius: calc(1em + 6px);
			}
		}
	}
	
	& .splide__pagination
	{
		bottom: -30px;
		
		& .splide__pagination__page
		{
            background: #5B96D7;
            margin: 3px 5px;
            height: 10px;
            width: 10px;
			
			&.is-active
			{
				background: #2e7cd0;
				transform: scale(1.5);
			}
        }
	}
}

@media only screen and (min-width: 768px)
{
	.sec-front-discography
	{
		margin-bottom: 70px;
	}
}



/* ======================================
    VIDEO for Front Page
====================================== */
.sec-front-video
{
	margin-bottom: 50px;
	
	& .front-video-splide
	{
		& .front-video-list
		{
			list-style: none;
			padding: 0;
			margin: 0;
		}
		& .splide__pagination {
			position: static;
			margin-top: 10px;
		}	
		& .splide__video__wrapper {
			border-radius: 12px;
		}
		& .splide__video__wrapper div, .splide__video__wrapper iframe, .splide__video__wrapper video {
			border-radius: 12px;
		}
		& .splide__slide img {
			border-radius: 12px;
            width: 100%;
            height: 100%;
            object-fit: cover;
		}
		.splide__pagination__page {
			background: #3F7FC5;
			margin: 3px 5px;
			height: 10px;
			width: 10px;

		}
		& .splide__pagination__page.is-active {
			background: var(--keycolor);
			transform: scale(1.5);
		}
		
		& .splide__video__play {
			opacity: .9;
		}
	}
}
@media only screen and (min-width: 768px)
{
	.sec-front-video
	{
		margin-bottom: 60px;
	}
}




/* ======================================
    RECCOMEND for Front Page
====================================== */
.front-recommend-splide
{
	& .-list
	{
		& a
		{
			display: block;
		}
	}
}


/* ======================================
    NEWS LIST
====================================== */
.p-postList
{
	&.-type-card
	{
		display:inherit;
		
		& .p-postList__item
		{
			flex-basis: auto;
		}
	}
	& .p-postList__title
	{
		font-family: var(--gfonts);
		font-size: 0.9rem !important;
		font-weight: 400;
		line-height: 1.5;
	}
	&.-type-simple
	{
		& .p-postList__link:hover
		{
			background-color: #333;
		}
		& .p-postList__meta
		{
			display: flex;
			justify-content: space-between;
			
			& .p-postList__times {
				order: 2;
			}
			
			& svg
			{
				display: none;
			}
		}
	
	}
}


.c-pageTitle__main
{
    font-family: var(--gfonts);
    line-height: 1.4;
}

.c-bottomSection__title, .c-secTitle, .c-widget>.wp-block-group>.wp-block-group__inner-container>h2, .c-widget__title, h2.widgettitle
{
    font-family: var(--gfonts);
}
.p-postList.-type-card.-related
{
	display: flex;
}
.-related .p-postList__title {
    font-size: .8rem;
}


/* ======================================
    PAGE
====================================== */
.page:not(.home)
{
	& h2
	{
		font-family: var(--gfonts);
		font-size: 1.5rem;
		font-weight: 700;
	}
	& h3
	{
		font-family: var(--gfonts);
		font-size: 1.3rem;
		font-weight: 700;
	}
	& .l-content__body {
		margin-top: 0;
	}
	& .p-topArea {
		min-height: auto;
		padding: 50px 0;

		& .c-pageTitle__main
		{
			color: var(--keycolor);
			font-family: barlow-condensed, sans-serif;
			font-size: 2.1rem;
			font-weight: 400;
			text-align: left;
			text-shadow: none;
		}
		&.-noimg {
			background-color: transparent;
		}
	}
}



.blog
{
	& .l-content__body {
		margin-top: 0;
	}
	
	& .content-main
	{
		background-color: #000;
		color: #fff;
	}

	& .l-footer {
		background-color: #000;
		color: #fff;
	}
	& .p-topArea {
		min-height: auto;
		padding: 50px 0;

		& .c-pageTitle__main
		{
			color: var(--keycolor);
			font-family: barlow-condensed, sans-serif;
			font-size: 2.1rem;
			font-weight: 400;
			text-align: left;
			text-shadow: none;
			letter-spacing: .2em;
		}
		&.-noimg {
			background-color: transparent;
		}
	}
}


/* ======================================
    SINGLE
====================================== */
.single
{
	& h2
	{
		font-family: var(--gfonts);
		font-size: 1.5rem;
		font-weight: 700;
	}
	& h3
	{
		font-family: var(--gfonts);
		font-size: 1.3rem;
		font-weight: 700;
	}

	& .c-pageTitle__main {
		font-size: 1.6rem;
		line-height: 1.5;
	}
}




.wpcf7 form.sent .wpcf7-response-output {
    line-height: 1.5;
    border-radius: 10px;
    background-color: var(--keycolor);
    border: none;
    color: #fff;
    padding: 15px;
    font-weight: 700;
}


.sec-front-discography
{
	& .-songs {
	
		& .-song
		{
			padding-bottom: 5px;
			
			& .-jacket
			{
				& a
				{
					display: block;
					margin-bottom: 3px;
				}
			}
			& .-type
			{
				font-size: 0.94em;
			}
			& .-type::before
			{
				content: "- ";
			}
			& .-type::after
			{
				content: " -";
			}

			& .-title
			{
				font-weight: 400;
				font-size: 1rem;
				margin-bottom: 5px;

				& a
				{
					color: #000;
					text-decoration: none;
				}
			}

			& .-release_day {
				font-family: barlow-condensed, sans-serif;
				color: #404040;
				margin-bottom: 10px;
			}

			& .-sell_type {
				display: flex;
				font-size: 0.84em;
				list-style: none;
				padding: 0;

				& a, .-nolink
				{
					border: 1px solid #40a9ff;
					color: #40a9ff;
					display: block;
					font-size: 0.84em;
					font-weight: 400;
					line-height: 1;
					margin-right: 10px;
					padding: 4px 7px;
					text-decoration: none;
					transition-duration: .3s;
					letter-spacing: 0.05em;
				}
				
				& .-nolink
				{
					border: 1px solid #FFFFFF;
					color: #ffffff;
				}

				& a:hover
				{
					background-color: #f0f0f0;
				}
			}
		}
	}
}


.post-type-archive-discography
{
	& .content-main
	{
        background-color: #2b2c34;
        color: #fff;
	}
	
	& .c-pageTitle__main
	{
		color: var(--keycolor);
		font-family: barlow-condensed, sans-serif;
		font-size: 2.1rem;
		font-weight: 400;
		margin-bottom: 30px;
	}
	& .l-footer
	{
        background-color: #2b2c34;
        color: #fff;
	}
	& .-songs {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 40px 24px;

	
		& .-jacket
		{
			& a
			{
				display: block;
			}
		}
		& .-type
		{
			font-size: 0.84em;
		}
		& .-type::before
		{
			content: "- ";
		}
		& .-type::after
		{
			content: " -";
		}

		& .-title
		{
			font-weight: 400;
			font-size: 1rem;
			margin-bottom: 10px;
			
			& a
			{
				color: #fff;
				text-decoration: none;
			}
		}

		& .-release_day {
			font-family: barlow-condensed, sans-serif;
			color: #dfdfdf;
			margin-bottom: 10px;
		}

		& .-sell_type {
			display: flex;
			font-size: 0.84em;
			list-style: none;
			padding: 0;

			& a, .-nolink
			{
				border: 1px solid #40a9ff;
				color: #40a9ff;
				display: block;
				font-size: 0.84em;
				font-weight: 400;
				line-height: 1;
				margin-right: 10px;
				padding: 4px 7px;
				text-decoration: none;
				transition-duration: .3s;
				letter-spacing: 0.05em;
			}

			& .-nolink
			{
				border: 1px solid #FFFFFF;
				color: #ffffff;
			}

			& a:hover
			{
				background-color: #f0f0f0;
			}
		}
	
	}
}

.single-discography
{
	
	& .content-main
	{
        background-color: #2b2c34;
        color: #fff;
	}
	
	& .-contents_title
	{
		color: var(--keycolor);
		font-family: barlow-condensed, sans-serif;
		font-size: 2.1rem;
		font-weight: 400;
		margin-bottom: 30px;
	}
	& .l-footer
	{
        background-color: #2b2c34;
        color: #fff;
	}
	
	& .-type::before
	{
		content: "- ";
	}
	& .-type::after
	{
		content: " -";
	}

	& .-release_day {
        font-family: barlow-condensed, sans-serif;
		color: #dfdfdf;
		margin-bottom: 10px;
	}
	
	& .-sell_type {
		display: flex;
		list-style: none;
		margin: 0 0 36px;
		padding: 0;
		
	
		& a, .-nolink
		{
			border: 1px solid #40a9ff;
			color: #40a9ff;
			display: block;
            font-size: 0.84em;
            font-weight: 400;
            line-height: 1;
            margin-right: 10px;
            padding: 4px 7px;
            text-decoration: none;
            transition-duration: .3s;
            letter-spacing: 0.08em;
		}

		& .-nolink
		{
			border: 1px solid #FFFFFF;
			color: #ffffff;
		}
		
		& a:hover
		{
			background-color: #f0f0f0;
		}
	}
	& .-tracklist
	{
		font-family: var(--gfonts);
		margin-bottom: 60px;
		
		& .-title {
			font-size: 0.84em;
			margin-bottom: 5px;
		}

		& .-songs {
		}
	}
	
	& .-collab
	{
		font-family: var(--gfonts);
		margin-bottom: 60px;
		
		& .-title {
			font-size: 0.84em;
			margin-bottom: 5px;
		}
		
		& .-detail {
			font-size: 0.84em;
		}
	}
	
	& .c-pageTitle__main
	{
		font-weight: 400;
		font-size: 1.8rem;
		margin-bottom: 10px;
	}
	
	& .-music_videos
	{
		& h2
		{
			color: #708090;
			font-family: "Urbanist", serif;
			font-weight: 400;
			font-size: 1.6rem;
			margin-bottom: 30px;
			text-align: center;
		}

		& .-music_video {
			position: relative;
			padding-bottom: 56.25%;
			overflow: hidden;
			max-width: 100%;
			height: auto;
			margin: 0 0 30px;

			&:last-of-type
			{
				margin: 0;
			}
		}

		& .-music_video iframe,
		.-music_video object,
		.-music_video embed
		{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}

	}
}




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

	.content-main
	{
		margin: 0 0 0 calc(100% - (var(--ark-width--container) + var(--ark-padding--container)*2));
		max-width: calc(var(--ark-width--container) + var(--ark-padding--container)*2);
		border-left: 1px solid #8d8d8d;
		min-height: 100vh;
		position: relative;
	}
	
	.sec-single,
	.sec-album
	{
		& .ark-block-columns__inner
		{
			row-gap: 0;
		}

	}

	.l-header[data-pcfix="1"]
	{
		position: sticky;
	}
	
	
}


.gfonts
{
	font-family: "Noto Sans JP";
}

.grecaptcha-badge
{
	display:none;
}



.mb-1
{
	margin-bottom: 10px;
}
.mb-2
{
	margin-bottom: 20px;
}
.mb-3
{
	margin-bottom: 30px;
}