/*
Theme Name: TK
Template: arkhe
Description: 高橋慶オフィシャルサイト用テーマ
Version: 1.0
*/

@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Yusei+Magic&family=Kaisei+Decol:wght@400;500;700&display=swap');

@layer base, element;

/*
CSSルール
Base HTML要素のデフォルトスタイルを設定（例 body、h1、pなど）
Layout ページの主要な構造を構成するスタイル（例 ヘッダー、フッター、サイドバー）
Module 再利用可能なコンポーネントのスタイル（例 カード、ボタン、フォーム）
State コンポーネントの状態や振る舞いを指定するスタイル（例 is-active、is-hidden）
Theme サイト全体の色やフォントのテーマ設定

BlockとElementの区切りアンダースコア2つ ( __ ) で区切る 例 header__logo
Block/ElementとModifierの区切り ハイフン2つ ( -- ) で区切る 例 button--primary, menu__item--active
Block名やElement名、Modifierが複数単語になる場合は、ハイフン1つ ( - ) で区切る 例 main-navigation, button-small, menu-item--active
*/

/* Base--- */


h2 {
 font-optical-sizing: auto;
 font-style: normal;
	position:relative;
}

h2.wp-block-heading::after {
    display: block;
    content: "";
    background: #ccc;
    width: 100%;
    height: 3em;
    clip-path: polygon(0 0, 0 100%, 30% 0);
	position:absolute;
	top: 0;
	z-index: -1;
}
h2 span {
    margin: 0.1em 0 0 0.5em;
    display: inline-block;
}
@media (max-width: 782px) {
 h2 {
  scroll-margin-top: 10em; /* 追記 */
 }
}


/* ---Base */

/* Layout--- */

#content { margin-top: 3em;}

#offers {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 1em;
}

@media (max-width: 782px) {
 #offers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1em;
 }
}
/* ---Layout */

/* Module--- */

.l-header__logo {
 font-family: "Kaisei Decol", sans-serif;
 font-weight: 400;
 font-style: normal;
}

.l-headerUnder .c-gnav>.menu-item:not(:last-child)>a::after {
    content: "|";
    position: absolute;
    right: 1px;
    top: 11px;
}

.artist-box {
 /*background: #efefef;*/
 padding: 1em;
 white-space: normal;
}

.artist-box ul {
 list-style: none;
 padding-inline-start: 0;
}

.artist-name {
 font-family: "Kaisei Decol", "Montserrat", sans-serif;
 font-weight: 500;
 font-style: normal;
 font-size: 1.4em;
 color: #777;
}
p.artist-name:first-letter {
	font-size: 1.26em;
	color: #f16969;
}

.youtube_view {
 width: 100%;
 aspect-ratio: 16 / 9;
 margin-block-start: 1em;
 margin-block-end: 1em;
}
.youtube_view iframe {
 width: 100%;
 height: 100%;
}

:root {
  --youtube-color: #ff0033;
}

ul.sml-list {
 display: flex;
 gap: 0.4em;
}
li.sml-list_item { margin: 0;}

li.sml-list_item a i{
 transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
 transform-origin: center;
}
li.sml-list_item a i:hover {
 transform: scale(1.25);
}
li.sml-list_item a.youtube i{
 color: var(--youtube-color);
}
.song-list_container::after {
    display: block;
    content: "";
    height: 1px;
    background: #ccc;
}

.song-name {
    padding-left: 1.6em;
	position: relative;
}

.song-name p::before, .song-name p::after {
    display: block;
    content: "";
    width: 1em;
    height: 1em;
    opacity: 0.4;
	position: absolute;
}
.song-name p::before {
    background: #1faed9;
	left: 0;
}
.song-name p::after {
background: #97a8ad;
    left: 0.4em;
    top: 0.4em;
}
.song-detail { display: flex;}
.song-detail > div { margin-right: 0.25em;}
.song-credit{ font-size: 0.85em;}
.song-credit::before {content: "(";}
.song-credit::after {content: ")";}
.song-credit span {font-size: 0.8em;}
.song-credit span::after { content: "/"; margin: 0 0.2em;}
.song-credit span:last-of-type::after{ content: ""; margin: 0em;}
.song-media-link { margin-left: 0.5em;}

.prof_detail p {
    white-space: pre-wrap;
    margin-bottom: 2em;
}

ul.sns-list {
  display: flex;
  gap: 0.4em;
  list-style: none;
  padding: 0;
}

ul.sns-list a {
    display: block;
    width: 2em;
    text-align: center;
    transition: 0.3s;
}
ul.sns-list a:hover {
    transform: scale(1.2);
}
ul.sns-list a i {
    font-size: 1.6em;
}

.nf-form-fields-required {
    display: none;
}

li.sns_x i {
    color: #000;
}
li.sns_instagram i {
    background:linear-gradient(135deg, #427eff 0%, #f13f79 70%);
	-webkit-background-clip:text;
	-webkit-text-fill-color: transparent;
}
li.apple_music i {
    color: #808080;
}
li.podcast i{
    color: #9531c7;
}




/* アニメーションスタイル */
/* ---------------------------- */

/* アニメーション前 */
.u-fade-type-up{
    transform: translateY(50px);
    opacity: 0;
}

/* トリガー発火でis-activeを付与 */
.u-fade-type-up.is-active{
    transition: .6s;
    transform: translateY(0);
    opacity: 1;
}

.artist-box:nth-of-type(2n).u-fade-type-up.is-active{
    transform: translateY(250px);
}

.artist-box:nth-of-type(2n).u-fade-type-up.is-active{
    transition: 1.0s;
    transform: translateY(0);
    opacity: 1;
}


/* ---Module */

/* State--- */
/* ---State */

/* Theme--- */
/* ---Theme */