@charset "UTF-8";



/*
* "Mincho" is "Zen Old Mincho" downloaded from "https://github.com/googlefonts/zen-oldmincho" converted to "woff2" and "woff".
* This stylesheet uses this font data.
* "Mincho" and "Zen Old Mincho" are licensed under the SIL Open Font License, Version 1.1
* Copyright 2021 The Zen Old Mincho Project Authors (https://github.com/googlefonts/zen-oldmincho)
*/

@font-face {
    font-family: 'Mincho';
    src: url("../fonts/Mincho-Regular.woff2") format("woff2"), url("../fonts/Mincho-Regular.woff") format("woff");
    font-variant: normal;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

/*@view-transition {
    navigation: auto;
}*/

:root {
    --main-bg-color:#fff;
    --header-main-bg-color-rgb: 255,255,255;
    /*--header-main-bg-blur-color: #cce5fb18;*/
    /*--header-sub-menu-bg-color:#e5e5e5;*/
    /*--header-sub-menu-bg-color: #e5e5e5b3;*/
    --header-sub-menu-bg-color: #f1f1f1b3;
    --header-sub-menu-text-color: #000;
    --header-sub-menu-text-color-a-hover: #949494;
    --text-primary-color: #000;
    --text-primary-color-a-hover: #949494;
    --text-secondary-color: #646464; /*-- news pageの日付部分や .productInfo など --*/
    --text-secondary-color-a-hover: #949494;
    --topicpath-color: #616161;
    --topicpath-color-a-hover: #b7b7b7;
    --description-text-primary-color: #000; /*-- .productDescription --*/
    --description-text-primary-color-a-hover: #b7b7b7;
    --footer-label-primary-color: #414141; /*-- footer見出し --*/
}

html {
    scroll-padding-top: 44px;/*-- ヘッダー固定でのページ内アンカーリンクがずれる挙動を解消するためのプロパティ --*/
}

body {
	margin: 0;
	padding: 0;
    font-family: 'Mincho', serif;
	/*font-family: dnp-shuei-gothic-gin-std,"游ゴシック体","Yu Gothic Medium","Yu Gothic","Meiryo","Hiragino Kaku Gothic Pro",sans-serif;*/
    /*font-family: "游ゴシック体","Yu Gothic Medium","Yu Gothic","Meiryo","Hiragino Kaku Gothic Pro",sans-serif  !important;*/
	font-weight: 400;
    font-style: normal;
	text-align: center;
    background: var(--main-bg-color);
    width: 100%;
    position: relative;
    -webkit-text-size-adjust: 100%; /*iphoneでSlick.js使用時にslick動作領域の中の文字が大きくなるのを防ぐコード*/
}

body a {
    text-decoration: none;
}

*:focus {
	outline: none;
}

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


h1 {
    margin: 0;
    padding: 0;
    font-weight: 600;
    font-size: 16px;
    text-align: left;
}



/*-----------------------------------*/
/*---- Header & Nav From Here -------*/
/*-----------------------------------*/

/*-- smart phone portrait  --*/

@media (max-width:750px) {

    header {
        width: 100vw;
        height: 44px;
        background: rgba(var(--header-main-bg-color-rgb),0.76);
        /*-webkit-backdrop-filter: saturate(120%) blur(20px);
        backdrop-filter: saturate(120%) blur(20px);*/
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 8900;
        padding: 0;
        margin: 0;
    }

    .blurLayer {
        width: 100vw;
        height: 44px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        -webkit-backdrop-filter: saturate(100%) blur(20px);
        backdrop-filter: saturate(100%) blur(20px);
        z-index: 7000;
        padding: 0;
        margin: 0;
    }

    .blurLayerSub {
        height: 100%;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    #headerWrap {
        width: 100%;
        height: 100%;
        padding: 6px 0 0 0;
        position: relative;
    }

    #siteName {
        width: 100%;
        height: 44px;
        font-size: 17px;
        font-weight: 500;
        line-height: 250%;
        text-align: left;
        position: absolute;
        top: 0;
        left: 0;
        padding-left: 15px;
        margin: 0;
        /*padding-left: 3%;*/
        z-index: 8910;
        background-color: transparent;
    }

    #siteName a {
        color: var(--text-primary-color);
    }

    #siteName a:hover {
        color: var(--text-primary-color-a-hover);
    }


    /*-- ハンバーガーメニュー　ここから --*/

    #doubleLineMenu {
        display: none;
    }

    .menuButton {
        width: 30px;
        height: 14px;
        position: absolute;
        top: 15px;
        right: 15px;
        /*left: 10px;*/
        z-index: 9000;
        display: block;
    }

    .menuButton span {
        display: block;
        width: 100%;
        /*height: 3px;*/
        height: 2px;
        /*border-radius: 1.5px;*/
        border-radius: 1px;
        background-color: var(--text-primary-color);
        transition: all .3s;
    }

    .menuButton span:nth-of-type(2) {
        display: block;
        width: 100%;
        /*height: 3px;*/
        height: 2px;
        /*border-radius: 1.5px;*/
        border-radius: 1px;
        background-color: var(--text-primary-color);
        position: absolute;
        top: 8px;
        transition: all .3s;
    }

    



    

    #doubleLineMenu:checked + .menuButton::before {
        content: "";
    }

    #doubleLineMenu:checked + .menuButton span {
        content: "";
        transform: translateY(4px)rotate(25deg);
        width: 100%;
        /*height: 3px;*/
        height: 2px;
        /*border-radius: 1.5px;*/
        border-radius: 1px;
        background-color: var(--text-primary-color);
    }

    #doubleLineMenu:checked + .menuButton span:nth-of-type(2) {
        content: "";
        transform: translateY(-4px)rotate(-25deg);
        width: 100%;
        /*height: 3px;*/
        height: 2px;
        /*border-radius: 1.5px;*/
        border-radius: 1px;
        background-color: var(--text-primary-color);
    }

    nav {
        visibility: hidden;
        width: 100vw;
        /*width: 100%;*/
        /*height: 100%;*/
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 8000;
        padding: 59px 15px 180px 15px;
        color: #000;
        background: var(--main-bg-color);
        overflow-y: scroll;
        text-align: left;
        overscroll-behavior-y: contain; /*-- navメニュー表示時に背後のレイヤーがスクロールしないための記述 --*/
    }

    #doubleLineMenu:checked ~ nav {
        visibility: visible;
    }


    #doubleLineMenu:checked ~ #siteName {
        background: rgba(var(--header-main-bg-color-rgb), 1);
    }

    




    /*-- ハンバーガーメニュー ここまで --*/

    nav ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 15px 15px;
    }

    nav ul li {
        width: 300px;
        height: auto;
        margin: 0 0 10px 0;
        padding: 20px 0 0 30px;
        font-size: 22px;
        font-weight: 600;
        line-height: 100%;
        border-radius: 20px 0 0 0;
        /*border-left: 1px solid var(--text-primary-color);
        border-top: 1px solid var(--text-primary-color);*/
    }


    /*-- SP & Tabではメニュー小項目は非表示にする --*/
    .subMenu {
        display: none;
    }

    .subMenu.active {
        display: block;
    }

    #doubleLineMenu:not(:checked) ~ nav ul li .subMenu {
        display: none;
    }



    .block {
        padding: 30px 0 30px 30px;
    }

    .block > ul li {
        border-left: none;
        border-top: none;
    }

    .block ul li {
        margin: 0;
        padding: 0;
        font-size: 18px;
        font-weight: 500;
        line-height: 200%;
    }

    nav ul li a {
        color: var(--text-primary-color);
    }

    nav ul li a:hover {
        color: var(--text-primary-color-a-hover);
    }


    /*-- header sub menu link arrow --*/
    nav ul li div .block ul li a .linkArrow {
        stroke: var(--text-primary-color);
    }
    
    nav ul li div .block ul li a:hover .linkArrow {
        stroke: var(--text-primary-color-a-hover);
    }
    


}


/*-- smart phone landscape --*/

/*@media (orientation: landscape) and (max-width: 750px){

}*/



/*-- tablet portrait --*/

@media (min-width:751px) and (max-width:1024px) {

    header {
        width: 100%;
        height: 44px;
        /*background-color: #fff;*/
        background: rgba(var(--header-main-bg-color-rgb),0.76);
        /*-webkit-backdrop-filter: saturate(120%) blur(20px);
        backdrop-filter: saturate(120%) blur(20px);*/
        position: fixed;
        top: 0;
        left: 0;
        z-index: 8100;
    }

    .blurLayer {
        width: 100%;
        height: 44px;
        position: fixed;
        top: 0;
        left: 0;
        -webkit-backdrop-filter: saturate(100%) blur(20px);
        backdrop-filter: saturate(100%) blur(20px);
        z-index: 7000;
    }

    .blurLayerSub {
        height: 100%;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    #headerWrap {
        width: 100%;
        height: 100%;
        padding: 6px 0 0 0;
        position: relative;
    }

    #siteName {
        /*width: 97%;*/
        width: 100%;
        height: 44px;
        font-size: 17px;
        font-weight: 500;
        line-height: 250%;
        text-align: left;
        position: absolute;
        top: 0;
        left: 0;
        padding-left: 20px;
        z-index: 8500;
        /*background-color: #fff;*/
        background-color: transparent;
    }

    #siteName a {
        color: var(--text-primary-color);
    }

    #siteName a:hover {
        color: var(--text-primary-color-a-hover);
    }


    /*-- ハンバーガーメニュー　ここから --*/

    #doubleLineMenu {
        display: none;
    }

    .menuButton {
        width: 30px;
        height: 14px;
        position: absolute;
        top: 15px;
        right: 20px;
        z-index: 9000;
        display: block;
    }

    .menuButton span {
        display: block;
        width: 100%;
        height: 2px;
        border-radius: 1px;
        background-color: var(--text-primary-color);
        transition: all .3s;
        z-index: 9000;
    }

    .menuButton span:nth-of-type(2) {
        display: block;
        width: 100%;
        height: 2px;
        border-radius: 1px;
        background-color: var(--text-primary-color);
        position: absolute;
        top: 8px;
        transition: all .3s;
        z-index: 9000;
    }

    



    

    #doubleLineMenu:checked + .menuButton::before {
        content: "";
    }

    #doubleLineMenu:checked + .menuButton span {
        content: "";
        transform: translateY(4px)rotate(25deg);
        width: 100%;
        height: 2px;
        border-radius: 1px;
        background-color: var(--text-primary-color);
        z-index: 9000;
    }

    #doubleLineMenu:checked + .menuButton span:nth-of-type(2) {
        content: "";
        transform: translateY(-4px)rotate(-25deg);
        width: 100%;
        height: 2px;
        border-radius: 1px;
        background-color: var(--text-primary-color);
        z-index: 9000;
    }

    nav {
        visibility: hidden;
        /*width: 100%;
        height: 100%;*/
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 8000;
        padding: 59px 20px 180px 20px;
        color: #000;
        background: var(--main-bg-color);
        overflow-y: scroll;
        text-align: left;
        overscroll-behavior-y: contain; /*-- navメニュー表示時に背後のレイヤーがスクロールしないための記述 --*/
    }

    #doubleLineMenu:checked ~ nav {
        visibility: visible;
    }

    #doubleLineMenu:checked ~ #siteName {
        background: rgba(var(--header-main-bg-color-rgb), 1);
    }

    /*-- ハンバーガーメニュー ここまで --*/

    nav ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 12px 12px;
    }

    nav ul li {
        width: 300px;
        height: auto;
        margin: 0 0 30px 0;
        padding: 10px 0 0 20px;
        font-size: 30px;
        font-weight: 600;
        line-height: 200%;
        border-radius: 20px 0 0 0;
        /*border-left: 1px solid var(--text-primary-color);
        border-top: 1px solid var(--text-primary-color);*/
    }


    /*-- SP & Tabではメニュー小項目は非表示にする --*/
    .subMenu {
        display: none;
    }

    .subMenu.active {
        display: block;
    }

    #doubleLineMenu:not(:checked) ~ nav ul li .subMenu {
        display: none;
    }



    .block {
        padding: 0 0 60px 30px;
    }

    .block > ul li {
        border-left: none;
        border-top: none;
    }

    .block ul li {
        margin: 0;
        padding: 0;
        font-size: 20px;
        font-weight: 500;
        line-height: 230%;
    }

    nav ul li a {
        color: var(--text-primary-color);
    }

    nav ul li a:hover {
        color: var(--text-primary-color-a-hover);
    }


    /*-- header sub menu link arrow --*/
    nav ul li div .block ul li a .linkArrow {
        stroke: var(--text-primary-color);
    }
    
    nav ul li div .block ul li a:hover .linkArrow {
        stroke: var(--text-primary-color-a-hover);
    }

    


}



/*-- tablet landscape --*/

@media (orientation: landscape) and (min-width:751px) and (max-width:1024px) {

    header {
        width: 100%;
        height: 44px;
        background: rgba(var(--header-main-bg-color-rgb),0.76);
        /*-webkit-backdrop-filter: saturate(120%) blur(20px);
        backdrop-filter: saturate(120%) blur(20px);*/
        position: fixed;
        top: 0;
        left: 0;
        z-index: 8100;
    }

    .blurLayer {
        width: 100%;
        height: 44px;
        position: fixed;
        top: 0;
        left: 0;
        -webkit-backdrop-filter: saturate(100%) blur(20px);
        backdrop-filter: saturate(100%) blur(20px);
        z-index: 7000;
    }

    .blurLayerSub {
        height: 100%;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    #headerWrap {
        width: 100%;
        height: 100%;
        padding: 6px 0 0 0;
        position: relative;
    }

    #siteName {
        width: 100%;
        height: 44px;
        font-size: 17px;
        font-weight: 500;
        line-height: 250%;
        text-align: left;
        position: absolute;
        top: 0;
        left: 0;
        padding-left: 10px;
        z-index: 8500;
        background-color: transparent;
    }

    #siteName a {
        color: var(--text-primary-color);
    }

    #siteName a:hover {
        color: var(--text-primary-color-a-hover);
    }


    

    #doubleLineMenu {
        display: none;
    }

    .menuButton {
        width: 30px;
        height: 14px;
        position: absolute;
        top: 15px;
        right: 10px;
        z-index: 9000;
        display: block;
    }

    .menuButton span {
        display: block;
        width: 100%;
        height: 2px;
        border-radius: 1px;
        background-color: var(--text-primary-color);
        transition: all .3s;
        z-index: 9000;
    }

    .menuButton span:nth-of-type(2) {
        display: block;
        width: 100%;
        height: 2px;
        border-radius: 1px;
        background-color: var(--text-primary-color);
        position: absolute;
        top: 8px;
        transition: all .3s;
        z-index: 9000;
    }

    



    

    #doubleLineMenu:checked + .menuButton::before {
        content: "";
    }

    #doubleLineMenu:checked + .menuButton span {
        content: "";
        transform: translateY(4px)rotate(25deg);
        width: 100%;
        height: 2px;
        border-radius: 1px;
        background-color: var(--text-primary-color);
        z-index: 9000;
    }

    #doubleLineMenu:checked + .menuButton span:nth-of-type(2) {
        content: "";
        transform: translateY(-4px)rotate(-25deg);
        width: 100%;
        height: 2px;
        border-radius: 1px;
        background-color: var(--text-primary-color);
        z-index: 9000;
    }

    nav {
        visibility: hidden;
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 8000;
        padding: 59px 10px 180px 10px;
        color: #000;
        background: var(--main-bg-color);
        overflow-y: scroll;
        text-align: left;
        overscroll-behavior-y: contain;
    }

    #doubleLineMenu:checked ~ nav {
        visibility: visible;
    }

    #doubleLineMenu:checked ~ #siteName {
        background: rgba(var(--header-main-bg-color-rgb), 1);
    }



    

    nav ul {
        width: 100%;
        list-style-type: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 12px 12px;
    }

    nav ul li {
        width: 300px;
        height: auto;
        margin: 0 0 20px 0;
        padding: 0 0 0 30px;
        font-size: 30px;
        font-weight: 600;
        line-height: 300%;
        border-radius: 20px 0 0 0;
        /*border-left: 1px solid var(--text-primary-color);
        border-top: 1px solid var(--text-primary-color);*/
    }


    /*-- SP & Tabではメニュー小項目は非表示にする --*/
    .subMenu {
        display: none;
    }

    .subMenu.active {
        display: block;
    }

    #doubleLineMenu:not(:checked) ~ nav ul li .subMenu {
        display: none;
    }



    .block {
        padding: 0 0 40px 30px;
    }

    .block > ul li {
        border-left: none;
        border-top: none;
    }

    .block ul li {
        padding: 0;
        margin: 0;
        font-size: 20px;
        font-weight: 500;
        line-height: 250%;
    }

    nav ul li a {
        color: var(--text-primary-color);
    }

    nav ul li a:hover {
        color: var(--text-primary-color-a-hover);
    }


    /*-- header sub menu link arrow --*/
    nav ul li div .block ul li a .linkArrow {
        stroke: var(--text-primary-color);
    }
    
    nav ul li div .block ul li a:hover .linkArrow {
        stroke: var(--text-primary-color-a-hover);
    }
    

    


}


/*-- pc --*/

