/*
Theme Name: s-ikt.com
Theme URI: https://wordpress.org/themes/twentytwentythree
Author: the WordPress team, s-ikt
Author URI: https://wordpress.org
Template: twentytwentythree
Description: Twenty Twenty-Three is designed to take advantage of the new design tools introduced in WordPress 6.1. With a clean, blank base as a starting point, this default theme includes ten diverse style variations created by members of the WordPress community. Whether you want to build a complex or incredibly simple website, you can do it quickly and intuitively through the bundled styles or dive into creation and full customization yourself.
Requires at least: 6.1
Tested up to: 6.1
Requires PHP: 5.6
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.html
Text Domain: 
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, accessibility-ready, blog, portfolio, news
*/

/* common */
@font-face{font-family:"IBM Plex Sans JP";font-style:normal;font-weight:100;font-display:block;src:local("IBM Plex Sans JP"), url('../font/ibm-plex-sans-jp/IBMPlexSansJP-Thin.ttf') format('truetype');font-stretch:normal;}
@font-face{font-family:"IBM Plex Sans JP";font-style:normal;font-weight:200;font-display:block;src:local("IBM Plex Sans JP"), url('../font/ibm-plex-sans-jp/IBMPlexSansJP-ExtraLight.ttf') format('truetype');font-stretch:normal;}
@font-face{font-family:"IBM Plex Sans JP";font-style:normal;font-weight:300;font-display:block;src:local("IBM Plex Sans JP"), url('../font/ibm-plex-sans-jp/IBMPlexSansJP-Light.ttf') format('truetype');font-stretch:normal;}
@font-face{font-family:"IBM Plex Sans JP";font-style:normal;font-weight:400;font-display:block;src:local("IBM Plex Sans JP"), url('../font/ibm-plex-sans-jp/IBMPlexSansJP-Regular.ttf') format('truetype');font-stretch:normal;}
@font-face{font-family:"IBM Plex Sans JP";font-style:normal;font-weight:500;font-display:block;src:local("IBM Plex Sans JP"), url('../font/ibm-plex-sans-jp/IBMPlexSansJP-Medium.ttf') format('truetype');font-stretch:normal;}
@font-face{font-family:"IBM Plex Sans JP";font-style:normal;font-weight:600;font-display:block;src:local("IBM Plex Sans JP"), url('../font/ibm-plex-sans-jp/IBMPlexSansJP-SemiBold.ttf') format('truetype');font-stretch:normal;}
@font-face{font-family:"IBM Plex Sans JP";font-style:normal;font-weight:700;font-display:block;src:local("IBM Plex Sans JP"), url('../font/ibm-plex-sans-jp/IBMPlexSansJP-Bold.ttf') format('truetype');font-stretch:normal;}

@font-face{font-family:"Bakbak One";font-style:normal;font-weight:400;src:local("Bakbak One"), url('../font/Bakbak_One/BakbakOne-Regular.ttf') format('truetype');font-stretch:normal;}

@font-face{font-family:"Arimo";font-style:normal;font-weight:400;src:local("Bakbak One"), url('../font/Arimo/static/Arimo-Regular.ttf') format('truetype');font-stretch:normal;}
@font-face{font-family:"Arimo";font-style:normal;font-weight:500;src:local("Bakbak One"), url('../font/Arimo/static/Arimo-Medium.ttf') format('truetype');font-stretch:normal;}
@font-face{font-family:"Arimo";font-style:normal;font-weight:600;src:local("Bakbak One"), url('../font/Arimo/static/Arimo-SemiBold.ttf') format('truetype');font-stretch:normal;}
@font-face{font-family:"Arimo";font-style:normal;font-weight:700;src:local("Bakbak One"), url('../font/Arimo/static/Arimo-Bold.ttf') format('truetype');font-stretch:normal;}

@font-face{font-family:"Titillium Web";font-style:normal;font-weight:200;src:local("Titillium Web"), url('../font/Titillium_Web/TitilliumWeb-ExtraLight.ttf') format('truetype');font-stretch:normal;}
@font-face{font-family:"Titillium Web";font-style:normal;font-weight:300;src:local("Titillium Web"), url('../font/Titillium_Web/TitilliumWeb-Light.ttf') format('truetype');font-stretch:normal;}
@font-face{font-family:"Titillium Web";font-style:normal;font-weight:400;src:local("Titillium Web"), url('../font/Titillium_Web/TitilliumWeb-Regular.ttf') format('truetype');font-stretch:normal;}
@font-face{font-family:"Titillium Web";font-style:normal;font-weight:500;src:local("Titillium Web"), url('../font/Titillium_Web/TitilliumWeb-SemiBold.ttf') format('truetype');font-stretch:normal;}
@font-face{font-family:"Titillium Web";font-style:normal;font-weight:600;src:local("Titillium Web"), url('../font/Titillium_Web/TitilliumWeb-Bold.ttf') format('truetype');font-stretch:normal;}
@font-face{font-family:"Titillium Web";font-style:normal;font-weight:700;src:local("Titillium Web"), url('../font/Titillium_Web/TitilliumWeb-Black.ttf') format('truetype');font-stretch:normal;}

@font-face{font-family:"Cormorant";font-style:normal;font-weight:300;src:local("Cormorant"), url('../font/Cormorant/static/Cormorant-Light.ttf') format('truetype');font-stretch:normal;}
@font-face{font-family:"Cormorant";font-style:normal;font-weight:400;src:local("Cormorant"), url('../font/Cormorant/static/Cormorant-Regular.ttf') format('truetype');font-stretch:normal;}
@font-face{font-family:"Cormorant";font-style:normal;font-weight:500;src:local("Cormorant"), url('../font/Cormorant/static/Cormorant-Medium.ttf') format('truetype');font-stretch:normal;}
@font-face{font-family:"Cormorant";font-style:normal;font-weight:600;src:local("Cormorant"), url('../font/Cormorant/static/Cormorant-SemiBold.ttf') format('truetype');font-stretch:normal;}
@font-face{font-family:"Cormorant";font-style:normal;font-weight:700;src:local("Cormorant"), url('../font/Cormorant/static/Cormorant-Bold.ttf') format('truetype');font-stretch:normal;}

@font-face{font-family:"Roboto Flex";font-style:normal;font-weight:100;src:local("Roboto Flex"), url('../font/Roboto_Flex/RobotoFlex-VariableFont_GRAD\,XOPQ\,XTRA\,YOPQ\,YTAS\,YTDE\,YTFI\,YTLC\,YTUC\,opsz\,slnt\,wdth\,wght.ttf') format('truetype');font-stretch:normal;}
@font-face{font-family:"Roboto Flex";font-style:normal;font-weight:200;src:local("Roboto Flex"), url('../font/Roboto_Flex/RobotoFlex-VariableFont_GRAD\,XOPQ\,XTRA\,YOPQ\,YTAS\,YTDE\,YTFI\,YTLC\,YTUC\,opsz\,slnt\,wdth\,wght.ttf') format('truetype');font-stretch:normal;}
@font-face{font-family:"Roboto Flex";font-style:normal;font-weight:300;src:local("Roboto Flex"), url('../font/Roboto_Flex/RobotoFlex-VariableFont_GRAD\,XOPQ\,XTRA\,YOPQ\,YTAS\,YTDE\,YTFI\,YTLC\,YTUC\,opsz\,slnt\,wdth\,wght.ttf') format('truetype');font-stretch:normal;}
@font-face{font-family:"Roboto Flex";font-style:normal;font-weight:400;src:local("Roboto Flex"), url('../font/Roboto_Flex/RobotoFlex-VariableFont_GRAD\,XOPQ\,XTRA\,YOPQ\,YTAS\,YTDE\,YTFI\,YTLC\,YTUC\,opsz\,slnt\,wdth\,wght.ttf') format('truetype');font-stretch:normal;}
@font-face{font-family:"Roboto Flex";font-style:normal;font-weight:500;src:local("Roboto Flex"), url('../font/Roboto_Flex/RobotoFlex-VariableFont_GRAD\,XOPQ\,XTRA\,YOPQ\,YTAS\,YTDE\,YTFI\,YTLC\,YTUC\,opsz\,slnt\,wdth\,wght.ttf') format('truetype');font-stretch:normal;}
@font-face{font-family:"Roboto Flex";font-style:normal;font-weight:600;src:local("Roboto Flex"), url('../font/Roboto_Flex/RobotoFlex-VariableFont_GRAD\,XOPQ\,XTRA\,YOPQ\,YTAS\,YTDE\,YTFI\,YTLC\,YTUC\,opsz\,slnt\,wdth\,wght.ttf') format('truetype');font-stretch:normal;}
@font-face{font-family:"Roboto Flex";font-style:normal;font-weight:700;src:local("Roboto Flex"), url('../font/Roboto_Flex/RobotoFlex-VariableFont_GRAD\,XOPQ\,XTRA\,YOPQ\,YTAS\,YTDE\,YTFI\,YTLC\,YTUC\,opsz\,slnt\,wdth\,wght.ttf') format('truetype');font-stretch:normal;}
@font-face{font-family:"Roboto Flex";font-style:normal;font-weight:800;src:local("Roboto Flex"), url('../font/Roboto_Flex/RobotoFlex-VariableFont_GRAD\,XOPQ\,XTRA\,YOPQ\,YTAS\,YTDE\,YTFI\,YTLC\,YTUC\,opsz\,slnt\,wdth\,wght.ttf') format('truetype');font-stretch:normal;}
@font-face{font-family:"Roboto Flex";font-style:normal;font-weight:900;src:local("Roboto Flex"), url('../font/Roboto_Flex/RobotoFlex-VariableFont_GRAD\,XOPQ\,XTRA\,YOPQ\,YTAS\,YTDE\,YTFI\,YTLC\,YTUC\,opsz\,slnt\,wdth\,wght.ttf') format('truetype');font-stretch:normal;}
@font-face{font-family:"Roboto Flex";font-style:normal;font-weight:1000;src:local("Roboto Flex"), url('../font/Roboto_Flex/RobotoFlex-VariableFont_GRAD\,XOPQ\,XTRA\,YOPQ\,YTAS\,YTDE\,YTFI\,YTLC\,YTUC\,opsz\,slnt\,wdth\,wght.ttf') format('truetype');font-stretch:normal;}