@media (min-width:1025px) {

    header {
        width: 100%;
        height: 44px;
        background: rgba(var(--header-main-bg-color-rgb),0.76);
        /*-webkit-backdrop-filter: saturate(120%) blur(20px);
        backdrop-filter: saturate(120%) blur(20px);*/
        position: fixed;
        top: 0;
        left: 0;
        z-index: 100;
    }

    .blurLayer {
        width: 100%;
        height: 44px;
        position: fixed;
        top: 0;
        left: 0;
        -webkit-backdrop-filter: saturate(100%) blur(20px);
        backdrop-filter: saturate(100%) blur(20px);

        /*box-shadow: inset -10px -10px 5px var(--header-main-bg-blur-color), inset 10px 10px 5px var(--header-main-bg-blur-color);*/
        
        z-index: 99;
    }


    .blurLayerSub {
        width: 100vw;
        height: 54px;
        -webkit-backdrop-filter: saturate(120%) blur(20px);
        backdrop-filter: saturate(120%) blur(20px);
        overflow: hidden;
    }

    #headerWrap {
        width: 100%;
        max-width: 1300px;
        height: 44px;
        /*padding: 6px 10px 0 10px;*/
        padding: 6px 10px 0 10px;
        margin: 0 auto;
        position: relative;
        z-index: 4000;
    }



    /*-- スマホ版二重線メニュー　非表示　ここから --*/

    #doubleLineMenu {
        display: none;
    }

    .menuButton {
        display: none;
    }

    /*-- スマホ版二重線メニュー　非表示　ここまで --*/



    #siteName {
        width: 110px;
        height: 44px;
        font-size: 17px;
        font-weight: 500;
        line-height: 250%;
        text-align: left;
        position: absolute;
        top: 0;
        left: 10px;
        z-index: 5000;
    }

    /* width 1300px を超えたときに headerWrap と
       #siteName の余白（padding と position:absolute の left値 ）を無くす */
    @media (min-width:1300px) {

        #headerWrap {
            padding: 6px 0 0 0;
        }

        #siteName {
            left: 0;
        }

    }




    #siteName a {
        color: var(--text-primary-color);
        display: block;
    }

    #siteName a:hover {
        color: var(--text-primary-color-a-hover);
    }

    nav {
        width: 100%;
        height: 44px;
        display: block;
        margin: 0 auto;
        padding: 0 300px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 4000;
    }



    nav ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        height: 44px;
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
    }

    nav ul li {
        width: auto;
        height: 44px;
        font-weight: 500;
        line-height: 250%;
        font-size: 17px;
        font-weight: 500;
        padding: 0 15px;
    }

    nav ul li a {
        color: var(--text-primary-color);
    }

    nav ul li a:hover {
        color: var(--text-primary-color-a-hover);
    }


    /*-- SP & Tabではメニュー小項目は非表示にする --*/
    .subMenu {
        display: block;
        visibility: hidden;
    }

    .subMenu.active {
        display: block;
        visibility: visible;
    }

    

    /*-- navメニューの子要素 --*/
    #navStoreSubMenuDesktop, #navGraphicsSubMenuDesktop, #navBioSubMenuDesktop, #navNewsSubMenuDesktop, #navJournalSubMenuDesktop {
        /*width: 100%;*/
        width: 100vw;
        /*height: 44px;*/
        height: 54px;
        margin-right: calc(50% - 50vw);
        margin-left: calc(50% - 50vw);
        padding-right: calc(50vw - 50%);
        padding-left: calc(50vw - 50%);
        background-color: var(--header-sub-menu-bg-color);
        border-top: 0.5px solid #3a3a3a;
        position: absolute;
        top: 44px;
        left: 0;
        z-index: 101;
        visibility: hidden;
    }

    

    .block {
        width: 100%;
        height: 54px;
    }

    #navStoreSubMenuDesktop .block ul, #navGraphicsSubMenuDesktop .block ul, #navBioSubMenuDesktop .block ul, #navNewsSubMenuDesktop .block ul, #navJournalSubMenuDesktop .block ul {
        width: 100%;
        padding: 0 300px;
        list-style-type: none;
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
    }

    #navStoreSubMenuDesktop .block ul li, #navGraphicsSubMenuDesktop .block ul li, #navBioSubMenuDesktop .block ul li, #navNewsSubMenuDesktop .block ul li, #navJournalSubMenuDesktop .block ul li {
        width: auto;
        white-space: nowrap;
        margin: 0 15px;
        padding: 11px 0 0 0;
        line-height: 200%;
        font-size: 15px;
        z-index: 4000;
    }

    #navStoreSubMenuDesktop .block ul li a, #navGraphicsSubMenuDesktop .block ul li a, #navBioSubMenuDesktop .block ul li a, #navNewsSubMenuDesktop .block ul li a, #navJournalSubMenuDesktop .block ul li a {
        /*color: #fff;*/
        color: var(--header-sub-menu-text-color);
    }

    #navStoreSubMenuDesktop .block ul li a:hover, #navGraphicsSubMenuDesktop .block ul li a:hover, #navBioSubMenuDesktop .block ul li a:hover, #navNewsSubMenuDesktop .block ul li a:hover, #navJournalSubMenuDesktop .block ul li a:hover {
        /*color: #bfbfbf;*/
        color: var(--header-sub-menu-text-color-a-hover);
    }

    #navStore:hover #navStoreSubMenuDesktop {
        visibility: visible;
    }

    #navGraphics:hover #navGraphicsSubMenuDesktop {
        visibility: visible;
    }

    #navBio:hover #navBioSubMenuDesktop {
        visibility: visible;
    }

    #navNews:hover #navNewsSubMenuDesktop {
        visibility: visible;
    }

    #navJournal:hover #navJournalSubMenuDesktop {
        visibility: visible;
    }



    /*-- header sub menu link arrow --*/
    nav ul li div .block ul li a .linkArrow {
        stroke: var(--header-sub-menu-text-color);
    }
    
    nav ul li div .block ul li a:hover .linkArrow {
        stroke: var(--header-sub-menu-text-color-a-hover);
    }


}




/* header link arrow 共通 */
.linkArrow {
    width: 10px;
    height: 10px;
    margin-top: 3px;
    stroke: var(--text-primary-color);
}

nav ul li a:hover .linkArrow {
    stroke: var(--text-primary-color-a-hover);
}



/*-----------------------------------*/
/*---- Header & Nav Ends Here -------*/
/*-----------------------------------*/







/*-----------------------------------*/
/*---- Main Contents From Here ------*/
/*-----------------------------------*/


/*-- 全メディアクエリ共通  ここから--*/

/* .newsWrap 内の link arrow 共通 */
.newsWrap > a > .newsArticle > .newsDescription > .newsTitle > .linkArrow {
    width: 10px;
    height: 10px;
    margin-top: 3px;
    stroke: var(--text-primary-color);
}

.newsWrap >  a:hover > .newsArticle > .newsDescription > .newsTitle > .linkArrow {
    stroke: var(--text-primary-color-a-hover);
}

/* biography table 要素内リンク */
table tr td > a > .linkArrow {
    width: 10px;
    height: 10px;
    margin-top: 3px;
    stroke: var(--text-primary-color);
}

table tr td > a:hover > .linkArrow {
    stroke: var(--text-primary-color-a-hover);
}


/*-- graphic list などのスクエアサムネイル --*/
/*-- sp 縦と横, tablet 縦と横まで有効。pc用は別記載。 --*/
.itemThumbnail {
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 1;
}

/*-- 画像に対するocrを打ち消すレイヤ .itemThumbnail と .imgUnit と .productImgUnit 内で使用 --*/
.no-ocrMask {
    width: 100%;
    height: 100%;
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
}



/*-- 全メディアクエリ共通  ここまで--*/


/*-- smart phone portrait  --*/