@font-face{font-family:"Questrial";font-style:normal;font-weight:400;src:local("Questrial"), url('../font/Questrial/Questrial-Regular.ttf') format('truetype');font-stretch:normal;}

@font-face{font-family:"Urbanist";font-style:normal;font-weight:100;src:local("Urbanist"), url('../font/Urbanist/Urbanist-VariableFont_wght.ttf') format('truetype');font-stretch:normal;}
@font-face{font-family:"Urbanist";font-style:normal;font-weight:200;src:local("Urbanist"), url('../font/Urbanist/Urbanist-VariableFont_wght.ttf') format('truetype');font-stretch:normal;}
@font-face{font-family:"Urbanist";font-style:normal;font-weight:300;src:local("Urbanist"), url('../font/Urbanist/Urbanist-VariableFont_wght.ttf') format('truetype');font-stretch:normal;}
@font-face{font-family:"Urbanist";font-style:normal;font-weight:400;src:local("Urbanist"), url('../font/Urbanist/Urbanist-VariableFont_wght.ttf') format('truetype');font-stretch:normal;}
@font-face{font-family:"Urbanist";font-style:normal;font-weight:500;src:local("Urbanist"), url('../font/Urbanist/Urbanist-VariableFont_wght.ttf') format('truetype');font-stretch:normal;}
@font-face{font-family:"Urbanist";font-style:normal;font-weight:600;src:local("Urbanist"), url('../font/Urbanist/Urbanist-VariableFont_wght.ttf') format('truetype');font-stretch:normal;}
@font-face{font-family:"Urbanist";font-style:normal;font-weight:700;src:local("Urbanist"), url('../font/Urbanist/Urbanist-VariableFont_wght.ttf') format('truetype');font-stretch:normal;}
@font-face{font-family:"Urbanist";font-style:normal;font-weight:800;src:local("Urbanist"), url('../font/Urbanist/Urbanist-VariableFont_wght.ttf') format('truetype');font-stretch:normal;}
@font-face{font-family:"Urbanist";font-style:normal;font-weight:900;src:local("Urbanist"), url('../font/Urbanist/Urbanist-VariableFont_wght.ttf') format('truetype');font-stretch:normal;}

@font-face{font-family:"DotGothic16";font-style:normal;font-weight:400;src:local("DotGothic16"), url('../font/DotGothic16/DotGothic16-Regular.ttf') format('truetype');font-stretch:normal;}

@font-face{font-family:"Averia_Sans_Libre";font-style:normal;font-weight:400;src:local("DotGothic16"), url('../font/Averia_Sans_Libre/AveriaSansLibre-Regular.ttf') format('truetype');font-stretch:normal;}

@font-face{font-family:"AmazonEmberDisplay";font-style:normal;font-weight:200;src:local("DotGothic16"), url('../font/Averia_Sans_Libre/AmazonEmberDisplay-Lt.ttf') format('truetype');font-stretch:normal;}
@font-face{font-family:"AmazonEmberDisplay";font-style:normal;font-weight:400;src:local("DotGothic16"), url('../font/Averia_Sans_Libre/AmazonEmberDisplay-Rg.ttf') format('truetype');font-stretch:normal;}
@font-face{font-family:"AmazonEmberDisplay";font-style:normal;font-weight:600;src:local("DotGothic16"), url('../font/Averia_Sans_Libre/AmazonEmberDisplay-Md.ttf') format('truetype');font-stretch:normal;}
@font-face{font-family:"AmazonEmberDisplay";font-style:normal;font-weight:800;src:local("DotGothic16"), url('../font/Averia_Sans_Libre/AmazonEmberDisplay-Bd.ttf') format('truetype');font-stretch:normal;}
@font-face{font-family:"AmazonEmberDisplay";font-style:normal;font-weight:900;src:local("DotGothic16"), url('../font/Averia_Sans_Libre/AmazonEmberDisplay-He.ttf') format('truetype');font-stretch:normal;}

@font-face{font-family:"Orbitron";font-style:normal;font-weight:400;src:local("Orbitron"), url('../font/Orbitron/static/Orbitron-Regular.ttf') format('truetype');font-stretch:normal;}
@font-face{font-family:"Orbitron";font-style:normal;font-weight:500;src:local("Orbitron"), url('../font/Orbitron/static/Orbitron-Medium.ttf') format('truetype');font-stretch:normal;}
@font-face{font-family:"Orbitron";font-style:normal;font-weight:600;src:local("Orbitron"), url('../font/Orbitron/static/Orbitron-SemiBold.ttf') format('truetype');font-stretch:normal;}
@font-face{font-family:"Orbitron";font-style:normal;font-weight:700;src:local("Orbitron"), url('../font/Orbitron/static/Orbitron-Bold.ttf') format('truetype');font-stretch:normal;}
@font-face{font-family:"Orbitron";font-style:normal;font-weight:800;src:local("Orbitron"), url('../font/Orbitron/static/Orbitron-ExtraBold.ttf') format('truetype');font-stretch:normal;}
@font-face{font-family:"Orbitron";font-style:normal;font-weight:900;src:local("Orbitron"), url('../font/Orbitron/static/Orbitron-Black.ttf') format('truetype');font-stretch:normal;}

@font-face{font-family:"PressStart2P";font-style:normal;font-weight:400;src:local("PressStart2P"), url('../font/Press_Start_2P/PressStart2P-Regular.ttf') format('truetype');font-stretch:normal;}

@font-face{font-family:"Slikscreen";font-style:normal;font-weight:400;src:local("Slikscreen"), url('../font/Silkscreen/Silkscreen-Regular.ttf') format('truetype');font-stretch:normal;}
@font-face{font-family:"Slikscreen";font-style:normal;font-weight:800;src:local("Slikscreen"), url('../font/Silkscreen/Silkscreen-Bold.ttf') format('truetype');font-stretch:normal;}

@font-face{font-family:"SmoochSans";font-style:normal;font-weight:100;src:local("SmoochSans"), url('../font/Smooch_Sans/static/SmoochSans-Thin.ttf') format('truetype');font-stretch:normal;}
@font-face{font-family:"SmoochSans";font-style:normal;font-weight:200;src:local("SmoochSans"), url('../font/Smooch_Sans/static/SmoochSans-ExtraLight.ttf') format('truetype');font-stretch:normal;}
@font-face{font-family:"SmoochSans";font-style:normal;font-weight:300;src:local("SmoochSans"), url('../font/Smooch_Sans/static/SmoochSans-Light.ttf') format('truetype');font-stretch:normal;}
@font-face{font-family:"SmoochSans";font-style:normal;font-weight:400;src:local("SmoochSans"), url('../font/Smooch_Sans/static/SmoochSans-Regular.ttf') format('truetype');font-stretch:normal;}
@font-face{font-family:"SmoochSans";font-style:normal;font-weight:500;src:local("SmoochSans"), url('../font/Smooch_Sans/static/SmoochSans-Medium.ttf') format('truetype');font-stretch:normal;}
@font-face{font-family:"SmoochSans";font-style:normal;font-weight:600;src:local("SmoochSans"), url('../font/Smooch_Sans/static/SmoochSans-SemiBold.ttf') format('truetype');font-stretch:normal;}
@font-face{font-family:"SmoochSans";font-style:normal;font-weight:700;src:local("SmoochSans"), url('../font/Smooch_Sans/static/SmoochSans-Bold.ttf') format('truetype');font-stretch:normal;}
@font-face{font-family:"SmoochSans";font-style:normal;font-weight:800;src:local("SmoochSans"), url('../font/Smooch_Sans/static/SmoochSans-ExtraBold.ttf') format('truetype');font-stretch:normal;}
@font-face{font-family:"SmoochSans";font-style:normal;font-weight:900;src:local("SmoochSans"), url('../font/Smooch_Sans/static/SmoochSans-Black.ttf') format('truetype');font-stretch:normal;}

@font-face{font-family:"ShipporiMinchoB1";font-style:normal;font-weight:400;src:local("ShipporiMinchoB1"), url('../font/Shippori_Mincho_B1/ShipporiMinchoB1-Regular.ttf') format('truetype');font-stretch:normal;}
@font-face{font-family:"ShipporiMinchoB1";font-style:normal;font-weight:500;src:local("ShipporiMinchoB1"), url('../font/Shippori_Mincho_B1/ShipporiMinchoB1-Medium.ttf') format('truetype');font-stretch:normal;}
@font-face{font-family:"ShipporiMinchoB1";font-style:normal;font-weight:600;src:local("ShipporiMinchoB1"), url('../font/Shippori_Mincho_B1/ShipporiMinchoB1-SemiBold.ttf') format('truetype');font-stretch:normal;}
@font-face{font-family:"ShipporiMinchoB1";font-style:normal;font-weight:700;src:local("ShipporiMinchoB1"), url('../font/Shippori_Mincho_B1/ShipporiMinchoB1-Bold.ttf') format('truetype');font-stretch:normal;}
@font-face{font-family:"ShipporiMinchoB1";font-style:normal;font-weight:800;src:local("ShipporiMinchoB1"), url('../font/Shippori_Mincho_B1/ShipporiMinchoB1-ExtraBold.ttf') format('truetype');font-stretch:normal;}

@font-face{font-family:"ArchitectsDaughter";font-style:normal;font-weight:400;src:local("ArchitectsDaughter"), url('../font/Architects_Daughter/ArchitectsDaughter-Regular.ttf') format('truetype');font-stretch:normal;}


*{
   margin: 0;
   scroll-behavior: smooth;
}
html {
   margin-top: 0 !important;
}
body{
    /* 本文の基準フォント種別・サイズを規定 */
        /* block themeの計算値 */
        /* font-size: clamp(0.875rem, 0.875rem + ((1vw - 0.48rem) * 0.24), 1rem); */
    font-family: 'Roboto Flex', sans-serif;
    font-size: 16px;
}

/* ウィンドウ左右上下中央最大化 */
body.indexhtml-body{
   display: grid;
   place-content: center;
   min-height: 100vh;
}