@media (max-width: 750px) {

    .main {
        position: relative;
        width: 100%;
        margin: 0;
        /*padding: 44px 10px 0 10px;*/
        padding: 44px 0 0 0;
    }

    /*-- Top Page Only  From Here --*/
    .topPageSection {
        width: 100%;
    }

    .sectionUnit {
        width: 100%;
        margin: 0 0 15px 0;
    }

    .sectionContent {
        width: 100%;
        height: 500px;
        position: relative;
        overflow: hidden;
    }

    .unitLink {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: 30;
    }

    .copyWrapper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        padding-top: 50px;
        z-index: 10;
    }

    /* copyWrapper をセクション下まで下げる */
    .copyBottom {
        /*padding-top: 290px;*/
        padding-top: 280px;
    }

    .symbolTitle {
        /*font-size:14.3vw;*/
        /*font-size: 20vw;*/
        font-size: 70px;
        text-align: center;
        color: var(--text-title-color);
        font-weight: 500;
        line-height: 95%;
        position: absolute;
        transform: translateX(-49%);
        left: 49%;
    }

    .symbolHeadline {
        font-size: 1.2rem;
        text-align: center;
        color: var(--text-title-color);
        font-weight: 500;
        line-height: 100%;
        position: absolute;
        /*bottom: 30px;*/
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
    }

    .brSpOnly {
        display: block;
    }

    .headlineLabel {
        font-size: 12px;
        text-align: center;
        margin: 0;
        padding: 0 0 10px 0;
    }

    .headline {
        font-size: 30px;
        font-weight: 600;
        margin: 0;
        padding: 0;
        line-height: 110%;
        text-align: center;
    }

    .subHeadline {
        font-size: 16px;
        font-weight: 400;
        margin: 0;
        padding: 10px 16px 0 16px;
        line-height: 1.5em;
        text-align: center;
    }

    .subHeadlineCenter {
        font-size: 16px;
        font-weight: 400;
        margin: 0;
        padding: 10px 16px 0 16px;
        line-height: 1.5em;
        text-align: center;
    }

    .jpHeadlineAdjust {
        margin-right: -30px;
        display: inline-flex;
    }

    .jpSubHeadlineAdjust {
        margin-right: -16px;
        display: inline-flex;
    }

    .spNewLine {
        display: none;
    }

    

    /*-- .headline の色の変更 --*/
    .textColorWhite {
        color: #fff;
    }

    .textColorBlack {
        color: #222222;
    }


    /*-- リンクテキストボタン --*/

    .linkWrapper {
        width: auto;
        position: absolute;
        top: 170px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 40;
        text-align: center;
        white-space: nowrap;
    }

    .linkBtn {
        padding: 0;
    }

    .linkBtn a .linkBtnInner {
        display: block;
        /*font-family: "游ゴシック体","Yu Gothic Medium","Yu Gothic","Meiryo","Hiragino Kaku Gothic Pro",sans-serif;*/
        font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
        width: auto;
        height: 48px;
        border-radius: 30px;
        border: 2px solid #fff;
        pointer-events: all;
        z-index: 40;
        color: #fff;
        line-height: 100%;
        margin: 2% 0 0 0;
        padding: 14px 20px;
        font-size: 15px;
        font-weight: 600;
        transition: all .2s ease-in-out;
        margin: 0;
    }

    .linkBtn > a, .linkBtnBlack > a {
        display: block;
        width: auto;
        height: 48px;
        border-radius: 25px;
    }

    .linkBtn a:hover .linkBtnInner {
        color: #000;
        background-color: #fff;
    }

    /*-- リンクテキストボタン　色の変更 --*/
    .linkBtnBlack {
        padding: 0;
    }

    .linkBtnBlack a .linkBtnInner {
        display: block;
        /*font-family: "游ゴシック体","Yu Gothic Medium","Yu Gothic","Meiryo","Hiragino Kaku Gothic Pro",sans-serif;*/
        font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
        color: #222222;
        border: 2px solid #222222;
        width: auto;
        height: 48px;
        border-radius: 30px;
        pointer-events: all;
        z-index: 40;
        line-height: 100%;
        margin: 2% 2% 0 0;
        padding: 14px 20px;
        font-size: 15px;
        font-weight: 600;
        transition: all .2s ease-in-out;
        margin: 0;
    }

    .linkBtnBlack a:hover .linkBtnInner {
        color: #fff;
        background-color: #222222;
    }
    

    



    .sectionImgFrame {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        max-width: 2700px;
        height: 100%;
        z-index: 1;
    }

    /*-- .sectionImgFrame の中身 --*/
    .worksGlassBody {
        background-image: url(../images/glass-body.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .worksAfterTheCraving {
        background-image: url(../images/after-the-craving.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .worksSelfShield {
        background-image: url(../images/self-shield.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .worksLighthouse {
        background-image: url(../images/lighthouse.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .artbookImg {
        background-image: url(../images/artbook-dialogue-with-ai-1-2-3-cover-sp.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .noticeImg {
        background-image: url(../images/etude-image-20251107.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .worksBringDreams {
        background-image: url(../images/bring-dreams.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .gicleeObserver {
        background-image: url(../images/giclee-observer-cover-sp.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .worksWrinkleBox {
        background-image: url(../images/wrinkle-box-pc.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .worksScribble2 {
        background-image: url(../images/scribble-2-cover-sp.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center top;
    }

    .worksSavor {
        background-image: url(../images/savor-morning-cover-pc.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .casieImg {
        background-image: url(../images/casie-update-mv-sp.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .worksOasis {
        background-image: url(../images/oasis.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center top;
    }

    .worksYellowClothes {
        background-image: url(../images/yellow-clothes.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 45% top;
    }

    .seriesSet {
        background-image: url(../images/sunbathing.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center top;
    }

    .exhibition {
        background-image: url(../images/bring-dreams-2.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center 5%;
    }

    .worksFreshGreenGathering {
        background-image: url(../images/fresh-green-gathering.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center top;
    }

    .worksWisher {
        background-image: url(../images/wisher.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 48% top;
    }

    .preorder {
        background-image: url(../images/giclee-preorder-2023-sp.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center 55%;
    }

    .symbolWork {
        background-image: url(../images/near-my-life.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center top;
    }

    .restInPeaceEn {
        background-image: url(../images/rest-in-peace-leave-space.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .shipOfMemoryEn {
        background-image: url(../images/ship_of_memory_banner_sp.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .worksBela {
        background-image: url(../images/bela.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center 30%;
    }

    .worksMilda {
        background-image: url(../images/milda.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .newWork {
        background-image: url(../images/solace.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .newWork-2 {
        background-image: url(../images/implexus-atsushigraph-artwork-sp.jpg);
        background-repeat: no-repeat;
        background-size: 170%;
        background-position: center 77%;
    }

    .newWork-3 {
        background-image: url(../images/light-rocks-cover-sp.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center top;
    }

    .newWork-4 {
        background-image: url(../images/nap.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center top;
    }

    .gicleeLightRocks {
        background-image: url(../images/giclee-light-rocks-hero-img-sp.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center bottom;
    }

    .gicleeUtopia {
        background-image: url(../images/utopia.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .graphicUtopia {
        background-image: url(../images/utopia.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .bioImg {
        background-image: url(../images/brain-remix-pc.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center top;
    }

    .newYear {
        background-image: url(../images/aim.jpg);
        background-repeat: no-repeat;
        background-size: 220%;
        background-position: center top;
    }


    .videoWrap {
        max-width: 2700px;
        z-index: 1;
        height: 500px;
        position: relative;
        overflow: hidden;
    }

    .heroImgVideo {
        height: 100%;
        width: auto;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        vertical-align: bottom;
        z-index: -1;
    }


    .gradationMask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background:linear-gradient(to bottom, rgba(59, 59, 59, 0.23) 0, transparent 100%);
        z-index: 2;
    }

    .gradationMask-2 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background:linear-gradient(to bottom, rgba(18, 18, 18, 0.4) 0, transparent 100%);
        z-index: 2;
    }

    .gradationMask-3 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background:linear-gradient(to bottom, rgba(18, 18, 18, 0.3) 0, transparent 100%);
        z-index: 2;
    }


    /*リンクボタン「作品を見る」をスマホでのみ一部10px下げる（通常はtop:170px）*/
    .btnDown {
        top: 180px;
    }

    /*リンクボタン「作品を見る」をスマホでのみセクションの下部まで下げる（通常はtop:170px）*/
    .btnBottom {
        top: 420px;
    }


    /*-- Top Page Only  Ends Here --*/


    /*-- Item Grid Layout Unit Commmon  From Here--*/

    .unitTitle {
        width: 100%;
        /*height: 30px;*/
        height: auto;
        position: relative;
        display: inline-block;
        margin-top: 15px;
        font-size: 16px;
        font-weight: 500;
        text-align: left;
        color: var(--text-primary-color);
        padding: 0 15px;
        border-top:none;
    }

    .unitTitle > h1 {
        font-weight: 400;
    }

    .unitTitle::before {
        content: '';
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 0;
        display: inline-block;
        width: calc(100% - 30px);
        height: 1px;
        background-color: var(--text-primary-color);
    }

    .itemLayout2Column {
        width: 100%;
        height: auto;
        margin-top: 15px;

        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 8px;
        padding: 0 15px;
    }

    .itemLayout {
        width: 100%;
        height: auto;
        margin-top: 15px;

        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        padding: 0 15px;
    }


    .itemWrap {
        width: 100%;
        height: 100%;
        position: relative;
        margin: 0 0 10px 0;
    }


    /* News Articles Layout ここから */

    .newsLayout {
        width: 100%;
        height: auto;
        /*margin-top: 15px;*/
        margin-top: 0;
        padding: 0 15px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        /*display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: max-content max-content 1fr auto;
        gap: 8px;*/
    }

    .newsWrap {
        width: 100%;
        height: auto;
        padding: 0;
        margin: 15px 0 15px 0;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: space-between;
        border-bottom: 1px dotted var(--text-primary-color);
    }

    .newsWrap:nth-last-of-type(1) {
        border-bottom: none;
    }

    .newsWrap a {
        width: 100%;
        height: 100%;
    }

    .newsArticle {
        width: 100%;
        height: auto;
        /*min-height: 640px;*/
        padding-bottom: 15px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        border-top: none;
        border-right: none;
        border-left: none;
        /*border-bottom: 1px dotted #000;*/
        border-bottom: none;
    }

    .newsWrap a:hover .newsArticle {
        /*border-bottom: 1px dotted #949494;*/
        border-bottom: none;
    }

    .newsDescription {
        width: 49%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: relative;
    }

    .newsTitle {
        width: 100%;
        height: auto;
        /*position: relative;*/
        font-size: 15px;
        text-align: left;
        padding: 10px 0;
    }


    .newsDateAndCategory {
        width: 100%;
        font-size: 11px;
        /*position: relative;*/
        text-align: left;
        padding: 5px 0 10px 0;
    }

    .newsMedia {
        width: 48%;
    }

    .newsMedia img {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        z-index: 1;
        /*object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;*/
        /*transform: translateY(-50%);*/
    }

    .newsWrap a .newsArticle .newsDescription .newsTitle {
        color: var(--text-primary-color);
    }

    .newsWrap a:hover .newsArticle .newsDescription .newsTitle {
        color: var(--text-primary-color-a-hover);
        /*color: #000;*/
    }

    .newsWrap a .newsArticle .newsDescription .newsDateAndCategory {
        color: var(--text-secondary-color);
        /*color: #000;*/
    }

    .newsWrap a:hover .newsArticle .newsDescription .newsDateAndCategory {
        color: var(--text-secondary-color-a-hover);
        /*color: #000;*/
    }

    .newsWrap a:hover .newsArticle .newsMedia img {
        opacity: .8;
        /*opacity: 1;*/
    }

    /* News Articles Layout ここまで */
    
    

    

    /* sold out 表示の擬似要素 */
    .itemSoldOutLabel::after {
        content: 'sold out';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 80px;
        height: 30px;
        padding: 3% 2% 1.5% 2%;
        border-radius: 0 5px 0 0;
        background-color: rgba(0,0,0,0.3);
        font-size: 12px;
        color: #fff;
        font-family: "游ゴシック体","Yu Gothic Medium","Yu Gothic","Meiryo","Hiragino Kaku Gothic Pro",sans-serif;
    }

    .itemThumbnail img {
        width: 100%;
        aspect-ratio: 1 / 1;
        vertical-align: bottom;

        /*画像コピー禁止のためのcssここから*/
		user-select:none;
		-moz-user-select:none;
		-ms-user-select:none;
		-webkit-user-select:none;
		-khtml-user-select:none;
		-webkit-user-drag: none;
		-khtml-user-drag: none;
		-webkit-touch-callout: none;
		/*画像コピー禁止のためのcssここまで*/
    }

    .itemThumbnail picture img {
        width: 100%;
        aspect-ratio: 1 / 1;
        vertical-align: bottom;

        /*画像コピー禁止のためのcssここから*/
		user-select:none;
		-moz-user-select:none;
		-ms-user-select:none;
		-webkit-user-select:none;
		-khtml-user-select:none;
		-webkit-user-drag: none;
		-khtml-user-drag: none;
		-webkit-touch-callout: none;
		/*画像コピー禁止のためのcssここまで*/
    }

    .itemThumbnail .videoItem {
        width: 100%;
        aspect-ratio: 1 / 1;
        vertical-align: bottom;

        /*画像コピー禁止のためのcssここから*/
		user-select:none;
		-moz-user-select:none;
		-ms-user-select:none;
		-webkit-user-select:none;
		-khtml-user-select:none;
		-webkit-user-drag: none;
		-khtml-user-drag: none;
		-webkit-touch-callout: none;
		/*画像コピー禁止のためのcssここまで*/
    }

    .itemText {
        font-size: 15px;
        text-align: left;
        line-height: 130%;
        z-index: 10;
    }

    .itemLinkMask .itemText {
        color: var(--text-primary-color);
    }

    .itemLinkMask:hover .itemText {
        color: var(--text-primary-color-a-hover);
    }

    

    /*-- Item Grid Layout Unit Commmon  Ends Here--*/




    /*-- Item Detail Page Layout   From Here --*/


    /*-- TopicPath From Here --*/
    .topicpath {
        display: block;
        width: 100%;
        padding: 0 15px 5px 15px;
        margin: 0;
    }

    ol {
        list-style-type: none;
        padding-left: 0;
        padding-right: 5px;
        margin: 0;
        font-size: 11px;
        line-height: 180%;
        display: flex;
        color: var(--topicpath-color);
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }

    ol li {
        /*font-family: "游ゴシック体","Yu Gothic Medium","Yu Gothic","Meiryo","Hiragino Kaku Gothic Pro",sans-serif;*/
        font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
        font-size: 11px;
        line-height: 180%;
        color: var(--topicpath-color);
        margin: 0 7px 0 0;
        padding: 0;
        white-space:nowrap;
    }

    ol li:nth-child(n+2) {
        margin-left: 7px;
    }

    ol li a {
        color: var(--topicpath-color);
    }

    ol li a:hover {
        color: var(--topicpath-color-a-hover);
    }

    /*-- TopicPath Ends Here --*/


    .productArticle {
        width: 100%;
    }

    .grid {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 8px;
    }


    .images {
        /*width: 100vw;
        overflow: visible;*/
        display: none;
    }

    .imgBlock {
        width: 100vw;
        height: auto;
        position: relative;
        /*top: 44px;*/
    }

    .imgUnit {
        /*width: 100%;*/
        display: none;
    }

    .img {
        width: 100%;
        vertical-align: bottom;

        /*画像コピー禁止のためのcssここから*/
		user-select:none;
		-moz-user-select:none;
		-ms-user-select:none;
		-webkit-user-select:none;
		-khtml-user-select:none;
		-webkit-user-drag: none;
		-khtml-user-drag: none;
		-webkit-touch-callout: none;
		/*画像コピー禁止のためのcssここまで*/

        z-index: 1;
    }

    .description {
        width: 100%;
        padding: 0;
    }

    .descriptionBlock {
        width: 100%;
        height: auto;
        position:static;
    }

    .productTitle {
        font-size: 34px;
        letter-spacing: -0.02px;
        text-align: left;
        line-height: 100%;
        margin: 20px 0 20px 0;
        padding: 0 15px;
        color: var(--text-primary-color);
        font-weight: 500;
    }

    .productOutline {
        font-size: 15px;
        color: var(--text-primary-color);
        line-height: 100%;
    }

    .productInfo {
        font-size: 14px;
        text-align: left;
        color: var(--text-secondary-color);
        margin-bottom: 20px;
        padding: 0 15px;
    }

    .productInfo a {
        color: var(--text-secondary-color);
        /*border-bottom: 1px solid #626262;*/
    }

    .productInfo a:hover {
        color: var(--text-secondary-color-a-hover);
        /*border-bottom: 1px solid #a2a2a2;*/
    }



    /*-- 購入ボタン　ここから --*/

    .buyBtnWrapper {
        width: 100%;
        height: 150px;
        margin-top: 15px;
        padding: 10px 15px;
        /*border-bottom: 1px solid #000;*/
        border-bottom: none;
        text-align: left;
        position: relative;
        display: flex;
        flex-wrap: wrap;
        white-space:nowrap;
        justify-content: stretch;
        align-items:center;
    }

    .buyBtnWrapper::before {
        content: '';
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 0;
        display: inline-block;
        width: calc(100% - 30px);
        height: 1px;
        background-color: black;
    }

    .typeAndPrice {
        width: 100%;
    }

    .type, .price {
        width: 100%;
        height: 30px;
        font-size: 16px;
        line-height: 110%;
        text-align: left;
        color: #000;
        display: flex;
        flex-wrap: wrap;
        white-space: nowrap;
        justify-content: flex-start;
        align-items:flex-start;
    }


    .typeBox {
        align-items:center;
        border-radius: 3px;
        /*padding: 5px 10px;
        margin: 0 20px 0 0;*/
        margin: 0;
        padding: 0;
    }

    .priceBold {
        font-weight: 600;
        font-size: 19px;
    }

    .buyBtn {
        font-family: 'Noto Sans JP', sans-serif;
        width: 100%;
        height: 50px;
        margin: 0;
        padding: 0;
        font-size: 15px;
        line-height: 110%;
        text-align: left;
        display: flex;
        flex-wrap: wrap;
        vertical-align: bottom;
        white-space: nowrap;
        justify-content: space-between;
        align-items:center;
    }

    .buyBtn a {
        width: 100%;
        height: 50px;
        display: block;
        font-size: 15px;
        color: #fff;
        padding: 17px 25px;
        margin: 0;
        background-color: #000;
        border-radius: 5px;
        text-align: center;
        /*transition: all .1s ease-in-out;*/
        align-items: center;
        border-radius: 30px;
    }

    .buyBtn a:hover {
        color: #fff;
        background-color: #676767;
    }

    /*-- 購入ボタン　ここまで --*/



    /*-- 本文　ここから --*/

    .productDescription {
        width: 100%;
        margin: 50px 0;
        padding: 0 15px;
    }

    .productDescription p {
        font-size: 16px;
        text-align: left;
        font-weight: 500;
        line-height: 200%;
        color: var(--description-text-primary-color);
        /*overflow-wrap: break-word;
        word-break: break-all;*/
        overflow-wrap: anywhere;
        word-break: normal;
        line-break: strict;

    }

    .productDescription a {
        color: var(--description-text-primary-color);
        padding-bottom: 1px;
        text-decoration:none;
        border-bottom: 1px solid var(--description-text-primary-color);
    }

    .productDescription a:hover {
        color: var(--description-text-primary-color-a-hover);
        padding-bottom: 1px;
        text-decoration:none;
        border-bottom: 1px solid var(--description-text-primary-color-a-hover);
    }

    .productImgUnit {
        display: block;
        width: 100%;
        margin: 10px 0 10px 0;
        position: relative;
    }


    /*-- 商品仕様表と注意書き　ここから --*/

    table {
        width: 100%;
        border-collapse: collapse;
    }

    table tr th, table tr td {
        border: none;
        text-align: left;
        font-size: 16px;
        line-height: 160%;
        padding: 10px 0;
        font-weight: 500;
    }

    table tr {
        border-bottom: 1px solid #cecece;
    }

    table tr th {
        width: 140px;
        vertical-align: top;
    }

    .dots {
        width: 25px;
    }
    
    .itemize_tr {
        border-bottom: none;
    }

    /*-- 商品仕様表と注意書き　ここまで --*/


    /*-- 本文　ここまで --*/



    /*-- Item Detail Page Layout   Ends Here --*/






    
}


/*-- smart phone landscape --*/

@media (orientation: landscape) and (max-width: 750px) {

    .main {
        position: relative;
        width: 100%;
        margin: 0;
        padding: 44px 15px 0 15px;
    }

    /*-- Top Page Only  From Here --*/
    .topPageSection {
        width: 100%;
    }

    .sectionUnit {
        width: 100%;
        margin: 0 0 15px 0;
    }

    .sectionContent {
        width: 100%;
        height: 350px;
        position: relative;
    }

    .unitLink {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: 12;
    }

    .copyWrapper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        padding-top: 50px;
        z-index: 10;
    }

    /* .copyWrapper をセクション下まで下げる .copyBottom の打ち消し */
    .copyBottom {
        padding-top: 150px;
    }

    .symbolTitle {
        font-size:8vw;
        text-align: center;
        color: var(--text-title-color);
        font-weight: 500;
        /*line-height: 120%;*/
        line-height: 110%;
        position: absolute;
        transform: translateX(-49%);
        left: 49%;
    }

    .symbolHeadline {
        font-size: 1.2rem;
        text-align: center;
        color: var(--text-title-color);
        font-weight: 500;
        line-height: 100%;
        position: absolute;
        /*bottom: 10px;*/
        bottom: 40px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
    }

    .brSpOnly {
        display: block;
    }

    .headlineLabel {
        font-size: 12px;
        text-align: center;
        margin: 0;
        padding: 0 0 10px 0;
    }

    .headline {
        font-size: 35px;
        font-weight: 600;
        margin: 0;
        padding: 0 0 0 0;
        line-height: 110%;
        text-align: center;
    }

    .subHeadline {
        /*width: 230px;*/
        width: auto;
        font-size: 16px;
        font-weight: 400;
        margin: 0;
        padding: 10px 0 0 0;
        line-height: 1.5em;
        text-align: center;
    }

    .subHeadlineCenter {
        width: 100%;
        font-size: 16px;
        font-weight: 400;
        margin: 0;
        padding: 10px 0 0 0;
        line-height: 1.5em;
        text-align: center;
    }

    .jpHeadlineAdjust {
        margin-right: -35px;
        display: inline-flex;
    }

    .jpSubHeadlineAdjust {
        margin-right: -16px;
        display: inline-flex;
    }

    .spNewLine {
        display: none;
    }

    

    /*-- .headline の色の変更 --*/
    .textColorWhite {
        color: #fff;
    }

    .textColorBlack {
        color: #222222;
    }


    /*-- リンクテキストボタン --*/

    .linkWrapper {
        width: auto;
        position: absolute;
        top: 280px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 40;
        text-align: center;
        white-space: nowrap;
        margin: 0 auto;
    }

    .linkBtn {
        padding: 0;
    }

    .linkBtn a .linkBtnInner {
        display: block;
        /*font-family: "游ゴシック体","Yu Gothic Medium","Yu Gothic","Meiryo","Hiragino Kaku Gothic Pro",sans-serif;*/
        font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
        width: auto;
        height: 40px;
        border-radius: 20px;
        border: 2px solid #fff;
        pointer-events: all;
        z-index: 40;
        color: #fff;
        line-height: 100%;
        margin: 2% 2% 0 0;
        padding: 10px 20px;
        font-size: 16px;
        font-weight: 600;
        transition: all .2s ease-in-out;
        margin: 0;
    }

    .linkBtn > a, .linkBtnBlack > a {
        display: block;
        width: auto;
        height: 40px;
        border-radius: 25px;
    }

    .linkBtn a:hover .linkBtnInner {
        color: #000;
        background-color: #fff;
    }

    /*-- リンクテキストボタン　色の変更 --*/
    .linkBtnBlack {
        padding: 0;
    }

    .linkBtnBlack a .linkBtnInner {
        display: block;
        /*font-family: "游ゴシック体","Yu Gothic Medium","Yu Gothic","Meiryo","Hiragino Kaku Gothic Pro",sans-serif;*/
        font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
        color: #222222;
        border: 2px solid #222222;
        width: auto;
        height: 50px;
        border-radius: 25px;
        pointer-events: all;
        line-height: 100%;
        z-index: 40;
        margin: 2% 2% 0 0;
        padding: 14px 25px;
        font-size: 17px;
        font-weight: 600;
        transition: all .2s ease-in-out;
        margin: 0;
    }

    .linkBtnBlack a:hover .linkBtnInner {
        color: #fff;
        background-color: #222222;
    }
    

    



    .sectionImgFrame {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        max-width: 2700px;
        height: 100%;
        z-index: 1;
    }

    /*-- .sectionImgFrame の中身 --*/
    .worksGlassBody {
        background-image: url(../images/glass-body.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .worksAfterTheCraving {
        background-image: url(../images/after-the-craving.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .worksSelfShield {
        background-image: url(../images/self-shield.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .worksLighthouse {
        background-image: url(../images/lighthouse.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .artbookImg {
        background-image: url(../images/artbook-dialogue-with-ai-1-2-3-cover-pc.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .noticeImg {
        background-image: url(../images/etude-image-20251107.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .worksBringDreams {
        background-image: url(../images/bring-dreams.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .gicleeObserver {
        background-image: url(../images/giclee-observer-2-item-cover-pc.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .worksWrinkleBox {
        background-image: url(../images/wrinkle-box-pc.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .worksScribble2 {
        background-image: url(../images/scribble-2-cover-pc.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .worksSavor {
        background-image: url(../images/savor-morning-cover-pc.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .casieImg {
        background-image: url(../images/casie-update-mv-pc.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 30% center;
    }

    .worksOasis {
        background-image: url(../images/oasis.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .worksYellowClothes {
        background-image: url(../images/yellow-clothes.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .seriesSet {
        background-image: url(../images/sunbathing.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .exhibition {
        background-image: url(../images/bring-dreams-2.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .worksFreshGreenGathering {
        background-image: url(../images/fresh-green-gathering.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .worksWisher {
        background-image: url(../images/wisher.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .preorder {
        background-image: url(../images/giclee-preorder-2023-tab-pc.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: left center;
    }

    .symbolWork {
        background-image: url(../images/near-my-life.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center top;
    }

    .restInPeaceEn {
        background-image: url(../images/rest-in-peace-leave-space.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .shipOfMemoryEn {
        background-image: url(../images/ship_of_memory_banner_tab_pc.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .worksBela {
        background-image: url(../images/bela.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .worksMilda {
        background-image: url(../images/milda.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .newWork {
        background-image: url(../images/solace.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .newWork-2 {
        background-image: url(../images/implexus-atsushigraph-artwork-pc.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .newWork-3 {
        background-image: url(../images/light-rocks-cover-pc.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .newWork-4 {
        background-image: url(../images/nap.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .gicleeLightRocks {
        background-image: url(../images/giclee-light-rocks-hero-img-pc.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .gicleeUtopia {
        background-image: url(../images/utopia.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .graphicUtopia {
        background-image: url(../images/utopia.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .bioImg {
        background-image: url(../images/brain-remix-pc.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .newYear {
        background-image: url(../images/aim.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center 30%;
    }


    /*リンクボタン「作品を見る」をスマホでのみ一部10px下げる（通常はtop:170px）*/
    /*.btnDown {
        top: 170px;
    }*/

    /*リンクボタン「作品を見る」をスマホでのみセクションの下部まで下げる（通常はtop:170px）*/
    /*.btnBottom {
        top: 170px;
    }*/


    .videoWrap {
        max-width: 2700px;
        z-index: 1;
        height: 350px;
        position: relative;
        overflow: hidden;
    }

    .heroImgVideo {
        width: 100%;
        height: auto;
        position: absolute;
        top: 20%;
        left: 50%;
        transform: translate(-50%, -20%);
        vertical-align: bottom;
        z-index: -1;
    }


    .gradationMask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background:linear-gradient(to bottom, rgba(59, 59, 59, 0.23) 0, transparent 100%);
        z-index: 2;
    }

    .gradationMask-2 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background:linear-gradient(to bottom, rgba(18, 18, 18, 0.3) 0, transparent 100%);
        z-index: 2;
    }

    .gradationMask-3 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background:linear-gradient(to right, rgba(18, 18, 18, 0.3) 0, transparent 100%);
        z-index: 2;
    }


    /*-- Top Page Only  Ends Here --*/


    /*-- Item Grid Layout Unit Commmon  From Here--*/

    .unitTitle {
        width: 100%;
        height: 30px;
        margin-top: 15px;
        padding: 0;
        border-top: 1px solid var(--text-primary-color);
        font-size: 16px;
        font-weight: 500;
        text-align: left;
        color: var(--text-primary-color);
    }

    .unitTitle > h1 {
        font-weight: 400;
    }

    .unitTitle::before {
        content: none;
        /*position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 0;
        display: inline-block;
        width: calc(100% - 20px);
        height: 1px;
        background-color: black;*/
    }

    .itemLayout2Column {
        width: 100%;
        height: auto;
        margin-top: 15px;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .itemLayout {
        width: 100%;
        height: auto;
        margin-top: 15px;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }

    .itemWrap {
        width: 100%;
        height: 100%;
        position: relative;
        margin: 0 0 10px 0;
    }



    /* News Articles Layout ここから */
    .newsLayout {
        width: 100%;
        height: auto;
        margin-top: 15px;
        padding: 0;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        /*display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: max-content max-content 1fr auto;
        gap: 8px;*/
    }

    .newsWrap {
        width: 49.3%;
        height: auto;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-bottom: 15px;
        border-bottom: 1px dotted var(--text-primary-color);
    }

    .newsWrap:nth-last-of-type(-n+2) {
        border-bottom: none;
    }

    .newsWrap a {
        width: 100%;
        height: 100%;
    }

    .newsArticle {
        width: 100%;
        height: auto;
        /*min-height: 230px;*/
        padding-bottom: 10px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        border-top: none;
        border-right: none;
        border-left: none;
        /*border-bottom: 1px dotted #000;*/
        border-bottom: none;
    }

    .newsWrap a:hover .newsArticle {
        /*border-bottom: 1px dotted #949494;*/
        border-bottom: none;
        
    }

    .newsDescription {
        width: 49%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        /*position: relative;*/
    }

    .newsTitle {
        width: 100%;
        height: auto;
        font-size: 14px;
        text-align: left;
        padding: 5px 0 5px 0;
        margin: 0;
    }


    .newsDateAndCategory {
        width: 100%;
        font-size: 11px;
        text-align: left;
        margin: 0;
        padding: 0 0 5px 0;
    }

    .newsMedia {
        width: 48%;
        /*position: relative;*/
    }

    .newsMedia img {
        width: 100%;
        aspect-ratio: 1 / 1;
        z-index: 1;
        /*height: 350px;
        object-fit: cover;*/
        /*position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        transform: translateY(-50%);*/

        /*画像コピー禁止のためのcssここから*/
		user-select:none;
		-moz-user-select:none;
		-ms-user-select:none;
		-webkit-user-select:none;
		-khtml-user-select:none;
		-webkit-user-drag: none;
		-khtml-user-drag: none;
		-webkit-touch-callout: none;
		/*画像コピー禁止のためのcssここまで*/
    }

    .newsWrap a .newsArticle .newsDescription .newsTitle {
        color: var(--text-primary-color);
    }

    .newsWrap a:hover .newsArticle .newsDescription .newsTitle {
        color: var(--text-primary-color-a-hover);
        /*color: #000;*/
    }

    .newsWrap a .newsArticle .newsDescription .newsDateAndCategory {
        color: var(--text-secondary-color);
        /*color: #000;*/
    }

    .newsWrap a:hover .newsArticle .newsDescription .newsDateAndCategory {
        color: var(--text-secondary-color-a-hover);
        /*color: #000;*/
    }

    .newsWrap a:hover .newsArticle .newsMedia img {
        opacity: .8;
        /*opacity: 1;*/
    }

    /* News Articles Layout ここまで */
    


    


    

    /* sold out 表示の擬似要素 */
    .itemSoldOutLabel::after {
        content: 'sold out';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 80px;
        height: 30px;
        padding: 3% 2% 1.5% 2%;
        border-radius: 0 5px 0 0;
        background-color: rgba(0,0,0,0.3);
        font-size: 12px;
        color: #fff;
        font-family: "游ゴシック体","Yu Gothic Medium","Yu Gothic","Meiryo","Hiragino Kaku Gothic Pro",sans-serif;
    }

    .itemThumbnail img {
        width: 100%;
        aspect-ratio: 1 / 1;
        vertical-align: bottom;

        /*画像コピー禁止のためのcssここから*/
		user-select:none;
		-moz-user-select:none;
		-ms-user-select:none;
		-webkit-user-select:none;
		-khtml-user-select:none;
		-webkit-user-drag: none;
		-khtml-user-drag: none;
		-webkit-touch-callout: none;
		/*画像コピー禁止のためのcssここまで*/
    }


    .itemThumbnail picture img {
        width: 100%;
        aspect-ratio: 1 / 1;
        vertical-align: bottom;

        /*画像コピー禁止のためのcssここから*/
		user-select:none;
		-moz-user-select:none;
		-ms-user-select:none;
		-webkit-user-select:none;
		-khtml-user-select:none;
		-webkit-user-drag: none;
		-khtml-user-drag: none;
		-webkit-touch-callout: none;
		/*画像コピー禁止のためのcssここまで*/
    }

    .itemThumbnail .videoItem {
        width: 100%;
        aspect-ratio: 1 / 1;
        vertical-align: bottom;

        /*画像コピー禁止のためのcssここから*/
		user-select:none;
		-moz-user-select:none;
		-ms-user-select:none;
		-webkit-user-select:none;
		-khtml-user-select:none;
		-webkit-user-drag: none;
		-khtml-user-drag: none;
		-webkit-touch-callout: none;
		/*画像コピー禁止のためのcssここまで*/
    }

    .itemText {
        font-size: 14px;
        text-align: left;
        line-height: 130%;
        z-index: 10;
    }

    .itemLinkMask .itemText {
        color: var(--text-primary-color);
    }

    .itemLinkMask:hover .itemText {
        color: var(--text-primary-color-a-hover);
    }

    

    /*-- Item Grid Layout Unit Commmon  Ends Here--*/



    /*-- Item Detail Page Layout   From Here --*/


    /*-- TopicPath From Here --*/
    .topicpath {
        display: block;
        width: 100%;
        padding: 0;
        margin: 0 0 15px 0;
    }

    ol {
        list-style-type: none;
        padding-left: 0;
        font-size: 10px;
        line-height: 180%;
        display: flex;
        color: var(--topicpath-color);
    }

    ol li {
        /*font-family: "游ゴシック体","Yu Gothic Medium","Yu Gothic","Meiryo","Hiragino Kaku Gothic Pro",sans-serif;*/
        font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
        font-size: 10px;
        line-height: 180%;
        color: var(--topicpath-color);
        margin: 0 5px 0 0;
        padding: 0;
    }

    ol li:nth-child(n+2) {
        margin-left: 7px;
    }

    ol li a {
        color: var(--topicpath-color);
    }

    ol li a:hover {
        color: var(--topicpath-color-a-hover);
    }

    /*-- TopicPath Ends Here --*/


    .productArticle {
        width: 100%;
    }

    .grid {
        width: 100%;
        display: grid;
        grid-template-rows: 1fr;
        grid-template-columns: 1fr 1fr;
        gap: 4px;
    }


    .images {
        width: 100%;
        display: block;
        overflow: visible;
    }

    .imgBlock {
        width: 100%;
        display: inline-block;
        height: auto;
        position: static;
    }

    .imgUnit {
        display: block;
        width: 100%;
        padding-bottom: 15px;
        position: relative;
    }

    .img {
        width: 100%;
        vertical-align: bottom;

        /*画像コピー禁止のためのcssここから*/
		user-select:none;
		-moz-user-select:none;
		-ms-user-select:none;
		-webkit-user-select:none;
		-khtml-user-select:none;
		-webkit-user-drag: none;
		-khtml-user-drag: none;
		-webkit-touch-callout: none;
		/*画像コピー禁止のためのcssここまで*/

        z-index: 1;
    }

    .description {
        width: 100%;
        padding: 0 0 0 10px;
        overflow: visible;
    }

    .descriptionBlock {
        width: 100%;
        height: auto;
        position: sticky;
        top: 44px;
    }

    .productTitle {
        font-size: 30px;
        letter-spacing: -0.02px;
        text-align: left;
        line-height: 100%;
        margin: 0;
        padding: 0 0 20px 0;
        color: var(--text-primary-color);
        font-weight: 500;
    }

    .productOutline {
        font-size: 13px;
        color: var(--text-primary-color);
        line-height: 100%;
    }

    .productInfo {
        font-size: 14px;
        text-align: left;
        color: var(--text-secondary-color);
        padding: 0;
    }

    .productInfo a {
        color: var(--text-secondary-color);
        /*border-bottom: 1px solid #626262;*/
    }

    .productInfo a:hover {
        color: var(--text-secondary-color-a-hover);
        /*border-bottom: 1px solid #a2a2a2;*/
    }



    /*-- 購入ボタン　ここから --*/

    .buyBtnWrapper {
        width: 100%;
        height: 65px;
        margin-top: 10px;
        padding: 10px 0;
        border-bottom: 1px solid #000;
        text-align: left;
        display: flex;
        flex-wrap: wrap;
        white-space: nowrap;
        justify-content: stretch;
        align-items:center;
    }

    .buyBtnWrapper::before {
        content: none;
        /*position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 0;
        display: inline-block;
        width: calc(100% - 20px);
        height: 1px;
        background-color: black;*/
    }

    .typeAndPrice {
        width: 65%;
    }

    .type, .price {
        width: auto;
        height: 25px;
        font-size: 11px;
        line-height: 110%;
        text-align: left;
        color: #000;
        display: flex;
        flex-wrap: wrap;
        white-space: nowrap;
        justify-content: flex-start;
        align-items: center;
    }


    .typeBox {
        align-items:center;
        border-radius: 3px;
        /*padding: 5px 10px;
        margin: 0 20px 0 0;*/
        margin: 0;
        padding: 0;
    }

    .priceBold {
        font-weight: 600;
        font-size: 14px;
    }

    .buyBtn {
        font-family: 'Noto Sans JP', sans-serif;
        width: 35%;
        height: 35px;
        margin: 0;
        padding: 0;
        font-size: 9px;
        line-height: 110%;
        text-align: left;
        display: flex;
        flex-wrap: wrap;
        vertical-align: bottom;
        white-space: nowrap;
        justify-content: flex-end;
        align-items:center;
    }

    .buyBtn a {
        width: auto;
        height: 35px;
        display: block;
        font-size: 9px;
        color: #fff;
        padding: 12px 14px;
        margin: 0;
        background-color: #000;
        border-radius: 5px;
        text-align: center;
        /*transition: all .1s ease-in-out;*/
        align-items: center;
        border-radius: 20px;
    }

    .buyBtn a:hover {
        color: #fff;
        background-color: #676767;
    }

    /*-- 購入ボタン　ここまで --*/



    /*-- 本文　ここから --*/

    .productDescription {
        width: 100%;
        margin: 70px 0;
        padding: 0 0 1px 0;
    }

    .productDescription p {
        font-size: 15px;
        text-align: left;
        font-weight: 500;
        line-height: 200%;
        color: var(--description-text-primary-color);
        margin: 0;
        /*overflow-wrap: break-word;
        word-break: break-all;*/
        overflow-wrap: anywhere;
        word-break: normal;
        line-break: strict;
    }

    .productDescription a {
        color: var(--description-text-primary-color);
        padding-bottom: 1px;
        text-decoration:none;
        border-bottom: 1px solid var(--description-text-primary-color);
    }

    .productDescription a:hover {
        color: var(--description-text-primary-color-a-hover);
        padding-bottom: 1px;
        text-decoration:none;
        border-bottom: 1px solid var(--description-text-primary-color-a-hover);
    }

    .productImgUnit {
        /*width: 100%;
        margin: 70px 0 0 0;*/
        display: none;
    }


    /*-- 商品仕様表と注意書き　ここから --*/

    table {
        width: 100%;
        border-collapse: collapse;
    }

    table tr th, table tr td {
        border: none;
        text-align: left;
        font-size: 16px;
        line-height: 160%;
        padding: 10px 0;
        font-weight: 500;
    }

    table tr {
        border-bottom: 1px solid #cecece;
    }

    table tr th {
        width: 140px;
        vertical-align: top;
    }

    .dots {
        width: 25px;
    }
    
    .itemize_tr {
        border-bottom: none;
    }


    /*-- 商品仕様表と注意書き　ここまで --*/



    /*-- 本文　ここまで --*/



    /*-- Item Detail Page Layout   Ends Here --*/



    
}



/*-- tablet portrait --*/

@media (min-width:751px) and (max-width:1024px) {

    .main {
        position: relative;
        width: 100%;
        margin: 0;
        /*padding: 44px 10px 0 10px;*/
        padding: 44px 0 0 0;
    }

    /*-- Top Page Only  From Here --*/
    .topPageSection {
        width: 100%;
    }

    .sectionUnit {
        width: 100%;
        margin: 0 0 15px 0;
    }

    .sectionContent {
        width: 100%;
        height: 600px;
        position: relative;
    }

    .unitLink {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: 20;
    }

    .copyWrapper {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        padding-top: 50px;
        z-index: 5;
    }

    /* copyWrapper をセクション下まで下げる */
    .copyBottom {
        /*padding-top: 290px;*/
        padding-top: 270px;
    }

    .symbolTitle {
        font-size:16vw;
        text-align: center;
        color: var(--text-title-color);
        font-weight: 500;
        /*line-height: 120%;*/
        line-height: 150%;
        position: absolute;
        transform: translateX(-49%);
        left: 49%;
    }

    .symbolHeadline {
        font-size: 2rem;
        text-align: center;
        color: var(--text-title-color);
        font-weight: 500;
        line-height: 100%;
        position: absolute;
        bottom: 70px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
    }

    .brSpOnly {
        display: none;
    }

    .headlineLabel {
        font-size: 13px;
        text-align: center;
        margin: 0;
        /*padding: 0 0 20px 25px;*/
        padding: 0 0 20px 0;
    }

    .headline {
        font-size: 45px;
        font-weight: 600;
        margin: 0;
        /*padding: 0 0 0 25px;*/
        padding: 0;
        line-height: 110%;
        text-align: center;
    }

    .subHeadline {
        font-size: 18px;
        font-weight: 500;
        margin: 0;
        /*padding: 10px 0 0 25px;*/
        padding: 10px 0 0 0;
        line-height: 1.5em;
        text-align: center;
    }

    .subHeadlineCenter {
        font-size: 18px;
        font-weight: 500;
        margin: 0;
        /*padding: 10px 0 0 25px;*/
        padding: 10px 0 0 0;
        line-height: 1.5em;
        text-align: center;
    }

    .jpHeadlineAdjust {
        margin-right: -45px;
        display: inline-flex;
    }

    .jpSubHeadlineAdjust {
        margin-right: -18px;
        display: inline-flex;
    }

    .spNewLine {
        display: none;
    }

    

    /*-- .headline の色の変更 --*/
    .textColorWhite {
        color: #fff;
    }

    .textColorBlack {
        color: #222222;
    }


    /*-- リンクテキストボタン --*/

    .linkWrapper {
        /*width: auto;*/
        width:fit-content;
        /*position: absolute;
        top: 250px;
        left: 25px;*/
        position: relative;
        top: 50px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 40;
        text-align: center;
        white-space: nowrap;
    }

    .linkBtn {
        width:fit-content;
        padding: 0;
    }

    .linkBtn a .linkBtnInner {
        display: inline-block;
        /*font-family: "游ゴシック体","Yu Gothic Medium","Yu Gothic","Meiryo","Hiragino Kaku Gothic Pro",sans-serif;*/
        font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
        width: auto;
        height: 50px;
        border-radius: 25px;
        border: 2px solid #fff;
        pointer-events: all;
        z-index: 40;
        color: #fff;
        margin: 2% 2% 0 0;
        line-height: 100%;
        padding: 14px 25px;
        font-size: 17px;
        font-weight: 600;
        transition: all .2s ease-in-out;
        margin: 0;
    }

    .linkBtn > a, .linkBtnBlack > a {
        display: block;
        width: auto;
        height: 50px;
        border-radius: 25px;
    }

    .linkBtn a:hover .linkBtnInner {
        color: #000;
        background-color: #fff;
    }

    /*-- リンクテキストボタン　色の変更 --*/
    .linkBtnBlack {
        width:fit-content;
        padding: 0;
    }

    .linkBtnBlack a .linkBtnInner {
        display: inline-block;
        /*font-family: "游ゴシック体","Yu Gothic Medium","Yu Gothic","Meiryo","Hiragino Kaku Gothic Pro",sans-serif;*/
        font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
        color: #222222;
        border: 2px solid #222222;
        width: auto;
        height: 50px;
        border-radius: 25px;
        pointer-events: all;
        z-index: 40;
        line-height: 100%;
        margin: 2% 2% 0 0;
        padding: 14px 25px;
        font-size: 17px;
        font-weight: 600;
        transition: all .2s ease-in-out;
        margin: 0;
    }

    .linkBtnBlack a:hover .linkBtnInner {
        color: #fff;
        background-color: #222222;
    }
    

    



    .sectionImgFrame {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        max-width: 2700px;
        height: 100%;
        z-index: 1;
    }

    /*-- .sectionImgFrame の中身 --*/
    .worksGlassBody {
        background-image: url(../images/glass-body.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .worksAfterTheCraving {
        background-image: url(../images/after-the-craving.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .worksSelfShield {
        background-image: url(../images/self-shield.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .worksLighthouse {
        background-image: url(../images/lighthouse.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .artbookImg {
        background-image: url(../images/artbook-dialogue-with-ai-1-2-3-cover-pc.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .noticeImg {
        background-image: url(../images/etude-image-20251107.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .worksBringDreams {
        background-image: url(../images/bring-dreams.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .gicleeObserver {
        background-image: url(../images/giclee-observer-2-item-cover-pc.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .worksWrinkleBox {
        background-image: url(../images/wrinkle-box-pc.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .worksScribble2 {
        background-image: url(../images/scribble-2-cover-pc.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .worksSavor {
        background-image: url(../images/savor-morning-cover-pc.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .casieImg {
        background-image: url(../images/casie-update-mv-pc.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 40% top;
    }

    .worksOasis {
        background-image: url(../images/oasis.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center 45%;
    }

    .worksYellowClothes {
        background-image: url(../images/yellow-clothes.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .seriesSet {
        background-image: url(../images/sunbathing.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .exhibition {
        background-image: url(../images/bring-dreams-2.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .worksFreshGreenGathering {
        background-image: url(../images/fresh-green-gathering.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center 60%;
    }

    .worksWisher {
        background-image: url(../images/wisher.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center 60%;
    }

    .preorder {
        background-image: url(../images/giclee-preorder-2023-tab-pc.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 20% center;
    }

    .symbolWork {
        background-image: url(../images/near-my-life.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center top;
    }

    .restInPeaceEn {
        background-image: url(../images/rest-in-peace-leave-space.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .shipOfMemoryEn {
        background-image: url(../images/ship_of_memory.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .worksBela {
        background-image: url(../images/bela-cover-pc.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .worksMilda {
        background-image: url(../images/milda.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }


    .newWork {
        background-image: url(../images/solace.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .newWork-2 {
        background-image: url(../images/implexus-atsushigraph-artwork-pc.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .newWork-3 {
        background-image: url(../images/light-rocks-cover-pc.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .newWork-4 {
        background-image: url(../images/nap.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .gicleeLightRocks {
        background-image: url(../images/giclee-light-rocks-hero-img-sp.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center 85%;
    }

    .gicleeUtopia {
        background-image: url(../images/utopia.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .graphicUtopia {
        background-image: url(../images/utopia.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .bioImg {
        background-image: url(../images/brain-remix-pc.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .newYear {
        background-image: url(../images/aim.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center 30%;
    }


    .videoWrap {
        max-width: 2700px;
        z-index: 1;
        height: 600px;
        position: relative;
        overflow: hidden;
    }

    .heroImgVideo {
        width: 120%;
        height: auto;
        position: absolute;
        top: 20%;
        left: 50%;
        transform: translate(-50%, -20%);
        vertical-align: bottom;
        z-index: -1;
    }


    .gradationMask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background:linear-gradient(to bottom, rgba(59, 59, 59, 0.23) 0, transparent 100%);
        z-index: 2;
    }

    .gradationMask-2 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background:linear-gradient(to bottom, rgba(18, 18, 18, 0.2) 0, transparent 100%);
        z-index: 2;
    }

    .gradationMask-3 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background:linear-gradient(to right, rgba(18, 18, 18, 0.3) 0, transparent 100%);
        z-index: 2;
    }


    /*-- Top Page Only  Ends Here --*/


    /*-- Item Grid Layout Unit Commmon  From Here--*/

    .unitTitle {
        width: 100%;
        height: 30px;
        position: relative;
        display: inline-block;
        margin-top: 15px;
        /*border-top: 1px solid #000;*/
        border-top: none;
        font-size: 16px;
        font-weight: 500;
        text-align: left;
        color: var(--text-primary-color);
        padding: 0 20px;
    }

    .unitTitle > h1 {
        font-weight: 400;
    }

    .unitTitle::before {
        content: '';
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 0;
        display: inline-block;
        width: calc(100% - 40px);
        height: 1px;
        background-color: var(--text-primary-color);
    }

    .itemLayout2Column {
        width: 100%;
        height: auto;
        margin-top: 15px;

        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        padding: 0 20px;
    }

    .itemLayout {
        width: 100%;
        height: auto;
        margin-top: 15px;

        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        padding: 0 20px;
    }


    .itemWrap {
        width: 100%;
        height: 100%;
        position: relative;
        margin: 0 0 10px 0;
    }



    /* News Articles Layout ここから */

    .newsLayout {
        width: 100%;
        height: auto;
        margin-top: 10px;
        padding: 0 20px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        /*display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: max-content max-content 1fr auto;
        gap: 8px;*/
    }

    .newsWrap {
        width: 49.5%;
        height: auto;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        border-bottom: 1px dotted var(--text-primary-color);
        padding: 0 0 10px 0;
        margin: 0;
    }

    .newsWrap:nth-last-of-type(-n+2) {
        border-bottom: none;
    }

    .newsWrap a {
        width: 100%;
        height: 100%;
    }

    .newsArticle {
        width: 100%;
        height: 100%;
        min-height: 210px;
        padding: 10px 0 0 0;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        border-top: none;
        border-right: none;
        border-left: none;
        /*border-bottom: 1px dotted #000;*/
        border-bottom: none;
    }

    .newsWrap a:hover .newsArticle {
        /*border-bottom: 1px dotted #949494;*/
        border-bottom: none;
    }

    .newsDescription {
        width: 50%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: relative;
    }

    .newsTitle {
        width: 100%;
        height: auto;
        font-size: 16px;
        text-align: left;
        padding: 10px;
    }


    .newsDateAndCategory {
        width: 100%;
        font-size: 14px;
        text-align: left;
        padding: 0 10px 10px 10px;
    }

    .newsMedia {
        width: 50%;
        position: relative;
    }

    .newsMedia img {
        width: 100%;
        aspect-ratio: 1 / 1;
        z-index: 1;
        /*height: 190px;
        object-fit: cover;
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        transform: translateY(-50%);*/

        /*画像コピー禁止のためのcssここから*/
		user-select:none;
		-moz-user-select:none;
		-ms-user-select:none;
		-webkit-user-select:none;
		-khtml-user-select:none;
		-webkit-user-drag: none;
		-khtml-user-drag: none;
		-webkit-touch-callout: none;
		/*画像コピー禁止のためのcssここまで*/
    }

    .newsWrap a .newsArticle .newsDescription .newsTitle {
        color: var(--text-primary-color);
    }

    .newsWrap a:hover .newsArticle .newsDescription .newsTitle {
        color: var(--text-primary-color-a-hover);
        /*color: #000;*/
    }

    .newsWrap a .newsArticle .newsDescription .newsDateAndCategory {
        color: var(--text-secondary-color);
        /*color: #000;*/
    }

    .newsWrap a:hover .newsArticle .newsDescription .newsDateAndCategory {
        color: var(--text-secondary-color-a-hover);
        /*color: #000;*/
    }

    .newsWrap a:hover .newsArticle .newsMedia img {
        opacity: .8;
        /*opacity: 1;*/
    }

    /* News Articles Layout ここまで */
    
    

    


    

    /* sold out 表示の擬似要素 */
    .itemSoldOutLabel::after {
        content: 'sold out';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 80px;
        height: 30px;
        padding: 3% 2% 1.5% 2%;
        border-radius: 0 5px 0 0;
        background-color: rgba(0,0,0,0.3);
        font-size: 12px;
        color: #fff;
        font-family: "游ゴシック体","Yu Gothic Medium","Yu Gothic","Meiryo","Hiragino Kaku Gothic Pro",sans-serif;
    }

    .itemThumbnail img {
        width: 100%;
        aspect-ratio: 1 / 1;
        vertical-align: bottom;

        /*画像コピー禁止のためのcssここから*/
		user-select:none;
		-moz-user-select:none;
		-ms-user-select:none;
		-webkit-user-select:none;
		-khtml-user-select:none;
		-webkit-user-drag: none;
		-khtml-user-drag: none;
		-webkit-touch-callout: none;
		/*画像コピー禁止のためのcssここまで*/
    }


    .itemThumbnail picture img {
        width: 100%;
        aspect-ratio: 1 / 1;
        vertical-align: bottom;

        /*画像コピー禁止のためのcssここから*/
		user-select:none;
		-moz-user-select:none;
		-ms-user-select:none;
		-webkit-user-select:none;
		-khtml-user-select:none;
		-webkit-user-drag: none;
		-khtml-user-drag: none;
		-webkit-touch-callout: none;
		/*画像コピー禁止のためのcssここまで*/
    }

    .itemThumbnail .videoItem {
        width: 100%;
        aspect-ratio: 1 / 1;
        vertical-align: bottom;

        /*画像コピー禁止のためのcssここから*/
		user-select:none;
		-moz-user-select:none;
		-ms-user-select:none;
		-webkit-user-select:none;
		-khtml-user-select:none;
		-webkit-user-drag: none;
		-khtml-user-drag: none;
		-webkit-touch-callout: none;
		/*画像コピー禁止のためのcssここまで*/
    }

    .itemText {
        font-size: 14px;
        text-align: left;
        line-height: 130%;
        z-index: 10;
    }

    .itemLinkMask .itemText {
        color: var(--text-primary-color);
    }

    .itemLinkMask:hover .itemText {
        color: var(--text-primary-color-a-hover);
    }

    

    /*-- Item Grid Layout Unit Commmon  Ends Here--*/


    /*-- Item Detail Page Layout   From Here --*/


    /*-- TopicPath From Here --*/
    .topicpath {
        display: block;
        width: 100%;
        padding: 0 20px;
        margin: 0;
    }

    ol {
        list-style-type: none;
        padding-left: 0;
        margin: 0;
        font-size: 11px;
        line-height: 190%;
        display: flex;
        color: var(--topicpath-color);
    }

    ol li {
        /*font-family: "游ゴシック体","Yu Gothic Medium","Yu Gothic","Meiryo","Hiragino Kaku Gothic Pro",sans-serif;*/
        font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
        font-size: 11px;
        line-height: 190%;
        color: var(--topicpath-color);
        margin: 0 7px 0 0;
        padding: 0;
    }

    ol li:nth-child(n+2) {
        margin-left: 7px;
    }

    ol li a {
        color: var(--topicpath-color);
    }

    ol li a:hover {
        color: var(--topicpath-color-a-hover);
    }

    /*-- TopicPath Ends Here --*/


    .productArticle {
        width: 100%;
    }

    .grid {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 8px;
    }


    .images {
        /*width: 100vw;
        overflow: visible;*/
        display: none;
    }

    .imgBlock {
        width: 100vw;
        display: inline-block;
        height: auto;
        position: relative;
        top: 20px;
    }

    .imgUnit {
        /*width: 100%;*/
        display: none;
    }

    .img {
        width: 100%;
        vertical-align: bottom;

        /*画像コピー禁止のためのcssここから*/
		user-select:none;
		-moz-user-select:none;
		-ms-user-select:none;
		-webkit-user-select:none;
		-khtml-user-select:none;
		-webkit-user-drag: none;
		-khtml-user-drag: none;
		-webkit-touch-callout: none;
		/*画像コピー禁止のためのcssここまで*/

        z-index: 1;
    }

    .description {
        width: 100%;
        padding: 0;
        margin: 0;
    }

    .descriptionBlock {
        width: 100%;
        height: auto;
        position:static;
    }

    .productTitle {
        font-size: 40px;
        letter-spacing: -0.02px;
        text-align: left;
        line-height: 100%;
        margin: 20px 0 0 0;
        padding: 0 20px 30px 20px;
        color: var(--text-primary-color);
        font-weight: 500;
    }

    .productOutline {
        font-size: 20px;
        color: var(--text-primary-color);
        line-height: 100%;
    }

    .productInfo {
        font-size: 13px;
        text-align: left;
        color: var(--text-secondary-color);
        margin-bottom: 20px;
        padding: 0 20px;
    }

    .productInfo a {
        color: var(--text-secondary-color);
        /*border-bottom: 1px solid #626262;*/
    }

    .productInfo a:hover {
        color: var(--text-secondary-color-a-hover);
        /*border-bottom: 1px solid #a2a2a2;*/
    }



    /*-- 購入ボタン　ここから --*/

    .buyBtnWrapper {
        width: 100%;
        height: 100px;
        margin-top: 15px;
        padding: 20px;
        /*border-bottom: 1px solid #000;*/
        border-bottom: none;
        text-align: left;
        position: relative;
        display: flex;
        flex-wrap: wrap;
        white-space: nowrap;
        justify-content: stretch;
        align-items:center;
    }

    .buyBtnWrapper::before {
        content: '';
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 0;
        display: inline-block;
        width: calc(100% - 40px);
        height: 1px;
        background-color: black;
    }

    .typeAndPrice {
        width: 50%;
    }

    .type, .price {
        width: auto;
        height: 30px;
        font-size: 16px;
        line-height: 110%;
        text-align: left;
        color: #000;
        display: flex;
        flex-wrap: wrap;
        white-space: nowrap;
        justify-content:flex-start;
        align-items: center;
    }


    .typeBox {
        align-items:center;
        border-radius: 3px;
        /*padding: 5px 10px;
        margin: 0 20px 0 0;*/
        margin: 0;
        padding: 0;
    }

    .priceBold {
        font-weight: 600;
        font-size: 20px;
    }

    .buyBtn {
        font-family: 'Noto Sans JP', sans-serif;
        width: 50%;
        height: 50px;
        margin: 0;
        padding: 0;
        font-size: 14px;
        line-height: 110%;
        text-align: left;
        display: flex;
        flex-wrap: wrap;
        vertical-align: bottom;
        white-space: nowrap;
        justify-content: flex-end;
        align-items:center;
    }

    .buyBtn a {
        width: auto;
        height: 50px;
        display: block;
        font-size: 14px;
        color: #fff;
        padding: 16px 35px;
        margin: 0;
        background-color: #000;
        border-radius: 5px;
        text-align: center;
        /*transition: all .1s ease-in-out;*/
        align-items: center;
        border-radius: 30px;
    }

    .buyBtn a:hover {
        color: #fff;
        background-color: #676767;
    }

    /*-- 購入ボタン　ここまで --*/


    /*-- 本文　ここから --*/

    .productDescription {
        width: 100%;
        margin: 50px 0;
        padding: 0 20px;
    }

    .productDescription p {
        font-size: 16px;
        text-align: left;
        font-weight: 500;
        line-height: 200%;
        color: var(--description-text-primary-color);
        /*overflow-wrap: break-word;*/
        overflow-wrap: anywhere;
        word-break: normal;
        line-break: strict;
    }

    .productDescription a {
        color: var(--description-text-primary-color);
        padding-bottom: 1px;
        text-decoration:none;
        border-bottom: 1px solid var(--description-text-primary-color);
    }

    .productDescription a:hover {
        color: var(--description-text-primary-color-a-hover);
        padding-bottom: 1px;
        text-decoration:none;
        border-bottom: 1px solid var(--description-text-primary-color-a-hover);
    }

    .productImgUnit {
        display: block;
        width: 100%;
        margin: 0 0 20px 0;
        position: relative;
    }


    /*-- 商品仕様表と注意書き　ここから --*/

    table {
        width: 100%;
        padding: 0 20px;
        display: inline-block;
        border-collapse: collapse;
    }

    table tr th, table tr td {
        border: none;
        text-align: left;
        font-size: 16px;
        line-height: 160%;
        padding: 10px 0;
        font-weight: 500;
    }

    table tr {
        border-bottom: 1px solid #cecece;
    }

    table tr th {
        width: 140px;
        vertical-align: top;
    }

    .dots {
        width: 25px;
    }
    
    .itemize_tr {
        border-bottom: none;
    }

    /*-- 商品仕様表と注意書き　ここまで --*/


    /*-- 本文　ここまで --*/



    /*-- Item Detail Page Layout   Ends Here --*/



    
}



/*-- tablet landscape --*/


@media (orientation: landscape) and (min-width:751px) and (max-width:1024px) {

    .main {
        position: relative;
        width: 100%;
        margin: 0;
        padding: 44px 10px 0 10px;
    }

    /*-- Top Page Only  From Here --*/
    .topPageSection {
        width: 100%;
    }

    .sectionUnit {
        width: 100%;
        margin: 0 0 15px 0;
    }

    .sectionContent {
        width: 100%;
        height: 600px;
        position: relative;
    }

    .unitLink {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: 30;
    }

    .copyWrapper {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        padding-top: 50px;
        z-index: 10;
    }

    /* copyWrapper をセクション下まで下げる */
    .copyBottom {
        /*padding-top: 290px;*/
        padding-top: 270px;
    }

    .symbolTitle {
        font-size:16.2vw;
        text-align: center;
        color: var(--text-title-color);
        font-weight: 500;
        /*line-height: 120%;*/
        line-height: 150%;
        position: absolute;
        transform: translateX(-49%);
        left: 49%;
    }

    .symbolHeadline {
        font-size: 2rem;
        text-align: center;
        color: var(--text-title-color);
        font-weight: 500;
        line-height: 100%;
        position: absolute;
        bottom: 70px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
    }

    .brSpOnly {
        display: none;
    }

    .headlineLabel {
        font-size: 13px;
        text-align: center;
        margin: 0;
        /*padding: 0 0 20px 25px;*/
        padding: 0 0 20px 0;
    }

    .headline {
        font-size: 45px;
        font-weight: 600;
        margin: 0;
        /*padding: 0 0 0 25px;*/
        padding: 0;
        line-height: 110%;
        text-align: center;
    }

    .subHeadline {
        font-size: 18px;
        font-weight: 500;
        margin: 0;
        /*padding: 10px 0 0 25px;*/
        padding: 10px 0 0 0;
        line-height: 1.5em;
        text-align: center;
    }

    .subHeadlineCenter {
        font-size: 18px;
        font-weight: 500;
        margin: 0;
        /*padding: 10px 0 0 25px;*/
        padding: 10px 0 0 0;
        line-height: 1.5em;
        text-align: center;
    }

    .jpHeadlineAdjust {
        margin-right: -45px;
        display: inline-flex;
    }

    .jpSubHeadlineAdjust {
        margin-right: -18px;
        display: inline-flex;
    }

    .spNewLine {
        display: none;
    }

    

    /*-- .headline の色の変更 --*/
    .textColorWhite {
        color: #fff;
    }

    .textColorBlack {
        color: #222222;
    }


    /*-- リンクテキストボタン --*/

    .linkWrapper {
        /*width: auto;*/
        width:fit-content;
        /*position: absolute;
        top: 250px;
        left: 25px;*/
        position: relative;
        top: 50px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 40;
        text-align: left;
        white-space: nowrap;
    }

    .linkBtn {
        padding: 0;
        width:fit-content;
    }

    .linkBtn a .linkBtnInner {
        display: inline-block;
        /*font-family: "游ゴシック体","Yu Gothic Medium","Yu Gothic","Meiryo","Hiragino Kaku Gothic Pro",sans-serif;*/
        font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
        width: auto;
        height: 50px;
        border-radius: 25px;
        border: 2px solid #fff;
        pointer-events: all;
        z-index: 40;
        color: #fff;
        margin: 2% 2% 0 0;
        line-height: 100%;
        padding: 14px 25px;
        font-size: 17px;
        font-weight: 600;
        transition: all .2s ease-in-out;
        margin: 0;
    }

    .linkBtn > a, .linkBtnBlack > a {
        display: block;
        width: auto;
        height: 50px;
        border-radius: 25px;
    }

    .linkBtn a:hover .linkBtnInner {
        color: #000;
        background-color: #fff;
    }

    /*-- リンクテキストボタン　色の変更 --*/
    .linkBtnBlack {
        padding: 0;
        width:fit-content;
    }

    .linkBtnBlack a .linkBtnInner {
        display: inline-block;
        /*font-family: "游ゴシック体","Yu Gothic Medium","Yu Gothic","Meiryo","Hiragino Kaku Gothic Pro",sans-serif;*/
        font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
        color: #222222;
        border: 2px solid #222222;
        width: auto;
        height: 50px;
        border-radius: 25px;
        pointer-events: all;
        z-index: 40;
        line-height: 100%;
        margin: 2% 2% 0 0;
        padding: 14px 25px;
        font-size: 17px;
        font-weight: 600;
        transition: all .2s ease-in-out;
        margin: 0;
    }

    .linkBtnBlack a:hover .linkBtnInner {
        color: #fff;
        background-color: #222222;
    }
    

    



    .sectionImgFrame {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        max-width: 2700px;
        height: 100%;
        z-index: 1;
    }

    /*-- .sectionImgFrame の中身 --*/
    .worksGlassBody {
        background-image: url(../images/glass-body.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .worksAfterTheCraving {
        background-image: url(../images/after-the-craving.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .worksSelfShield {
        background-image: url(../images/self-shield.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .worksLighthouse {
        background-image: url(../images/lighthouse.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .artbookImg {
        background-image: url(../images/artbook-dialogue-with-ai-1-2-3-cover-pc.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .noticeImg {
        background-image: url(../images/etude-image-20251107.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .worksBringDreams {
        background-image: url(../images/bring-dreams.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .gicleeObserver {
        background-image: url(../images/giclee-observer-2-item-cover-pc.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .worksWrinkleBox {
        background-image: url(../images/wrinkle-box-pc.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .worksScribble2 {
        background-image: url(../images/scribble-2-cover-pc.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .worksSavor {
        background-image: url(../images/savor-morning-cover-pc.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .casieImg {
        background-image: url(../images/casie-update-mv-pc.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .worksOasis {
        background-image: url(../images/oasis.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center 45%;
    }

    .worksYellowClothes {
        background-image: url(../images/yellow-clothes.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .seriesSet {
        background-image: url(../images/sunbathing.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .exhibition {
        background-image: url(../images/bring-dreams-2.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .worksFreshGreenGathering {
        background-image: url(../images/fresh-green-gathering.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .worksWisher {
        background-image: url(../images/wisher.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center 65%;
    }

    .preorder {
        background-image: url(../images/giclee-preorder-2023-tab-pc.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 25% center;
    }

    .symbolWork {
        background-image: url(../images/near-my-life.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center top;
    }

    .restInPeaceEn {
        background-image: url(../images/rest-in-peace-leave-space.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .shipOfMemoryEn {
        background-image: url(../images/ship_of_memory_banner_tab_pc.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .worksBela {
        background-image: url(../images/bela-cover-pc.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .worksMilda {
        background-image: url(../images/milda.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }


    .newWork {
        background-image: url(../images/solace.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .newWork-2 {
        background-image: url(../images/implexus-atsushigraph-artwork-pc.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .newWork-3 {
        background-image: url(../images/light-rocks-cover-pc.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .newWork-4 {
        background-image: url(../images/nap.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .gicleeLightRocks {
        background-image: url(../images/giclee-light-rocks-hero-img-pc.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .gicleeUtopia {
        background-image: url(../images/utopia.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .graphicUtopia {
        background-image: url(../images/utopia.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .bioImg {
        background-image: url(../images/brain-remix-pc.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .newYear {
        background-image: url(../images/aim.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center 30%;
    }


    .videoWrap {
        max-width: 2700px;
        z-index: 1;
        height: 600px;
        position: relative;
        overflow: hidden;
    }

    .heroImgVideo {
        width: 100%;
        height: auto;
        position: absolute;
        top: 20%;
        left: 50%;
        transform: translate(-50%, -20%);
        vertical-align: bottom;
        z-index: -1;
    }


    .gradationMask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background:linear-gradient(to bottom, rgba(59, 59, 59, 0.23) 0, transparent 100%);
        z-index: 2;
    }

    .gradationMask-2 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background:linear-gradient(to bottom, rgba(18, 18, 18, 0.2) 0, transparent 100%);
        z-index: 2;
    }

    .gradationMask-3 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background:linear-gradient(to right, rgba(18, 18, 18, 0.3) 0, transparent 100%);
        z-index: 2;
    }


    /*-- Top Page Only  Ends Here --*/


    /*-- Item Grid Layout Unit Commmon  From Here--*/

    .unitTitle {
        width: 100%;
        height: 30px;
        margin-top: 15px;
        padding: 0;
        /*border-top: 1px solid #000;*/
        font-size: 16px;
        font-weight: 500;
        text-align: left;
        color: var(--text-primary-color);
    }

    .unitTitle > h1 {
        font-weight: 400;
    }

    .unitTitle::before {
        /*content: none;*/
        content: '';
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        /*top: 0;*/
        display: inline-block;
        width: 100%;
        height: 1px;
        background-color: var(--text-primary-color);
    }

    .itemLayout2Column {
        width: 100%;
        height: auto;
        margin-top: 15px;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .itemLayout {
        width: 100%;
        height: auto;
        margin-top: 15px;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }


    .itemWrap {
        width: 100%;
        height: 100%;
        position: relative;
        margin: 0 0 10px 0;
    }


    

    /* News Articles Layout ここから */

    .newsLayout {
        width: 100%;
        height: auto;
        margin-top: 15px;
        padding: 0;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        /*display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: max-content max-content 1fr auto;
        gap: 8px;*/
    }

    .newsWrap {
        width: 49.5%;
        height: auto;
        margin: 0 0 20px 0;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        border-bottom: 1px dotted var(--text-primary-color);
    }

    .newsWrap:nth-last-of-type(-n+2) {
        border-bottom: none;
    }

    .newsWrap a {
        width: 100%;
        height: 100%;
    }

    .newsArticle {
        width: 100%;
        height: 100%;
        min-height: 240px;
        padding-bottom: 15px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        border-top: none;
        border-right: none;
        border-left: none;
        border-bottom: none;
        /*border-bottom: 1px dotted #000;*/
    }

    .newsWrap a:hover .newsArticle {
        /*border-bottom: 1px dotted #949494*/
        border-bottom: none;
        
    }

    /*.newsLayout > .newsWrap > a:nth-last-of-type(-n+2) {
        border-bottom: none;
    }

    .newsLayout > .newsWrap a:hover:nth-last-of-type(-n+2) {
        border-bottom: none;
    }*/

    .newsDescription {
        width: 50%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: relative;
    }

    .newsTitle {
        width: 100%;
        height: auto;
        font-size: 16px;
        text-align: left;
        padding: 10px 10px 10px 20px;
    }


    .newsDateAndCategory {
        width: 100%;
        font-size: 14px;
        text-align: left;
        padding: 0 10px 10px 20px;
    }

    .newsMedia {
        width: 50%;
        position: relative;
    }

    .newsMedia img {
        width: 100%;
        aspect-ratio: 1 / 1;
        z-index: 1;

        /*height: 200px;
        object-fit: cover;
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        transform: translateY(-50%);*/

        /*画像コピー禁止のためのcssここから*/
		user-select:none;
		-moz-user-select:none;
		-ms-user-select:none;
		-webkit-user-select:none;
		-khtml-user-select:none;
		-webkit-user-drag: none;
		-khtml-user-drag: none;
		-webkit-touch-callout: none;
		/*画像コピー禁止のためのcssここまで*/
    }

    .newsWrap a .newsArticle .newsDescription .newsTitle {
        color: var(--text-primary-color);
    }

    .newsWrap a:hover .newsArticle .newsDescription .newsTitle {
        color: var(--text-primary-color-a-hover);
        /*color: #000;*/
    }

    .newsWrap a .newsArticle .newsDescription .newsDateAndCategory {
        color: var(--text-secondary-color);
        /*color: #000;*/
    }

    .newsWrap a:hover .newsArticle .newsDescription .newsDateAndCategory {
        color: var(--text-secondary-color-a-hover);
        /*color: #000;*/
    }

    .newsWrap a:hover .newsArticle .newsMedia img {
        opacity: .8;
        /*opacity: 1;*/
    }

    /* News Articles Layout ここまで */
    
    

    


    

    /* sold out 表示の擬似要素 */
    .itemSoldOutLabel::after {
        content: 'sold out';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100px;
        height: 40px;
        padding: 3% 2% 1.5% 2%;
        border-radius: 0 5px 0 0;
        background-color: rgba(0,0,0,0.3);
        font-size: 14px;
        color: #fff;
        font-family: "游ゴシック体","Yu Gothic Medium","Yu Gothic","Meiryo","Hiragino Kaku Gothic Pro",sans-serif;
    }

    .itemThumbnail img {
        width: 100%;
        aspect-ratio: 1 / 1;
        vertical-align: bottom;

        /*画像コピー禁止のためのcssここから*/
		user-select:none;
		-moz-user-select:none;
		-ms-user-select:none;
		-webkit-user-select:none;
		-khtml-user-select:none;
		-webkit-user-drag: none;
		-khtml-user-drag: none;
		-webkit-touch-callout: none;
		/*画像コピー禁止のためのcssここまで*/
    }

    .itemThumbnail picture img {
        width: 100%;
        aspect-ratio: 1 / 1;
        vertical-align: bottom;

        /*画像コピー禁止のためのcssここから*/
		user-select:none;
		-moz-user-select:none;
		-ms-user-select:none;
		-webkit-user-select:none;
		-khtml-user-select:none;
		-webkit-user-drag: none;
		-khtml-user-drag: none;
		-webkit-touch-callout: none;
		/*画像コピー禁止のためのcssここまで*/
    }

    .itemThumbnail .videoItem {
        width: 100%;
        aspect-ratio: 1 / 1;
        vertical-align: bottom;

        /*画像コピー禁止のためのcssここから*/
		user-select:none;
		-moz-user-select:none;
		-ms-user-select:none;
		-webkit-user-select:none;
		-khtml-user-select:none;
		-webkit-user-drag: none;
		-khtml-user-drag: none;
		-webkit-touch-callout: none;
		/*画像コピー禁止のためのcssここまで*/
    }

    .itemText {
        font-size: 14px;
        text-align: left;
        line-height: 130%;
        z-index: 10;
    }

    .itemLinkMask .itemText {
        color: var(--text-primary-color);
    }

    .itemLinkMask:hover .itemText {
        color: var(--text-primary-color-a-hover);
    }

    

    /*-- Item Grid Layout Unit Commmon  Ends Here--*/



    /*-- Item Detail Page Layout   From Here --*/


    /*-- TopicPath From Here --*/
    .topicpath {
        display: block;
        width: 100%;
        padding: 0;
        margin: 0 0 15px 0;
    }

    ol {
        list-style-type: none;
        padding-left: 0;
        font-size: 11px;
        line-height: 190%;
        display: flex;
        color: var(--topicpath-color);
    }

    ol li {
        /*font-family: "游ゴシック体","Yu Gothic Medium","Yu Gothic","Meiryo","Hiragino Kaku Gothic Pro",sans-serif;*/
        font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
        font-size: 11px;
        line-height: 190%;
        color: var(--topicpath-color);
        margin: 0 7px 0 0;
        padding: 0;
    }

    ol li:nth-child(n+2) {
        margin-left: 7px;
    }

    ol li a {
        color: var(--topicpath-color);
    }

    ol li a:hover {
        color: var(--topicpath-color-a-hover);
    }

    /*-- TopicPath Ends Here --*/


    .productArticle {
        width: 100%;
    }

    .grid {
        width: 100%;
        display: grid;
        grid-template-rows: 1fr;
        grid-template-columns: 1.4fr 1fr;
        gap: 8px;
    }


    .images {
        width: 100%;
        height: auto;
        display: block;
    }

    .imgBlock {
        width: 100%;
        height: auto;
        position: static;
    }

    .imgUnit {
        display: block;
        width: 100%;
        padding-bottom: 10px;
        position: relative;
    }

    .img {
        width: 100%;
        vertical-align: bottom;

        /*画像コピー禁止のためのcssここから*/
		user-select:none;
		-moz-user-select:none;
		-ms-user-select:none;
		-webkit-user-select:none;
		-khtml-user-select:none;
		-webkit-user-drag: none;
		-khtml-user-drag: none;
		-webkit-touch-callout: none;
		/*画像コピー禁止のためのcssここまで*/

        z-index: 1;
    }

    .description {
        width: 100%;
        height: auto;
        padding: 0 0 0 10px;
        overflow: visible;
    }

    .descriptionBlock {
        width: 100%;
        height: auto;
        position: sticky;
        top: 44px;
    }

    .productTitle {
        font-size: 40px;
        letter-spacing: -0.02px;
        text-align: left;
        line-height: 100%;
        margin: 0;
        padding: 0;
        color: var(--text-primary-color);
        font-weight: 500;
    }

    .productOutline {
        font-size: 20px;
        color: var(--text-primary-color);
        line-height: 100%;
    }

    .productInfo {
        font-size: 13px;
        padding-left: 0;
        text-align: left;
        color: var(--text-secondary-color);
    }

    .productInfo a {
        color: var(--text-secondary-color);
        /*border-bottom: 1px solid #626262;*/
    }

    .productInfo a:hover {
        color: var(--text-secondary-color-a-hover);
        /*border-bottom: 1px solid #a2a2a2;*/
    }



    /*-- 購入ボタン　ここから --*/

    .buyBtnWrapper {
        width: 100%;
        height: 80px;
        margin-top: 15px;
        padding: 10px 0;
        border-bottom: 1px solid #000;
        text-align: left;
        display: flex;
        flex-wrap: wrap;
        white-space: nowrap;
        justify-content:stretch;
        align-items:center;
    }

    .buyBtnWrapper::before {
        content: none;
        /*position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 0;
        display: inline-block;
        width: calc(100% - 20px);
        height: 1px;
        background-color: black;*/
    }

    .typeAndPrice {
        width: 50%;
    }

    .type, .price {
        width: auto;
        height: 30px;
        font-size: 14px;
        line-height: 110%;
        text-align: left;
        color: #000;
        display: flex;
        flex-wrap: wrap;
        white-space: nowrap;
        justify-content: flex-start;
        align-items:center;
    }


    .typeBox {
        align-items:center;
        border-radius: 3px;
        /*padding: 5px 10px;
        margin: 0 20px 0 0;*/
        margin: 0;
        padding: 0;
    }

    .priceBold {
        font-weight: 600;
        font-size: 23px;
        padding-bottom: 5px;
    }

    .buyBtn {
        font-family: 'Noto Sans JP', sans-serif;
        width: 50%;
        height: 50px;
        margin: 0;
        padding: 0;
        font-size: 14px;
        line-height: 110%;
        text-align: left;
        display: flex;
        flex-wrap: wrap;
        vertical-align: bottom;
        white-space: nowrap;
        justify-content: flex-end;
        align-items:center;
    }

    .buyBtn a {
        width: auto;
        height: 50px;
        display: block;
        font-size: 14px;
        color: #fff;
        padding: 16px 20px;
        margin: 0;
        background-color: #000;
        border-radius: 5px;
        text-align: center;
        /*transition: all .1s ease-in-out;*/
        align-items: center;
        border-radius: 30px;
    }

    .buyBtn a:hover {
        color: #fff;
        background-color: #676767;
    }

    /*-- 購入ボタン　ここまで --*/


    /*-- 本文　ここから --*/

    .productDescription {
        width: 100%;
        margin: 70px 0;
        padding: 0 0 1px 0;
    }

    .productDescription p {
        font-size: 16px;
        text-align: left;
        font-weight: 500;
        line-height: 200%;
        color: var(--description-text-primary-color);
        margin: 0;
        /*overflow-wrap: break-word;*/
        overflow-wrap: anywhere;
        word-break: normal;
        line-break: strict;
    }

    .productDescription a {
        color: var(--description-text-primary-color);
        padding-bottom: 1px;
        text-decoration:none;
        border-bottom: 1px solid var(--description-text-primary-color);
    }

    .productDescription a:hover {
        color: var(--description-text-primary-color-a-hover);
        padding-bottom: 1px;
        text-decoration:none;
        border-bottom: 1px solid var(--description-text-primary-color-a-hover);
    }

    .productImgUnit {
        /*width: 100%;
        margin: 70px 0 0 0;*/
        display: none;
    }



    /*-- 商品仕様表と注意書き　ここから --*/

    table {
        width: 100%;
        display: block;
        padding: 0;
        border-collapse: collapse;
    }

    table tr th, table tr td {
        border: none;
        text-align: left;
        font-size: 16px;
        line-height: 160%;
        padding: 10px 0;
        font-weight: 500;
    }

    table tr {
        border-bottom: 1px solid #cecece;
    }

    table tr th {
        width: 140px;
        vertical-align: top;
    }

    .dots {
        width: 25px;
    }
    
    .itemize_tr {
        border-bottom: none;
    }


    /*-- 商品仕様表と注意書き　ここまで --*/



    /*-- 本文　ここまで --*/



    /*-- Item Detail Page Layout   Ends Here --*/



    
}



/*-- pc --*/

@media (min-width:1025px) {

    .main {
        position: relative;
        width: 100%;
        margin: 0;
        /*padding:44px 10px 0 10px;*/
        padding: 44px 10px 0 10px;
    }

    /*-- Top Page Only  From Here --*/
    .topPageSection {
        width: 100%;
    }

    .sectionUnit {
        width: 100%;
        margin: 0 0 15px 0;
    }

    .sectionContent {
        width: 100%;
        height: 600px;
        position: relative;
    }

    .unitLink {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: 30;
    }

    .copyWrapper {
        width: 100%;
        max-width: 1300px;
        position: relative;
        top: 0;
        padding: 50px 0 0 0;
        margin: 0 auto;
        z-index: 10;
    }

    .symbolTitle {
        /*font-size: 11.85vw;*/
        /*font-size: clamp(7.6rem, 11.85vw, 14rem);*/
        font-size: 160px;
        text-align: center;
        color: var(--text-title-color);
        font-weight: 500;
        line-height: 160%;
        /*line-height: 220%;*/
        /*position: absolute;
        transform: none;*/
    }

    .symbolHeadline {
        font-size: 2rem;
        text-align: center;
        color: var(--text-title-color);
        font-weight: 500;
        line-height: 100%;
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
    }

    .brSpOnly {
        display: none;
    }

    .headlineLabel {
        font-size: 13px;
        text-align: center;
        margin: 0;
        /*padding: 0 0 0 25px;*/
        padding: 0 0 20px 0;
    }

    .headline {
        font-size: 45px;
        font-weight: 600;
        margin: 0;
        /*padding: 0 0 0 25px;*/
        padding: 0 0 0 0;
        line-height: 110%;
        text-align: center;
    }

    .subHeadline {
        font-size: 18px;
        font-weight: 500;
        margin: 0;
        /*padding: 10px 0 0 25px;*/
        padding: 10px 0 0 0;
        line-height: 1.5em;
        text-align: center;
    }

    .subHeadlineCenter {
        font-size: 18px;
        font-weight: 500;
        margin: 0;
        /*padding: 10px 0 0 25px;*/
        padding: 20px 0 0 0;
        line-height: 1.5em;
        text-align: center;
    }

    .jpHeadlineAdjust {
        margin-right: -45px;
        display: inline-flex;
    }

    .jpSubHeadlineAdjust {
        margin-right: -18px;
        display: inline-flex;
    }

    .spNewLine {
        display: none;
    }

    

    /*-- .headline の色の変更 --*/
    .textColorWhite {
        color: #fff;
    }

    .textColorBlack {
        color: #222222;
    }


    /*-- リンクテキストボタン --*/

    .linkWrapper {
        max-width: 1300px;
        margin: 0 auto;
    }

    .linkBtn {
        width:fit-content;
        margin: 0;
        position: relative;
        top: 50px;
        /*left: 25px;*/
        margin: 0 auto;
        /*padding: 0 0 0 25px;*/
        padding: 0;
        /*z-index: 40;*/
        z-index: 40;
        /*text-align: left;*/
    }


    .linkBtn a .linkBtnInner {
        width: auto;
        display: inline-block;
        height: 50px;
        border-radius: 25px;
        border: 2px solid #fff;
        pointer-events: all;
        z-index: 40;
        color: #fff;
        line-height: 100%;
        transition: all .2s ease-in-out;
        padding: 14px 25px;
        /*font-family: "游ゴシック体","Yu Gothic Medium","Yu Gothic","Meiryo","Hiragino Kaku Gothic Pro",sans-serif;*/
        font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
        font-size: 17px;
        font-weight: 600;
        transition: all .2s ease-in-out;
        margin: 0;
    }


    .linkBtn > a, .linkBtnBlack > a {
        /*display: block;
        width: fit-content;
        height: 50px;*/
        margin: 0;
        padding: 0;
        display: block;
        border-radius: 25px;
    }

    .linkBtn a:hover .linkBtnInner {
        color: #000;
        background-color: #fff;
    }

    /*-- リンクテキストボタン　色の変更 --*/
    .linkBtnBlack {
        width:fit-content;
        margin: 0;
        position: relative;
        top: 50px;
        /*left: 25px;*/
        margin: 0 auto;
        /*padding: 0 0 0 25px;*/
        padding: 0;
        /*z-index: 40;*/
        z-index: 40;
        /*text-align: left;*/
    }

    .linkBtnBlack a .linkBtnInner {
        display: inline-block;
        /*font-family: "游ゴシック体","Yu Gothic Medium","Yu Gothic","Meiryo","Hiragino Kaku Gothic Pro",sans-serif;*/
        font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
        color: #222222;
        border: 2px solid #222222;
        display: block;
        width: auto;
        height: 50px;
        line-height: 100%;
        border-radius: 25px;
        pointer-events: all;
        z-index: 40;
        margin: 2% 2% 0 0;
        padding: 14px 25px;
        font-size: 17px;
        font-weight: 600;
        transition: all .2s ease-in-out;
        margin: 0;
    }

    .linkBtnBlack a:hover .linkBtnInner {
        color: #fff;
        background-color: #222222;
    }



    /* width 1300px までに付与されていた padding-left やpadding-right を
    width 1300px 以上では無くす */

    @media (min-width:1300px) {
        .linkBtn {
            padding: 0;
        }

        .linkBtnBlack {
            padding: 0;
        }

        .headlineLabel {
            padding: 0 0 20px 0;
        }
    
        .headline {
            padding: 0;
        }
    
        .subHeadline {
            padding: 10px 0 0 0;
        }

        .subHeadlineCenter {
            padding: 10px 0 0 0;
        }


    }

    



    .sectionImgFrame {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        max-width: 2700px;
        height: 100%;
        z-index: 1;
    }

    /*-- .sectionImgFrame の中身 --*/
    .worksGlassBody {
        background-image: url(../images/glass-body.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center 65%;
    }

    .worksAfterTheCraving {
        background-image: url(../images/after-the-craving.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center 30%;
    }

    .worksSelfShield {
        background-image: url(../images/self-shield.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .worksLighthouse {
        background-image: url(../images/lighthouse.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center 40%;
    }

    .artbookImg {
        background-image: url(../images/artbook-dialogue-with-ai-1-2-3-cover-pc.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .noticeImg {
        background-image: url(../images/etude-image-20251107.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .worksBringDreams {
        background-image: url(../images/bring-dreams.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .gicleeObserver {
        background-image: url(../images/giclee-observer-2-item-cover-pc.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .worksWrinkleBox {
        background-image: url(../images/wrinkle-box-pc.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .worksScribble2 {
        background-image: url(../images/scribble-2-cover-pc.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .worksSavor {
        background-image: url(../images/savor-morning-cover-pc.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .casieImg {
        background-image: url(../images/casie-update-mv-pc.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .worksOasis {
        background-image: url(../images/oasis.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center 35%;
    }

    .worksYellowClothes {
        background-image: url(../images/yellow-clothes.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .seriesSet {
        background-image: url(../images/sunbathing.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .exhibition {
        background-image: url(../images/bring-dreams-2.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .worksFreshGreenGathering {
        background-image: url(../images/fresh-green-gathering.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .worksWisher {
        background-image: url(../images/wisher.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center 65%;
    }

    .preorder {
        background-image: url(../images/giclee-preorder-2023-tab-pc.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 30% center;
    }

    .symbolWork {
        background-image: url(../images/near-my-life.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center top;
    }

    .restInPeaceEn {
        background-image: url(../images/rest-in-peace-leave-space.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .shipOfMemoryEn {
        background-image: url(../images/ship_of_memory_banner_tab_pc.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .worksBela {
        background-image: url(../images/bela-cover-pc.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .worksMilda {
        background-image: url(../images/milda.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .newWork {
        background-image: url(../images/solace.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .newWork-2 {
        background-image: url(../images/implexus-atsushigraph-artwork-pc.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .newWork-3 {
        background-image: url(../images/light-rocks-cover-pc.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .newWork-4 {
        background-image: url(../images/nap.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .gicleeLightRocks {
        background-image: url(../images/giclee-light-rocks-hero-img-pc.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .gicleeUtopia {
        background-image: url(../images/utopia.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .graphicUtopia {
        background-image: url(../images/utopia.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .bioImg {
        background-image: url(../images/brain-remix-pc.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .newYear {
        background-image: url(../images/aim.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center 30%;
    }

    .videoWrap {
        max-width: 2700px;
        z-index: 1;
        height: 600px;
        position: relative;
        overflow: hidden;
    }

    .heroImgVideo {
        width: 100%;
        height: auto;
        position: absolute;
        top: 20%;
        left: 50%;
        transform: translate(-50%, -20%);
        vertical-align: bottom;
        z-index: -1;
    }


    .gradationMask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background:linear-gradient(to bottom, rgba(59, 59, 59, 0.23) 0, transparent 100%);
        z-index: 2;
    }

    .gradationMask-2 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background:linear-gradient(to bottom, rgba(18, 18, 18, 0.2) 0, transparent 100%);
        z-index: 2;
    }

    .gradationMask-3 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background:linear-gradient(to right, rgba(18, 18, 18, 0.3) 0, transparent 100%);
        z-index: 2;
    }


    /*-- Top Page Only  Ends Here --*/





    /*-- Item Grid Layout Unit Commmon  From Here--*/

    .unitTitle {
        width: 100%;
        max-width: 1300px;
        height: 30px;
        /*margin-top: 15px;*/
        margin: 15px auto 0 auto;
        font-size: 16px;
        font-weight: 500;
        text-align: left;
        color: var(--text-primary-color);
        border-top: none;
    }

    .unitTitle > h1 {
        font-weight: 400;
    }

    .unitTitle::before {
        /*content: none;*/
        content: '';
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        /*top: 0;*/
        display: inline-block;
        /*width: calc(100% - 20px);*/
        width: calc(100% - 20px);
        max-width: 1300px;
        height: 1px;
        background-color: var(--text-primary-color);
    }

    .itemLayout2Column {
        width: 100%;
        max-width: 1300px;
        height: auto;
        /*margin-top: 15px;*/
        margin: 15px auto 0 auto;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .itemLayout {
        width: 100%;
        max-width: 1300px;
        height: auto;
        /*margin-top: 15px;*/
        margin: 15px auto 0 auto;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }

    .itemWrap {
        width: 100%;
        height: 100%;
        position: relative;
        margin: 0 0 10px 0;
    }



    
    /* News Articles Layout ここから */

    .newsLayout {
        width: 100%;
        max-width: 1300px;
        height: auto;
        /*margin-top: 15px;*/
        margin: 15px auto 0 auto;
        padding: 0;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        /*display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: max-content max-content 1fr auto;
        gap: 8px;*/
    }

    .newsWrap {
        width: 49.5%;
        height: auto;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        border-bottom: 1px dotted var(--text-primary-color);
        margin: 0 0 20px 0;
    }

    .newsWrap:nth-last-of-type(-n+2) {
        border-bottom: none;
    }

    .newsWrap a {
        width: 100%;
        height: 100%;
    }

    .newsArticle {
        width: 100%;
        height: 100%;
        min-height: 270px;
        padding-bottom: 20px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        border-top: none;
        border-right: none;
        border-left: none;
        /*border-bottom: 1px dotted #000;*/
        border-bottom: none;
    }

    .newsWrap a:hover .newsArticle {
        /*border-bottom: 1px dotted #949494*/
        border-bottom: none;
        
    }

    .newsDescription {
        width: 50%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: relative;
    }

    .newsTitle {
        width: 100%;
        height: auto;
        font-size: 16px;
        text-align: left;
        padding: 10px 10px 10px 20px;
    }


    .newsDateAndCategory {
        width: 100%;
        font-size: 13px;
        text-align: left;
        padding: 0 10px 10px 20px;
    }

    .newsMedia {
        width: 50%;
        /*position: relative;*/
    }

    .newsMedia img {
        width: 100%;
        aspect-ratio: 1 / 1;
        z-index: 1;

        /*height: 250px;*/
        /*object-fit: cover;
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        transform: translateY(-50%);*/

        /*画像コピー禁止のためのcssここから*/
		user-select:none;
		-moz-user-select:none;
		-ms-user-select:none;
		-webkit-user-select:none;
		-khtml-user-select:none;
		-webkit-user-drag: none;
		-khtml-user-drag: none;
		-webkit-touch-callout: none;
		/*画像コピー禁止のためのcssここまで*/
    }

    .newsWrap a .newsArticle .newsDescription .newsTitle {
        color: var(--text-primary-color);
    }

    .newsWrap a:hover .newsArticle .newsDescription .newsTitle {
        color: var(--text-primary-color-a-hover);
        /*color: #000;*/
    }

    .newsWrap a .newsArticle .newsDescription .newsDateAndCategory {
        color: var(--text-secondary-color);
        /*color: #000;*/
    }

    .newsWrap a:hover .newsArticle .newsDescription .newsDateAndCategory {
        color: var(--text-secondary-color-a-hover);
        /*color: #000;*/
    }

    .newsWrap a:hover .newsArticle .newsMedia img {
        /*opacity: .8;*/
        opacity: 1;
    }

    /* News Articles Layout ここまで */
    

    


    .itemThumbnail {
        width: 100%;
        min-height: 250px;
        margin: 0;
        padding: 0;
        position: relative;
        z-index: 1;
    }

    /* sold out 表示の擬似要素 */
    .itemSoldOutLabel::after {
        content: 'sold out';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100px;
        height: 40px;
        padding: 3% 2% 1.5% 2%;
        border-radius: 0 5px 0 0;
        background-color: rgba(0,0,0,0.3);
        font-size: 14px;
        color: #fff;
        font-family: "游ゴシック体","Yu Gothic Medium","Yu Gothic","Meiryo","Hiragino Kaku Gothic Pro",sans-serif;
    }

    .itemThumbnail img {
        width: 100%;
        aspect-ratio: 1 / 1;
        vertical-align: bottom;

        /*画像コピー禁止のためのcssここから*/
		user-select:none;
		-moz-user-select:none;
		-ms-user-select:none;
		-webkit-user-select:none;
		-khtml-user-select:none;
		-webkit-user-drag: none;
		-khtml-user-drag: none;
		-webkit-touch-callout: none;
		/*画像コピー禁止のためのcssここまで*/
    }


    .itemThumbnail picture img {
        width: 100%;
        aspect-ratio: 1 / 1;
        vertical-align: bottom;

        /*画像コピー禁止のためのcssここから*/
		user-select:none;
		-moz-user-select:none;
		-ms-user-select:none;
		-webkit-user-select:none;
		-khtml-user-select:none;
		-webkit-user-drag: none;
		-khtml-user-drag: none;
		-webkit-touch-callout: none;
		/*画像コピー禁止のためのcssここまで*/
    }

    .itemThumbnail .videoItem {
        width: 100%;
        aspect-ratio: 1 / 1;
        vertical-align: bottom;

        /*画像コピー禁止のためのcssここから*/
		user-select:none;
		-moz-user-select:none;
		-ms-user-select:none;
		-webkit-user-select:none;
		-khtml-user-select:none;
		-webkit-user-drag: none;
		-khtml-user-drag: none;
		-webkit-touch-callout: none;
		/*画像コピー禁止のためのcssここまで*/
    }

    .itemText {
        font-size: 14px;
        text-align: left;
        line-height: 130%;
        z-index: 10;
    }

    .itemLinkMask .itemText {
        color: var(--text-primary-color);
    }

    .itemLinkMask:hover .itemText {
        color: var(--text-primary-color-a-hover);
    }

    

    /*-- Item Grid Layout Unit Commmon  Ends Here--*/






    /*-- Item Detail Page Layout   From Here --*/


    /*-- TopicPath From Here --*/
    .topicpath {
        display: block;
        width: 100%;
        max-width: 1300px;
        padding: 0;
        /*margin: 0 0 15px 0;*/
        margin: 0 auto 15px auto;
    }

    ol {
        list-style-type: none;
        padding-left: 0;
        font-size: 11px;
        line-height: 190%;
        display: flex;
        color: var(--topicpath-color);
    }

    ol li {
        /*font-family: "游ゴシック体","Yu Gothic Medium","Yu Gothic","Meiryo","Hiragino Kaku Gothic Pro",sans-serif;*/
        font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
        font-size: 11px;
        line-height: 190%;
        color: var(--topicpath-color);
        margin: 0 7px 0 0;
        padding: 0;
    }

    ol li:nth-child(n+2) {
        margin-left: 7px;
    }

    ol li a {
        color: var(--topicpath-color);
    }

    ol li a:hover {
        color: var(--topicpath-color-a-hover);
    }

    /*-- TopicPath Ends Here --*/



    .productArticle {
        width: 100%;
        max-width: 1300px;
        margin: 0 auto;
    }

    .grid {
        width: 100%;
        display: grid;
        grid-template-rows: 1fr;
        grid-template-columns: 1.5fr 1fr;
        gap: 8px;
    }


    .images {
        width: 100%;
        height: auto;
        overflow: visible;
    }

    .imgBlock {
        width: 100%;
        height: auto;
        position: static;
        padding-bottom: 10px;
        /*position: sticky;
        top: 44px;*/
    }



    .imgUnit {
        display: block;
        width: 100%;
        padding-bottom: 10px;
        position: relative;
    }

    .img {
        width: 100%;
        vertical-align: bottom;

        /*画像コピー禁止のためのcssここから*/
		user-select:none;
		-moz-user-select:none;
		-ms-user-select:none;
		-webkit-user-select:none;
		-khtml-user-select:none;
		-webkit-user-drag: none;
		-khtml-user-drag: none;
		-webkit-touch-callout: none;
		/*画像コピー禁止のためのcssここまで*/

        z-index: 1;
    }

    .description {
        width: 100%;
        height: auto;
        /*padding: 0 0 0 20px;*/
        padding: 0;
        overflow: visible;
    }

    .descriptionBlock {
        width: 100%;
        height: auto;
        position: sticky;
        /*top: 44px;*/
        top: 54px;
        padding: 0 30px 0 30px;
    }

    .productTitle {
        font-size: 40px;
        /*letter-spacing: -0.02px;*/
        text-align: left;
        line-height: 100%;
        margin: 0;
        padding: 0 0 10px 0;
        color: var(--text-primary-color);
        font-weight: 500;
    }

    .productOutline {
        font-size: 20px;
        color: var(--text-primary-color);
        line-height: 100%;
    }

    .productInfo {
        font-size: 14px;
        text-align: left;
        color: var(--text-secondary-color);
    }

    .productInfo a {
        color: var(--text-secondary-color);
        /*border-bottom: 1px solid #626262;*/
    }

    .productInfo a:hover {
        color: var(--text-secondary-color-a-hover);
        /*border-bottom: 1px solid #a2a2a2;*/
    }



    /*-- 購入ボタン　ここから --*/

    .buyBtnWrapper {
        width: 100%;
        height: auto;
        margin-top: 15px;
        padding: 10px 0;
        border-bottom: 1px solid #000;
        text-align: left;
        display: flex;
        flex-wrap: wrap;
        white-space: nowrap;
        justify-content: stretch;
        align-items:center;
    }

    .typeAndPrice {
        width: 50%;
        
    }

    .type, .price {
        width: 100%;
        height: 30px;
        font-size: 16px;
        line-height: 110%;
        text-align: left;
        color: #000;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
    }


    .typeBox {
        align-items:center;
        border-radius: 3px;
        /*padding: 5px 10px;
        margin: 0 20px 0 0;*/
        margin: 0;
        padding: 0;
    }

    .priceBold {
        font-weight: 600;
        font-size: 23px;
        padding-bottom: 7px;
    }

    .buyBtn {
        font-family: 'Noto Sans JP', sans-serif;
        width: 50%;
        height: 50px;
        margin: 0;
        padding: 0;
        font-size: 16px;
        line-height: 110%;
        text-align: left;
        display: flex;
        flex-wrap: wrap;
        vertical-align: bottom;
        white-space: nowrap;
        justify-content: flex-end;
        align-items:center;
    }

    .buyBtn a {
        width: auto;
        height: 50px;
        display: block;
        font-size: 14px;
        font-weight: 500;
        color: #fff;
        padding: 16px 20px;
        margin: 0;
        background-color: #000;
        border-radius: 5px;
        text-align: center;
        /*transition: all .1s ease-in-out;*/
        align-items: center;
        border-radius: 30px;
    }

    .buyBtn a:hover {
        color: #fff;
        background-color: #676767;
    }

    /*-- 購入ボタン　ここまで --*/



    /*-- 本文　ここから --*/

    .productDescription {
        width: 100%;
        margin: 70px 0;
        padding: 0 0 10px 0;
    }

    .productDescription p {
        font-size: 16px;
        text-align: left;
        font-weight: 500;
        /*line-height: 160%;*/
        line-height: 200%;
        color: var(--description-text-primary-color);
        margin: 0;
        /*overflow-wrap: break-word;*/
        overflow-wrap: anywhere;
        word-break: normal;
        line-break: strict;
    }

    .productDescription a {
        color: var(--description-text-primary-color);
        padding-bottom: 1px;
        text-decoration:none;
        border-bottom: 1px solid var(--description-text-primary-color);
    }

    .productDescription a:hover {
        color: var(--description-text-primary-color-a-hover);
        padding-bottom: 1px;
        text-decoration:none;
        border-bottom: 1px solid var(--description-text-primary-color-a-hover);
    }

    .productImgUnit {
        display: none;
        /*width: 100%;
        margin: 10px 0 70px 0;*/
        
    }


    /*-- 商品仕様表と注意書き　ここから --*/

    table {
        width: 100%;
        display: block;
        padding: 0;
        border-collapse: collapse;
    }

    table tr th, table tr td {
        border: none;
        text-align: left;
        font-size: 16px;
        line-height: 160%;
        padding: 10px 0;
        font-weight: 500;
    }

    table tr {
        border-bottom: 1px solid #cecece;
    }

    table tr th {
        width: 140px;
        vertical-align: top;
    }

    .dots {
        width: 25px;
    }
    
    .itemize_tr {
        border-bottom: none;
    }


    /*-- 商品仕様表と注意書き　ここまで --*/



    /*-- 本文　ここまで --*/



    /*-- Item Detail Page Layout   Ends Here --*/





    
}



/*-- 共通 --*/


/*-- 文字をセンターに配置 ここから --*/
.centerText {
    text-align: center;
}
/*-- 文字をセンターに配置 ここまで --*/


/*-- 見出しの線を消す　ここから --*/
.noLine {
    border-top: 1px solid transparent;
}

.noLine::before {
    content: '';
    background-color: transparent;
}

/*-- 見出しの線を消す　ここまで --*/


/* Position Sticky を無効にする */
.noSticky {
    position: inherit;
}


/* .itemText の link arrow 共通 */
.itemWrap > a > .itemText > .linkArrow {
    width: 10px;
    height: 10px;
    margin-top: 3px;
    stroke: var(--text-primary-color);
}

.itemWrap >  a:hover > .itemText > .linkArrow {
    stroke: var(--text-primary-color-a-hover);
}


/* .productDescription内の pタグで SVG .linkArrow の色をマウスホバーで変える 各メディアクエリ共通 */
.productDescription > p > a:hover > .linkArrow {
    stroke: var(--description-text-primary-color-a-hover);
}

/*Top Page Hero Img リンクボタン*/

.linkBtn a .linkBtnInner > .linkArrow {
    stroke: #fff;
    transition: all .2s ease-in-out;
}

.linkBtn a:hover .linkBtnInner > .linkArrow {
    stroke: #000;
}


.linkBtnBlack a .linkBtnInner > .linkArrow {
    stroke: #000;
    transition: all .2s ease-in-out;
}

.linkBtnBlack a:hover .linkBtnInner > .linkArrow {
    stroke: #fff;
}


/*-----------------------------------*/
/*---- Main Contents Ends Here ------*/
/*-----------------------------------*/




/*-----------------------------------*/
/*-------- Footer From Here ---------*/
/*-----------------------------------*/

/* SmartPhone Portrait */
@media (max-width: 750px) {

    footer {
        width: 100%;
        height: auto;
        margin-top: 35px;
        padding-bottom: 20px;
        z-index: 1;
        /*background-color: #f3f3f3;*/
    }

    .footerNav {
        width: 100%;
        height: auto;
        padding: 0 15px;
        display: flex;
        flex-wrap: nowrap;
        z-index: 1;
    }

    .ac {
        /*max-width: 1020px;*/
        width: 100%;
        height: auto;
        position: relative;
        padding: 0;
        margin: 0 auto;
        visibility: visible;
        z-index: 1;
        border-top: none;
        background: transparent;
    }

    .nav_block {
        width: 100%;
        height: auto;
        padding: 0;
        margin: 0;
        display: block;
        border-bottom: none;
        z-index: 1;
        background: transparent;
    }



    .check{
        display: none;
    }
      
    /* 通常時表示されるテキスト */
    .footerLabel {
        width: 100%;
        max-height: auto;
        cursor: pointer;
        margin: 0;
        padding: 8px 0 8px 0;
        color: var(--footer-label-primary-color);
        font-weight: 400;
        font-size: 14px;
        line-height: 220%;
        z-index: 1;
        display: block;
        position: relative;
    }
      
    /* クリック時に表示されるテキスト */
    .labelInner {
        align-items: center;
        /*margin-top: 5px;
        margin-bottom: 10px;*/
        margin: 0;
        /*通常時は見えなくする*/
        overflow: hidden;
        /*  通常時は高さ0を指定  */
        max-height: 0;
        transition: all .4s;
        border-bottom: 1px solid var(--text-primary-color);
      
    }
      
    /* クリック時のスタイル */
    .check:checked + .footerLabel + .labelInner {
        max-height: 420px;
        padding: 10px 0 0 0;
        transition: all .4s;
    }

    
    /*-- プラスの横線 --*/
    .footerLabel:before {
        content: '';
        position: absolute;
        top: 23px;
        right: 8px;
        width: 14px;
        height: 1px;
        background: var(--text-primary-color);
    }

    /* プラスの縦線 */
    .footerLabel:after {
        content: "";
        position: absolute;
        top: 16px;
        right: 15px;
        width: 1px;
        height: 14px;
        background: var(--text-primary-color);
        transition: all 0.1s ease-in-out;
    }

    .check:checked + .footerLabel:after {
        opacity: 0;
    }





    .footer_nav_ul {
        width: 100%;
        height: auto;
        list-style-type: none;
        padding: 2% 0 15% 5%;
        margin: 0;
        z-index: 1;
    }

    .footer_nav_ul > li {
        height: 18px;
        font-size: 14px;
        text-align: left;
        padding: 0;
        margin: 0;
        font-weight: 400;
        color: var(--footer-label-primary-color);
        line-height: 220%;
        z-index: 1;
        display: block;

        /*header メニューの装飾 (border)が .footer_nav_ul li に適用させないため　ここから*/
        border-left: none;
        border-top: none;
        /*header メニューの装飾 (border)が .footer_nav_ul li に適用させないため　ここまで*/

    }

    .footer_nav_ul li a {
        /*color: #414141;*/
        color: var(--text-primary-color);
        line-height: 220%;
        display: block;
    }

    .footer_nav_ul li a:hover {
        /*color: #9d9d9d;*/
        color: var(--text-primary-color-a-hover);
    }

    

    .footer_language_active {
        padding-bottom: 2px;
        /*border-bottom: 1px solid #414141;*/
        border-bottom: 1px solid var(--text-primary-color);
    }

    

    .copyAndLink {
        width: 100%;
        display: flex;
        align-items: flex-end;
        flex-wrap: wrap;
        padding: 0 15px;
    }

    .backToTopLink {
        width: 100%;
        height: auto;
        padding: 30px 0 0 0;
        margin: 0;
        order: 1;
        text-align: right;
    }

    .backToTopLink #backToTop {
        width: auto;
        margin: 0;
        padding: 0;
        text-align: right;
        font-size: 14px;
        border: none;
        background: none;
        color: var(--text-primary-color);
        appearance: none;
        cursor: pointer;
        font-family: 'Mincho', serif;
    }

    .backToTopLink #backToTop:hover {
        color: var(--text-primary-color-a-hover);
    }

    .backToTopLink #backToTop .linkArrow {
        width: 12px;
        height: 12px;
        stroke: var(--text-primary-color);
    }

    .backToTopLink #backToTop:hover .linkArrow {
        stroke: var(--text-primary-color-a-hover);
    }

    

    .copy {
        /*max-width: 1200px;*/
        width: 100%;
        height: auto;
        padding: 20px 0 0 0;
        /*margin: 0 auto;*/
        z-index: 1;
        order: 2;

    }

    #copyright {
        /*color: #414141;*/
        color: var(--text-primary-color);
        line-height: 130%;
        font-size: 13px;
        text-align: left;
        z-index: 1;
    }

    #legal {
        color: var(--text-primary-color);
        font-size: 11px;
        text-align: left;
        margin: 0;
    }


}

/* SmartPhone Landscape */
@media (orientation: landscape) and (max-width: 750px) {

    footer {
        width: 100%;
        height: auto;
        margin-top: 35px;
        padding-bottom: 20px;
        z-index: 1;
        /*background-color: #f3f3f3;*/
    }

    .footerNav {
        width: 100%;
        height: auto;
        padding: 0 10px;
        display: flex;
        flex-wrap: nowrap;
        gap: 0;
        z-index: 1;
    }

    .ac {
        /*max-width: 1020px;*/
        width: 100%;
        height: auto;
        position: relative;
        padding: 0;
        margin: 0 auto;
        visibility: visible;
        z-index: 1;
        background: transparent;
    }

    .nav_block {
        width: 100%;
        height: auto;
        padding: 0;
        margin: 0;
        display: block;
        border-bottom: none;
        z-index: 1;
        background: transparent;
    }


    .check{
        display: none;
    }
      
    /* 通常時表示されるテキスト */
    .footerLabel {
        width: 100%;
        max-height: auto;
        cursor: pointer;
        margin: 0;
        padding: 8px 0 8px 0;
        color: var(--footer-label-primary-color);
        font-weight: 500;
        font-size: 14px;
        line-height: 220%;
        z-index: 1;
        display: block;
        position: relative;
    }
      
    /* クリック時に表示されるテキスト */
    .labelInner {
        align-items: center;
        /*margin-bottom: 10px;*/
        margin: 0;
        /*通常時は見えなくする*/
        overflow: hidden;
        /*  通常時は高さ0を指定  */
        max-height: 0;
        transition: all .4s;
        border-bottom: 1px solid var(--text-primary-color);
      
    }
      
    /* クリック時のスタイル */
    .check:checked + .footerLabel + .labelInner {
        max-height: 520px;
        padding: 0;
        transition: all .4s;
    }

    
    /*-- プラスの横線 --*/
    .footerLabel:before {
        content: '';
        position: absolute;
        top: 22px;
        right: 8px;
        width: 14px;
        height: 1px;
        background: var(--text-primary-color);
    }

    /* プラスの縦線 */
    .footerLabel:after {
        content: "";
        position: absolute;
        top: 15px;
        right: 15px;
        width: 1px;
        height: 14px;
        background: var(--text-primary-color);
        transition: all 0.1s ease-in-out;
    }

    .check:checked + .footerLabel:after {
        opacity: 0;
    }





    .footer_nav_ul {
        width: 100%;
        height: auto;
        list-style-type: none;
        padding: 2% 0 10% 5%;
        margin: 0;
        z-index: 1;
        
    }

    .footer_nav_ul > li {
        height: auto;
        font-size: 16px;
        text-align: left;
        padding: 0;
        margin: 0;
        font-weight: 400;
        color: var(--footer-label-primary-color);
        line-height: 150%;
        z-index: 1;
        display: block;

        /*header メニューの装飾 (border)が .footer_nav_ul li に適用させないため　ここから*/
        border-left: none;
        border-top: none;
        /*header メニューの装飾 (border)が .footer_nav_ul li に適用させないため　ここまで*/
        
    }

    .footer_nav_ul li a {
        /*color: #414141;*/
        color: var(--text-primary-color);
        line-height: 150%;
        display: block;
    }

    .footer_nav_ul li a:hover {
        /*color: #9d9d9d;*/
        color: var(--text-primary-color-a-hover);
    }

    

    .footer_language_active {
        padding-bottom: 2px;
        /*border-bottom: 1px solid #414141;*/
        border-bottom: 1px solid var(--text-primary-color);
    }

    


    .copyAndLink {
        width: 100%;
        display: flex;
        align-items: flex-end;
        flex-wrap: wrap;
        padding: 0 15px;
    }

    .backToTopLink {
        width: 100%;
        height: auto;
        padding: 30px 0 0 0;
        margin: 0;
        order: 1;
        text-align: right;
    }

    .backToTopLink #backToTop {
        width: auto;
        margin: 0;
        padding: 0;
        text-align: right;
        font-size: 14px;
        border: none;
        background: none;
        color: var(--text-primary-color);
        appearance: none;
        cursor: pointer;
        font-family: 'Mincho', serif;
    }

    .backToTopLink #backToTop:hover {
        color: var(--text-primary-color-a-hover);
    }

    .backToTopLink #backToTop .linkArrow {
        width: 12px;
        height: 12px;
        stroke: var(--text-primary-color);
    }

    .backToTopLink #backToTop:hover .linkArrow {
        stroke: var(--text-primary-color-a-hover);
    }

    

    .copy {
        /*max-width: 1200px;*/
        width: 100%;
        height: auto;
        padding: 20px 0 0 0;
        /*margin: 0 auto;*/
        z-index: 1;
        order: 2;

    }

    #copyright {
        /*color: #414141;*/
        color: var(--text-primary-color);
        line-height: 130%;
        font-size: 13px;
        text-align: left;
        z-index: 1;
    }

    #legal {
        color: var(--text-primary-color);
        font-size: 11px;
        text-align: left;
        margin: 0;
    }


}

/* Tablet Portrait */
@media (min-width:751px) and (max-width:1024px) {

    footer {
        width: 100%;
        height: auto;
        margin-top: 35px;
        padding-bottom: 20px;
        /*background-color: #f3f3f3;*/
        z-index: 1;
    }

    .footerNav {
        width: 100%;
        height: auto;
        padding: 0 20px;
        display: flex;
        flex-wrap: nowrap;
        gap: 0;
        z-index: 1;
    }

    .ac {
        width: 100%;
        height: auto;
        position: relative;
        padding: 0;
        margin: 0 auto;
        visibility: visible;
        z-index: 1;
        display: block;
        background: transparent;
    }

    .nav_block {
        width: 100%;
        height: auto;
        padding: 0;
        margin: 0;
        display: block;
        border-bottom: none;
        z-index: 1;
        background: transparent;
    }


    .check{
        display: none;
    }
      
    /* 通常時表示されるテキスト */
    .footerLabel {
        width: 100%;
        max-height: auto;
        cursor: pointer;
        margin: 0;
        padding: 0 0 10px 0;
        color: var(--footer-label-primary-color);
        font-weight: 500;
        font-size: 14px;
        line-height: 220%;
        z-index: 1;
        display: block;
        position: relative;
    }
      
    /* クリック時に表示されるテキスト */
    .labelInner {
        align-items: center;
        margin-bottom: 10px;
        /*通常時は見えなくする*/
        overflow: hidden;
        /*  通常時は高さ0を指定  */
        max-height: 0;
        transition: all .4s;
        border-bottom: 1px solid var(--text-primary-color);
      
    }
      
    /* クリック時のスタイル */
    .check:checked + .footerLabel + .labelInner {
        max-height: 580px;
        padding: 10px 0 0 0;
        transition: all .4s;
    }

    
    /*-- プラスの横線 --*/
    .footerLabel:before {
        content: '';
        position: absolute;
        top: 13px;
        right: 8px;
        width: 14px;
        height: 1px;
        background: var(--text-primary-color);
    }

    /* プラスの縦線 */
    .footerLabel:after {
        content: "";
        position: absolute;
        top: 6px;
        right: 15px;
        width: 1px;
        height: 14px;
        background: var(--text-primary-color);
        transition: all 0.1s ease-in-out;
    }

    .check:checked + .footerLabel:after {
        opacity: 0;
    }

    


    .footer_nav_ul {
        width: 100%;
        height: auto;
        list-style-type: none;
        padding: 0 0 5% 5%;
        margin: 0;
        z-index: 1;
    }

    .footer_nav_ul > li {
        width: 100%;
        height: auto;
        font-size: 16px;
        text-align: left;
        padding: 0;
        margin: 0;
        font-weight: 400;
        color: var(--footer-label-primary-color);
        line-height: 150%;
        z-index: 1;
        display: block;

        /*header メニューの装飾 (border)が .footer_nav_ul li に適用させないため　ここから*/
        border-left: none;
        border-top: none;
        /*header メニューの装飾 (border)が .footer_nav_ul li に適用させないため　ここまで*/
        
    }

    .footer_nav_ul li a {
        /*color: #414141;*/
        color: var(--text-primary-color);
        line-height: 150%;
        display: block;
    }

    .footer_nav_ul li a:hover {
        /*color: #9d9d9d;*/
        color: var(--text-primary-color-a-hover);
    }

    

    .footer_language_active {
        padding-bottom: 2px;
        /*border-bottom: 1px solid #414141;*/
        border-bottom: 1px solid var(--text-primary-color);
    }

    


    .copyAndLink {
        width: 100%;
        display: flex;
        align-items: flex-end;
        padding: 0 20px;
    }

    .backToTopLink {
        width: 30%;
        height: auto;
        padding: 0;
        margin: 0;
        order: 2;
        text-align: right;
    }

    .backToTopLink #backToTop {
        width: auto;
        margin: 0;
        padding: 0;
        text-align: right;
        font-size: 14px;
        border: none;
        background: none;
        color: var(--text-primary-color);
        appearance: none;
        cursor: pointer;
        font-family: 'Mincho', serif;
    }

    .backToTopLink #backToTop:hover {
        color: var(--text-primary-color-a-hover);
    }

    .backToTopLink #backToTop .linkArrow {
        width: 12px;
        height: 12px;
        stroke: var(--text-primary-color);
    }

    .backToTopLink #backToTop:hover .linkArrow {
        stroke: var(--text-primary-color-a-hover);
    }

    

    .copy {
        /*max-width: 1200px;*/
        width: 70%;
        height: auto;
        padding: 20px 0 0 0;
        /*margin: 0 auto;*/
        z-index: 1;
        order: 1;

    }

    #copyright {
        /*color: #414141;*/
        color: var(--text-primary-color);
        line-height: 130%;
        font-size: 13px;
        text-align: left;
        z-index: 1;
    }

    #legal {
        color: var(--text-primary-color);
        font-size: 11px;
        text-align: left;
        margin: 0;
    }
    

    

}

/* Tablet Landscape */
@media (orientation: landscape) and (min-width:751px) and (max-width:1024px) {

    footer {
        width: 100%;
        height: auto;
        margin-top: 35px;
        padding: 0 10px 20px 10px;
        padding-bottom: 20px;
        /*background-color: #f3f3f3;*/
        z-index: 1;
    }

    .footerNav {
        width: 100%;
        padding: 0;
        /*padding: 0 10px;*/
        display: flex;
        flex-wrap: wrap;
        z-index: 1;
        border-top: 1px solid var(--text-primary-color);
    }

    .ac {
        /*max-width: 1020px;*/
        width: 100%;
        /*height: 500px;*/
        position: relative;
        padding: 2% 0 2% 0;
        margin: 0 auto;
        /*display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-items:flex-start;
        justify-content:flex-start;*/

        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;

        overflow:hidden;
        z-index: 1;
        background: transparent;
    }

    .nav_block {
        width: 210px;
        height: auto;
        padding: 0 0 0 4px;
        margin: 0 0 4% 0;
        display: block;
        border-bottom: none;
        z-index: 1;
        background: transparent;
    }


    .check{
        display: none;
    }
      
    /* 通常時表示されるテキスト */
    .footerLabel {
        width: 100%;
        max-height: auto;
        pointer-events: none;
        cursor: none;
        margin: 0;
        padding: 0;
        color: var(--footer-label-primary-color);
        font-weight: 500;
        font-size: 16px;
        line-height: 220%;
        z-index: 1;
        display: block;
        position: relative;
    }
      
    /* クリック時に表示されるテキスト */
    .labelInner {
        align-items: center;
        margin-bottom: 30px;
        /*通常時は見えなくする*/
        overflow: visible;
        /*  通常時は高さ0を指定  */
        max-height: 400px;
        transition: none;
        border-bottom: none;
      
    }
      
    /* クリック時のスタイル */
    .check:checked + .footerLabel + .labelInner {
        max-height: 400px;
        padding: 10px 0 20px 0;
        transition: all .4s;
    }

    
    /*-- プラスの横線 --*/
    .footerLabel:before {
        content: none;
        
    }

    /* プラスの縦線 */
    .footerLabel:after {
        content: none;
    }

    /*.check:checked + .footerLabel:after {
        opacity: 0;
    }*/



    .footer_nav_ul {
        width: 100%;
        height: auto;
        list-style-type: none;
        padding: 0;
        margin: 0;
        z-index: 1;
    }

    .footer_nav_ul > li {
        height: 18px;
        font-size: 14px;
        text-align: left;
        padding: 0;
        margin: 0;
        font-weight: 400;
        color: var(--footer-label-primary-color);
        line-height: 220%;
        z-index: 1;
        display: block;

        /*header メニューの装飾 (border)が .footer_nav_ul li に適用させないため　ここから*/
        border-left: none;
        border-top: none;
        /*header メニューの装飾 (border)が .footer_nav_ul li に適用させないため　ここまで*/
        
    }

    .footer_nav_ul li a {
        /*color: #414141;*/
        color: var(--text-primary-color);
        line-height: 220%;
        display: block;
    }

    .footer_nav_ul li a:hover {
        /*color: #9d9d9d;*/
        color: var(--text-primary-color-a-hover);
    }


    .footer_language_active {
        padding-bottom: 2px;
        /*border-bottom: 1px solid #414141;*/
        border-bottom: 1px solid var(--text-primary-color);
    }




    .copyAndLink {
        width: 100%;
        display: flex;
        align-items: flex-end;
        padding: 0;
    }

    .backToTopLink {
        width: 30%;
        height: auto;
        padding: 0;
        margin: 0;
        order: 2;
        text-align: right;
    }

    .backToTopLink #backToTop {
        width: auto;
        margin: 0;
        padding: 0;
        text-align: right;
        font-size: 14px;
        border: none;
        background: none;
        color: var(--text-primary-color);
        appearance: none;
        cursor: pointer;
        font-family: 'Mincho', serif;
    }

    .backToTopLink #backToTop:hover {
        color: var(--text-primary-color-a-hover);
    }

    .backToTopLink #backToTop .linkArrow {
        width: 12px;
        height: 12px;
        stroke: var(--text-primary-color);
    }

    .backToTopLink #backToTop:hover .linkArrow {
        stroke: var(--text-primary-color-a-hover);
    }

    .copy {
        /*max-width: 1200px;*/
        width: 70%;
        height: auto;
        padding: 20px 0 0 0;
        /*margin: 0 auto;*/
        z-index: 1;
        order: 1;

    }

    #copyright {
        /*color: #414141;*/
        color: var(--text-primary-color);
        line-height: 130%;
        font-size: 13px;
        text-align: left;
        z-index: 1;
    }

    #legal {
        color: var(--text-primary-color);
        font-size: 11px;
        text-align: left;
        margin: 0;
    }

}


/* PC */
@media (min-width:1025px) {

    footer {
        width: 100%;
        max-width: 1300px;
        height: auto;
        /*margin-top: 35px;*/
        margin: 35px auto 0 auto;
        padding-bottom: 20px;
        padding-left: 10px;
        padding-right: 10px;
        z-index: 1;
    }

    /* width 1300px を超えたときに footer と
       その中の余白（padding）を無くす */
    @media (min-width:1300px) {
        
        footer {
            padding-left: 0;
            padding-right: 0;
        }
    }

    .footerNav {
        width: 100%;
        height: auto;
        /*padding: 0 10px;*/
        display: flex;
        flex-wrap: wrap;
        z-index: 1;
        border-top: 1px solid var(--text-primary-color);
    }

    .ac {
        /*max-width: 1200px;*/
        width: 100%;
        height: auto;
        /*height: 500px;*/
        position: relative;
        padding: 30px 0 30px 0;
        margin: 0 auto;
        /*display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items:flex-start;
        justify-content:flex-start;*/

        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;

        z-index: 1;
        background: transparent;
    }

    .nav_block {
        width: 240px;
        height: auto;
        padding: 0;
        margin: 0 0 2% 0;
        display: block;
        z-index: 1;
        text-align: left;
        background: transparent;
    }


    .check{
        display: none;
    }
      
    /* 通常時表示されるテキスト */
    .footerLabel {
        width: 100%;
        max-height: auto;
        pointer-events: none;
        cursor: none;
        margin: 0;
        padding: 0;
        color: var(--footer-label-primary-color);
        font-weight: 500;
        font-size: 16px;
        line-height: 220%;
        z-index: 1;
        display: block;
        position: relative;
    }
      
    /* クリック時に表示されるテキスト */
    .labelInner {
        align-items: center;
        margin-bottom: 30px;
        /*通常時は見えなくする*/
        overflow: visible;
        /*  通常時は高さ0を指定  */
        max-height: 400px;
        transition: none;
        border-bottom: none;
      
    }
      
    /* クリック時のスタイル */
    .check:checked + .footerLabel + .labelInner {
        max-height: 400px;
        padding: 10px 0 20px 0;
        transition: all .4s;
    }

    
    /*-- プラスの横線 --*/
    .footerLabel:before {
        content: none;
        
    }

    /* プラスの縦線 */
    .footerLabel:after {
        content: none;
    }

    /*.check:checked + .footerLabel:after {
        opacity: 0;
    }*/

    


    .footer_nav_ul {
        width: 100%;
        height: auto;
        list-style-type: none;
        padding: 2% 0 0 0;
        margin: 0;
        z-index: 1;
        display: block;
    }

    .footer_nav_ul > li {
        width: 100%;
        height: auto;
        font-size: 16px;
        text-align: left;
        padding: 0;
        margin: 0;
        font-weight: 400;
        color: var(--footer-label-primary-color);
        line-height: 220%;
        z-index: 1;
        display: block;
    }

    .footer_nav_ul li a {
        /*color: #414141;*/
        color: var(--text-primary-color);
        line-height: 220%;
        display: block;
    }

    .footer_nav_ul li a:hover {
        /*color: #9d9d9d;*/
        color: var(--text-primary-color-a-hover);
    }

    .ac-child {
        display: block;
        z-index: 1;
    }

    .footer_language_active {
        padding-bottom: 2px;
        /*border-bottom: 1px solid #414141;*/
        border-bottom: 1px solid var(--text-primary-color);
    }



    .copyAndLink {
        width: 100%;
        display: flex;
        align-items: flex-end;
        padding: 0;
    }

    .backToTopLink {
        width: 30%;
        height: auto;
        padding: 0;
        margin: 0;
        order: 2;
        text-align: right;
    }

    .backToTopLink #backToTop {
        width: auto;
        margin: 0;
        padding: 0;
        text-align: right;
        font-size: 14px;
        border: none;
        background: none;
        color: var(--text-primary-color);
        appearance: none;
        cursor: pointer;
        font-family: 'Mincho', serif;
    }

    .backToTopLink #backToTop:hover {
        color: var(--text-primary-color-a-hover);
    }

    .backToTopLink #backToTop .linkArrow {
        width: 12px;
        height: 12px;
        stroke: var(--text-primary-color);
    }

    .backToTopLink #backToTop:hover .linkArrow {
        stroke: var(--text-primary-color-a-hover);
    }


    .copy {
        /*max-width: 1200px;*/
        width: 70%;
        height: auto;
        padding: 20px 0 0 0;
        /*margin: 0 auto;*/
        z-index: 1;
        order: 1;

    }

    #copyright {
        /*color: #414141;*/
        color: var(--text-primary-color);
        line-height: 130%;
        font-size: 13px;
        text-align: left;
        z-index: 1;
    }

    #legal {
        color: var(--text-primary-color);
        font-size: 11px;
        text-align: left;
        margin: 0;
    }


}

/* footer link arrow 共通 */
.linkArrow {
    width: 10px;
    height: 10px;
    margin-top: 3px;
    stroke: var(--text-primary-color);
}

.footer_nav_ul li a:hover .linkArrow {
    stroke: var(--text-primary-color-a-hover);
}


/*-----------------------------------*/
/*-------- Footer Ends Here ---------*/
/*-----------------------------------*/