a, a:where(:not(.wp-element-button)){
    color: #1f2937;
    text-underline-offset:0.2em;
}
.index-copy-end-serif a{
   color: #ccc;
}
a:hover{
    text-decoration: none;    
}
a:active{
   color: #000;
}
li{
    margin: 1em 0 1em 0;
}
h1,h2,h3,h4,h5,h6{
        /* block themeの計算値 */
        /* font-size: clamp(2.719rem, 2.719rem + ((1vw - 0.48rem) * 1.742), 3.625rem); */
    font-family: "Urbanist", sans-serif;
    font-style: normal;
    font-weight: 100;
    text-transform: initial;
}
h2{
   font-size: 6.0em;
   font-weight: 100;
/* font-family: 'Silkscreen', sans-serif;   
   letter-spacing: -0.05em;
   margin-left: -0.07em; */
}
h3 {
    font-size: 4.0em;
    margin-top: initial;
    line-height: 1.2em;
    letter-spacing: -0.05em;
    color: #1f2937;
    display: inline-block;
    background: linear-gradient(45deg, #1f2937 16%, #d8d5e5 30%, #8cacb5 57%, #c8cfe9 65%, #1e2021 90%);
    background: -webkit-linear-gradient(45deg, #1f2937 16%, #d8d5e5 30%, #8cacb5 57%, #c8cfe9 65%, #1e2021 90%);
    background-size: 130% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientEffect 2.5s infinite alternate;
}
h6{
   font-weight: 200;
}
input{
   margin: 0.5em;
}
label{
   font-size: 0.8em;
}

/* about-history */
a:where(:not(.wp-element-button)){
    text-underline-offset:0.2em;
    word-break: break-all;
    font-family: "ArchitectsDaughter", sans-serif;
}
li{
    margin: 1em 0 1em 0;
}

/* about-discography */
form.form-tunes{
/*   max-width: 650px; */
   margin: 0 auto;
}

 ul.composed-list-tiltle-ul{
   display: table;
   margin: 0;
   width: 100%;
   height: 4em;
   list-style-type: none;
   box-sizing: border-box; /* 親boxからのはみ出しを防ぐ */
   padding: 0;
   border-bottom: 1px solid #ccc;
 }
 li.composed-list-title-li01{
   display: table-cell;
   width: 20%;
   height: 4em;
 }
 li.composed-list-title-li02{
   display: table-cell;
   width: 35%;
   height: 4em;
 }
 li.composed-list-title-li03{
   display: table-cell;
    width: 30%;
    height: 4em;
 }
 li.composed-list-title-li04{
   display: table-cell;
   width: 5%;
   height: 4em;
 }
 li.composed-list-title-li05{
   display: table-cell;
   width: 6%;
   height: 4em;
   text-align: center;
   vertical-align: bottom;
 }
 li.composed-list-title-li05 span{
   display: inline-block;
   font-family: "Urbanist", sans-serif;
   font-size: 0.6em;
   transform-origin: center center;
   transform: translate(0em,-2.0em)rotate(270deg);
 }
 li.composed-list-title-li06{
   display: table-cell;
   width: 6%;
   height: 4em;
   text-align: center;
   vertical-align: bottom;
 }
 li.composed-list-title-li06 span{
   display: inline-block;
   font-family: "Urbanist", sans-serif;
   font-size: 0.6em;
   transform-origin: center center;
   transform: translate(0em,-3.5em)rotate(270deg);
 }
 li.composed-list-title-li07{
   display: table-cell;
   width: 4%;
   height: 4em;
 }
 ul.composed-list-confirm-ul{
   display: none;
   margin: 0;
   width: 100%;
   max-width: 650px;
   list-style-type: none;
   box-sizing: border-box; /* 親boxからのはみ出しを防ぐ */
   padding: 0 40px 0 40px;
   /* ウィンドウ下部固定配置 */
   position: fixed;
   bottom: 0;
   backdrop-filter: blur(2px);
   -webkit-backdrop-filter: blur(2px);
 }
 li.composed-list-confirm-li01{
   text-align: center;
   vertical-align: middle;
 }
 img.img-youtube-play-ico{
   padding: 0 0.5em;
   vertical-align: middle;
 }
 ul.composed-list-ul{
    display: table;
    margin: 0;
    width: 100%;
    height: 4em;
    list-style-type: none;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box; /* 親boxからのはみ出しを防ぐ */
    padding: 1em 0;
 }
 li.composed-list-li01{
    display: table-cell;
    width: 20%;
    height: 4em;
    vertical-align: middle;
    padding: 2em 0 2em 0;
    font-family: "Urbanist", sans-serif;
    font-size: 0.7em;
    text-align: center;
 }
 li.composed-list-li01 img{
    width: 10vw;
    display: block;
    margin: 1em auto;
    box-shadow: 4px 4px 8px #333;
    filter: saturate(0.3) contrast(1.0);
 }
 li.composed-list-li01 a:hover img{
   animation: zoom-in-jacketart-thumbnail-box-img 5s linear;
 }
 li.composed-list-li02{
    display: table-cell;
    width: 35%;
    height: 4em;
    vertical-align: middle;
    font-family: "Urbanist", sans-serif;
    padding: 0.25em;
    text-align: center;
    font-weight: 200;
    font-size: 2.0em;
    letter-spacing: -0.02em;
    line-height: 1.0em;

    line-height: 1.2em;
    letter-spacing: -0.05em;
    color: #1f2937;
    background: linear-gradient(45deg, #1f2937 16%, #34323b 30%, #bcced3 57%, #636a83 65%, #1e2021 90%);
    background: -webkit-linear-gradient(45deg, #1f2937 16%, #34323b 30%, #bcced3 57%, #636a83 65%, #1e2021 90%);
    background-size: 130% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientEffect 2.5s infinite alternate;
 }
 li.composed-list-li02 div.list-distributors{
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 0.5em;
 }
 li.composed-list-li02 div.list-distributors a{
   margin: 0 auto;
   flex: 1;
 }
 li.composed-list-li02 div.list-distributors a img.list-youtubemusic{
   width: 60px;
   vertical-align: middle;
 }
 li.composed-list-li02 div.list-distributors a img.list-applemusic{
   width: 80px;
   vertical-align: middle;
 }
 li.composed-list-li02 div.list-distributors img.list-spotify{
   width: 90px;
   vertical-align: middle;
   margin: 0 auto;
 }
 li.composed-list-li02 div.list-distributors img.list-amazonmusic{
   width: 80px;
   vertical-align: middle;
   margin: 0 auto;
 }

 li.composed-list-li03{
    display: table-cell;
    width: 30%;
    height: 4em;
    font-size: 0.85em;
    vertical-align: middle;
    padding: 0.5em;
    line-height: 1.5em;
    font-family: "ArchitectsDaughter", sans-serif;
    color: #1f2937;
 }
 li.composed-list-li04{
    display: table-cell;
    width: 5%;
    height: 4em;
    text-align: center;
    vertical-align: middle;
    padding-top: 0.4em;
    font-family: "Urbanist", sans-serif;
    font-size: 0.7em;
 }
 li.composed-list-li05{
    display: table-cell;
    width: 8%;
    height: 4em;
    text-align: center;
    vertical-align: middle;
    padding-top: 0.4em;
 }
 li.composed-list-li05 div.list-playbutton{
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 0.5em;
   flex-direction: column;
 }
 li.composed-list-li06{
   display: table-cell;
   width: 0%;
   height: 4em;
   text-align: center;
   vertical-align: middle;
   padding-top: 0.4em;
   display: none;
}
li.composed-list-li07{
   display: table-cell;
   width: 7%;
   height: 4em;
   text-align: center;
   vertical-align: middle;
   padding-top: 0.4em;
}
 .composed-list-li-title-tags{
    display: inline-block;
    font-size: 0.3em;
    border: 1px solid #ccc;
    text-align: center;
    margin: 0.2em;
    padding: 0.2em 0.8em;
    letter-spacing: 0;
    line-height: 1.5em;
 }
 span.composed-list-li-title-tags.tags-genere{
   color: #fff;
   font-family: "Urbanist", sans-serif;
   font-size: 0.3em;
   font-weight: 600;
   letter-spacing: 0;
 }
 li.dateright-lisence{
    list-style-type: none;
    margin: 0.25em 1em 0.25em 0;
    text-align: right;
 }
 dt.lisence-title-dt{
    width: 100%;
    border-bottom: 1px solid #ccc;
 }
 ul.no-style-type{
    list-style-type: none;
    padding: 1em;
    text-align: justify;
 }

/* about-privacypolicy */
 dt.privacypolicy-table-dt{
    display: block;
    border-bottom: 1px solid #ccc;
    width: 90%;
    margin: 0 auto;
 }
 ul.privacypolicy-table-ul-index{
    display: table;
    width: 90%;
    padding-left: 0px;
    margin: 0 auto;
    text-align: center;
 }
 ul.privacypolicy-table-ul{
    display: table;
    width: 90%;
    padding-left: 0px;
    margin: 0 auto;
 }
 li.privacypolicy-table-li{
    display: table-cell;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    width: 30%;
    padding: 0.5em;
 }
 li.privacypolicy-table-li-end{
    display: table-cell;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    width: 30%;
    padding: 0.5em;
 }
 li.privacypolicy-table-li > ul{
    padding: 0 0 0 1.5em;
    list-style-type: disc;
 }
 dt.privacypolicy-dt{
    border-bottom: 1px solid #ccc;
 }

/* colorbox.js利用 */
#cboxOverlay{
   position:absolute; 
   top:0; 
   left:0; 
   z-index:99; 
   overflow:hidden; 
   position:fixed; 
   width:100%; 
   height:100%;
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   background: rgba(255,255,255,0.6);
}
#colorbox{
   z-index: 9999;
   /* 紙の差し込みのような雰囲気を若干の傾斜をつけて演出 */
   transform: rotate(0.3deg);
}
#cboxClose{
   margin: 0.5em;
   display: none;
}

input.clconfirm-input-reset-button,
input.clconfirm-input-submit-button{
   transition: 0.3s;
   border: 1px solid #ccc;
   padding: 0.5em;
   font-family: 'IBM Plex Sans JP', "Urbanist", sans-serif;
   font-size: 0.8em;
}

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

}

/* checkBox */
input.download-checkbox{
   opacity: 0;
} 
label.download-checkbox{
   display: inline-block;
   width: 20px;
   height: 20px;
   /* チェックボックスの背景画像を切り替える場合
   background: none, url(../img/icon-download-checkbox.png);
   background-position: top center;
   background-repeat: no-repeat;
   background-size: 100%; */
   filter: drop-shadow(0 0 2px rgba(0, 0, 0, .0));
   transition: .3s;
   cursor: pointer;
}
input[type="checkbox"].download-checkbox:checked + label.download-checkbox {
   /* チェックボックスの背景画像を切り替える場合
   background: url(../img/icon-download-checked.png), none;
   background-position: top center;
   background-repeat: no-repeat;
   background-size: 100%; */
   filter: drop-shadow(0 0 2px rgba(0, 0, 0, .8));
}




/* ヘッダーエリア */
h1 > a > span,
p.header-p > span,
nav.header{
   display: none;
}
.header-headerguide-index ul {
   list-style: none;
   padding-left: 0;
}
.header-headerguide-index ul li {
   margin: 0.5em;
   font-size: 1.0em;
   padding: 0.5em;
   font-family: 'Bakbak One';
}
.header-headerguide ul {
   display: flex;
   justify-content: flex-end;
   list-style: none;
   color: #fff;
   padding-left: 0;
}
.header-headerguide ul li {
   margin: 0.5em;
   padding: initial;
   color: #1f2937;
}
.header-headerguide a{
   color: #1f2937;
}
.header-headerguide a:hover{
   text-decoration: none;
}

/* 表紙エリア */
section.index-background{
   height: 100vh;
   display: grid;
   place-items: center;
   align-items: end;
}
section.index-background::before{
   width: 100vw;
   height: 100vh;
   background: url(../img/271theme.jpg) fixed center;
   background-size: cover;
   background-repeat: no-repeat;
   filter: saturate(0.2) contrast(2.0);
   animation: index-background 4s linear;
   animation-fill-mode: forwards;
   position: fixed;
   z-index: -1;
   top: 0;
   left: 0;
   content: "";
}
@keyframes index-background{
   from{
      transform: scale(1.4);
   }
   to{
      transform: scale(1.0);
   }
}
section.index-background > h1{
   line-height: 1.2;
   font-size: 1.5em;
   color: #ccc;
}
section.index-background > h1 > span.subtitle-h1{
   font-size: 0.5em;
}
div.index-copy{
   color: #464d5f;
   line-height: 1.4;
}
div.index-copy > p{
/*   background: #000; */
   display: inline-block;
   margin: 0.2em;
   padding: 0.3em;
   margin-left: 50vw;
   font-size: 0.8em;
   margin-right: 15vw;
}
div.index-copy-notes > p{
   font-family: "ArchitectsDaughter", sans-serif;
   color: #fff;
   font-size: 1.0em;
   margin: 0.5em;
   padding: 0.2em 0.5em;
   -webkit-box-decoration-break: clone;
   box-decoration-break : clone;
   -webkit-box-backdrop-filter: invert(70%);
   backdrop-filter: invert(70%);
   display: inline-block;
   background: linear-gradient(45deg, #1f2937 16%, #5b5e6d 30%, #737373 65%, #1e2021 90%);
   background: -webkit-linear-gradient(45deg, #1f2937 16%, #5b5e6d 30%, #737373 65%, #1e2021 90%);
   background-size: 130% auto;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   -webkit-box-backdrop-filter: initial;
   backdrop-filter: initial;
}
div.index-copy-notes > p.typewriter, div.index-copy-notes_tunes > p.typewriter{
   font-family: "ArchitectsDaughter", sans-serif;
   color: #fff;
   -webkit-text-fill-color: #1f2937;
   overflow: hidden;
   border-right: .15em solid #fff;
/*   white-space: nowrap; */
   animation: 
   typing 3.5s steps(40, end),
   blink-caret .75s step-end infinite;
}
p.typewriter a{
   color: #fff;
   text-decoration: underline;
}
p.typewriter a:hover{
   text-decoration: underline;
}
@keyframes typing {
   from { 
      width: 0;
      transform: scale(20.0);
      background: transparent;
   }
   to { 
      width: 40%;
      -webkit-box-decoration-break: clone;
      box-decoration-break : clone;
      transform: scale(1.0);
      background: transparent;
   }
}
@keyframes blink-caret {
   from, to { border-color: transparent }
   50% { border-color: #1f2937; }
}
.index-copy-notes {
    font-family: "ArchitectsDaughter", cursive;
    width: 70vw;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    transform: rotate(-3deg);
    margin-top: 1.0em;
    padding: 2.0em;
    background: linear-gradient(45deg, #ffffff 1%, transparent 70%);
}
.index-copy-notes h4 {
    font-family: "Urbanist", sans-serif;
    font-weight: lighter;
    line-height: 1.5em;
    letter-spacing: 0.5em;
    margin: 0.5em;
    display: inline-block;
    background: linear-gradient(45deg, #1f2937 16%, #d8d5e5 30%, #8cacb5 57%, #c8cfe9 65%, #1e2021 90%);5b5e6d
    background: -webkit-linear-gradient(45deg, #1f2937 16%, #d8d5e5 30%, #8cacb5 57%, #c8cfe9 65%, #1e2021 90%);
    background-size: 130% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientEffect 2.5s infinite alternate;
}
.index-copy-notes h6, .index-copy-notes_tunes h6 {
    font-family: 'ShipporiMinchoB1', serif;
    font-weight: 400;
    font-size: 0.8em;
    margin: 1.0em;
    letter-spacing: 0.5em;
    line-height: 2.0em;
    display: inline-block;
    background: linear-gradient(45deg, #1f2937 16%, #d8d5e5 30%, #8cacb5 57%, #c8cfe9 65%, #1e2021 90%);
    background: -webkit-linear-gradient(45deg, #1f2937 16%, #d8d5e5 30%, #8cacb5 57%, #c8cfe9 65%, #1e2021 90%);
    background-size: 130% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientEffect 2.5s infinite alternate;
}
@keyframes gradientEffect {
  from {background-position: left}
  to {background-position: right}
}
div.index-copy > p.index-copy-end-serif{
   font-size: 0.9em;
}
div.index-copy > p.index-copy-end-serif > span.dashline{
   display: inline-flex;
   justify-content: center;
   align-items: center;
}
div.index-copy > p.index-copy-end-serif > span.dashline::before{
   border-top: 1px solid #ccc;
   content: "";
   width: 5em;
   padding: 0 0 0.2em 0;
}
div.index-copy-center{
   margin: 0 2em;
   font-size: 1.0em;
   color: #ccc;
   display: inline-flex;
   flex-direction: column;
   align-items: flex-start;
}
div.index-copy-center > p{
   color: rgba(255,255,255,0.2);
/*   background: #000; */
   font-family: 'Titillium Web', sans-serif;
/*   margin: 0.5em;
   padding: 0.2em 0.5em;*/
   font-size: 20vw;
   line-height: 1.0em;
}
div.index-copy-center a{
   color: rgba(255,255,255,0.5);
   text-decoration: none;
}

/* 砂嵐
   ノイズ用の画像を用意して、それを無限に上下左右にアニメーションさせている */
div.noise::after{
   content: "";
   position: absolute;
   width: 100%;
   height: 100vh;
   top: 0;
   left: 0;
   z-index: 2;
   opacity: 1;
   pointer-events: none;
   animation: noise 8s steps(10) infinite;
   background: url(../img/noizetv.png);
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}
@keyframes noise{
   to {
     background-position: 0 0;
   }
   10% {
     background-position: -5% -10%;
   }
   20% {
     background-position: -15% 5%;
   }
   30% {
     background-position: 7% -25%;
   }
   40% {
     background-position: 20% 25%;
   }
   50% {
     background-position: -25% 10%;
   }
   60% {
     background-position: 15% 5%;
   }
   70% {
     background-position: 0 15%;
   }
   80% {
     background-position: 25% 35%;
   }
   90% {
     background-position: -10% 10%;
   }
}

/* スクロールボタン */
div.scroll {
   padding-top: 70px;
   width: 100px;
   margin: 0 auto;
   text-align: center;
 }
 div.scroll::before {
   animation: scroll 3.5s infinite;
   border: solid #fff;
   border-width: 0 0 2px 2px;
   content: "";
   display: inline-block;
   margin: auto;
/*   position: absolute;
   top: 0;
   right: 0;
   left: 0; */
   transform: rotate(-45deg);
   width: 40px;
   height: 40px;
   margin-bottom: 10em;
 }
 div.scroll > span.txt{
   display: none;
 }
 @keyframes scroll {
   0% {
     transform: rotate(-45deg) translate(0, 0);
   }
   80% {
     transform: rotate(-45deg) translate(-30px, 30px);
   }
   0%, 80%, 100% {
     opacity: 0;
   }
   40% {
     opacity: 1;
   }
 }

.main-headerguide ul {
   display: flex;
   justify-content: flex-end;
   list-style: none;
}
.main-headerguide ul li {
   margin: 0 1.0em;
   font-size: 0.8em;
   padding: 0.5em;
   font-family: 'Titillium Web';
}

.main-wrap{
/*   max-width: 650px; */
   margin: 0 auto;
   width: 80vw;
/*   min-width: 990px; */
}
div.main-wrap > h2{
   line-height: 1.0;
}
div.main-wrap > p.subtitle-h2{
   font-size: 1.0em;
   background: linear-gradient(45deg, #1f2937 16%, #5b5e6d 30%, #737373 65%, #1e2021 90%);
    background: -webkit-linear-gradient(45deg, #1f2937 16%, #5b5e6d 30%, #737373 65%, #1e2021 90%);
    background-size: 130% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.main-wrap-single{
   max-width: 70vw;
   margin: 0 auto;
   padding: 1em;
   text-align: justify;
   font-weight: 200;
   letter-spacing: 0.04em;
   line-height: 1.8em;
}
.main-wrap-single > h2{
   line-height: 1.0;
}
main p{
   margin: 1em 0;
}
.main-wrap-single > p.subtitle-h2{
   font-size: 0.8em;
   font-family: 'Bakbak One';
   margin: 2em 0 0 0;
}
div.index-caption {
    max-width: 70vw;
    margin: 0 auto;
    padding: 1em;
    text-align: justify;
    font-weight: 200;
    letter-spacing: 0.04em;
    line-height: 1.8em;
}
main, footer{
   background: rgba(255,255,255,0.7);
   -webkit-backdrop-filter: blur(6px);
   backdrop-filter: blur(6px);
   padding: 2em;
   position: relative;
   z-index: 99;
}
main.indexhtml, footer.indexhtml, footer.theme-footer{
   background: initial;
   backdrop-filter: initial;
}
footer.indexhtml{
   backdrop-filter: blur(6px);
   background: radial-gradient(#767985, transparent);
}
footer.theme-footer{
   background: rgba(0, 0, 0, 0.7);
   backdrop-filter: blur(6px);
}
/* 背景動画設置時の文字色・リンク色・画像色反転の一斉変更 */
main.indexhtml, main.indexhtml a, main.archive-php, main.archive-php a, span.tags-genere a{
   color: #fff;
}

main.archive-php{
   background: transparent;
   -webkit-backdrop-filter: none;
   backdrop-filter: none;
   width: 100%;
   animation: noise 8s steps(10) infinite;
   background: url(../img/noizetv.png);
/*   display: grid;
   place-content: center; */
   padding: 0;
}
main.indexhtml-main{
   width: 100%;
   animation: noise 8s steps(10) infinite;
   background: url(../img/noizetv.png);
   display: grid;
   place-content: center;
   padding: 0;
/*
   background: url(../img/icon-site.jpg) no-repeat bottom center;
   background-color: rgba(255,255,255,0.9);
   background-blend-mode: lighten;
   background-size: 50%;
*/
}

/* フッターエリア */
footer{
   padding: 10em 1em 1em 1em;
}
footer.footer-php{
   padding: 10em 1em 1em 1em;
   backdrop-filter: none;
   -webkit-backdrop-filter: none;
   background: transparent;
}
nav.footer > ul{
   list-style-type: none;
   padding: 0;
}
nav.footer > ul > li{
   margin: 0 1em;
}
nav.footer{
   font-style: normal;
   font-family: "Urbanist";
   letter-spacing: 0.1em;
   line-height: 2.0;
}
.footer-wrap-address{
   width: 50vw;
   display: flex;
   align-items: center;
   margin: 1em auto;
}
.footer-address-copyright{
   font-style: normal;
   font-family: 'Titillium Web', sans-serif;
   font-size: 0.8em;
   line-height: 1.5em;
   text-align: left;
   padding: 0.5em;
   width: 70%;
}
address.footer-address-copyright img.s-ikt_sns{
   width: 50px;
   height: 50px;
   border-radius: 50%;
   vertical-align: middle;
   margin: 0.5em;
}
.footer-bottom-copy{
   list-style-type: none;
   padding: 0.5em;
   margin: 1em;
   font-family: 'Bakbak One';
   font-size: 0.8em;
}

/* チェックボックスのリセット */
input[type="checkbox"]  {
   margin: 0;
   padding: 0;
   background: none;
   border: none;
   border-radius: 0;
   outline: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }

/* .download-select-checkboxチェックボックスのデザイン */
input.download-select-checkbox[type="checkbox"] {
   cursor: pointer;
   padding-left: 30px;  /*label手前にチェックボックス用の余白を開ける*/
   vertical-align: middle;
   position: relative;
 }
 input.download-select-checkbox[type="checkbox"]::before,
 input.download-select-checkbox[type="checkbox"]::after {
   content: "";
   display: block; 
   position: absolute;
 }
 input.download-select-checkbox[type="checkbox"]::before {
   background-color: #fff;
   border-radius: 0%;
   border: 1px solid #ccc;
   width: 10px;/*チェックボックスの横幅*/
   height: 10px;/*チェックボックスの縦幅*/
   transform: translateY(-60%); /* YouTubeアイコンに縦中を揃える */
   top: 50%;
   left: 5px;
 }
 input.download-select-checkbox[type="checkbox"]::after {
   border-bottom: 3px solid #000;/*チェックの太さ*/
   border-left: 3px solid #000;/*チェックの太さ*/
   opacity: 0;/*チェック前は非表示*/
   height: 6px;/*チェックの高さ*/
   width: 10px;/*チェックの横幅*/
   transform: rotate(-45deg);
   top: -8px;/*チェック時の位置調整*/
   left: 5px;/*チェック時の位置調整*/
 }
 input.download-select-checkbox[type="checkbox"]:checked::after {
   opacity: 1;/*チェック後表示*/
 }

 div.background-video-wrapper, div.background-video-wrapper-theme-footer{
   /* 以下、背景ビデオ設置時の専用プロパティ */
   position: fixed;
   z-index: -2;
   top: 0;
   right: 0;
   left: 0;
   bottom: 0;
 }

 div.footer-wrapper{
/*   max-width: 650px; */
   margin: 0 auto;
   text-align: center;
 }
 /* 背景ビデオ */
 video#video {
   position: absolute;
   z-index: -1;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   min-height: 100%;
   min-width: 100%;
/*   top: 22em; */
   filter: saturate(0.4) contrast(0.4);
 }
 /* 背景動画設置時の文字色・リンク色・画像色反転の一斉変更 */
 div.footer-wrapper, div.footer-wrapper a{
   color: #fff;
 }
 div.snsicon_underavator-wrap img, div.snsicon_underavator-wrap2 img, ul.footer-destributers-list img, img.s-ikt_signature_footer{
   filter: invert(1);
 }

 div.footer-wrap-avator{
   padding: 0.5em;
   width: 30%;
   text-align: center;
 }
 div.footer-wrap-avator p{
   font-size: 2.8em;
 }
 div.footer-wrap-left{
/*   width: 20vw; */
   padding: 1em;
   margin: 0 auto;
 }
 div.footer-wrap-left h2{
   font-family: 'Titillium Web', sans-serif;
   font-size: 20.0em;
   font-weight: 200;
 }
 div.footer-wrap-left h2 a.changefontinline{
   font-family: "Urbanist", sans-serif;
   font-size: 0.8em;
   vertical-align: 1.0em;
 }
  div.footer-wrap-left h2 a{
   text-decoration: none;
 }
 .footer-wrap-left img, .footer-wrap-avator img.s-ikt_sns{
   width: 90px;
 }
 div.snsicon_underavator-wrap{
   display: flex;
   width: 90px;
   margin: 0.5em auto;
   justify-content: space-evenly;
 }
 img.snsicon_underavator_youtube{
   width: 25px;
 }
 img.snsicon_underavator_instagram{
   width: 18px;
 }
 div.snsicon_underavator-wrap2{
   display: flex;
   width: 90px;
   margin: 0.5em;
   justify-content: space-evenly;
 }

 .footer-wrap-left span{
   display: none;
 }
 .footer-wrap-left ul{
   list-style-type: none;
   font-size: 0.8em;
   font-style: normal;
   font-family: "Urbanist";
   letter-spacing: 0.1em;
   text-align: right;
   display: inline-block;
   padding: 0;
 }
 .footer-wrap-left li{
   display: inline-block;
   margin: 0.5em;
   vertical-align: middle;
 }
 nav.footer{
   padding: 1em;
 }
 nav.footer > ul{
   text-align: left;
 }
 nav.footer > ul > li{
   display: block;
 }
 p.footer-sitecopy{
   display: block;
   font-family: "Urbanist";
   margin: 1em auto;
   text-align: center;
   font-size: 0.9em;
 }
 a.archive-datenum{
   font-size: 0.6em;
   font-family: "Urbanist";
   text-decoration: none;
   text-align: center;
}

/* 投稿（single.php）用表紙エリア */
section.index-background-single{
   height: 100vh;
   display: grid;
   place-items: center;
   align-items: end;
}
section.index-background-single::before{
   width: 100vw;
   height: 100vh;
   background: url(null) center / cover fixed; /* スクロール前の固定背景画像を指定 */
   filter: saturate(0.2) contrast(2.0);
   animation: index-background 30s linear; /* アニメーション処理はサイトトップと同様にする */
   animation-fill-mode: forwards;
   position: fixed;
   z-index: -1;
   top: 0;
   left: 0;
   content: "";
}
/* 投稿一覧（archive.php）用表紙エリア */
section.index-background-archive{
   display: grid;
   place-items: center;
}
section.index-background-archive::before{
   width: 100vw;
   height: 100vh;
   background: url(null) center / cover fixed; /* スクロール前の固定背景画像を指定 */
   filter: saturate(0.2) contrast(2.0);
   animation: index-background 30s linear; /* アニメーション処理はサイトトップと同様にする */
   animation-fill-mode: forwards;
   position: fixed;
   z-index: -1;
   top: 0;
   left: 0;
   content: "";
}

/* h1 */
   /* 投稿（single.php）用 */
   .main-wrap h1.single-h1{
      font-size: 1em;
      text-align: right;
   }
   /* 固定ページ（page.php）用 */
   .main-wrap h1.page-h1{
      display: none;
      font-size: 1em;
      text-align: right;
   }

/* 本文 */
.main-wrap p:not([class]), .main-wrap ul:not([class]), .main-wrap dl:not([class]) {
   margin: auto;
   text-align: justify;
   font-family: 'Roboto Flex', sans-serif;
   font-weight: 200;
   letter-spacing: 0.04em;
   line-height: 1.8em;
}
.main-wrap p:not([class]){
   margin: 1em auto;
   text-align: initial;
}
/* 本文内に複数イメージを等間隔で表示する行を開ける枠 */
div.main-wrap-p-figure{
   text-align: center;
}
figure.main-wrap-p-imgs{
   margin: 0 2em;
   display: inline-block;
}
figure.main-wrap-p-imgs img{
   margin: 1em;
   box-shadow: 4px 4px 8px #333;
}
figcaption{
   font-size: 0.8em;
   text-align: center;
}

div.post-signature{
   text-align: center;
}
div.post-signature-txt{
   margin: 2em 0 0 0;
   display: inline-block;
   vertical-align: top;
}
div.post-signature-img{
   display: inline-block;
   width: 200px;
   text-align: center;
}
img.s-ikt_photo{
   width: 150px;
   height: 150px;
   border-radius: 50%;
}
img.s-ikt_signature{
   width: 200px;
   height: 45px;
   border-bottom: 1px solid #000;
}
img.s-ikt_signature_footer{
   width: 95px;
   margin: 0.5em;
}

figure.tunes-list-jacketart{
   width: 80px;
   height: 80px;
   margin: 1em auto;
    box-shadow: 4px 4px 8px #333;
}
figure.tunes-list-jacketart img{
   width: 80px;
   height: 80px;
}

ul.footer-destributers-list{
   display: flex;
   align-items: center;
   list-style-type: none;
   padding: 0;
   margin: 1em auto;
   width: 50vw;
}
ul.footer-destributers-list li{
   margin: 0.5em auto;
   padding: 0.5em;
}

ul.footer-destributers-list span{
   display: none;
 }
ul.footer-destributers-list li.youtubemusic img{
   max-width: 70px;
}
ul.footer-destributers-list li.applemusic img, ul.footer-destributers-list li.amazonmusic img{
   max-width: 90px;
}
ul.footer-destributers-list li.spotify img{
   max-width: 100px;
}
.footer-p{
   font-family: 'Bakbak One';
   font-size: 2.0em;
   margin: 1em 0;
}
ul.footer-bottom{
   list-style-type: none;
   text-align: center;
   font-family: 'Titillium Web', sans-serif;
   font-weight: 500;
   font-size: 1.0em;
   letter-spacing: -0.04em;
   display: flex;
   margin: 1em auto;
   padding: 0;
   width: 50vw;
}
ul.footer-bottom li{
   flex: 1;
   margin: 0.1em;
   padding: 0.5em;
}

footer.indexhtml-footer{
   padding: 1em;
   animation: noise 8s steps(10) infinite;
   background: url(../img/noizetv.png);
}

ul.indexhtml-ul-headline{
   list-style-type: none;
   text-align: justify;
   padding: 0;
   font-size: 0.9em;
   transform: rotate(358deg);
}

.main-wrap dl {
   margin: 2em 2em;
   text-align: justify;
}
.main-wrap dt {
   font-family: "Urbanist", sans-serif;
   font-style: normal;
   font-weight: 400;
   font-size: 1.2em;
}

.main-wrap-archive-php dt{
   margin: 1em auto;
   text-align: justify;
   font-style: normal;
   width: 60vw;
   margin: auto;
}


.main-wrap dd {
   margin: 1em 1em;
   text-align: justify;
}

div.jacketart-thumbnails {
   display: flex;
   justify-content: space-between;
   width: 60vw;
   justify-content: space-between;
   flex-wrap: wrap;
   margin: 0em auto;
}
div.jacketart-thumbnail-box {
   margin: 1em;
   width: 25vw;
}
div.jacketart-thumbnail-box img {
   width: 20vw;
   display: block;
   margin: 1em auto;
   box-shadow: 4px 4px 8px #333;
   filter: saturate(0.3) contrast(1.0);
}
@keyframes zoom-in-jacketart-thumbnail-box-img {
	0% {transform: scale(1.0);}
	100% {transform: scale(1.05);}
}
div.jacketart-thumbnail-box a:hover img{
   animation: zoom-in-jacketart-thumbnail-box-img 5s linear;
}

div.jacketart-thumbnail-box p{
   font-size: 0.8em;
   margin: 0.5em 1em;
   text-align: justify;
   line-height: 1.5em;
}
div.jacketart-thumbnail-box h3{
   margin: 0 auto;
   font-family: "Urbanist", sans-serif;
   font-weight: 200;
   font-size: 2.0em;
   letter-spacing: -0.02em;
   text-align: center;
}
div.jacketart-thumbnail-box-space {
   margin: auto auto;
   width: 40%;
   text-align: center;
}
div.jacketart-thumbnail-box-notes{
   margin: 2em auto;
}

dt.archive-title-dt{
   padding: 0.5em;
}
a.archive-main-pagetitles {
   display: inline;
   padding: 0.5em;
   font-family: "Urbanist", sans-serif;
   font-size: 2.0em;
   font-weight: 200;
   letter-spacing: -0.02em;
   text-decoration: none;
   word-break: break-word;
}

@media only screen and (min-width:601px) and (max-width:1000px){
   div.jacketart-thumbnail-box{
      width: initial;
   }
   div.jacketart-thumbnails{
      width: 80vw;
   }
   div.jacketart-thumbnail-box{
      width: 35vw;
   }
   }

@media only screen and (max-width:1000px){
   main{
      padding: 1em;
   }
   section.index-background::before{
/*      animation: none; */
   }
   .main-wrap p:not([class]), .main-wrap ul:not([class]), .main-wrap dl:not([class]){
      margin: 1.0em auto;
   }
   .main-wrap dt {
      margin: 1em auto;
      text-align: justify;
      font-family: "Urbanist", sans-serif;
      font-style: normal;
      font-weight: 400;
      font-size: 1.2em;      
   }
   div.main-wrap > h2{
      font-size: 4em;
   }
   .footer-wrap-address, ul.footer-bottom{
      width: initial;
      display: block;
   }
   div.footer-wrap-avator, .footer-address-copyright, .main-wrap-archive-php dt{
      width: initial;
   }
   main.archive-php{
      width: initial;
      padding: 0 1em;
   }
   ul.privacypolicy-table-ul-index, ul.privacypolicy-table-ul{
      display: initial;
      width: initial;
      margin: 0 auto;
      word-break: break-all;
      font-size: 0.8em;
   }

   section.index-background::before{
      background-size: cover;
   }
   div.index-copy>p{
      margin: .2em 1em;
   }
   div.jacketart-thumbnail-box img{
      width: 60vw;
   }
   div.jacketart-thumbnails{
      width: 80vw;
      margin: auto;
   }
   div.jacketart-thumbnail-box{
      width: 100%;
   }

   ul.composed-list-ul{
     display: flex;
     flex-direction: column;
     height: initial;
   }
   li.composed-list-li01,li.composed-list-li02,li.composed-list-li03,li.composed-list-li04,li.composed-list-li05,li.composed-list-li07{
     display: initial;
     width: initial;
     height: initial;
     padding: initial;
     margin: 0 auto;
   }
   figure.tunes-list-jacketart,figure.tunes-list-jacketart img{
     width: 160px;
     height: 160px;
   }
   .composed-list-li-title-tags{
      line-height: 2.0;
      margin: 0.5em;
   }
   li.composed-list-li03{
     padding: 0.5em 2em;
   }
   li.composed-list-li05 div.list-playbutton{
     flex-direction: initial;
   }
   li.composed-list-li05 div.list-playbutton a{
     margin: 0 auto;
   }
   div.footer-wrapper{
     flex-direction: column;
   }
   div.footer-wrap-left{
     width: initial;
   }
   nav.footer > ul{
     text-align: center;
   }
   ul.footer-destributers-list{
     flex: 1;
     text-align: center;
     flex-wrap: wrap;
     width: 70vw;
   }
   ul.footer-destributers-list li{
      margin: 0 auto;
      padding: 0.5em;
   }
   ul.footer-bottom{
      padding: 0.5em;
      font-size: 0.8em;
   }

   div.footer-wrap-left h2{
      font-size: 6.0em;
   }
   .footer-p{
      font-size: 0.7em;
   }
   h3 {
      font-size: 2.5em;
   }
   div.index-caption, section.main-wrap-single {
      max-width: 80vw;
   }
   .outnowlist_index-caption02 img {
      width: 20vw;
      margin: 0.5em auto;
   }
   h6 {
      font-size: 0.8em;
   }
   div.index-caption ul.display-posts-listing {
      display: initial;
   }
   .index-copy-notes, .index-copy-notes_tunes{
      transform: rotate(-2deg);
      width: 60vw;
   }

}

/**********************************************
*** Glitched Text Effect
**********************************************/

.glitch, .glitch a{
   color: #d9d9d9;
 }
 
 @keyframes noise-anim {
   0% {
     clip: rect(6px, 9999px, 43px, 0);
   }
   5% {
     clip: rect(97px, 9999px, 1px, 0);
   }
   10% {
     clip: rect(89px, 9999px, 27px, 0);
   }
   15% {
     clip: rect(86px, 9999px, 63px, 0);
   }
   20% {
     clip: rect(59px, 9999px, 25px, 0);
   }
   25% {
     clip: rect(71px, 9999px, 81px, 0);
   }
   30% {
     clip: rect(84px, 9999px, 35px, 0);
   }
   35% {
     clip: rect(81px, 9999px, 92px, 0);
   }
   40% {
     clip: rect(39px, 9999px, 35px, 0);
   }
   45% {
     clip: rect(17px, 9999px, 69px, 0);
   }
   50% {
     clip: rect(12px, 9999px, 8px, 0);
   }
   55% {
     clip: rect(66px, 9999px, 96px, 0);
   }
   60% {
     clip: rect(90px, 9999px, 4px, 0);
   }
   65% {
     clip: rect(95px, 9999px, 92px, 0);
   }
   70% {
     clip: rect(89px, 9999px, 71px, 0);
   }
   75% {
     clip: rect(37px, 9999px, 71px, 0);
   }
   80% {
     clip: rect(84px, 9999px, 93px, 0);
   }
   85% {
     clip: rect(90px, 9999px, 49px, 0);
   }
   90% {
     clip: rect(63px, 9999px, 10px, 0);
   }
   95% {
     clip: rect(19px, 9999px, 99px, 0);
   }
   100% {
     clip: rect(93px, 9999px, 17px, 0);
   }
 }
 .glitch:after {
   /*
   content: attr(data-text);
   position: absolute;
   left: 2px;
   text-shadow: -1px 0 red;
   top: 0;
   color: white;
   background: black;
   overflow: hidden;
   clip: rect(0, 900px, 0, 0);
   animation: noise-anim 2s infinite linear alternate-reverse;
   */
 }
 
 @keyframes noise-anim-2 {
   0% {
     clip: rect(8px, 9999px, 73px, 0);
   }
   5% {
     clip: rect(80px, 9999px, 80px, 0);
   }
   10% {
     clip: rect(73px, 9999px, 76px, 0);
   }
   15% {
     clip: rect(47px, 9999px, 50px, 0);
   }
   20% {
     clip: rect(19px, 9999px, 52px, 0);
   }
   25% {
     clip: rect(15px, 9999px, 52px, 0);
   }
   30% {
     clip: rect(80px, 9999px, 77px, 0);
   }
   35% {
     clip: rect(15px, 9999px, 21px, 0);
   }
   40% {
     clip: rect(21px, 9999px, 3px, 0);
   }
   45% {
     clip: rect(96px, 9999px, 84px, 0);
   }
   50% {
     clip: rect(93px, 9999px, 84px, 0);
   }
   55% {
     clip: rect(42px, 9999px, 82px, 0);
   }
   60% {
     clip: rect(9px, 9999px, 60px, 0);
   }
   65% {
     clip: rect(83px, 9999px, 8px, 0);
   }
   70% {
     clip: rect(71px, 9999px, 13px, 0);
   }
   75% {
     clip: rect(48px, 9999px, 67px, 0);
   }
   80% {
     clip: rect(78px, 9999px, 39px, 0);
   }
   85% {
     clip: rect(76px, 9999px, 35px, 0);
   }
   90% {
     clip: rect(49px, 9999px, 40px, 0);
   }
   95% {
     clip: rect(94px, 9999px, 13px, 0);
   }
   100% {
     clip: rect(40px, 9999px, 63px, 0);
   }
 }
 .glitch:before {
   content: attr(data-text);
   position: absolute;
   text-shadow: 2px 0 #d9d9d9;
   color: #eee;
   background: transparent;
   overflow: hidden;
   clip: rect(0, 900px, 0, 0);
   animation: noise-anim-2 3s infinite linear alternate-reverse;
 }

 /* index.html */
    /* Additional classes set to index copy and typewriter */
    div.index-copy-notes > p.typewriter{
       color: #1f2937;
       border-right: .15em solid #000;
    }
    p.typewriter a{
       color: #1f2937;
    }
    div.index-caption_guide {
    margin: 1em;
    padding: 0.5em;
    font-family: "ArchitectsDaughter", sans-serif;
    }
    table.travelogue-schedule02{
       margin: 1em 0em;
    }
    table.travelogue-schedule02 td{
        padding: 0.5em;
    }
    table.travelogue-schedule02 td.datecell{
        background:#000;
        color:#fff;
        font-weight: bold;
        text-align: center
    }
    table.travelogue-schedule02 td.datecell2{
        border: 1px solid #000;
        text-align: center
    }
    table.travelogue-schedule02 td.timecell{
        text-align: center;
    }
    ul.travelogue-bottom-navi {
        display: table;
        border-collapse: separate;
        border-spacing: 5px;
        width: 100%;
        text-align: center;
        vertical-align: middle;
        margin: 2em 0;
    }
    .travelogue-bottom-navi li {
        display: table-cell;
        padding: 1em;
        background: rgba(255, 255, 255, 0.5);
        font-size: 0.8em;
    }
    .travelogue-bottom-navi li:hover {
        background: rgba(255, 255, 255, 1.0);
    }
    p.right{
        text-align:right;
    }
    .s-ikt_sns_index-caption{
        width: 90px;
        margin: 1em;
    }
    .s-ikt_signature_index-caption{
        width: 120px;
    }
    div.s-ikt_box_index-caption{
        width: 20vw;
        display: grid;
        place-items: center;
        margin: 0 0 0 auto;
    }
    div.s-ikt_box_index-caption a{
        display: grid;
        place-items: center;
    }
    section#index-caption01 {
        background: rgba(255, 255, 255, 0.7);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        padding: 2em;
        position: relative;
        z-index: 99;
    }
    section#index-caption02, section#index-caption02b, section#index-caption04 {
        color: #fff;
        background: rgb(31 41 55 / 50%);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        padding: 2em;
        position: relative;
        z-index: 99;
    }
    section#index-caption02 a, section#index-caption02b a, section#index-caption04 a{
        color: #fff;
    }
    div.index-caption a:hover img{
        animation: zoom-in-jacketart-thumbnail-box-img 3s linear;
    }
    div.index-caption img.img-youtube-play-ico {
        width: 24px;
    }
    section#index-caption03 {
        background: rgba(255, 255, 255, 0.7);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        padding: 2em;
        position: relative;
        z-index: 99;
    }
    div.outnowlist_index-caption02 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, auto);
        gap: 1em;
        place-items: center;
        align-items: start;
    }
    .outnowlist_index-caption02 img {
        width: 10vw;
        display: block;
        margin: 1em auto;
        box-shadow: 4px 4px 8px #333;
        filter: saturate(0.3) contrast(1.0);
    }
    div.index-caption ul.display-posts-listing {
        list-style: none;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, auto);
        gap: 1em;
        place-items: center;
        align-items: start;
        padding: 0;
    }
    div.index-caption ul.display-posts-listing a{
        text-decoration: none;
    }
    div.index-caption li.listing-item {
        padding: 0.5em;
        background: rgba(255, 255, 255, 0.5);
        font-size: 0.8em;
        width: -webkit-fill-available;
        height: -webkit-fill-available;
        width: 100%;
        height: 100%;
    }
    div.index-caption li.listing-item:hover{
        background: rgba(255, 255, 255, 1.0);
        width: -webkit-fill-available;
        height: -webkit-fill-available;
    }
    div.index-caption li.listing-item::first-line{
        font-size: 1.5em;
        font-family: "Urbanist", sans-serif;
        font-weight: 100;
    }

    /* additional class to common footer */
    li.footer-bottom-copy-japanese {
    font-family: 'ShipporiMinchoB1', serif;
    font-weight: 400;
    font-size: 0.8em;
    margin: 1.0em;
    letter-spacing: 0.5em;
    line-height: 2.0em;
    }
    
    /* tunes.html */
    h1 > span {
    display: none;
    }
    .h2-title > .main-wrap {
    margin: 0 auto;
    width: 80vw;
    padding: 1em;
   }
   .index-copy-notes_tunes {
    font-family: "ArchitectsDaughter", cursive;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    transform: rotate(-3deg);
    margin-top: 1.0em;
    padding: 2.0em;
    }
    .index-copy-notes_tunes > h3 {
    font-family: "ArchitectsDaughter", sans-serif;
    font-size: 1.5em;
    -webkit-text-fill-color: initial;
    letter-spacing: initial;
    }