body {
    /*font-family: "ＭＳ ゴシック", "平成角ゴシック";*/
    font-family: "Lucida Grande", "segoe UI", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, Verdana, Arial, sans-serif;
    color: #222222;
}

div#flasharea {
    width: 100%;
    height: 230px;
    margin: 0 auto;
    display: block;
    overflow: hidden;
    background: #000000 url(../img/main/top_img_bg.jpg) repeat center top;
}

#flasharea .logo {
    width: 960px;
    margin: 0 auto;
    display: block;
    overflow: hidden;
    text-align: right;
}

.ec-shelfRole h2.title {
    height: 36px;
    margin: 0 0 25px 0;
    /*background: url(../img/common/title_h2_770.gif) no-repeat left center;*/
    font-size: 14px;
    font-weight: normal;
    border: 1px solid #ccc;
    background-color: #fff;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 7px 40px 7px 10px;
    box-sizing: border-box;
}

.ec-shelfRole h2.title img {
    width: auto;
}

div#categoryarea li {
    width: 260px;
}

div#categoryarea li.level1 a {
    float: left;
    display: block;
    padding: 0px 0px 4px 0px;
    color:#222222;
}

div#categoryarea li.level1 ul li a:hover {
    color: #e85514;
}

div#categoryarea li.level1 ul li a:hover img {
    border: 1px solid #e85514;
}

.focus {
    color: #e85514 !important;
}

div#categoryarea ul li ul {
    padding-left: 10px;
}

div#categoryarea li img.over {
    vertical-align: middle;
}

div#categoryarea li.level1 li img {
    clear: both;
    float: left;
    display: block;
    width: 32px;
    padding: 3px;
    background-color: #ffffff;
    border: 1px solid #cdcdcd;
}

div#categoryarea li.level1 li .catename {
    float: right;
    width: 200px;
    height: 24px;
    display: block;
    padding: 6px 0px 0px 7px;
    cursor: pointer;
}

@media only screen and (max-width: 767px) {
    #flasharea .logo {
        width: auto;
    }

    
}







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

.ec-headingTitle img {
    width: auto;
}



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

    

    

    .mypage .ec-totalBox .ec-totalBox__price {
        font-size: 18px;
    }
}





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

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

@media only screen and (max-width: 767px) {
    #flasharea .logo {
        display: none;
    }
}

.ec-productRole__actions .ec-select {
    text-align: center;
    overflow: hidden;
    margin: 0px 0px 30px 0px;
}

.ec-productRole__actions .ec-select select {
    font-size: 10.5px;
    width: 130px;
}

@media only screen and (max-width: 788px) {
    .ec-productRole__actions .ec-select select {
        font-size: 7.5px;
        width: 123px;
    }

    .ec-productRole__actions .ec-select {
        margin: 0px 25px 15px 45px;
    }
}


/* #galmenu .slick-initialized .slick-slide {
    display: block;
    width: 100px !important;
} */
/* Gallery styles */

#gallery {
    background-color: #fff;
	width:100%;
	overflow:hidden;
}
#slides{
    width:100%;
    height:auto;
	overflow:hidden;
}
#slides .slide{
	float:left;
}
#galmenu {
	/* This is the container for the thumbnails */
	height:45px;
}
ul.gal{
    margin: 0px;
    padding: 0px;
    display: flex;
    position: relative;
}
ul.gal li{
	/* Every thumbnail is a li element */
	width:60px;
	height:45px;
	display:inline-block;
	zoom: 1;
	list-style:none;
	vertical-align:top;
	/*height:45px;*/
	overflow:hidden;
    /*margin: 0 2.5px;*/
}
/* li.inact:hover{
	background:url(/html/user_data/assets/img/pic_bg.png) repeat;
}
li.act,li.act:hover{
	background:url(/html/user_data/assets/img/active_bg.png) no-repeat;
} */
li.act a{
	cursor:default;
}
ul.gal li.fbar{
	width:2px;
	/* background:url(/html/user_data/assets/img/divider.png) no-repeat right; */
}
ul.gal li a{
	display:block;
	/* background:url(/html/user_data/assets/img/divider.png) no-repeat right; */
	height:35px;
	padding-top:10px;
}
#galleryamain a img{
	border:none;
}
#galleryamain{
	margin:0 0 35px 0;
	text-align:center;
	width:100%;
	position:relative;
}
#galmenu button {
    position: absolute;
    top: 0;
    z-index: 999;
}
#galmenu button.slick-prev {
    left: 0;
}
#galmenu button.slick-next {
    right: 0;
}

#gallery {
    -moz-box-shadow: 0 0 3px #AAAAAA;
    -webkit-box-shadow: 0 0 3px #aaaaaa;
    box-shadow: 0 0 3px #aaaaaa;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border: 1px solid white;
    background: url(../img/gallery/panel.jpg) repeat-x bottom center #ffffff;
}

#gallery .slick-slider .slick-list {
    margin: auto;
}

#galmenu .slick-slider .slick-list .slick-track {
    width: 100%!important;
}

#gallery .slick-dots {
    display: none!important;
}

#gallery .slick-slider {
    margin-bottom: 0px;
}

#gallery .slick-slide img {
    width: 100%;
    height: auto;
    /*padding-top: 10px;*/
}

#gallery #galmenu .slick-slide:first-child {
    background: url(../img/gallery/divider.png) no-repeat left;
}

#gallery #galmenu .slick-slide {
    display: block;
    background: url(../img/gallery/divider.png) no-repeat right;
    /*height: 35px;
    padding-top: 10px;*/
}

#gallery #galmenu .slick-slide img {
    width: 50px;
    height: auto;
    padding-top: 10px;
    margin: auto;
    cursor: pointer;
}

#gallery #galmenu .slick-slide.slick-current {
    background: url(../img/gallery/active_bg.png) no-repeat;
}

@media only screen and (max-width: 767px) {
/* スマホ表示画像スライドショーサムネイル */
    #gallery #galmenu .slick-track {
        display: flex;
        width: 100% !important;
    }

    #gallery #galmenu .slick-slide {
        flex: 1 1 0;
        width: auto !important;
    }

    #gallery #galmenu .slick-slide img {
        width: 80%;
        max-width: 50px;
        height: auto;
        margin: auto;
    }

}

/* カスタマイズ用CSS */
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@500&display=swap");
/* ヘッダー用CSS
   ========================================================================== */
.ec-header-layout {
    width: 100%;
    background-color: #fff;
}


.ec-layoutRole {
    width: 100%;
    transition: transform 0.3s;
    background: #eee;
    border-top:5px solid #262626;
    margin-top: 5px;
}

.ec-headerRole h1 {
    margin: 0px;
    width: 133px;
    height: 110px;
}

.ec-headerRole img {
    width: auto;
}

.ec-headerRole {
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    font-size: 12px;
    line-height: 1.4;
    color: #525263;
    -webkit-text-size-adjust: 100%;
    max-width: 1130px;
    padding-top: 15px;
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: auto;
    background: #fff;
}

.menu_center{
	height: 40px;
	display: flex;
	align-items: center;
}


#globalnavi {
    width: 100%;
    height: 55px;
    margin: 0 0 50px 0;
    margin: 0 auto;
    display: block;
    overflow: hidden;
    background: url(../img/header/g_menu_bg.gif) repeat-x left top;
}

#globalnavi ul {
    width: 1020px;
    margin: 0 auto;
    display: block;
    overflow: hidden;
}



#globalnavi li {
    float: left;
    display: inline;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    list-style-type: none;
}



/* フッター用CSS
   ========================================================================== */

.ec-footerRole {
    border-top: 1px solid #7d7d7d;
    
    padding-top: 0;
    background: #262626;
    border-top: 5px solid #000000;
}

.ec-footerRole .ec-footerRole__inner {
    padding: 0px 20px 30px 20px;
}

.f_title {
    color: #58bafc;
    font-weight: bold;
    margin: 20px 0px 10px 0px;
    padding: 10px 0px 0px 0px;
    background: url(../img/footer/line_bg.gif) repeat-x 0 0;
    text-align: left;
}



#footer {
    font-size: 12px;
    color: #8a8a8a;
}

#footer ul {
    display: block;
    list-style-type: none;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0px;
}

#footer ul.f_navi {
    margin: 0 auto;
    display: block;
    overflow: hidden;
}

#footer ul.f_navi a:link {
    color: #999999;
    text-decoration: none;
}

#footer ul.f_navi a:visited {
    color: #999999;
    text-decoration: none;
}

#footer ul.f_navi a:hover {
    color: #58bafc;
    text-decoration: underline;
}

#footer ul.f_navi li.left {
    display: inline;
    margin: 0px 0px 0px 0px;
    padding: 0px 6px 0px 10px;
    border-left: 1px solid #8a8a8a;
}

#footer ul.f_navi li.left2 {
    display: inline;
    margin: 0px 0px 0px 0px;
    padding: 0px 6px 0px 10px;
    border-left: 1px solid #8a8a8a;
    letter-spacing: 2px;
}

#footer ul.f_navi li.left3 {
    display: inline;
    margin: 0px 0px 0px 0px;
    padding: 0px 6px 0px 10px;
    border-left: 1px solid #8a8a8a;
}

#footer ul.f_navi li.right1 {
    display: inline;
    margin: 0px 0px 0px 0px;
    padding: 0px 10px 0px 10px;
    border-left: 1px solid #8a8a8a;
    border-right: 1px solid #8a8a8a;
    letter-spacing: 2px;
}

#footer ul.f_navi li.right2 {
    display: inline;
    margin: 0px 0px 0px 0px;
    padding: 0px 10px 0px 10px;
    border-left: 1px solid #8a8a8a;
    border-right: 1px solid #8a8a8a;
}

#footer ul.f_navi li.right3 {
    display: inline;
    margin: 0px 0px 0px 0px;
    padding: 0px 10px 0px 10px;
    border-left: 1px solid #8a8a8a;
    border-right: 1px solid #8a8a8a;
}

#footer ul.f_navi li.right4 {
    display: inline;
    margin: 0px 0px 0px 0px;
    padding: 0px 9px 0px 10px;
    border-left: 1px solid #8a8a8a;
    border-right: 1px solid #8a8a8a;
}

#footer ul.f_navi li.right5 {
    display: inline;
    margin: 0px 0px 0px 0px;
    padding: 0px 10px 0px 10px;
    border-left: 1px solid #8a8a8a;
    border-right: 1px solid #8a8a8a;
}

div#footer_copy {
    width: 100%;
    height: 40px;
    margin: 0px auto;
    padding: 12px 0px 12px 0px;
    display: block;
    overflow: hidden;
    background-color: #000000;
    color: #ffffff;
    text-align: center;
    font-size: 12px;
}

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




.logoimg {
    width: 100%;
    margin: 0 auto;
    display: block;
    overflow: hidden;
    text-align: right;
}


}

@media only screen and (min-width: 1060px) {
#footer li.f_left {
    clear: both;
    float: left;
    width: 380px;
    list-style: none;
    display: block;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}

#footer li.f_center {
    float: left;
    width: 340px;
    list-style: none;
    display: block;
    margin: 0px 0px 0px 40px;
    padding: 0px 0px 0px 0px;
}

#footer li.f_right {
    float: right;
    width: 250px;
    list-style: none;
    display: block;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}

}


/* サイドカラム用CSS
   ========================================================================== */
/* 
#loginarea {
    width: 250px;
    height: 229px;
    margin: 0px 10px 30px 10px;
    padding: 0px 12px 12px 12px;
    overflow: hidden;
    background: url(../img/side/bg_login.gif) no-repeat left top;
}

#loginarea .btn {
    padding: 79px 0px 0px 0px;
} */

#categoryarea {
    width: 250px;
    margin: 0px 0px 30px 0px;
    /* padding: 0px 0px 0px 12px; */
    padding: 0;
    overflow: hidden;
}

#categoryarea h2 {
    margin: 0px 0px 10px 0px;
}

#categorytree {
    margin: 0;
    padding: 0;
}


#categoryarea li.onmark {
    /* background: url(../img/common/arrow_red.gif) 0 3px no-repeat; */
}
#categoryarea li.level1 {
    clear: both;
    float: left;
    display: block;
    padding: 2px 0px 4px 0px;
    /* overflow: hidden; */
    background: url(../img/side/category_line_bg.gif) repeat-x left bottom;
    cursor: pointer;
}

#categoryarea li {
    list-style-type: none;
}

.btn1.cldf a:hover ,
#categoryarea li a:hover {
    opacity: .8;
    transition: .3s;
}



/* トップページ用CSS
   ========================================================================== */
   
#imgarea {
    width: 100%;
    height: 230px;
    margin: 0 auto;
    display: block;
    overflow: hidden;
    background: #f0e7e7 url(../img/top/top_img_bg.jpg) repeat center top;
}

.logoimg {
    width: 1090px;
    margin: 0 auto;
    display: block;
    overflow: hidden;
    text-align: right;
}



/* Bootstrap4 colの隙間（padding、margin）を削除 */

.no-gutters {
  margin:0;
  padding:0;
}

 
.no-gutters　> .col,
.no-gutters　> [class*="col-"] {
  margin:0;
  padding:0;
}

/* トップページレイアウト
   ========================================================================== */









/* 詳細ページ用CSS
   ========================================================================== */



/* スマホ用CSS
   ========================================================================== */

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

.ec-layoutRole {
    width: 100%;
    transition: transform 0.3s;
    /* background: #eee; */
    border-top: 5px solid #262626;
    margin-top: 5px;
}

.ec-headerNaviRole {
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.4;
    color: #525263;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1130px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: center;
    align-items: center;
    padding-top: 15px;
    background: #fff;
}

  .logoimg {
    width: 100%;
    margin: 0 auto;
    display: block;
    overflow: hidden;
    text-align: right;
}  

  .globalnavi {
    display: none;
}
    
}











/* ガター幅（余白）を調整
   ========================================================================== */

.row-0 {
    margin-left:0px;
    margin-right:0px;
}
.row-0>div {
    padding-right:0px;
    padding-left:0px;
}
.row-10 {
    margin-left:-5px;
    margin-right:-5px;
}	
.row-10>div {
    padding-right:5px;
    padding-left:5px;
}
.row-20 {
    margin-left:-10px;
    margin-right:-10px;
}
.row-20>div {
    padding-right:10px;
    padding-left:10px;
}
.row-30{
    margin-left:-15px;
    margin-right:-15px;
 }
.row-30>div {
    padding-right:15px;
    padding-left:15px;
}
.row-40{
    margin-left:-20px;
    margin-right:-20px;
}
.row-40>div{
    padding-right:20px;
    padding-left:20px;
}
.row-50{
    margin-left:-25px;
    margin-right:-25px;
}
.row-50>div{
    padding-right:25px;
    padding-left:25px;
}
.row-60{
    margin-left:-30px;
    margin-right:-30px;
}
.row-60>div{
    padding-right:30px;
    padding-left:30px;
}

 .col-pb-15{
padding-bottom: 15px;
}


/* header */
@media only screen and (min-width: 768px){
    .pc{
        display: block!important;
    }
    .sp{
        display: none!important;
    }
    .ec-layoutRole {
        width: 100%;
        transition: transform 0.3s;
        background: #eee;
        border-top: 5px solid #262626;
        margin-top: 0;
    }
    .ec-layoutRole__header {
        background-color: #fff;
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    .ec-headerSearch .ec-headerSearch__category {
        float: left;
        width: 105px;
    }
    .ec-headerSearch .ec-headerSearch__keyword {
        float: right;
        width: calc(100% - 105px);
    }
    .ec-headerSearch .ec-headerSearch__category .ec-select select {
        max-width: 65px;
        height: 36px;
        font-size: 12px;
        padding: 0;
    }
    .ec-headerSearch .ec-headerSearch__category .ec-select.ec-select_search:before {
        position: absolute;
        right: 0.4em;
        padding: 0;
        margin: auto;
        top: 0;
        bottom: 0;
    }
    .ec-headerSearch .ec-headerSearch__keyword input[type="search"] {
        padding: 0.5em 40px 0.5em 1em;
    }
    .z-globalnavi {
        border-bottom: 1px solid #ccc;
        background: rgba(255,255,255,1);
        background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(229,231,235,1) 47%, rgba(213,216,220,1) 100%);
        background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(47%, rgba(229,231,235,1)), color-stop(100%, rgba(213,216,220,1)));
        background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(229,231,235,1) 47%, rgba(213,216,220,1) 100%);
        background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(229,231,235,1) 47%, rgba(213,216,220,1) 100%);
        background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(229,231,235,1) 47%, rgba(213,216,220,1) 100%);
        background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(229,231,235,1) 47%, rgba(213,216,220,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#ffffff", endColorstr="#d5d8dc", GradientType=0 );
    }
    .z-globalnavi ul {
        list-style: none;
        display: flex;
        align-items: center;
        width: 100%;
        max-width: 996px;
        margin: auto;
        padding: 0;
    }
    .z-globalnavi ul li {
        font-family: "Noto Serif JP", serif;
        font-size: 25px;
        font-weight: 500;
        letter-spacing: 0.08em;
        position: relative;
        border-left: 1px solid #ccc;
    }
    .z-globalnavi ul li:last-child {
        border-right: 1px solid #ccc;
    }
    .z-globalnavi ul li::before {
        background-image: url(../img/common/icon_square_l.png);
        background-size: 100%;
        width: 25px;
        height: 25px;
        content: "";
        position: absolute;
        margin: auto;
        top: 0;
        bottom: 0;
        left: 12px;
        z-index: 99;
    }
    .z-globalnavi ul li a {
        display: block;
        color: #222;
        padding: 0px 15px 0 47px;
        line-height: 50px;
        position: relative;
        border-left: 1px solid #fff;
        text-decoration: none!important;
    }
    .z-globalnavi ul li a:hover {
        text-decoration: none;
        background: rgba(255,255,255,1);
        background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(227,217,224,1) 47%, rgba(212,199,208,1) 100%);
        background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(47%, rgba(227,217,224,1)), color-stop(100%, rgba(212,199,208,1)));
        background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(227,217,224,1) 47%, rgba(212,199,208,1) 100%);
        background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(227,217,224,1) 47%, rgba(212,199,208,1) 100%);
        background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(227,217,224,1) 47%, rgba(212,199,208,1) 100%);
        background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(227,217,224,1) 47%, rgba(212,199,208,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#ffffff", endColorstr="#d4c7d0", GradientType=0 );
    }
    .z-globalnavi ul li a::before {
        background-color: #e85514;
        width: 25px;
        height: 25px;
        content: "";
        position: absolute;
        margin: auto;
        top: 0;
        bottom: 0;
        left: 11px;
        z-index: 11;
    }
    .z-globalnavi ul li:nth-child(1) a::before {
        background-color: #c7393f;
    }
    .z-globalnavi ul li:nth-child(2) a::before {
        background-color: #f3cb46;
    }
    .z-globalnavi ul li:nth-child(3) a::before {
        background-color: #cee052;
    }
    .z-globalnavi ul li:nth-child(4) a::before {
        background-color: #bae7e2;
    }
    .z-globalnavi ul li:nth-child(5) a::before {
        background-color: #cbc1fa;
    }
}
@media only screen and (max-width: 1024px) {
    
    
    
    
    
    
    
    .z-globalnavi ul {
        max-width: 97.266vw;
    }
    .z-globalnavi ul li {
        font-size: 2.441vw;
        border-left: 0.098vw solid #ccc;
    }
    .z-globalnavi ul li:last-child {
        border-right: 0.098vw solid #ccc;
    }
    .z-globalnavi ul li::before {
        width: 2.441vw;
        height: 2.441vw;
        left: 1.172vw;
    }
    .z-globalnavi ul li a {
        padding: 0px 1.465vw 0 4.59vw;
        line-height: 4.883vw;
        border-left: 0.098vw solid #fff;
    }
    .z-globalnavi ul li a::before {
        width: 2.441vw;
        height: 2.441vw;
        left: 1.074vw;
    }
}
@media only screen and (min-width:768px) and ( max-width:940px) {
    
}
@media only screen and (max-width: 767px){
    .pc{
        display: none!important;
    }
    .sp{
        display: block!important;
    }
    .ec-headerRole h1 {
        margin-left: auto;
        margin-right: auto;
    }
    .ec-layoutRole {
        margin: 0;
    }
    .ec-headerNaviRole {
        background-color: #fff;
        padding: 0 20px;
        font-size: 16px;
        line-height: 1.4;
    }
}


.ec-role {
    font-size: 16px;
    line-height: 1.4;
    color: #525263;
    width: 100%;
}
.ec-pageHeader h1 {
    border: none;
    font-family: "Noto Serif JP", serif;
    font-weight: normal;
    font-size: 46px;
    color: #b21214;
    letter-spacing: 0.08em;
    /*padding: 20px 0 20px;*/
    padding: 20px;
    margin: 0 0 0;
}
.ec-role h3 {
    font-size: 18px;
    background: #fff;
    border: 1px solid #ccc;
    padding: 15px 0 15px 50px;
    margin: 40px 0 5px;
    position: relative;
}
.ec-role .ec-pageHeader + h3 {
    margin: 0 0 5px;
}
.ec-role h3::before {
    background-image: url(../img/common/icon_square_h3.gif);
    content: "";
    background-size: 100%;
    width: 16px;
    height: 16px;
    margin: auto;
    padding: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 18px;
}
.ec-borderedDefs {
    width: 100%;
    border-top: 1px solid #ccc;
    margin: 0;
}
.ec-borderedDefs dd {
    width: 70%;
    line-height: 1.25;
}
.ec-off1Grid {
    border: 1px solid #ccc;
    background-color: #fff;
}
.ec-borderedDefs dl {
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    padding: 0 0;
}
.ec-borderedDefs dt {
    border-right: 1px solid #ccc;
    background-color: #efefef;
    padding: 15px;
}
.ec-borderedDefs dd {
    padding: 15px;
}
.ec-contactRole .mini {
    font-size: 0.8rem;
}
.ec-contactRole .mini-l {
    font-size: 14.4px;
    font-weight: bold;
    font-style: normal;
}
.ec-contactRole em {
    color: #F24207;
    font-style: normal;
}

@media only screen and (min-width: 768px){
    
    
    .ec-off1Grid {
        padding: 40px 50px;
    }
    .ec-off1Grid .ec-off1Grid__cell {
        width: 100%;
        margin-left: 0;
    }
    .ec-borderedDefs dd {
        width: 70%;
        line-height: 1.25;
    }
}

/* item list */




/* .ec-shelfGrid .ec-shelfGrid__item p {
    padding: 10px;
} */


.ec-shelfGrid .ec-productRole__actions .ec-numberInput{
    display: none;
}





#category_content_ex_contents {
    padding: 0 40px 0 0;  
}
#category_content_ex_contents p img {
    width: 100%;
}
#category_extension_ex_category_icon {
    border: 1px solid #ccc;
    background-color: #fff;
    width: calc(100% - 40px);
    display: flex;
    align-items: center;
    padding: 7px 40px 7px 10px;
    margin: 30px 0 10px;
}
.category_extension_category_name {
    margin-left: 10px;
}



@media only screen and (min-width: 768px){
    
    
    
    
    
    
    
    
    
    
    
    
    
    .ec-searchnavRole {
        padding: 0 40px 0 0;
    }
    .ec-searchnavRole .ec-searchnavRole__infos {
        border: none;
        align-items: center;
        margin-bottom: 30px;
    }
    .ec-searchnavRole .ec-searchnavRole__infos .ec-select {
        margin-bottom: 0;
    }
}

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

/* item detail */
.z_product_detail {
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 10px;
    margin: 0 0 30px;
    width: 250px;
}
.z_product_detail h2 {
    border-bottom: 1px solid #ccc;
    font-family: "Noto Serif JP", serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.3em;
    color: #9f2b19;
    padding: 0 0 5px 30px;
    margin: 0 0 5px;
    position: relative;
}
.z_product_detail h2::before {
    background-image: url(../img/common/icon_product_detail.gif);
    background-size: 100%;
    width: 20px;
    height: 20px;
    content: "";
    position: absolute;
    margin: auto;
    top: auto;
    bottom: auto;
    left: 0;
}
.z_product_detail dl {
    border-bottom: 1px dotted #ccc;
    font-size: 12px;
    display: flex;
    margin: 8px 0;
    padding: 0 0 2px;
}
.z_product_detail dl dt {
    width: 65px;
}
.z_product_detail dl dd {
    width: calc(100% - 65px);
}
.z_product_detail dl dd::before {
    content: "：";
    margin: 0 5px 0 0px;
}
.video-js-box video {
    width: 100%;
    height: auto;
}

@media only screen and (min-width: 768px) {
    
    .ec-productRole .ec-productRole__profile {
        margin-left: 0;
    }
    .ec-grid2 {
        display: -ms-flexbox;
        display: flex;
        flex-wrap: wrap;
    }
    .ec-grid2 .ec-grid2__cell {
        width: 100%;
    }
    .ec-productRole .z_product_title .ec-headingTitle {
        border: 1px solid #ccc;
        background-color: #fff;
        font-size: 16px;
        padding: 8px;
        position: relative;
        margin: 0 0 20px;
    }
    .ec-productRole .z_product_title .ec-productRole__tag {
        padding: 2px 5px;
        font-size: 12px;
        color: #FF0000;
        border: none;
        border-radius: 3px;
        background-color: #fff;
        height: 20px;
        margin: auto;
        float: right;
        /*position: absolute;
        top: 0;
        bottom: 0;
        right: 10px;*/
    }
    .ec-productRole .z_product_title .ec-productRole__tag::before {
        content: "[";
    }
    .ec-productRole .z_product_title .ec-productRole__tag::after {
        content: "]";
    }
    .ec-sliderItemRole {
        background-color: #fff;
        border: 1px solid #ccc;
        margin: 0 auto;
        padding: 20px;
        box-sizing: border-box;
        font-size: 16px;
        line-height: 1.4;
        color: #525263;
        -webkit-text-size-adjust: 100%;
        width: 100%;
        max-width: 1024px;
        margin-bottom: 24px;
    }
}

/* productdetail */
.ec-productRole__description .description{
    margin: 0 0 30px 0;
    padding: 0px;
    overflow:hidden;
}
/* .ec-productRole__description .description h2.subtitle{
    margin: 0 0 4px 0;
    padding: 0px;
    height: 40px;
    background: url("../img/products/title_underline.gif") no-repeat 0 38px;
} */
.ec-productRole__description .description_area {
    margin: 0px 0px 2px 0px;
    padding: 20px 40px;
    border: 1px solid #bbbbbb;
    background-color: #fdfdfd;
    /* text-align: center; */
    overflow: hidden;
    box-shadow: 0px 1px 0px #ffffff;
    -moz-box-shadow: 0px 1px 0px #ffffff;
    -webkit-box-shadow: 0px 1px 0px #ffffff;
    filter: progid:DXImageTransform.Microsoft.Shadow(color="#ffffff", Direction=180, Strength=2);
}
@media only screen and (max-width: 767px) {
    
}
h2.subtitle {
    border-bottom: 1px solid #ccc;
}
h2.subtitle img {
    width: auto;
}
h2.subtitle span {
    background-color: #fff;
    border: 1px solid #ccc;
    font-size: 18px;
    font-family: "Noto Serif JP", serif;
    text-align: center;
    display: block;
    line-height: 36px;
    width: 120px;
    margin-bottom: -1px;
}
.ec-productRole__description .description .description_title{
    /* font-size: 14px; */
    color: #690000;
}
.ec-productRole__description .description .description_comment{
    padding: 15px 0 0 0;
}
.ec-productRole__description .description .description_comment p{
    line-height: 180%;
}
.ec-productRole__description .description .description_comment p br {
    font-size: 12px;
    line-height: 120%;
}
/* productdetail review　*/
#product_review_area {
    border-top: none!important;
}
#product_review_area .ec-rectHeading h4{
    border: 1px solid #ccc;
}
#reviewContent {
    border: 1px solid #ccc;
    background-color: #fff;
    padding: 20px 40px;
}
#product_review_area .review_list {
    list-style: none;
    padding: 0!important;
    margin: 0 auto;
}
#product_review_area .review_list li {
    margin: 0 0 30px;
    padding: 0 0 30px;
    border-bottom: 1px dotted #ccc;
}
#product_review_area .review_list li:last-child {
    margin: 0;
    border-bottom: none;
}
#product_review_area .review_list .review_date {
    padding-bottom: 15px;
}
#reviewContent + div {
    margin-top: 30px;
    text-align: center;
}
#product_review_area .ec-rectHeading img {
    width: auto;
}

/* mypage */
@media only screen and (min-width: 768px){
    .mypage .ec-pageHeader h1 {
        color: #b21214;
        margin: 0;
        padding: 0 0 20px;
    }
    .mypage .ec-pageHeader h3 {
        font-size: 18px;
        background: #fff;
        border: 1px solid #ccc;
        padding: 15px 0 15px 50px;
        margin: 0 0 5px;
        position: relative;
    }
    .mypage .ec-pageHeader + h3 {
        margin: 0 0 5px;
    }
    .mypage .ec-pageHeader h3::before {
        background-image: url(../img/common/icon_square_h3.gif);
        content: "";
        background-size: 100%;
        width: 16px;
        height: 16px;
        margin: auto;
        padding: 0;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 18px;
    }
    /*マイページサイドナビ*/
    
    .mypage-navlistRole .mypage-navlistRole__navlist {
        /* background: #444; */
        background: url(../img/mypage/bg_menu.gif) no-repeat left top;
        -ms-flex-wrap: nowrap;
        flex-wrap: wrap;
        padding: 20px 0 14px;
    }
    .mypage-navlistRole .mypage-navlistRole__item {
        list-style: none;
        width: 219px;
        border-color: #000;
        border-style: solid;
        border-width: 1px;
        color: #bcbcbc;
        text-align: left;
        font-weight: normal;
        font-family: "Noto Serif JP", serif;
        font-size: 17px;
        line-height: 40px;
        padding: 0 0 0 35px;
        margin: 0 auto 6px;
        position: relative;
        background: rgba(84,84,84,1);
        background: -moz-linear-gradient(top, rgba(84,84,84,1) 0%, rgba(27,27,27,1) 80%, rgba(48,48,48,1) 100%);
        background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(84,84,84,1)), color-stop(80%, rgba(27,27,27,1)), color-stop(100%, rgba(48,48,48,1)));
        background: -webkit-linear-gradient(top, rgba(84,84,84,1) 0%, rgba(27,27,27,1) 80%, rgba(48,48,48,1) 100%);
        background: -o-linear-gradient(top, rgba(84,84,84,1) 0%, rgba(27,27,27,1) 80%, rgba(48,48,48,1) 100%);
        background: -ms-linear-gradient(top, rgba(84,84,84,1) 0%, rgba(27,27,27,1) 80%, rgba(48,48,48,1) 100%);
        background: linear-gradient(to bottom, rgba(84,84,84,1) 0%, rgba(27,27,27,1) 80%, rgba(48,48,48,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#545454", endColorstr="#303030", GradientType=0 );
    }
    .mypage-navlistRole .mypage-navlistRole__item a {
        padding: 0;
        width: 100%;
        color: #aaaaaa;
        display: inline-block;
    }
    .mypage-navlistRole .mypage-navlistRole__item:hover ,
    .mypage-navlistRole .mypage-navlistRole__item.active {
        background: rgba(124,109,109,1);
        background: -moz-linear-gradient(top, rgba(124,109,109,1) 0%, rgba(57,24,24,1) 80%, rgba(45,29,29,1) 100%);
        background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(124,109,109,1)), color-stop(80%, rgba(57,24,24,1)), color-stop(100%, rgba(45,29,29,1)));
        background: -webkit-linear-gradient(top, rgba(124,109,109,1) 0%, rgba(57,24,24,1) 80%, rgba(45,29,29,1) 100%);
        background: -o-linear-gradient(top, rgba(124,109,109,1) 0%, rgba(57,24,24,1) 80%, rgba(45,29,29,1) 100%);
        background: -ms-linear-gradient(top, rgba(124,109,109,1) 0%, rgba(57,24,24,1) 80%, rgba(45,29,29,1) 100%);
        background: linear-gradient(to bottom, rgba(124,109,109,1) 0%, rgba(57,24,24,1) 80%, rgba(45,29,29,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#7c6d6d", endColorstr="#2d1d1d", GradientType=0 );
    }
    .mypage-navlistRole .mypage-navlistRole__item a:hover ,
    .mypage-navlistRole .mypage-navlistRole__item.active a {
        text-decoration: none;
    }
    .mypage-navlistRole .mypage-navlistRole__item a:hover {
        background: transparent;
        color: #ffffff;
    }
    .mypage-navlistRole .mypage-navlistRole__item::before {
        background-image: url(../img/common/icon_menu_arrow.png);
        content: "";
        background-size: 100%;
        width: 14px;
        height: 14px;
        margin: auto;
        padding: 0;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 13px;
    }
    .mypage-navlistRole .mypage-navlistRole__item.active::before ,
    .mypage-navlistRole .mypage-navlistRole__item:hover::before {
        background-image: url(../img/common/icon_menu_arrow_hov.png);
    }
    .ec-favoriteRole .ec-favoriteRole__item-image {
        height: auto;
    }
    .mypage .ec-blockBtn--cancel::after ,
    .mypage .ec-blockBtn::after {
        content: none;
    }
    
    
    .dlc-card-title {
        font-weight: normal;
        font-size: 16px;
    }

    
    
    
    
    
    
    
    
    .mypage .ec-blockBtn--cancel ,
    .mypage .ec-blockBtn {
        width: 360px;
        font-size: 1.3rem;
        align-items: center;
        justify-content: center;
        line-height: 1;
        display: flex;
        padding: 0;
    }
}

#page_mypage_history .ec-orderMail__body {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* login */
.ec-login {
    border: 1px solid #ccc;
    background-color: #fff;
}
.ec-login .ec-login__entry a {
    background: #FDFCF8;
    border: 1px solid #F8DEBD;
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: #eee;
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
    background: -webkit-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
    background: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#e5e5e5", GradientType=0);
    color: #555;
    /* display: block; */
    text-decoration: none;
    font-size: 20px;
    font-family: "Noto Serif JP", serif;
    height: 56px;
    letter-spacing: 0.25em;
    /* text-align: center; */
    width: 100%;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    line-height: 1;
    display: flex;
    padding: 0;
}

@media only screen and (min-width: 768px){
    .ec-off2Grid .ec-off2Grid__cell {
        width: 100%;
        margin: 0;
    }
    .ec-login {
        margin: 10px 0 60px;
        padding: 40px;
    }
    .ec-login p {
        margin: 0 0 40px;
    }
    /* .ec-pageHeader + .ec-login p {
        margin: 0 0 40px;
    } */
    .ec-login .ec-login__input {
        background-color: #f2f2f2;
        width: 80%;
        padding: 40px 40px 25px;
        margin: 0 auto 10px;
    }
    .ec-login .ec-login__link {
        font-size: 14px;
    }
    .ec-login .ec-login__entry {
        padding: 40px;
    }
    .ec-login .ec-login__entry a {
        border: 1px solid #ccc;
        border-radius: 3px;
        background-color: #eee;
        background: #ffffff;
        background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
        background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
        background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#ffffff", endColorstr="#e5e5e5",GradientType=0 );
        color: #555;
        /*display: block;*/
        text-decoration: none;
        font-size: 20px;
        font-family: "Noto Serif JP", serif;
        height: 56px;
        letter-spacing: 0.25em;
        /*text-align: center;*/
        width: 360px;
        margin: 0 auto;
        align-items: center;
        justify-content: center;
        line-height: 1;
        display: flex;
        padding: 0;
    }
    .ec-login .ec-login__entry a:hover {
        text-decoration: none;
        color: #a14d33;
        border-color: #a14d33;
        background-color: #eee;
        outline: none;
    }
}

/* button */
.ec-blockBtn--action,
.ec-blockBtn--cancel,
.ec-blockBtn {
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: #eee;
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
    background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
    background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#ffffff", endColorstr="#e5e5e5",GradientType=0 );
    color: #555;
    /*font-size: 20px;*/
    font-size: 14px;
    font-family: "Noto Serif JP", serif;
    letter-spacing: 0.05em;
    width: 280px;
    margin: 30px auto;
    position: relative;
}
.ec-blockBtn--action:hover ,
.ec-blockBtn--cancel:hover ,
.ec-blockBtn:hover,
.ec-blockBtn--action:active ,
.ec-blockBtn--cancel:active ,
.ec-blockBtn:active,
.ec-blockBtn--action:focus ,
.ec-blockBtn--cancel:focus ,
.ec-blockBtn:focus {
    color: #a14d33;
    border-color: #a14d33;
    background-color: #eee;
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
    background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
    background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#ffffff", endColorstr="#e5e5e5",GradientType=0 );
    outline: none;
}
.ec-blockBtn--action:active:hover, 
.ec-blockBtn--action:active:focus, 
.ec-blockBtn--action:active.focus, 
.ec-blockBtn--action.active:hover, 
.ec-blockBtn--action.active:focus, 
.ec-blockBtn--action.active.focus, 
.open > .ec-blockBtn--action.dropdown-toggle:hover,
.open > .ec-blockBtn--action.dropdown-toggle:focus, 
.open > .ec-blockBtn--action.dropdown-toggle.focus {
    color: #a14d33;
    background-color: #b53022;
    border-color: #93271c;
}
.ec-blockBtn--action::after ,
.ec-blockBtn--cancel::after {
    background-image: url(../img/common/icon_btn_arrow.png);
    content: "";
    background-size: 100%;
    width: 14px;
    height: 14px;
    margin: auto;
    padding: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 20px;
}
.ec-blockBtn--action:hover::after ,
.ec-blockBtn--cancel:hover::after ,
.ec-blockBtn--action:active::after ,
.ec-blockBtn--cancel:active::after ,
.ec-blockBtn--action:focus::after ,
.ec-blockBtn--cancel:focus::after {
    background-image: url(../img/common/icon_btn_arrow_hov.png);
}
#page_product_list .ec-blockBtn--action {
    font-size: 12px;
    text-align: center;
    font-family: "Noto Serif JP", serif;
    letter-spacing: 0em;
    width: 130px;
    padding: 0 15px 0 0;
    margin: -5px auto 0;
    position: relative;
    height: 36px;
    line-height: 34px;
}
#page_product_list .ec-blockBtn--action:disabled {
    color: #525263;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 0;
}

@media only screen and (max-width: 788px) {
    #page_product_list .ec-blockBtn--action {
        width: 123px;
    }

    #page_product_list .ec-blockBtn--action::after {
        background-image: url(../img/common/icon_btn_arrow.png);
        content: "";
        background-size: 100%;
        margin: auto;
        padding: 0;
        position: absolute;
        top: 0;
        bottom: 0;
    }
}

#page_product_list .ec-blockBtn--action::after {
    width: 12px;
    height: 12px;
    right: 8px;
}
.ec-blockBtn--action:disabled {
    pointer-events: none;
}
#page_product_list .ec-blockBtn--action:disabled::after {
    content: none;
}
.ec-totalBox .ec-totalBox__btn .ec-blockBtn--action {
    font-size: 20px;
}
.ec-totalBox .ec-totalBox__btn a {
    color: #555;
}
.ec-totalBox .ec-totalBox__btn a:hover ,
.ec-totalBox .ec-totalBox__btn a:active ,
.ec-totalBox .ec-totalBox__btn a:focus {
    color: #a14d33;
}
.ec-off4Grid .ec-off4Grid__cell {
    width: 100%;
    margin: auto;
}

/* side_cart */
#productcartarea .ec-productRole__actions .ec-numberInput {
    display: none;
}

/* side cart select box */
div#productcartarea .setScroll{
	overflow-y:scroll;
}
div#productcartarea .hideitem, div#productcartarea .elmValue{
	display: none; 
}
div#productcartarea .selectbox{
	background: url("../img/ajax/dropdown.gif") no-repeat 0 0;
	padding:0px 0px 0px 0px;
	float:left;
	margin:0 0 0px 0;
}
div#productcartarea .selectbox ul {
	background: url("../img/ajax/dropdown.gif") no-repeat top right;
	padding:0px 0px 0px 0px;
	margin:0;
	vertical-align:top; /*causes ie to align text correctly*/
	list-style: none;
	height: 35px;
	cursor: pointer;
}
div#productcartarea .select_wrap{
	clear:both;
	margin:0px 0px 30px 0px;
	overflow:hidden;
}
div#productcartarea .selectboxopen{
	clear:both;
	background: url("../img/ajax/dropdownopen.gif") no-repeat 0 0;
	padding:0px 0px 0px 0px;
	float:left;
	margin:0;
}
div#productcartarea .selectboxopen ul{
	background: url("../img/ajax/dropdownopen.gif") no-repeat top right;
	padding:0px 0px 0px 0px;
	height:35px;
	margin:0;
	vertical-align:top; /*causes ie to align text correctly*/
	list-style: none;
	cursor: pointer;
}
div#productcartarea .selectbox ul li, div#productcartarea .selectboxopen ul li{ 
	list-style: none;
	padding:0;
	margin:0;
	font-family: "ＭＳ 明朝","平成明朝";
	font-size: 16px;
	font-weight: bold;
	cursor: pointer;
	border-left: 1px solid #AAABAD;
	border-right: 1px solid #AAABAD;
	border-bottom: 1px solid #AAABAD;
}
div#productcartarea .selectboxoptions_wrap{
	display:none;
	clear:both;
	padding:0;
	margin:0;
}
div#productcartarea .selectboxoptions_radio, div#productcartarea .selectboxoptions_check{
	clear:both;
	list-style: none;
	padding:0;
	margin:0 ;
	background:#fdfdfd;
    box-sizing: unset;
}
div#productcartarea .selectboxoptions_radio li, div#productcartarea .selectboxoptions_check li{
	list-style: none;
	margin:0px 0px 0px 0px;
	/*padding:8px 0px 0px 38px;*/
    padding: 4px 0px 0px 46px;
	font-family: "ＭＳ 明朝","平成明朝";
	font-size: 16px;
	font-weight: bold;
	cursor: pointer;
	/*width:210px;*/
    width:250px;
	height:27px;
	border-left: 1px solid #AAABAD;
	border-right: 1px solid #AAABAD;
	border-bottom: 1px solid #AAABAD;
    text-align: left;
}
div#productcartarea .hover{
	background-color:#E9F3EF; 
}
div#productcartarea .selectboxoptions_check li{
	background:#e6e9ed url("../img/ajax/checkboxoff.png") no-repeat 5px 6px;
}
div#productcartarea .selectboxoptions_radio li.selected{
	/*background:#E9F3EF url("../img/ajax/selectradio.gif") no-repeat 13px 9px;*/
    background:#E9F3EF url("../img/ajax/selectradio.gif") no-repeat 13px 6px;
	display:block !important;
}
div#productcartarea .selectboxoptions_radio li.selected_disable{
	background:#f2f2f2 url("../img/ajax/selectradio_disable.png") no-repeat 5px 6px;
	display:block !important;
}
div#productcartarea .selectboxoptions_check li.selected{
	background:#f2f2f2 url("../img/ajax/selectcheck.png") no-repeat 5px 6px;
	display:block !important;
}
div#productcartarea .selectboxoptions_check li.selected_disable{
	background:#f2f2f2 url("../img/ajax/selectcheck_disable.png") no-repeat 5px 6px;
	display:block !important;
}
div#productcartarea .selectboxoptions_radio li.hover, div#productcartarea .selectboxoptions_check li.hover{
	background-color:#E9F3EF;
}
div#productcartarea .selectboxfoot{
	border-bottom: 1px solid #ffffff;
}
div#productcartarea .selectboxfoot div{
	border-bottom: 1px solid #ffffff;
}

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

    /* 商品購入エリア */
    #productcartarea {
        padding: 25px 20px;
    }

    /* 規格選択 */
    #productcartarea .select_wrap {
        margin: 0 0 15px;
        overflow: visible;
    }

    #productcartarea .selectbox,
    #productcartarea .selectboxopen {
        float: none;
        width: 240px;
        margin: 0 auto;
    }

    #productcartarea .selectbox ul,
    #productcartarea .selectboxopen ul {
        width: 240px;
        height: 56px;
        margin: 0 auto;
        background-size: 100% 100%;
    }

    #productcartarea .selectbox ul li,
    #productcartarea .selectboxopen ul li {
        height: 56px;
        line-height: 56px;
        padding: 0 40px 0 20px;
        box-sizing: border-box;
    }

    /* カート・お気に入りボタン */
    

    /* 一番下のボタンだけ下マージン不要 */
    
}

#page_product_list .setScroll{
	overflow-y:scroll;
}
#page_product_list .hideitem, #page_product_list .elmValue{
	display: none; 
}
#page_product_list .selectbox{
	/*background: url("../img/ajax/dropdown.gif") no-repeat 0 0;
    background-size: contain;
	padding:0px 0px 0px 0px;
	float:right;
	margin:0px 0px 0px 0px;*/
}

#page_product_list .ec-productRole__actions .ec-select {
    text-align: center;
    overflow: hidden;
    margin: 0px 0px 15px 0px;
}

#page_product_list .selectbox ul{
	background: url("../img/ajax/dropdown.gif") no-repeat top left;
    /*background-size: contain;*/
    background-size: 100% 100%;
	padding:0px 0px 0px 0px;
    margin: auto;
	vertical-align:top; /*causes ie to align text correctly*/
	list-style: none;
	height:21px;
    width: 130px;
	cursor: pointer;
}
#page_product_list .select_wrap{
	/* clear:both; */
	margin:0px 0px 0px 0px;
	overflow:hidden;
    letter-spacing:0px;
}
#page_product_list .selectboxopen{
	/* clear:both; */
	/*background: url("../img/ajax/dropdownopen.gif") no-repeat 0 0;
    background-size: contain;
	padding:0px 0px 0px 0px;
	float:right;
	margin:0;*/
}
#page_product_list .selectboxopen ul{
	background: url("../img/ajax/dropdownopen.gif") no-repeat top left;
    /*background-size: contain;*/
    background-size: 100% 100%;
	padding:0px 0px 0px 0px;
	height:21px;
    margin: auto;
	vertical-align:top; /*causes ie to align text correctly*/
	list-style: none;
	cursor: pointer;
}
#page_product_list .selectbox ul li, #page_product_list .selectboxopen ul li{ 
	list-style: none;
	padding:0;
	margin:0;
	font-size: 11px;
	cursor: pointer;
}
#page_product_list .selectboxoptions_wrap{
	display:none;
	clear:both;
	padding:0;
	margin:0;
}
#page_product_list .selectboxoptions_radio, #page_product_list .selectboxoptions_check{
	list-style: none;
	padding:0;
	margin:0 ;
}
#page_product_list .selectboxoptions_radio li, #page_product_list .selectboxoptions_check li{
	list-style: none;
	margin:0px 0px 0px 18px;
	padding:2px 0px 0px 3px;
	font-size: 11px;
	cursor: pointer;
	width:130px;
	height:20px;
	border-left: 1px solid #AAABAD;
	border-right: 1px solid #AAABAD;
	border-bottom: 1px solid #AAABAD;
}
#page_product_list .hover{
	background-color:#E9F3EF;
}
#page_product_list .selectboxoptions_check li{
	background:#e6e9ed url("../img/ajax/checkboxoff.png") no-repeat 5px 6px;
}
#page_product_list .selectboxoptions_radio li{
	background-color:#f1f1f1;
}
#page_product_list .selectboxoptions_radio li.selected{
	background:#E6DBDF url("../img/ajax/list_selectradio.gif") no-repeat 30px 4px;
	display:block !important;
	color:#8a2100;
}
#page_product_list .selectboxoptions_radio li.selected_disable{
	background:#f2f2f2 url("../img/ajax/selectradio_disable.png") no-repeat 5px 6px;
	display:block !important;
}
#page_product_list .selectboxoptions_check li.selected{
	background:#f2f2f2 url("../img/ajax/selectcheck.png") no-repeat 5px 6px;
	display:block !important;
}
#page_product_list .selectboxoptions_check li.selected_disable{
	background:#f2f2f2 url("../img/ajax/selectcheck_disable.png") no-repeat 5px 6px;
	display:block !important;
}
#page_product_list .selectboxoptions_radio li.hover, #page_product_list .selectboxoptions_check li.hover{
	background-color:#E6DBDF;
}












/*#productcartarea .ec-productRole__btn .ec-blockBtn--action::after {
    background-image: url(../img/common/icon_cart.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 30px;
    height: 45px;
    right: 12px;
}*/
/*#productcartarea .ec-productRole__btn .ec-blockBtn--action:hover::after {
    background-image: url(../img/common/icon_cart_hov.png);   
}*/


/* cart */
.cart_page .ec-pageHeader h1 {
    padding: 20px;
}
.cart_page .ec-role {
    margin-top: 30px;
}
.ec-cartRole {
    padding: 0;
    margin: 0 auto 35px;
}
#form_cart.ec-cartRole{
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 40px;
}
.ec-cartRole .ec-cartRole__totalText {
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 8px;
    margin: 5px 0 15px;
}
.ec-cartRole .ec-cartRole__totalText p {
    position:relative;
    min-height:16px;
    font-size:14px;
    text-align:left;
    color:#111;
    padding:0 0 0 25px;
    background:none;
}

.ec-cartRole .ec-cartRole__totalText p::before {
    content:"";
    position:absolute;
    left:0;
    top:50%;
    width:16px;
    height:16px;
    background:url(../img/common/common_icon_color00.gif) no-repeat center;
    background-size:16px 16px;
    transform:translateY(-50%);
}




/* ==========================================================================
   D2k185 / D2k186 / D2k187 — CART / <=759px: checkout rhythm

   D2k187 corrected STEP 1 after direct 640px measurements of both pages:
     STEP 1 (cart): h1 -> stepper = 30px (incorrect)
     STEP 2 (shopping): h1 -> stepper = 0px (approved baseline)

   Use the approved STEP 2/3 rhythm for STEP 1 at all stacked widths:
     title -> stepper                = 0px
     stepper -> total summary bar   = 30px
     total summary bar -> cart box  = ~30px (existing border geometry)

   The total bar + cart gaps from D2k185/186 are preserved. Title top space
   remains owned by .cart_page .ec-role (30px). Leave >=760px untouched.
   ========================================================================== */
@media only screen and (max-width: 759px) {
    #page_cart .ec-cartRole__progress {
        margin-top: 0;
    }

    #page_cart .ec-cartRole__totalText {
        margin-top: 30px;
        margin-bottom: 29px;
    }
}
/* ==========================================================================
   END D2k185 / D2k186 / D2k187
   ========================================================================== */

.ec-cartRole__actions p.note {
    font-size: 14px;
    text-align: center;
    color: #882200;
    margin: 35px auto 0;
}

.ec-blockBtn--cancel {
    padding: 0 0 0 15px;
}
.ec-blockBtn--cancel::after {
    transform: scale(-1, 1);
    left: 20px;
    right: auto;
}

@media only screen and (min-width: 760px){
    .ec-cartRole .ec-cartRole__progress {
        width: 100%;
        text-align: center;
        margin: 20px 0 0;
    }
    
    
    .ec-cartRole .ec-cartRole__cart {
        margin: 0;
    }
    .ec-cartRole .ec-cartRole__actions {
        width: 100%;
        margin: 0;
    }
    .ec-cartRole .cart_split {
        width: 100%;
        border-top: 1px solid #eee;
        margin-top: 5px;
        margin-bottom: 30px;
    }
    
    
    
    
    
    
    .ec-cartRole .ec-cartRole__totalAmount {
        background-color: #fff;
        border-left: 1px solid #ccc;
        color: #DE5D50;
        display: inline-block;
        font-size: 16px;
        width: 160px;
        box-sizing: content-box;
        padding-right: 20px;
        margin-left: 10px;
        line-height: 60px;
    }
    /* shopping */
    
    
    
}

/* サイドメニュー（静的ページ） */
.static_menu {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
}
.static_menu li {
    width: 100%;
    border-color: #ccc;
    border-style: solid;
    border-width: 1px;
    color: #222;
    text-align: left;
    font-weight: normal;
    font-family: "Noto Serif JP", serif;
    font-size: 17px;
    letter-spacing: 0.08em;
    line-height: 42px;
    padding: 0 0 0 35px;
    margin: 0 auto 6px;
    position: relative;
    background: rgba(250,250,250,1);
    background: -moz-linear-gradient(top, rgba(250,250,250,1) 0%, rgba(221,221,225,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(250,250,250,1)), color-stop(100%, rgba(221,221,225,1)));
    background: -webkit-linear-gradient(top, rgba(250,250,250,1) 0%, rgba(221,221,225,1) 100%);
    background: -o-linear-gradient(top, rgba(250,250,250,1) 0%, rgba(221,221,225,1) 100%);
    background: -ms-linear-gradient(top, rgba(250,250,250,1) 0%, rgba(221,221,225,1) 100%);
    background: linear-gradient(to bottom, rgba(250,250,250,1) 0%, rgba(221,221,225,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#fafafa", endColorstr="#dddde1", GradientType=0 );
}
.static_menu li:hover {
    background: rgba(252,249,249,1);
    background: -moz-linear-gradient(top, rgba(252,249,249,1) 0%, rgba(231,213,221,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(252,249,249,1)), color-stop(100%, rgba(231,213,221,1)));
    background: -webkit-linear-gradient(top, rgba(252,249,249,1) 0%, rgba(231,213,221,1) 100%);
    background: -o-linear-gradient(top, rgba(252,249,249,1) 0%, rgba(231,213,221,1) 100%);
    background: -ms-linear-gradient(top, rgba(252,249,249,1) 0%, rgba(231,213,221,1) 100%);
    background: linear-gradient(to bottom, rgba(252,249,249,1) 0%, rgba(231,213,221,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#fcf9f9", endColorstr="#e7d5dd", GradientType=0 );
}
.static_menu a {
    color: inherit;
    text-decoration: none;
}
.static_menu li::before {
    background-image: url(../img/common/icon_square_h3.gif);
    content: "";
    background-size: 100%;
    width: 16px;
    height: 16px;
    margin: auto;
    padding: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 13px;
}


/* ログイン
----------------------------------------------- */
#loginarea {
    width: 250px;
    height: 229px;
    margin: 30px 0px 30px 0px;
    padding: 0;
    overflow: hidden;
    background: url("../img/side/bg_login.gif") no-repeat left top;
}
#loginarea .btn {
    padding: 78px 0px 0px 0;
}
#loginarea .btn img {
    width: 100%;
}

#mymenuarea {
    width: 250px;
    height: 229px;
    margin: 0px 0px 30px 0px;
    padding: 0;
    overflow: hidden;
    background: url("../img/side/bg_mymenu.gif") no-repeat left top;
    color: #58bafc;
    /* font-weight: bold; */
}
#mymenuarea-fund {
    float: right;
    width: 250px;
    height: 219px;
    margin: 0px 0px 30px 12px;
    padding: 10px 0px;
    overflow: hidden;
    background: url("../img/mypage/bg_menu.gif") no-repeat left top;
    color: #58bafc;
    /* font-weight: bold; */
}
#mymenuarea .welcome{
    width: 218px;
    margin: 17px 0px 0px 16px;
    overflow: hidden;
}
#mymenuarea .btn1, #mymenuarea-fund .btn1{
    width: 218px;
    margin: 10px 0px 0px 16px;
    overflow: hidden;
}
#mymenuarea-fund .regi{
    width: 202px;
    height: 195px;
    margin: 10px 16px;
    padding: 10px 10px;
    background: url("../img/side/bg_mymenu_regi_fund.gif") no-repeat left top;
    overflow: hidden;
    text-align:left;
}
#mymenuarea .regi{
    width: 218px;
    height: 33px;
    margin: 10px 0px 0px 16px;
    padding: 7px 0px 0px 0px;
    background: url("../img/side/bg_mymenu_regi.gif") no-repeat left top;
    overflow: hidden;
    text-align:center;
}
p.fund-info-l{
    font-size:180%;
    line-height:220%;
    color:#fac75a;
}
    p.fund-info-m{
    font-size:120%;
    line-height:200%;
    color:#fac75a;
}
p.fund-info-s{
    font-size:90%;
    line-height:180%;
    color:#ccc;
    text-align:right;

}
#mymenuarea .btn2{
    width: 218px;
    margin: 14px 0px 0px 16px;
    overflow: hidden;
}
#mymenuarea .buystep{
    float:left;
    width: 98px;
}
#mymenuarea .logout{
    float:right;
    width: 98px;
}

/* guide */
.midashi h3 {
    font-size: 16px;
    background: #fff;
    border: 1px solid #ccc;
    padding: 15px 0 15px 50px;
    margin: 0 0 5px;
    position: relative;
}
.midashi h3::before {
    background-image: url(../img/common/icon_square_h3.gif);
    content: "";
    background-size: 100%;
    width: 16px;
    height: 16px;
    margin: auto;
    padding: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 18px;
}
.containerB {
    padding: 10px 0;
}
.containerB .content {
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 40px 20px;
}
.containerB .content p img {
    width: 100%;
    height: auto;
}
.containerB .content .stepcont .step img {
    height: auto;
}
.stepcont h3 {
    font-family: "Noto Serif JP", serif;
    font-size: 25px;
    font-weight: 600;
    color: #781f1e;;
    letter-spacing: 0.08em;
    margin: 0;
}
.stepcont h3 span{
    font-size: 20px;
    display: block;
    padding: 0 0 5px;
}
.stepcont .stepLast h3 span {
    font-size: 20px;
    display: inline-block;
    padding: 0 0 5px;
}
.stepcont .stepLast h3 span.note {
    font-size: 13px;
    display: inline-block;
    margin: 0 0 0 8px;
    letter-spacing: 0.04em;
}
.containerB p {
    line-height: 1.5;
}
.containerB .note_red {
    color: #ff0102;
    display: block;
    font-size: 13px;
    margin-top: 5px;
}
.containerB .note_blk {
    color: #111;
    display: block;
    font-size: 13px;
    margin-top: 5px;
}
.info h3 {
    font-family: "Noto Serif JP", serif;
    font-size: 25px;
    font-weight: 600;
    color: #781f1e;
    letter-spacing: 0.08em;
    padding: 0 0 0 50px;
    margin: 0;
    position: relative;
}
.info h3::before {
    background-image: url(../img/common/icon_square_l.png);
    background-size: 100%;
    width: 25px;
    height: 25px;
    content: "";
    position: absolute;
    margin: auto;
    top: 0px;
    left: 20px;
    z-index: 99;
}
.info h3::after {
    width: 25px;
    height: 25px;
    content: "";
    position: absolute;
    margin: auto;
    top: 0px;
    left: 20px;
    z-index: 11;
}
.infocont:nth-of-type(1) .info h3::before {
    background-color: #c7393f;
}
.infocont:nth-of-type(2) .info h3::before {
    background-color: #f3cb46;
}
.infocont:nth-of-type(3) .info h3::before {
    background-color: #cee052;
}
.infocont:nth-of-type(4) .info h3::before {
    background-color: #bae7e2;
}
.infocont:nth-of-type(5) .info h3::before {
    background-color: #cbc1fa;
}
/* ==========================================================================
   GUIDE MENU — structured 3 x 2 grid
   2026-09-11

   Actual HTML order already matches the legacy site:
   1. 緊縛桟敷キネマ館とは
   2. ご利用方法
   3. コンテンツの説明
   4. 緊縛桟敷キネマ館の特徴
   5. 楽しむ方法
   6. よくあるご質問

   760px以上は旧サイト同様の3列×2段。
   3列は旧サイトの見た目に合わせて左を広く、中央を狭く、右を中間幅にする。
   ========================================================================== */

@media only screen and (min-width: 760px) {
    #guide_menu .guide_nav {
        display:grid;
        grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1.27fr);
        gap:12px 14px;
        width:100%;
        margin:0 0 30px;
        padding:0;
        list-style:none;
    }

    #guide_menu .guide_nav li {
        display:flex;
        align-items:center;
        width:100%;
        min-width:0;
        height:44px;
        min-height:44px;
        margin:0;
        padding:0 46px 0 20px;
        box-sizing:border-box;

        background-color:#e5e4e4;
        border:1px solid #ccc;
        border-radius:5px;
        box-shadow:-1px -1px 0 #333;

        color:#2a6c9d;
        font-family:"Noto Serif JP", serif;
        font-size:clamp(16px, 1.4vw, 20px);
        font-weight:normal;
        letter-spacing:.08em;
        line-height:1.35;
        white-space:nowrap;
        position:relative;
    }

    #guide_menu .guide_nav li a {
        display:flex;
        align-items:center;
        width:100%;
        min-width:0;
        height:100%;
        color:inherit;
        text-decoration:none;
    }

    #guide_menu .guide_nav li::after {
        right:18px;
    }
}

/* 実スマホ幅では3列を無理に詰めず、既存の1列表示を整える。 */
@media only screen and (max-width: 759px) {
    #guide_menu .guide_nav {
        display:grid;
        grid-template-columns:1fr;
        gap:8px;
        width:100%;
        margin:0 0 30px;
        padding:0;
    }

    #guide_menu .guide_nav li {
        display:flex;
        align-items:center;
        width:100%;
        height:44px;
        min-height:44px;
        margin:0;
        padding:0 50px 0 20px;
        box-sizing:border-box;
    }
}

/* ==========================================================================
   END GUIDE MENU GRID
   ========================================================================== */

@media only screen and (min-width: 768px) {
    .media_guide .ec-pageHeader h1 span {
        font-size: 30px;
        letter-spacing: 0.04em;
    }
    .midashi h3 {
        font-size: 18px;
        background: #fff;
        border: 1px solid #ccc;
        padding: 15px 0 15px 50px;
        margin: 0 0 5px;
        position: relative;
    }
    .midashi h3::before {
        background-image: url(../img/common/icon_square_h3.gif);
        content: "";
        background-size: 100%;
        width: 16px;
        height: 16px;
        margin: auto;
        padding: 0;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 18px;
    }
    .containerA {
        clear: both;
        width: 100%;
        padding: 0 0 30px;
        box-sizing: border-box;
    }
    /*
     * GUIDE content ownership:
     * containerA = section + section-bottom gap
     * containerB = the single visible outer panel
     * content    = inner padding only (no independent box/background)
     * stepcont   = each STEP row
     * hr         = equal spacing between STEP rows
     */
    .containerB {
        box-shadow: 0px 1px 0px #ffffff;
        -moz-box-shadow: 0px 1px 0px #ffffff;
        -webkit-box-shadow: 0px 1px 0px #ffffff;
        filter: progid:DXImageTransform.Microsoft.Shadow(color="#ffffff", Direction=180, Strength=2);
        display: block;
        width: 100%;
        padding: 0;
        background-color:#fdfdfd !important;
        border:solid 1px #bbb;
        box-sizing:border-box;
    }
    .containerB .content {
        margin:0;
        padding:40px;
        background:transparent;
        border:none;
        box-sizing:border-box;
    }
    .containerB .content hr,
    .containerB .content hr.plus10 {
        clear:both;
        height:0;
        margin:30px 0;
        border:0;
        border-top:1px dotted #6f2622;
        background:none;
    }
    .containerB .content p {
        color:#111;
        font-size:14px;
        line-height: 1.5;
    }
    .containerB .content p.s {
        color:#111;
        font-size:12px;
        line-height: 1.5;
    }
    /* #guide_menu .guide_nav */
    .guide_nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        list-style: none;
        margin: 0 0 12px;
        padding: 0 40px 0 0;
    }
    .guide_nav li {
        background-color: #e5e4e4;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-family: "Noto Serif JP", serif;
        font-weight: normal;
        font-size: 20px;
        color: #2a6c9d;
        letter-spacing: 0.08em;
        padding: 4px 50px 4px 20px;
        margin-bottom: 8px;
        position: relative;
        box-shadow: -1px -1px 0 #333;
    }
    #media_menu .guide_nav li {
        padding: 4px 55px 4px 35px;
    }
    .guide_nav li::after {
        background-image: url(../img/common/icon_guide_arrow.png);
        content: "";
        background-size: 100%;
        width: 14px;
        height: 14px;
        margin: auto;
        padding: 0;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 20px;
    }
    .guide_nav li a {
        color: inherit;
        text-decoration: none;
        display: block;
    }
    .guide_nav li:hover::after ,
    .guide_nav li.current::after {
        background-image: url(../img/common/icon_guide_arrow_hov.png);
    }
    .guide_nav li:hover {
        /*background: #fbebe2;*/
    }
    .guide_nav li:hover a{
        color: #a14d33;
    }
    .guide_nav li.current {
        pointer-events: none;
        color: #a14d33;
        background: #fbebe2;
    }
    
    /* STEP
    ----------------------------------------------- */
    .stepcont{
        display: block;
        width: 100%;
        overflow: hidden;
        margin-bottom:0;
    }
    .stepcont .infoimg{
        float: left; 
        width: 200px;
        display: inline;/* for WinIE6*/
        margin-right:20px;
    }
    .stepcont .step{
        float: left;
        width: calc(100% - 220px);
        display: inline;/* for WinIE6*/
        margin-bottom:0;
    }
    .stepcont .stepLast{
        float: left;
        width: calc(100% - 220px);
        display: inline;/* for WinIE6*/
    }
    .stepcont p {
        color:#111;
        font-size:14px;
        line-height: 1.5;
        margin-top: 10px;
    }
    /* CONTENT INFO
    ----------------------------------------------- */
    .infocont{
        overflow: visible;
        display: table;
        width: 100%;
        height:130px;
        margin-bottom:30px;
    }
    
    .infocont .contentimg{
        /*float: left; */
        width: 100px;
        display: table-cell;/* for WinIE6*/
        margin-right:20px;
    }
    .infocont .info{
        /*position: relative;
        width: calc(100% - 100px);
        display: inline;/* for WinIE6*/
        /*margin-bottom:15px;*/
        display: table-cell;
        vertical-align: top;
    }
    .infocont .info .btn{
        position: absolute;  
        top: -4px;  
        left: 270px; 
        display: inline;/* for WinIE6*/
    }
    .infocont .info p {
        color:#111;
        font-size:14px;
        line-height: 180%;
        margin-top: 10px;
        padding-left: 25px;
        padding-right: 10px;
    }
    /* pointcont */
    .pointcont {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .pointcont .point {
        width: 50%;
        height: 210px;
        position: relative;
    }
    .pointcont .point a {
        display: block;
    }
    .pointcont .point img {
        width: 90%;
        height: auto;
    }
    .pointcont .point:nth-of-type(1) {
        border-bottom: 1px dotted #781f1e;
        border-right: 1px dotted #781f1e;
    }
    .pointcont .point:nth-of-type(2) {
        text-align: right;
        border-bottom: 1px dotted #781f1e;
    }
    .pointcont .point:nth-of-type(3) {
        border-right: 1px dotted #781f1e;
        padding-top: 30px;
    }
    .pointcont .point:nth-of-type(4) {
        text-align: right;
        padding-top: 30px;
    }
    .pointcont .point .num {
        font-family: "Noto Serif JP", serif;
        font-size: 25px;
        font-weight: 600;
        color: #e0cbca;
        position: absolute;
    }
    .pointcont .point:nth-of-type(1) .num {
        bottom: 10px;
        right: 15px;
    }
    .pointcont .point:nth-of-type(2) .num {
        bottom: 10px;
        left: 15px;
    }
    .pointcont .point:nth-of-type(3) .num {
        top: 10px;
        right: 15px;
    }
    .pointcont .point:nth-of-type(4) .num {
        top: 10px;
        left: 15px;
    }

}
/* ==========================================================================
   GUIDE — 簡単3ステップ responsive layout
   2026-09-11
   ========================================================================== */

/* 760のみ、768以上と同じ「画像＋説明」の2列構造を与える。 */
@media only screen and (min-width:760px) and (max-width:767px) {
    .containerA {
        clear:both;
        width:100%;
        padding:0 0 30px;
        box-sizing:border-box;
    }

    .containerB {
        display:block;
        width:100%;
        padding:0;
        background-color:#fdfdfd;
        border:1px solid #bbb;
        box-sizing:border-box;
    }

    .containerB .content {
        margin:0;
        padding:40px;
        background:transparent;
        border:none;
        box-sizing:border-box;
    }

    .stepcont {
        display:block;
        width:100%;
        overflow:hidden;
        margin-bottom:0;
    }

    .containerB .content hr,
    .containerB .content hr.plus10 {
        clear:both;
        height:0;
        margin:30px 0;
        border:0;
        border-top:1px dotted #6f2622;
        background:none;
    }

    .stepcont .infoimg {
        float:left;
        width:200px;
        display:inline;
        margin-right:20px;
    }

    .stepcont .step {
        float:left;
        width:calc(100% - 220px);
        display:inline;
        margin-bottom:0;
    }

    .stepcont .stepLast {
        float:left;
        width:calc(100% - 220px);
        display:inline;
    }
}

/*
 * 900px以上のSTEP3見出し:
 * 「ステップ3 + 注記」を1行目、
 * 「すぐにご覧頂けます」を2行目へ固定。
 */
@media only screen and (min-width:900px) {
    /*
     * 実HTML:
     * <h3>
     *   <span>ステップ3</span>
     *   <span class="note">※通販...</span>
     *   すぐにご覧頂けます
     * </h3>
     *
     * note が inline-block のままだと、その内部::afterをblock化しても
     * 後続テキストノードまでは改行されない。
     * 900px以上だけ note を inline に戻し、改行文字を生成して
     * 後続テキストを確実に次行へ送る。
     */
    .stepcont .stepLast h3 span.note {
        display:inline;
    }

    .stepcont .stepLast h3 span.note::after {
        content:"\A";
        white-space:pre;
    }
}

/* ==========================================================================
   END GUIDE STEPS
   ========================================================================== */

@media only screen and (min-width: 768px) and (max-width: 1000px) {
    .pointcont .point {
        width: 50%;
        height: auto;
        position: relative;
    }
    .pointcont .point img {
        width: 80%;
    }
    .pointcont .point:nth-of-type(1), .pointcont .point:nth-of-type(2) {
        padding-bottom: 20px;
    }
    .pointcont .point:nth-of-type(3), .pointcont .point:nth-of-type(4) {
        padding-top: 20px;
    }
}
/* Btn JOIN
----------------------------------------------- */
#btnjoin {
    clear: both;
    width: 100%;
    margin-bottom: 50px;
}
#btnjoin.ec-entry a{
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: #eee;
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
    background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
    background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#ffffff", endColorstr="#e5e5e5",GradientType=0 );
    color: #555;
    display: block;
    text-decoration: none;
    font-size: 20px;
    font-family: "Noto Serif JP", serif;
    line-height: 56px;
    letter-spacing: 0.25em;
    text-align: center;
    max-width: 360px;
    margin: 0 auto;
}
#btnjoin.ec-entry a:hover {
    text-decoration: none;
    color: #a14d33;
    border-color: #a14d33;
    /* background-color: #eee; */
    outline: none;
}

.acc_wrap .acc {
    list-style: none;
    margin: 0;
    padding: 40px;
}
.acc_wrap .acc li {

}
.acc_wrap .acc li dl {
    border: 1px solid #a2c0c8;
    margin: 0 0 20px;
    padding: 0;
}
.acc_wrap .acc li dl dt {
    color: #023333;
    font-size: 14px;
    font-weight: bold;
    line-height: 36px;
    padding-left: 10px;
}
.acc_wrap .acc li dl dd {
    border-top: 1px solid #a2c0c8;
    margin-top: -1px;
}
.acc_wrap .acc li dl dd ul {
    list-style: none;
    margin: 0;
    padding: 20px;
}
.acc_wrap .acc li dl dd .acc2 {
    border: 1px solid #a2c0c8;
    margin: 0 0 8px;
}
.acc_wrap .acc li dl dd .acc2 p {
    color: #023333;
    font-size: 14px;
    font-weight: bold;
    line-height: 36px;
    padding-left: 10px;
}
.acc_wrap .acc li dl dd .acc2 ul {
    border-top: 1px solid #a2c0c8;
    list-style: none;
    margin: 0;
    padding: 20px;
}
.acc_wrap .acc li dl dd .acc2 ul li {
    color: #023333;
}
.acc_wrap .acc li dl dt ,
.acc_wrap .acc li dl dd .acc2 p {
    background: rgba(251,253,253,1);
    background: -moz-linear-gradient(top, rgba(251,253,253,1) 0%, rgba(250,252,252,1) 50%, rgba(240,244,246,1) 51%, rgba(226,230,231,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(251,253,253,1)), color-stop(50%, rgba(250,252,252,1)), color-stop(51%, rgba(240,244,246,1)), color-stop(100%, rgba(226,230,231,1)));
    background: -webkit-linear-gradient(top, rgba(251,253,253,1) 0%, rgba(250,252,252,1) 50%, rgba(240,244,246,1) 51%, rgba(226,230,231,1) 100%);
    background: -o-linear-gradient(top, rgba(251,253,253,1) 0%, rgba(250,252,252,1) 50%, rgba(240,244,246,1) 51%, rgba(226,230,231,1) 100%);
    background: -ms-linear-gradient(top, rgba(251,253,253,1) 0%, rgba(250,252,252,1) 50%, rgba(240,244,246,1) 51%, rgba(226,230,231,1) 100%);
    background: linear-gradient(to bottom, rgba(251,253,253,1) 0%, rgba(250,252,252,1) 50%, rgba(240,244,246,1) 51%, rgba(226,230,231,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#fbfdfd", endColorstr="#e2e6e7", GradientType=0 );
}

#page_contact .ec-layoutRole__contents a {
    text-decoration: underline;
}

#page_contact .ec-layoutRole__contents .static_menu a {
    text-decoration: none;
}
#page_contact .ec-layoutRole__contents .static_menu a:hover {
    text-decoration: none;
}

#page_contact .ec-layoutRole__contents a:hover {
    color: #e85514;
    text-decoration: underline;
}

#page_contact .ec-off1Grid {
    padding: 40px 50px 0 50px;
}

#page_contact .midashi {
    margin-top: 20px;
}

#page_contact div.inboxarea_cust {
    margin: 0px auto 20px auto;
    padding: 30px 49px 30px;
    border: 1px solid #bbbbbb;
    background-color: #fdfdfd;
    overflow: hidden;
    box-shadow: 0px 1px 0px #ffffff;
    -moz-box-shadow: 0px 1px 0px #ffffff;
    -webkit-box-shadow: 0px 1px 0px #ffffff;
    filter: progid:DXImageTransform.Microsoft.Shadow(color="#ffffff", Direction=180, Strength=2);
}

@media only screen and (max-width: 767px) {
    div#flasharea {
        height: 160px;
        background-size: auto 160px;
        background-repeat: repeat-x;
    }
    .ec-pageHeader h1 {
        font-size: 24px;
        padding: 20px 0;
    }
    .ec-pageHeader h1 span {
        font-size: 15px;
        letter-spacing: 0.04em;
    }
    .ec-pageHeader h3,
    .ec-role h3 {
        font-size: 16px;
        background: #fff;
        border: 1px solid #ccc;
        padding: 15px 0 15px 50px;
        margin: 20px 0 5px;
        position: relative;
    }
    .ec-pageHeader h3::before,
    .ec-role h3::before {
        background-image: url(../img/common/icon_square_h3.gif);
        content: "";
        background-size: 100%;
        width: 16px;
        height: 16px;
        margin: auto;
        padding: 0;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 18px;
    }
    .ec-pageHeader h1 + h3 {
        margin: 0 0 5px;
    }
    /* item_list */
    #category_content_ex_contents {
        padding: 0;
    }
    #category_extension_ex_category_icon {
        margin: 30px auto 10px;
    }
    /* producttile */
    
    
    
    
    
    
    
    
    
    

    .ec-productRole__description .video-js {
        width: 100%;
        height: auto;
    }
    .ec-productRole__description .description_area {
        margin: 0px 0px 2px 0px;
        padding: 20px;
        font-size: 14px;
    }
    /* item detail */
    .ec-productRole .z_product_title .ec-headingTitle {
        border: 1px solid #ccc;
        background-color: #fff;
        font-size: 16px;
        padding: 8px;
        position: relative;
        margin: 20px 0;
    }
    .ec-productRole .z_product_title .ec-productRole__tag {
        padding: 2px 5px;
        font-size: 12px;
        color: #FF0000;
        border: none;
        border-radius: 3px;
        background-color: #fff;
        height: 20px;
        margin: auto;
        float: right;
        /*position: absolute;
        top: 0;
        bottom: 0;
        right: 10px;*/
    }
    .ec-productRole .z_product_title .ec-productRole__tag::before {
        content: "[";
    }
    .ec-productRole .z_product_title .ec-productRole__tag::after {
        content: "]";
    }
    
    #productcartarea {
        border: 1px solid #ccc;
        background: #fff;
        padding: 10px 20px;
    }
    #page_product_detail .z_product_detail {
        width: 100%;
        margin: 0 0 20px;
    }
    /* productdetail review*/
    #reviewContent {
        border: 1px solid #ccc;
        background-color: #fff;
        padding: 20px;
    }
    #product_review_area .ec-rectHeading h4 {
        font-size: 16px;
    }
    #product_review_area .review_list li {
        font-size: 14px;
    }
    /* cart */
    #form_cart.ec-cartRole {
        border: 1px solid #ccc;
        background-color: #fff;
        /*border: none;*/
        /*border-top: 1px solid #ccc;*/
        /*border-bottom: 1px solid #ccc;*/
        padding: 0 0 20px;
    }
    
    
    .ec-cartRow .ec-cartRow__summary {
        width: 60%;
    }
    /*.ec-cartTable .ec-cartRow .ec-cartRow__delColumn {
        border-bottom: 2px dotted #ccc;
    }
    .ec-cartTable .ec-cartRow .ec-cartRow__contentColumn {
        border-bottom: 2px dotted #ccc;
    }*/
    
    .ec-cartRole .ec-cartRole__cart {
        margin: 0;
        width: 100%;
    }
    
    .ec-cartRole .ec-cartRole__totalAmount {
        font-size: 16px;
    }
    .ec-cartRole__actions p.note {
        font-size: 13px;
        text-align: left;
        color: #882200;
        padding: 0 20px;
        margin: 25px auto 0;
    }
    
    
    .ec-blockBtn--action, .ec-blockBtn--cancel, .ec-blockBtn {
        width: calc(100% - 40px);
        max-width: 320px;
        margin: 10px auto;
        position: relative;
    }
    
    /* mypage */
    .mypage .ec-pageHeader h1 {
        padding-left: 20px;
    }
    
    .ec-login {
        padding: 40px 30px;
    }
    .ec-login p {
        font-size: 14px;
        margin: 0 0 20px;
    }
    .ec-login .ec-login__link {
        font-size: 14px;
        margin-top: 15px;
        margin-left: 0;
    }
    .ec-login__input .form-check label {
        display: inline-block;
        max-width: 100%;
        font-size: 13px;
        margin: 0 0 0 3px;
        font-weight: normal;
    }
    .ec-navlistRole .ec-navlistRole__item {
        background-color: #fff;
    }
    
    
    
    .ec-borderedDefs dl {
        border-bottom: none;
        border-left: none;
        border-right: none;
        padding: 0 0;
    }
    .ec-editRole .ec-borderedDefs dt {
        border-right: none;
        background-color: #efefef;
        padding: 15px;
    }
    .ec-borderedDefs dd {
        width: 100%;
        line-height: 1.25;
        padding: 20px 30px 10px;
    }
    .mypage .ec-para-normal {
        padding: 20px;
    }
    
    
    
    
    /* guide */
    .guide_nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        list-style: none;
        margin: 0 0 30px;
        padding: 0;
        width: 100%;
    }
    .guide_nav li {
        background-color: #e5e4e4;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-family: "Noto Serif JP", serif;
        font-weight: normal;
        font-size: 17px;
        color: #2a6c9d;
        letter-spacing: 0.08em;
        padding: 10px 50px 10px 20px;
        margin-bottom: -1px;
        position: relative;
        width: 100%;
    }
    #media_menu .guide_nav li {
        padding: 10px 50px 10px 20px;
    }
    .guide_nav li::after {
        background-image: url(../img/common/icon_guide_arrow.png);
        content: "";
        background-size: 100%;
        width: 14px;
        height: 14px;
        margin: auto;
        padding: 0;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 20px;
    }
    .guide_nav li a {
        color: inherit;
        text-decoration: none;
        display: block;
    }
    .guide_nav li.current::after {
        background-image: url(../img/common/icon_guide_arrow_hov.png);
    }
    .guide_nav li.current {
        pointer-events: none;
        color: #a14d33;
        background: #fbebe2;
    }
    .acc_wrap .acc {
        background-color: #fff;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .acc_wrap .acc li dl {
        border-top: 1px solid #a2c0c8;
        border-bottom: 1px solid #a2c0c8;
        border-left: none;
        border-right: none;
        margin: 0 0 40px;
        padding: 0;
    }
    .acc_wrap .acc li dl dt ,
    .acc_wrap .acc li dl dd .acc2 p {
        color: #023333;
        font-size: 14px;
        font-weight: bold;
        line-height: 1.5;
        padding: 10px 20px;
    }
    .stepcont h3 {
        margin: 0 0 10px;
    }
    .stepcont .stepLast h3 span.note {
        font-size: 13px;
        display: block;
        margin: 0;
        padding: 0 0 5px;
    }
    .stepcont h3 span ,
    .stepcont .stepLast h3 span {
        padding: 10px 0 5px;
    }
    .info h3 {
        padding: 15px 0 15px 30px;
    }
    .info h3::before ,
    .info h3::after {
        top: 14px;
        left: 0px;
    }
    /* pointcont */
    .pointcont {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .pointcont .point {
        border-bottom: 1px dotted #781f1e;
        width: 100%;
        height: auto;
        position: relative;
        text-align: center;
    }
    .pointcont .point a {
        display: block;
    }
    .pointcont .point img {
        width: auto;
        height: auto;
    }
    .pointcont .point:nth-of-type(1) {
        padding: 0 40px 10px;
    }
    .pointcont .point:nth-of-type(2) ,
    .pointcont .point:nth-of-type(3) {
        border-bottom: 1px dotted #781f1e;
        padding: 30px 40px;
    }
    .pointcont .point:nth-of-type(4) {
        border-bottom: none;
        padding: 30px 40px 0;
    }
    .media .pointcont .point:nth-of-type(1) {
        padding: 0 40px 10px;
    }
    .pointcont .point .num {
        font-family: "Noto Serif JP", serif;
        font-size: 25px;
        font-weight: 600;
        color: #e0cbca;
        position: absolute;
    }
    .pointcont .point:nth-of-type(1) .num {
        top: -8px;
        left: 0; 
    }
    .pointcont .point:nth-of-type(2) .num ,
    .pointcont .point:nth-of-type(3) .num ,
    .pointcont .point:nth-of-type(4) .num {
        top: 22px;
        left: 0;
    }

    /* contact */
    .ec-para-normal {
        padding: 20px;
    }
    .ec-contactRole {
        padding: 0;
    }
    .ec-contactRole .ec-pageHeader h1{
        padding: 20px;
    }
    .ec-contactRole p {
        margin: 0;
        padding: 20px;
    }
    .ec-borderedDefs dd {
        width: 100%;
        line-height: 1.25;
        padding: 20px;
    }
    .ec-borderedDefs dd p {
        padding: 20px 0 0;
    }
    #page_contact .ec-off1Grid {
        border: 1px solid #ccc;
        background-color: #fff;
        padding-bottom: 20px;
    }

    /* privacy */
    .ec-role h1 {
        padding: 20px;
    }
    /*
     * このborder解除はprivacy専用。
     * 旧指定は全.ec-off1Gridへ効き、760pxのお届け先一覧の左右枠まで消していた。
     */
    #page_help_privacy .ec-off1Grid {
        border: none;
        border-bottom: 1px solid #ccc;
        background-color: #fff;
    }
    .ec-off1Grid .ec-off1Grid__cell {
        margin: 0;
        padding: 0;
    }
    #page_help_privacy .ec-off1Grid .ec-off1Grid__cell {
        margin: 0;
        padding: 20px;
    }
    .ec-heading-bold {
        margin: 0 0 16px;
    }
    .ec-borderedDefs dt {
        border-right: none;
        background-color: #efefef;
        padding: 15px;
    }

    /* button */
    .ec-blockBtn--action, .ec-blockBtn--cancel, .ec-blockBtn {
        font-size: 18px;
        letter-spacing: 0.004em;
    }
    .ec-cartNaviIsset .ec-cartNaviIsset__action .ec-blockBtn--action {
        color: #555;
        background: linear-gradient(to bottom, #FEFEFE 0%,#CFD5DE 100%);
        border-top: 2px solid #444444;
        border-right: 1px solid #B1B2B3;
        border-bottom: 1px solid #B3B3B2;
        border-left: 2px solid #9D9E9E;
    }
    .ec-cartNaviIsset .ec-cartNaviIsset__action .ec-blockBtn--action:hover {
        background: linear-gradient(to bottom, #FEFEFE 0%,#D5CBD8 100%);
        border-top: 1px solid #444444;
        border-right: 1px solid #B1B2B3;
        border-bottom: 1px solid #B3B3B2;
        border-left: 1px solid #9D9E9E;
        color: #a14d33;
    }
    .ec-cartNaviIsset .ec-cartNaviIsset__action .ec-blockBtn.ec-cartNavi--cancel {
        background: linear-gradient(to bottom, #FEFEFE 0%,#CFD5DE 100%);
        border-top: 2px solid #444444;
        border-right: 1px solid #B1B2B3;
        border-bottom: 1px solid #B3B3B2;
        border-left: 2px solid #9D9E9E
    }
    .ec-cartNaviIsset .ec-cartNaviIsset__action .ec-blockBtn.ec-cartNavi--cancel:hover {
        background: linear-gradient(to bottom, #FEFEFE 0%,#D5CBD8 100%);
        border-top: 1px solid #444444;
    }
    .ec-blockBtn--action::after ,
    .ec-blockBtn--cancel::after ,
    .ec-blockBtn--action:hover::after ,
    .ec-blockBtn--cancel:hover::after ,
    .ec-blockBtn--action:active::after ,
    .ec-blockBtn--cancel:active::after ,
    .ec-blockBtn--action:focus::after ,
    .ec-blockBtn--cancel:focus::after {
        content: none;
    }
    
    
    
    
    
    div#productcartarea .selectboxoptions_radio li, div#productcartarea .selectboxoptions_check li {
        width: 202px;
    }
    /*#productcartarea .ec-productRole__btn .ec-blockBtn--action::after {
        content:"";
        background-image: url(../img/icon_cart.png);
        background-repeat: no-repeat;
        background-size: contain;
        width: 30px;
        height: 45px;
        right: 20px;
    }*/
    
    .ec-blockBtn--cancel {
        padding: 0;
    }
}

/* CONTACT / <=375px — panel insets and inner flow (D2k202).
   The outer content area owns 20px side gutters; keep the outer panel
   borders and the completed >=376px designs unchanged.
   The form has a 1px bottom border: action button's lower margin is
   reset and its panel owns 29px of inner space (=30px visually).
   The CREDIX information block is the only panel with extra <br><br>
   and inherited vertical <p> padding; normalize those without altering
   the other information block's text layout or its margins. */
@media only screen and (max-width: 375px) {
    #page_contact .ec-off1Grid,
    #page_contact div.inboxarea_cust {
        padding: 0;
    }

    /* Form: button lower edge to panel border = 30px. */
    #page_contact .ec-off1Grid {
        padding-bottom: 29px;
    }
    #page_contact .ec-off1Grid .ec-off4Grid__cell > .ec-blockBtn--action {
        margin-bottom: 0;
    }

    /* CREDIX: retain 20px side readability, remove stacked vertical padding. */
    #page_contact div.inboxarea_cust:has(a[href^="mailto:creditinfo@credix-web.co.jp"]) > p {
        margin: 0;
        padding: 0 20px;
    }
    #page_contact div.inboxarea_cust:has(a[href^="mailto:creditinfo@credix-web.co.jp"]) > p:first-of-type {
        padding-top: 20px;
    }
    #page_contact div.inboxarea_cust:has(a[href^="mailto:creditinfo@credix-web.co.jp"]) > p:not(:first-of-type) {
        margin-top: 20px;
    }
    #page_contact div.inboxarea_cust:has(a[href^="mailto:creditinfo@credix-web.co.jp"]) > p:last-of-type {
        padding-bottom: 20px;
    }
    #page_contact div.inboxarea_cust:has(a[href^="mailto:creditinfo@credix-web.co.jp"]) > br {
        display: none;
    }
}

@media only screen and (max-width: 640px){
      
    
    
    
}
@media only screen and (max-width: 500px){
      
    
    
}
@media only screen and (max-width: 320px){
    #product_review_area .ec-rectHeading h4 {
        font-size: 14px;
    }
    
    
    
}

.dlc-margin-top {
    margin-bottom: 0!important;
}

.ec-orderPayment .ec-radio img {
    width: auto;
}

/* ==========================================================================
   D2 MANAGED CSS — structural rebuild from common_B2_clean_v1.css
   2026-09-01

   Rules:
   - A requested px value is the FINAL geometry, never an additive offset.
   - Component geometry is owned here once; removed legacy rules do not compete.
   - EC-CUBE / plugin JS mechanics (Slick, custom selectbox etc.) remain untouched.
   ========================================================================== */

:root {
    --kinema-page-top: 60px;
    --kinema-page-top-pc: 30px;
    --kinema-page-bottom: 90px;
    --kinema-content-side: 40px;
    --kinema-layout-max: 1024px;
    --kinema-side-width: 250px;
    --kinema-column-gap-pc: 40px;
    --kinema-border: 1px solid #ccc;
    --kinema-panel-bg: #fff;
    --kinema-text: #222;
    --kinema-card-inset: 10px;
    --kinema-mobile-footer-gap: 60px;
    --kinema-guide-faq-actions-gap: 60px;
}

/* ==========================================================================
   1. PAGE LAYOUT / FINAL PAGE GAPS
   ========================================================================== */

/* Footer contributes no hidden extra gap. */
.ec-footerRole {
    margin-top: 0;
}

/* ========================================================================
   SHARED MOBILE SPACING / 375–640px — D2k193

   Single source of truth for the 60px visible last-content → footer gap.
   This is one property on the OUTER contents area, never a child card or
   section margin. Page families are admitted only after DOM verification.
   Included families: homepage, product listing, product detail,
   MyPage/downloads, guide, media guide (T9; visual check pending),
   contact, About, Privacy and Trade-law pages.
   Do not assume checkout or other unverified pages are identical.
   ======================================================================== */
@media only screen and (max-width: 640px) {
    :is(body.mypage,
        body#page_sheeb_dlc_downloads,
        body#page_product_detail,
        body#page_homepage,
        body#page_product_list,
        body#page_contact,
        body#page_help_guide,
        body:has(#media_menu),
        body#page_help_about,
        body#page_help_privacy,
        body#page_help_tradelaw) .ec-layoutRole__contents {
        padding-bottom: var(--kinema-mobile-footer-gap);
        box-sizing: border-box;
    }

    /*
     * D2k194 — remove legacy margins on the actual LAST child only.
     * Contact .inboxarea_cust still has a 20px bottom margin, and Guide
     * #btnjoin still has a 50px bottom margin from legacy global rules.
     * In the narrow layout the outer .ec-layoutRole__contents already owns
     * the full 60px last-content-to-footer space.  Avoid adding both.
     *
     * The Guide FAQ-to-CTA margin belongs to .acc_wrap (60px) and stays.
     * On >=641px, preserve the original legacy element margins.
     */
    #page_contact div.inboxarea_cust,
    #page_help_guide #btnjoin {
        margin-bottom: 0;
    }
}

/* The OUTER contents row is the single owner of page top/bottom whitespace.
   This avoids double spacing on MyPage, whose Twig contains a nested
   .ec-layoutRole__main inside the actual <main>. */
@media only screen and (min-width: 641px) {
    .ec-layoutRole .ec-layoutRole__contents {
        width: 100%;
        max-width: var(--kinema-layout-max);
        margin-left: auto;
        margin-right: auto;
        padding-top: var(--kinema-page-top);
        padding-bottom: var(--kinema-page-bottom);
        box-sizing: border-box;
    }

    .ec-layoutRole .ec-layoutRole__contents > .ec-layoutRole__main,
    .ec-layoutRole .ec-layoutRole__contents > .ec-layoutRole__mainWithColumn,
    .ec-layoutRole .ec-layoutRole__contents > .ec-layoutRole__mainBetweenColumn,
    .ec-layoutRole .ec-layoutRole__contents > .ec-layoutRole__left,
    .ec-layoutRole .ec-layoutRole__contents > .ec-layoutRole__right {
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
        box-sizing: border-box;
    }

    /* Prevent a first/last child margin from extending the requested page gap. */
    .ec-layoutRole .ec-layoutRole__contents > main > :first-child,
    .ec-layoutRole .ec-layoutRole__contents > .ec-layoutRole__main > :first-child,
    .mypage .ec-layoutRole__main > :first-child {
        margin-top: 0;
    }
    .ec-layoutRole .ec-layoutRole__contents > main > :last-child,
    .ec-layoutRole .ec-layoutRole__contents > .ec-layoutRole__main > :last-child,
    .mypage .ec-layoutRole__main > :last-child {
        margin-bottom: 0;
    }

    /* Standard EC-CUBE component gutters are normalized here so title bars,
       grids and panels share the actual main-column width. */
    .ec-layoutRole__contents > main .ec-role,
    .ec-layoutRole__contents > main .ec-contactRole,
    .ec-layoutRole__contents > main .ec-searchnavRole,
    .ec-layoutRole__contents > main .ec-shelfRole,
    .ec-layoutRole__contents > main .ec-productRole,
    .ec-layoutRole__contents > main .ec-mypageRole {
        width: 100%;
        max-width: none;
        padding-left: 0;
        padding-right: 0;
        box-sizing: border-box;
    }

    /* Nested MyPage main is content structure, not another page-layout column. */
    .mypage .ec-layoutRole__main {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    /* Remove framework/custom top offsets from page headings; the 60/30px
       whitespace is already owned by __contents. */
    .mypage .ec-pageHeader h1,
    .mypage .ec-pageHeader .h1 {
        margin: 0 0 20px;
        padding: 0 0 20px;
    }

    .ec-shelfRole h2.title,
    #category_extension_ex_category_icon {
        width: 100%;
        max-width: none;
        box-sizing: border-box;
    }
}

/* 760 / 768 / 785 / 900 / 1023: final top 60, bottom 90; horizontal 40.
   These widths are ONE main column. SideRight is normally hidden. */
@media only screen and (min-width: 641px) and (max-width: 1023px) {
    .ec-layoutRole .ec-layoutRole__contents {
        padding-left: var(--kinema-content-side);
        padding-right: var(--kinema-content-side);
    }

    .ec-layoutRole .ec-layoutRole__main,
    .ec-layoutRole .ec-layoutRole__mainWithColumn,
    .ec-layoutRole .ec-layoutRole__mainBetweenColumn {
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }

    .ec-layoutRole .ec-layoutRole__left,
    .ec-layoutRole .ec-layoutRole__right {
        display: none;
    }

}

/* 1024 and normal PC: final top 30, bottom 90.
   Pages that actually contain SideRight are a 2-column layout.
   If SideRight is absent, CSS cannot invent the missing EC-CUBE block; the
   page remains full-width and Layout settings must be corrected separately. */
@media only screen and (min-width: 1024px) {
    .ec-layoutRole .ec-layoutRole__contents {
        display: flex;
        flex-wrap: nowrap;
        align-items: flex-start;
        padding-top: var(--kinema-page-top-pc);
        padding-left: 0;
        padding-right: 0;
        column-gap: var(--kinema-column-gap-pc);
    }

    .ec-layoutRole .ec-layoutRole__main,
    .ec-layoutRole .ec-layoutRole__mainWithColumn,
    .ec-layoutRole .ec-layoutRole__mainBetweenColumn {
        margin-left: 0;
        margin-right: 0;
    }

    .ec-layoutRole .ec-layoutRole__contents:has(> .ec-layoutRole__right) > .ec-layoutRole__main,
    .ec-layoutRole .ec-layoutRole__contents:has(> .ec-layoutRole__right) > .ec-layoutRole__mainWithColumn {
        width: calc(100% - var(--kinema-side-width) - var(--kinema-column-gap-pc));
    }
    .ec-layoutRole .ec-layoutRole__contents:has(> .ec-layoutRole__left):has(> .ec-layoutRole__right) > .ec-layoutRole__mainBetweenColumn {
        width: calc(100% - (var(--kinema-side-width) * 2) - (var(--kinema-column-gap-pc) * 2));
    }

    .ec-layoutRole .ec-layoutRole__left,
    .ec-layoutRole .ec-layoutRole__right {
        display: block;
        width: var(--kinema-side-width);
        flex: 0 0 var(--kinema-side-width);
    }
}


/*
 * 1024〜1199:
 * 1024レスポンシブではコンテンツが左右いっぱいに見えるため、
 * 外側contents自身に左右30pxの内側余白を持たせる。
 * main / side / column-gap の計算は既存のflex構造に任せる。
 * 1200px以上の通常PCレイアウトは変更しない。
 */
@media only screen and (min-width: 1024px) and (max-width: 1199px) {
    .ec-layoutRole .ec-layoutRole__contents {
        padding-left: 30px;
        padding-right: 30px;
    }
}


/*
 * PRODUCT DETAIL / 760〜1199
 *
 * 実DOM確認済み:
 * .ec-layoutRole__mainTop の直下は
 *   1) .z_product_detail.sp
 *   2) #productcartarea.sp
 * の2要素だけ。
 *
 * 768px以上では共通 .sp { display:none!important; } が効くため、
 * 商品詳細ページのこの2要素だけを限定して表示へ戻す。
 * 汎用 .sp の挙動は変更しない。
 *
 * 1024〜1199も同じレスポンシブ帯として扱い、
 * 1200px以上のPC表示には影響させない。
 */
@media only screen and (min-width: 760px) and (max-width: 1199px) {
    #page_product_detail .ec-layoutRole__mainTop {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 20px;
        align-items: start;
    }

    #page_product_detail .ec-layoutRole__mainTop > .z_product_detail,
    #page_product_detail .ec-layoutRole__mainTop > #productcartarea {
        display: block!important;
        width: 100%;
        max-width: none;
        min-width: 0;
        margin: 0;
        box-sizing: border-box;
    }
}

/* ==========================================================================
   2. HEADER — mobile / tablet / PC
   ========================================================================== */

/*
 * 760以下:
 * SPヘッダーは .ec-headerNaviRole（左右ボタン群）と .ec-headerRole（ロゴ）が
 * 縦に兄弟配置されているため、そのままだとボタン群の高さが白エリア全体へ加算される。
 *
 * 左右ボタン群を通常フローから外して白エリア上に重ね、
 * ロゴは白エリアそのもの（144px）の中央へ配置する。
 * ボタン自体の位置・大きさは変更しない。
 */
@media only screen and (max-width: 767px) {
    .ec-layoutRole__header .sp {
        position: relative;
    }

    .ec-layoutRole__header .sp > .ec-headerNaviRole {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 10;
        box-sizing: border-box;
        background: transparent;
        pointer-events: none;
    }

    .ec-layoutRole__header .sp > .ec-headerNaviRole .ec-headerNaviRole__left,
    .ec-layoutRole__header .sp > .ec-headerNaviRole .ec-headerNaviRole__right {
        pointer-events: auto;
    }

    .ec-layoutRole__header .sp > .ec-headerRole {
        position: relative;
        height: 144px;
        min-height: 144px;
        padding-top: 0;
        box-sizing: border-box;
    }

    .ec-layoutRole__header .sp > .ec-headerRole h1 {
        position: absolute;
        top: 50%;
        left: 50%;
        margin: 0;
        transform: translate(-50%, -50%);
    }
}

/*
 * FLASH AREA / タイトル画像
 *
 * 760〜900:
 * 旧CSSでは760以下で .logo が display:none、
 * 768/785/900では960px固定幅のため右側が画面外へずれていた。
 *
 * タイトル画像は常に表示し、右端をウィンドウ右端から20pxに固定。
 * 760は背景位置を変更しない。
 * 768〜900は、900px時の背景構図を基準に、狭くなる分だけ背景を左へ移動。
 * これにより右側にタイトル画像用の黒い領域を確保する。
 */
@media only screen and (max-width: 900px) {
    #flasharea {
        position: relative;
    }

    #flasharea .logo {
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
        margin: 0;
        overflow: visible;
        text-align: initial;
    }

    #flasharea .logo img {
        position: absolute;
        top: 0;
        right: 20px;
        width: auto;
        height: 100%;
        max-width: none;
    }
}

/*
 * 768〜900:
 * 背景画像を横方向へずらす処理はいったん外し、
 * flashareaの高さに対して背景画像を高さ100%・幅自動・左揃えで表示する。
 *
 * 768 / 785 = 160px
 * 786〜900 = 160pxから220pxへ連続的に拡大
 * 900 = 220px
 */
@media only screen and (min-width: 768px) and (max-width: 785px) {
    div#flasharea {
        height: 160px;
        background-size: auto 100%;
        background-position: center top;
        background-repeat: no-repeat;
    }
}

@media only screen and (min-width: 786px) and (max-width: 900px) {
    div#flasharea {
        height: calc(160px + (100vw - 785px) * 0.521739);
        background-size: auto 100%;
        /*
         * 実画面確認値:
         * 785 = center(0px)
         * 900 = centerから左へ40px
         */
        background-position: calc(50% - (100vw - 785px) * 0.347826) top;
        background-repeat: no-repeat;
    }
}

/*
 * 768px以上 共通:
 * 上段サブメニューは文字だけ2px下げ、
 * 左の縦棒は逆方向へ2px戻して元位置を維持する。
 * 768 / 785 / 900 / 1023 / 1024 / 1200以上で共通。
 */
@media only screen and (min-width: 768px) {
    .z-ec-header-wrap-r .z-header-navi-001 li {
        transform: translateY(2px);
    }

    .z-ec-header-wrap-r .z-header-navi-001 li a::before {
        transform: translateY(-2px);
    }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .z-ec-header-wrap {
        display: block;
        width: calc(100% - (var(--kinema-content-side) * 2));
        max-width: 960px;
        margin: 0 auto 20px;
        padding: 0;
        box-sizing: border-box;
    }
    .z-ec-header-wrap-l {
        width: 100%;
        text-align: center;
    }
    .z-ec-header-wrap-l h1 {
        width: 160px;
        margin: 0 auto;
    }
    .z-ec-header-wrap-l h1 a {
        display: block;
    }
    .z-ec-header-wrap-r {
        width: 100%;
        margin: 15px 0 0;
        text-align: center;
    }
    .z-ec-header-wrap-r ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .z-ec-header-wrap-r ul li a { color: #222; }
    .z-ec-header-wrap-r .z-header-navi-001 {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        gap: 18px;
        width: 100%;
        margin: 0 0 16px;
    }
    .z-ec-header-wrap-r .z-header-navi-001 li {
        flex: 0 1 auto;
        position: relative;
        padding-left: 10px;
        font-family: 'Noto Serif JP', serif;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: .08em;
        white-space: nowrap;
    }
    .z-ec-header-wrap-r .z-header-navi-001 li a::before {
        content: '';
        position: absolute;
        left: 0;
        width: 4px;
        height: 22px;
        background: #024a75;
    }
    .z-ec-header-wrap-r .z-header-navi-001 li:nth-child(4) a::before,
    .z-ec-header-wrap-r .z-header-navi-001 li:nth-child(5) a::before { background:#8a2102; }

    .z-ec-header-wrap-r .z-header-navi-002 {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 18px;
        width: 100%;
        margin: 0;
    }
    .z-ec-header-wrap-r .z-header-navi-002 > li {
        position: relative;
        padding-left: 8px;
        font-size: 12px;
        white-space: nowrap;
    }
    .z-ec-header-wrap-r .z-header-navi-002 > li::before {
        content: '|';
        position: absolute;
        left: -4px;
    }
    .z-ec-header-wrap-r .z-header-navi-002 > li:last-child::before { content:none; }
    .z-ec-header-wrap-r .z-header-navi-002 .ec-headerNaviRole__search {
        width: 280px;
        flex: 0 0 280px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 785px) {
    .z-ec-header-wrap {
        margin-bottom: 25px;
    }

    /*
     * ロゴ: ユーザーの試験値 margin-top:10 / margin-bottom:-10 と
     * 同じ視覚移動を、レイアウト高を変えない transform で行う。
     */
    .z-ec-header-wrap-l h1 img {
        transform: translateY(10px);
    }

    /* 上段サブメニュー */
    .z-ec-header-wrap-r .z-header-navi-001 {
        gap: 25px;
        margin-bottom: 20px;
    }
    .z-ec-header-wrap-r .z-header-navi-001 li {
        padding-left: 10px;
        font-size: 12px;
        letter-spacing: .2em;
    }

    /*
     * 下段メニュー:
     * 2行の左メニュー + 右検索の構造は維持。
     * 左端は上段「買い物カゴ」の青バー、
     * 右端は上段「お問い合わせ」の右端に視覚的に合わせる。
     */
    .z-ec-header-wrap-r .z-header-navi-002 {
        display: grid;
        grid-template-columns: max-content max-content minmax(250px, 1fr);
        grid-template-rows: auto auto;
        column-gap: 13px;
        row-gap: 2px;
        align-items: center;
        justify-content: stretch;
        padding-left: 18px;
        padding-right: 7px;
        box-sizing: border-box;
    }
    .z-ec-header-wrap-r .z-header-navi-002 > li:nth-child(1) { grid-column:1; grid-row:1; }
    .z-ec-header-wrap-r .z-header-navi-002 > li:nth-child(2) { grid-column:2; grid-row:1; }
    .z-ec-header-wrap-r .z-header-navi-002 > li:nth-child(3) { grid-column:1; grid-row:2; }
    .z-ec-header-wrap-r .z-header-navi-002 > li:nth-child(4) { grid-column:2; grid-row:2; }
    .z-ec-header-wrap-r .z-header-navi-002 > li:last-child {
        grid-column:3;
        grid-row:1 / span 2;
        width:100%;
        max-width:300px;
        justify-self:end;
    }
}

/*
 * 785pxだけ:
 * 上段5項目は内容幅がほぼ固定なので中央に約655pxで収まる。
 * 下段も同じ幅・中央基準にして、
 * 左端（| HOME群）と上段「買い物カゴ」の左端、
 * 右端（検索）と上段「お問い合わせ」の右端を揃える。
 * 768px側の既に合っている配置は変更しない。
 */
@media only screen and (min-width: 785px) and (max-width: 785px) {
    .z-ec-header-wrap-r .z-header-navi-002 {
        /*
         * D2k10基準（655px中央）から、
         * キャプチャ上の +3px / +20px をCSS pxへ換算して補正。
         * 左端 +1.5 CSS px、右端 +10 CSS px。
         */
        width: 663.5px;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding-left: 0;
        padding-right: 0;
        transform: translateX(5.75px);
    }
}

/*
 * 900 / 1023 共通調整:
 * ブラウザ上で確認した位置関係を、専用レンジで正式化。
 * ロゴ画像はレイアウト高を変えないtransformで10px下へ。
 */
@media only screen and (min-width: 900px) and (max-width: 1023px) {
    /*
     * ロゴを視覚的に10px下げた分だけ、
     * ロゴと上段サブメニューの見える間隔が10px狭くなる。
     * wrapper全体の下余白ではなく、ロゴ列の直後に10pxを追加する。
     */
    .z-ec-header-wrap-l {
        margin-bottom: 10px;
    }

    .z-ec-header-wrap-l h1 img {
        transform: translateY(10px);
    }

    .z-ec-header-wrap-r {
        margin-top: 0;
    }

    .z-ec-header-wrap-r .z-header-navi-001 {
        gap: 30px;
    }

    .z-ec-header-wrap-r .z-header-navi-001 li {
        letter-spacing: .2em;
    }
}

@media only screen and (min-width: 1024px) {
    .z-ec-header-wrap {
        display: flex;
        width: 100%;
        max-width: 1080px;
        margin: auto;
        padding: 0 20px 0 0;
        box-sizing: border-box;
    }
    .z-ec-header-wrap-l { width:160px; }
    .z-ec-header-wrap-l h1 { margin:0; }
    .z-ec-header-wrap-l h1 a { display:block; }
    .z-ec-header-wrap-r { width:calc(100% - 160px); margin:20px 0 0; }
    .z-ec-header-wrap-r ul { list-style:none; margin:0; padding:0; }
    .z-ec-header-wrap-r ul li a { color:#222; }
    .z-ec-header-wrap-r .z-header-navi-001,
    .z-ec-header-wrap-r .z-header-navi-002 {
        display:flex; justify-content:space-between; align-items:center; max-width:880px; width:100%;
    }
    .z-ec-header-wrap-r .z-header-navi-001 { margin:0 0 20px; }
    .z-ec-header-wrap-r .z-header-navi-001 li {
        font-family:'Noto Serif JP',serif; font-size:14px; font-weight:600; letter-spacing:.18em; padding-left:15px; position:relative;
    }
    .z-ec-header-wrap-r .z-header-navi-001 li a::before {
        content:''; width:5px; height:25px; background:#024a75; position:absolute; left:0;
    }
    .z-ec-header-wrap-r .z-header-navi-001 li:nth-child(4) a::before,
    .z-ec-header-wrap-r .z-header-navi-001 li:nth-child(5) a::before { background:#8a2102; }
    .z-ec-header-wrap-r .z-header-navi-002 li { font-size:12px; padding-left:20px; position:relative; }
    .z-ec-header-wrap-r .z-header-navi-002 li::before { content:'|'; left:-2px; position:absolute; }
    .z-ec-header-wrap-r .z-header-navi-002 li:nth-child(4)::after { content:'|'; position:absolute; right:-20px; }
    .z-ec-header-wrap-r .z-header-navi-002 li:last-child::before { content:none; }
    .z-ec-header-wrap-r .z-header-navi-002 .ec-headerNaviRole__search { width:280px; }
}

/*
 * 1024px以上 共通:
 * 1024で確認したコンパクトなPC型ヘッダーを通常PCにも共通化。
 *
 * 下段テキストリンクは justify-content:space-between に任せると、
 * 区切り「|」が次のli側に所属するため左右の空きが非対称になる。
 * そこでリンク4項目は左右8pxの対称paddingで一続きのグループにし、
 * 検索欄だけ margin-left:auto で右端へ送る。
 * これにより「| HOME | 当サイト...」の各縦棒が文字間の中央に揃う。
 */
@media only screen and (min-width: 1024px) {
    .z-ec-header-wrap {
        width: 92%;
    }

    /* 上段：1024で採用した文字間隔をPCにも共通化。 */
    .z-ec-header-wrap-r .z-header-navi-001 li {
        letter-spacing: .1em;
    }

    /* 下段：テキストリンク群と検索欄の役割を明確に分離。 */
    .z-ec-header-wrap-r .z-header-navi-002 {
        justify-content: flex-start;
    }

    .z-ec-header-wrap-r .z-header-navi-002 > li:nth-child(-n+4) {
        flex: 0 0 auto;
        padding-left: 8px;
        padding-right: 8px;
    }

    /* 「|」は各リンクの左境界に置き、左右8pxを同じにする。 */
    .z-ec-header-wrap-r .z-header-navi-002 > li:nth-child(-n+4)::before {
        left: 0;
    }

    /* 4項目目の右端にも同じ基準で区切りを置く。 */
    .z-ec-header-wrap-r .z-header-navi-002 > li:nth-child(4)::after {
        right: 0;
    }

    /* 検索欄はリンク群から独立して右端へ。 */
    .z-ec-header-wrap-r .z-header-navi-002 > li:last-child {
        margin-left: auto;
        padding-left: 0;
        padding-right: 0;
    }
}


/*
 * 1200px以上の通常PC:
 * 1024では92%が適正だが、通常PCでは横に広がりすぎるため83%へ。
 * 下段テキストリンクは左右12pxへ広げ、PCでの詰まり感を緩和する。
 * 1024〜1199は従来の92% / 8pxを維持。
 */
@media only screen and (min-width: 1200px) {
    .z-ec-header-wrap {
        width: 83%;
    }

    .z-ec-header-wrap-r .z-header-navi-002 > li:nth-child(-n+4) {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* ==========================================================================
   3. PRODUCT CARD COMPONENT
   D2d: 実サイト側の既存 p/img 指定も含めて商品カードを完全管理
   ========================================================================== */

.ec-shelfRole {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 1.4;
    color: var(--kinema-text);
}

.ec-shelfGrid {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: 20px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ec-shelfGrid .ec-shelfGrid__item {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: #fff;
    border: var(--kinema-border);
    box-sizing: border-box;
    font-size: 12px;
}

/*
 * カード内の直下要素に残っている旧CSSのmargin/paddingを
 * ここで一度ゼロにする。これにより「旧10px + 新30px」の加算を防ぐ。
 */
body .ec-layoutRole__contents .ec-shelfGrid .ec-shelfGrid__item > a {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: inherit;
    text-decoration: none;
}

body .ec-layoutRole__contents .ec-shelfGrid .ec-shelfGrid__item > a > p,
body .ec-layoutRole__contents .ec-shelfGrid .ec-shelfGrid__item > a > div {
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
}

/* 画像ブロックはカード枠の内側いっぱい。 */
body .ec-layoutRole__contents .ec-shelfGrid .ec-shelfGrid__item > a > p.ec-shelfGrid__item-image {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-align: center;
}

body .ec-layoutRole__contents .ec-shelfGrid .ec-shelfGrid__item > a > p.ec-shelfGrid__item-image > img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
    padding: 0;
    object-fit: contain;
}


/*
 * EC-CUBE標準 shelf.css の
 *   .ec-shelfGrid .ec-shelfGrid__item:nth-child(even) { padding: 0 16px; }
 * をここで明示的に解除する。
 * DevToolsで実際に有効になっていることを確認済み。
 * odd/even両方を0にして、全カードを同じ基準へ戻す。
 */
body .ec-layoutRole__contents .ec-shelfGrid .ec-shelfGrid__item:nth-child(odd),
body .ec-layoutRole__contents .ec-shelfGrid .ec-shelfGrid__item:nth-child(even) {
    padding: 0;
}

/* 文字・ボタン領域だけに適用する最終余白。 */
@media only screen and (min-width: 641px) and (max-width: 767px) {
    :root { --kinema-card-inset: 10px; }

    .ec-shelfGrid .ec-shelfGrid__item {
        width: calc((100% - 60px) / 4);
        /*
         * 旧EqualHeight系JSが付けたinline heightを4列時だけ解除。
         * flexのstretchで、その行の最も高いカードに揃える。
         */
        height: auto !important;
        align-self: stretch;
    }
}
@media only screen and (max-width: 640px) {
    :root { --kinema-card-inset: 20px; }
    .ec-shelfGrid .ec-shelfGrid__item { width: calc((100% - 40px) / 3); }
}
@media only screen and (max-width: 500px) {
    :root { --kinema-card-inset: 30px; }
    .ec-shelfGrid .ec-shelfGrid__item { width: calc((100% - 20px) / 2); }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    :root { --kinema-card-inset: 30px; }
    .ec-shelfGrid .ec-shelfGrid__item { width: calc((100% - 20px) / 2); }
}
@media only screen and (min-width: 1024px) and (max-width: 1199px) {
    :root { --kinema-card-inset: 20px; }
    .ec-shelfGrid .ec-shelfGrid__item { width: calc((100% - 40px) / 3); }
}
@media only screen and (min-width: 1200px) {
    :root { --kinema-card-inset: 10px; }

    .ec-shelfGrid .ec-shelfGrid__item {
        width: calc((100% - 60px) / 4);
        /*
         * PC4列もinline heightを解除し、内容量ベースで行高を決める。
         */
        height: auto !important;
        align-self: stretch;
    }
}

/*
 * HOME / 商品一覧のタイトル。
 * 直下 p に対して高い詳細度で最終余白を確定する。
 */
body .ec-layoutRole__contents .ec-shelfGrid .ec-shelfGrid__item > a > p.recommend_title,
body#page_product_list .ec-layoutRole__contents .ec-shelfGrid .ec-shelfGrid__item > a > p.p-name,
#RelatedProduct-product_area .ec-shelfGrid__item > a > .p-name,
#page_mypage_favorite .ec-favoriteRole__itemTitle {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    width: auto;
    min-width: 0;
    height: auto;
    margin: 20px var(--kinema-card-inset) 8px;
    padding: 0 0 8px;
    overflow: visible;
    border: 0;
    border-bottom: 1px dotted #777;
    background: none;
    box-sizing: border-box;
    color: var(--kinema-text);
    font-weight: bold;
    line-height: 1.45;
    text-align: left;
}

/* 長いタイトルではアイコンを上揃え。 */
body .ec-layoutRole__contents .ec-shelfGrid .ec-shelfGrid__item > a > p.recommend_title > img,
body#page_product_list .ec-layoutRole__contents .ec-shelfGrid .ec-shelfGrid__item > a > p.p-name > img,
#RelatedProduct-product_area .ec-shelfGrid__item > a > .p-name > img,
#page_mypage_favorite .ec-favoriteRole__itemTitle > img {
    display: block;
    flex: 0 0 16px;
    width: 16px;
    max-width: 16px;
    height: 16px;
    /*
     * タイトル1行目のline-heightに対して16pxアイコンを常に縦中央へ。
     * 固定1pxではなくlh単位を使うため、font-size変更後も位置が追従する。
     */
    margin: max(0px, calc((1lh - 16px) / 2)) 0 0;
    padding: 0;
    object-fit: contain;
}

#page_product_list .p-name-text,
#RelatedProduct-product_area .related_name,
#page_mypage_favorite .ec-favoriteRole__itemTitle a {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    color: var(--kinema-text);
}

/* 説明本文にも「最終」左右余白を直接指定。 */
body .ec-layoutRole__contents .ec-shelfGrid .ec-shelfGrid__item > a > p.recommend_title + p,
body#page_product_list .ec-layoutRole__contents .ec-shelfGrid .ec-shelfGrid__item > a > p.p-name + p,
#RelatedProduct-product_area .contents,
#page_mypage_favorite .ec-favoriteRole__itemPrice {
    display: block;
    width: auto;
    margin: 0;
    padding: 0 var(--kinema-card-inset) 20px;
    border: 0;
    box-sizing: border-box;
    color: var(--kinema-text);
    line-height: 1.65;
    text-align: left;
}

body#page_product_list .ec-layoutRole__contents .ec-shelfGrid .ec-shelfGrid__item > a > p.p-name,
body .ec-layoutRole__contents .ec-shelfGrid .ec-shelfGrid__item > a > p.recommend_title,
#RelatedProduct-product_area a .p-name,
#page_mypage_favorite .ec-favoriteRole__itemTitle,
#page_mypage_favorite .ec-favoriteRole__itemTitle a {
    color: var(--kinema-text);
    text-decoration: none;
}

#RelatedProduct-product_area .contents .ec-productRole__tag,
#page_product_list .ec-shelfGrid__item .ec-productRole__tag {
    color: #f00;
}

#page_product_list .ec-shelfGrid__item > form {
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
#page_product_list .ec-shelfGrid__item > form .ec-productRole__actions {
    width: 100%;
    margin: 0;
    padding: 0 var(--kinema-card-inset);
    box-sizing: border-box;
}

#page_product_list .ec-shelfGrid__item > .ec-productRole__btn {
    width: 100%;
    margin-top: auto;
    /* 2列時の最終値: 上22px / 左右30px / 下15px */
    padding: 22px var(--kinema-card-inset) 15px;
    box-sizing: border-box;
}
#page_product_list .ec-shelfGrid__item > .ec-productRole__btn .ec-blockBtn--action {
    width: 100%;
    max-width: none;
    min-width: 0;
    height: 56px;
    min-height: 56px;
    margin: 0 auto;
    padding: 0 34px 0 8px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 54px;
    letter-spacing: 0;
    white-space: nowrap;
}

/*
 * 列数別のボタン周辺余白は、この位置で最終確定する。
 * 以前はmedia側のpadding-bottom指定より後にbaseのpadding shorthandがあり、
 * 0px / 5pxが15pxへ戻されていた。
 */
@media only screen and (min-width: 1024px) and (max-width: 1199px) {
    #page_product_list .ec-shelfGrid__item > .ec-productRole__btn {
        /* 3列: 上22px / 左右20px / 下5px */
        padding: 22px var(--kinema-card-inset) 5px;
    }
}

/*
 * 4列専用:
 * - 説明文側に既に20pxの下余白があるため、ボタンwrapper上paddingは0。
 * - wrapper下paddingも指定どおり0。
 * - margin-top:autoは残し、同じ行のボタン位置は下揃えにする。
 * - ボタン高さは56px → 36px。
 */
@media only screen and (min-width: 641px) and (max-width: 767px),
       only screen and (min-width: 1200px) {
    #page_product_list .ec-shelfGrid__item > .ec-productRole__btn {
        padding: 0 var(--kinema-card-inset) 0;
    }

    #page_product_list .ec-shelfGrid__item > .ec-productRole__btn .ec-blockBtn--action {
        height: 36px;
        min-height: 36px;
        line-height: 34px;
        font-size: 12px;
        padding-left: 4px;
        padding-right: 30px;
    }
}


/* --------------------------------------------------------------------------
   商品カード: 768-1024付近の文字サイズ調整
   760 / 1200px以上の4列表示は現状維持。
   既存CSSより詳細度を上げ、商品カード管理領域の最後で最終値を確定する。
   -------------------------------------------------------------------------- */

/* 2列・前半: 768 / 785 */
@media only screen and (min-width: 768px) and (max-width: 899px) {
    body .ec-layoutRole__contents .ec-shelfGrid .ec-shelfGrid__item > a > p.recommend_title,
    body#page_product_list .ec-layoutRole__contents .ec-shelfGrid .ec-shelfGrid__item > a > p.p-name,
    #RelatedProduct-product_area .ec-shelfGrid__item > a > .p-name,
    #page_mypage_favorite .ec-favoriteRole__itemTitle {
        font-size: 17px;
    }

    body .ec-layoutRole__contents .ec-shelfGrid .ec-shelfGrid__item > a > p.recommend_title + p,
    body#page_product_list .ec-layoutRole__contents .ec-shelfGrid .ec-shelfGrid__item > a > p.p-name + p,
    #RelatedProduct-product_area .contents,
    #page_mypage_favorite .ec-favoriteRole__itemPrice {
        font-size: 14px;
    }

    #RelatedProduct-product_area .contents .ec-productRole__tag,
    #page_product_list .ec-shelfGrid__item .ec-productRole__tag {
        font-size: 12px;
    }

    #page_product_list .ec-shelfGrid__item > .ec-productRole__btn .ec-blockBtn--action {
        font-size: 15px;
    }
}

/* 2列・後半: 900 / 1023 */
@media only screen and (min-width: 900px) and (max-width: 1023px) {
    body .ec-layoutRole__contents .ec-shelfGrid .ec-shelfGrid__item > a > p.recommend_title,
    body#page_product_list .ec-layoutRole__contents .ec-shelfGrid .ec-shelfGrid__item > a > p.p-name,
    #RelatedProduct-product_area .ec-shelfGrid__item > a > .p-name,
    #page_mypage_favorite .ec-favoriteRole__itemTitle {
        font-size: 18px;
    }

    body .ec-layoutRole__contents .ec-shelfGrid .ec-shelfGrid__item > a > p.recommend_title + p,
    body#page_product_list .ec-layoutRole__contents .ec-shelfGrid .ec-shelfGrid__item > a > p.p-name + p,
    #RelatedProduct-product_area .contents,
    #page_mypage_favorite .ec-favoriteRole__itemPrice {
        font-size: 15px;
    }

    #RelatedProduct-product_area .contents .ec-productRole__tag,
    #page_product_list .ec-shelfGrid__item .ec-productRole__tag {
        font-size: 13px;
    }

    #page_product_list .ec-shelfGrid__item > .ec-productRole__btn .ec-blockBtn--action {
        font-size: 16px;
    }
}

/* 3列: 1024から1199。4列より大きく、2列より控えめ。 */
@media only screen and (min-width: 1024px) and (max-width: 1199px) {
    body .ec-layoutRole__contents .ec-shelfGrid .ec-shelfGrid__item > a > p.recommend_title,
    body#page_product_list .ec-layoutRole__contents .ec-shelfGrid .ec-shelfGrid__item > a > p.p-name,
    #RelatedProduct-product_area .ec-shelfGrid__item > a > .p-name,
    #page_mypage_favorite .ec-favoriteRole__itemTitle {
        font-size: 15px;
    }

    body .ec-layoutRole__contents .ec-shelfGrid .ec-shelfGrid__item > a > p.recommend_title + p,
    body#page_product_list .ec-layoutRole__contents .ec-shelfGrid .ec-shelfGrid__item > a > p.p-name + p,
    #RelatedProduct-product_area .contents,
    #page_mypage_favorite .ec-favoriteRole__itemPrice {
        font-size: 14px;
    }

    #RelatedProduct-product_area .contents .ec-productRole__tag,
    #page_product_list .ec-shelfGrid__item .ec-productRole__tag {
        font-size: 12px;
    }

    #page_product_list .ec-shelfGrid__item > .ec-productRole__btn .ec-blockBtn--action {
        font-size: 14px;
    }
}

/* ==========================================================================
   END PRODUCT CARD COMPONENT
   ========================================================================== */

/* ==========================================================================
   4. PRODUCT DETAIL / PURCHASE UI
   ========================================================================== */

/* Preserve aspect ratio at every breakpoint, not only <=767. */
.ec-productRole__description .description_area img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* Keep the side purchase UI usable wherever SideRight exists.
   The exact gallery -> detail/purchase -> description insertion point is a
   Layout/Twig responsibility and is intentionally not faked here. */
#productcartarea .ec-productRole__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}
#productcartarea .ec-productRole__btn .ec-blockBtn--action,
#productcartarea .ec-productRole__btn #favorite.ec-blockBtn--cancel {
    width: 100%;
    max-width: 240px;
    min-height: 56px;
    height: auto;
    margin: 0 auto;
    box-sizing: border-box;
}
#productcartarea .ec-productRole__btn .ec-blockBtn--action {
    padding-left: 20px;
    padding-right: 42px;
    font-size: 18px;
    line-height: 1.25;
    text-align: left;
    background-image: url(../img/side/item_cartin_b.gif);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: contain;
    border: none;
}
#productcartarea .ec-productRole__btn .ec-blockBtn--action:hover {
    background-image:url(../img/side/item_cartin_b_on.gif);
    border:none;
}
#productcartarea .ec-productRole__btn #favorite.ec-blockBtn--cancel {
    padding: 8px 10px;
    font-size: 14px;
    line-height: 1.25;
    letter-spacing: 0;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
}
#productcartarea .ec-productRole__btn #favorite.ec-blockBtn--cancel::after { content:none; }

/*
 * 商品詳細：お気に入り登録済み状態
 * EC-CUBE側で disabled が付いた後も文字が沈まないよう、
 * 商品詳細のお気に入りボタンだけ明示的に「押された状態」へ。
 * 全幅共通。
 */
#page_product_detail #productcartarea #favorite.ec-blockBtn--cancel:disabled,
#page_product_detail #productcartarea #favorite.ec-blockBtn--cancel[disabled] {
    color: #555;
    -webkit-text-fill-color: #555;
    border-color: #999;
    background: linear-gradient(to bottom, #d2d2d2 0%, #bebebe 100%);
    box-shadow:
        inset 0 3px 6px rgba(0, 0, 0, .18),
        inset 0 -1px 0 rgba(255, 255, 255, .45);
    opacity: 1;
    cursor: default;
}

/* disabled中にhover/focus色へ戻らないよう同じ見た目を維持 */
#page_product_detail #productcartarea #favorite.ec-blockBtn--cancel:disabled:hover,
#page_product_detail #productcartarea #favorite.ec-blockBtn--cancel:disabled:focus,
#page_product_detail #productcartarea #favorite.ec-blockBtn--cancel[disabled]:hover,
#page_product_detail #productcartarea #favorite.ec-blockBtn--cancel[disabled]:focus {
    color: #555;
    -webkit-text-fill-color: #555;
    border-color: #999;
    background: linear-gradient(to bottom, #d2d2d2 0%, #bebebe 100%);
    box-shadow:
        inset 0 3px 6px rgba(0, 0, 0, .18),
        inset 0 -1px 0 rgba(255, 255, 255, .45);
    opacity: 1;
    outline: none;
}


@media only screen and (min-width: 641px) and (max-width: 1023px) {
    #page_product_detail #productcartarea {
        margin: 0;
        padding: 30px 20px;
        background: #fff;
        border: var(--kinema-border);
        box-sizing: border-box;
    }
}

/*
 * 商品詳細 購入UI
 *
 * 760px以上はPCも含めて同じコンポーネントデザインを使用する。
 * レイアウト（2列化・白枠・余白）は760〜1199だけに限定し、
 * 1200px以上のSideRight配置そのものは変更しない。
 */
@media only screen and (min-width: 760px) {

    /*
     * 規格あり商品だけactionsを表示。
     * 規格なし商品は数量欄のみ（数量自体は非表示）なので空白を残さない。
     */
    #page_product_detail #productcartarea .ec-productRole__actions:has(.ec-select) {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        min-width: 0;
        margin: 0 0 10px;
        padding: 0;
        box-sizing: border-box;
    }

    #page_product_detail #productcartarea .ec-productRole__actions:not(:has(.ec-select)) {
        display: none;
    }

    /*
     * 規格UI：旧dropdown画像を使わずCSS表示。
     * JS生成DOMとinline widthは維持したまま、見た目だけ240×56pxに正規化。
     */
    #page_product_detail #productcartarea .ec-productRole__actions .ec-select {
        position: relative;
        display: block;
        float: none;
        width: 240px;
        min-width: 0;
        max-width: 240px;
        height: 56px;
        margin: 0;
        padding: 0;
        overflow: visible;
        box-sizing: border-box;
    }

    #page_product_detail #productcartarea .ec-select .selectbox,
    #page_product_detail #productcartarea .ec-select .selectboxopen {
        position: relative;
        float: none;
        width: 240px;
        min-width: 0;
        height: 56px;
        margin: 0;
        padding: 0;
        background: none;
        box-sizing: border-box;
    }

    #page_product_detail #productcartarea .ec-select .selectbox > ul,
    #page_product_detail #productcartarea .ec-select .selectboxopen > ul {
        width: 100%!important;
        height: 56px;
        margin: 0;
        padding: 0;
        border: 1px solid #ccc;
        border-radius: 3px;
        background: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
        list-style: none;
        box-sizing: border-box;
        cursor: pointer;
    }

    #page_product_detail #productcartarea .ec-select .selectbox > ul > li,
    #page_product_detail #productcartarea .ec-select .selectboxopen > ul > li {
        display: flex;
        align-items: center;
        width: 100%;
        height: 54px;
        margin: 0;
        padding: 0 42px 0 16px;
        border: 0;
        background: none;
        color: #555;
        font-size: 14px;
        font-family: "Noto Serif JP", serif;
        font-weight: normal;
        letter-spacing: .05em;
        line-height: 1.4;
        white-space: nowrap;
        box-sizing: border-box;
        cursor: pointer;
    }

    #page_product_detail #productcartarea .ec-select .selectbox > ul > li:empty::before,
    #page_product_detail #productcartarea .ec-select .selectboxopen > ul > li:empty::before {
        content: "規格を選んで下さい";
    }

    #page_product_detail #productcartarea .ec-select .selectbox::after,
    #page_product_detail #productcartarea .ec-select .selectboxopen::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 16px;
        width: 0;
        height: 0;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 8px solid #555;
        transform: translateY(-35%);
        pointer-events: none;
    }

    #page_product_detail #productcartarea .ec-select .selectboxopen::after {
        border-top: 0;
        border-bottom: 8px solid #555;
        transform: translateY(-65%);
    }

    #page_product_detail #productcartarea .ec-select .selectbox:hover > ul,
    #page_product_detail #productcartarea .ec-select .selectboxopen:hover > ul {
        border-color: #a14d33;
    }

    #page_product_detail #productcartarea .ec-select .selectbox:hover::after {
        border-top-color: #a14d33;
    }

    #page_product_detail #productcartarea .ec-select .selectboxopen:hover::after {
        border-bottom-color: #a14d33;
    }

    /* 規格候補パネル */
    #page_product_detail #productcartarea .ec-select .selectboxoptions_wrap {
        position: absolute;
        top: 66px;
        left: 0;
        z-index: 50;
        width: 240px;
        min-width: 0;
        margin: 0;
        padding: 0;
        background: transparent;
        box-sizing: border-box;
    }

    #page_product_detail #productcartarea .ec-select .selectboxoptions_radio,
    #page_product_detail #productcartarea .ec-select .selectboxoptions_check {
        width: 240px!important;
        margin: 0;
        padding: 0;
        border: 1px solid #ccc;
        border-radius: 3px;
        background: #fff;
        list-style: none;
        box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
        overflow: hidden;
        box-sizing: border-box;
    }

    #page_product_detail #productcartarea .ec-select .selectboxoptions_radio > li,
    #page_product_detail #productcartarea .ec-select .selectboxoptions_check > li {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 40px;
        height: auto;
        margin: 0;
        padding: 8px 16px;
        border: 0;
        border-bottom: 1px solid #ddd;
        background: #fff;
        background-image: none;
        color: #555;
        font-size: 14px;
        font-family: "Noto Serif JP", serif;
        font-weight: normal;
        line-height: 1.4;
        text-align: left;
        box-sizing: border-box;
        cursor: pointer;
    }

    #page_product_detail #productcartarea .ec-select .selectboxoptions_radio > li:last-child,
    #page_product_detail #productcartarea .ec-select .selectboxoptions_check > li:last-child {
        border-bottom: 0;
    }

    #page_product_detail #productcartarea .ec-select .selectboxoptions_radio > li.hover,
    #page_product_detail #productcartarea .ec-select .selectboxoptions_radio > li.selected,
    #page_product_detail #productcartarea .ec-select .selectboxoptions_check > li.hover,
    #page_product_detail #productcartarea .ec-select .selectboxoptions_check > li.selected {
        background: #e5e5e5;
        background-image: none;
        color: #333;
    }

    #page_product_detail #productcartarea .ec-select .selectboxoptions_radio > li.selected_disable,
    #page_product_detail #productcartarea .ec-select .selectboxoptions_check > li.selected_disable {
        background: #f2f2f2;
        background-image: none;
        color: #999;
        cursor: default;
    }

    #page_product_detail #productcartarea .ec-select .selectboxfoot {
        display: none;
    }

    /*
     * カート / お気に入り
     * 旧350px min-widthを解除し、SideRightでも親幅に収める。
     */
    #page_product_detail #productcartarea .ec-productRole__btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        min-width: 0;
        max-width: none;
        margin-top: 0;
        margin-bottom: 0;
        box-sizing: border-box;
    }

    #page_product_detail #productcartarea > form + form {
        margin-top: 10px;
    }

    #page_product_detail #productcartarea .ec-productRole__btn .ec-blockBtn--action,
    #page_product_detail #productcartarea .ec-productRole__btn #favorite.ec-blockBtn--cancel {
        width: 100%;
        max-width: 240px;
        height: 56px;
        min-height: 56px;
        margin-left: 0;
        margin-right: 0;
    }

    /* 旧GIFカートボタンをCSS化 */
    #page_product_detail #productcartarea .ec-productRole__btn .ec-blockBtn--action {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 46px 0 16px;
        border: 1px solid #ccc;
        border-radius: 3px;
        background-image: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
        background-color: #eee;
        color: #555;
        font-size: 14px;
        font-family: "Noto Serif JP", serif;
        letter-spacing: .05em;
        line-height: 1.4;
        text-align: center;
    }

    #page_product_detail #productcartarea .ec-productRole__btn .ec-blockBtn--action::before {
        content: "この作品を買物カゴに入れる";
        display: block;
        white-space: nowrap;
    }

    #page_product_detail #productcartarea .ec-productRole__btn .ec-blockBtn--action::after {
        content: "";
        width: 28px;
        height: 28px;
        right: 12px;
        background-image: url(../img/common/icon_cart.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    #page_product_detail #productcartarea .ec-productRole__btn .ec-blockBtn--action:hover,
    #page_product_detail #productcartarea .ec-productRole__btn .ec-blockBtn--action:focus,
    #page_product_detail #productcartarea .ec-productRole__btn .ec-blockBtn--action:active {
        color: #a14d33;
        border-color: #a14d33;
        background-image: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
        background-color: #eee;
        outline: none;
    }

    #page_product_detail #productcartarea .ec-productRole__btn .ec-blockBtn--action:hover::after,
    #page_product_detail #productcartarea .ec-productRole__btn .ec-blockBtn--action:focus::after,
    #page_product_detail #productcartarea .ec-productRole__btn .ec-blockBtn--action:active::after {
        background-image: url(../img/common/icon_cart_hov.png);
    }
}

/*
 * 760〜1199は購入エリアをメイン内2列表示するレスポンシブレイアウト。
 * PC（1200以上）は既存SideRight配置を維持する。
 */
@media only screen and (min-width: 760px) and (max-width: 1199px) {
    #page_product_detail .ec-layoutRole__mainTop {
        margin-top: 20px;
    }

    #page_product_detail #productcartarea {
        margin: 0;
        padding: 30px 20px;
        background: #fff;
        border: var(--kinema-border);
        box-sizing: border-box;
    }

    #page_product_detail .z_product_detail dl dt,
    #page_product_detail .z_product_detail dl dd {
        transform: translateY(2px);
    }
}


/*
 * PC商品詳細：
 * 左の作品詳細情報ボックスは既存で margin-bottom:30px。
 * 右の購入UIも同じ下余白30pxに揃え、次のサイドブロックとの距離を一致させる。
 */
@media only screen and (min-width: 1200px) {
    #page_product_detail #productcartarea {
        margin-bottom: 30px;
    }
}


/*
 * PC商品詳細情報：
 * 各行のテキストが罫線内でわずかに上寄りに見えるため、
 * 760〜1199で確定済みの補正と同じく文字だけ2px下げる。
 * 行高・罫線・ボックスサイズは変更しない。
 */
@media only screen and (min-width: 1200px) {
    #page_product_detail .z_product_detail dl dt,
    #page_product_detail .z_product_detail dl dd {
        transform: translateY(2px);
    }
}

/* ==========================================================================
   5. MY PAGE
   ========================================================================== */

.mypage .ec-mypageRole {
    width: 100%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    background: transparent;
    border: 0;
    box-sizing: border-box;
}

/* 641-1023: in-content MyPage navigation is the operative responsive menu. */
@media only screen and (min-width: 641px) and (max-width: 1023px) {
    .ec-mypageRole .ec-navlistRole__navlist {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        margin: 0 0 30px;
        padding: 0;
        background: #fff;
        border: var(--kinema-border);
        box-sizing: border-box;
    }
    .ec-mypageRole .ec-navlistRole__item {
        width: 100%;
        margin: 0;
        box-sizing: border-box;
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
    }
    .ec-mypageRole .ec-navlistRole__item:nth-child(2n) { border-right:0; }
    /* Item 4 (お届け先一覧) keeps its lower divider. */
    .ec-mypageRole .ec-navlistRole__item:nth-child(4) { border-bottom:1px solid #ccc; }
    /* Item 5 occupies lower-left; the container border draws the lower edge. */
    .ec-mypageRole .ec-navlistRole__item:nth-child(5) { border-bottom:0; border-right:1px solid #ccc; }
}
/*
 * 1024px以上は右サイドの #mymenuarea を使用するため、
 * コンテンツ内のタブ型サブメニューは表示しない。
 */
@media only screen and (min-width: 1024px) {
    .ec-mypageRole .ec-navlistRole__navlist { display:none; }
}

.mypage .ec-welcomeMsg,
.mypage .ec-favoriteRole__detail,
.mypage .ec-addressRole,
.mypage .ec-withdrawConfirmRole,
.mypage .ec-withdrawRole,
.mypage .ec-editRole .ec-off1Grid {
    width: 100%;
    max-width: none;
    background: var(--kinema-panel-bg);
    border: var(--kinema-border);
    box-sizing: border-box;
}
.mypage .ec-welcomeMsg { padding:40px 20px; }
.mypage .ec-addressRole { padding:25px 30px; text-align:left; }
.mypage .ec-withdrawConfirmRole { padding:0 40px 20px; }
.mypage .ec-withdrawRole { margin:0; padding:0; }

/* Member edit: one 1px outer frame. Inner rows own only separators. */
.mypage .ec-editRole .ec-off1Grid { padding:0; }
.mypage .ec-editRole .ec-borderedDefs { width:100%; margin:0; border:0; }
.mypage .ec-editRole .ec-borderedDefs dl {
    margin:0;
    padding:0;
    border-top:0;
    border-left:0;
    border-right:0;
    border-bottom:1px solid #ccc;
}
.mypage .ec-editRole .ec-borderedDefs dl:last-child { border-bottom:1px solid #ccc; }
.mypage .ec-editRole .ec-borderedDefs dd { border:0; }
.mypage .ec-editRole .ec-RegisterRole__actions { border:0; }
@media only screen and (min-width:768px) {
    .mypage .ec-editRole .ec-borderedDefs dt { border-right:1px solid #ccc; }
}
@media only screen and (max-width:767px) {
    .mypage .ec-editRole .ec-borderedDefs dt { border-right:0; }
    .mypage .ec-editRole .ec-borderedDefs dd { padding:20px 30px 10px; }

    /* 760: 登録ボタンの下だけ、他サイズ同等の余白を確保。 */
    .mypage .ec-editRole .ec-RegisterRole__actions {
        padding-bottom:30px;
    }

    /*
     * 760: お届け先一覧
     * Twig上では .ec-addressRole と .ec-addressList は
     * 同じ .ec-off1Grid__cell 内の兄弟要素。
     * 外枠は .ec-off1Grid に一本化し、上側 .ec-addressRole の
     * 二重枠を解除する。
     */
    #page_mypage_delivery .ec-addressRole {
        border:0;
        box-sizing:border-box;
    }

    /*
     * 登録住所は上側アクション領域と同じ左右30pxの内側余白。
     * 下にも25px空け、外枠と住所行の罫線を密着させない。
     */
    #page_mypage_delivery .ec-addressList {
        width:auto;
        margin:0 30px 25px;
        box-sizing:border-box;
    }

    /*
     * 複数住所では途中の点線は残し、最後だけ消す。
     * 外側 .ec-off1Grid の1px枠を最終下線として使う。
     */
    #page_mypage_delivery .ec-addressList__item:last-child {
        border-bottom:0;
    }

    /*
     * 760: 退会ボックス内の本文左右と最終ボタン下に余白。
     * 上側は既存の内部レイアウトを維持する。
     */
    .mypage .ec-withdrawRole {
        padding:0 20px 20px;
    }
}

/* Favorite page: centered grid and requested panel insets. */
#page_mypage_favorite .ec-favoriteRole__detail { box-sizing:border-box; }

/* 小さい元画像でも、画像ボックスと画像をカード幅100%へ統一。 */
#page_mypage_favorite .ec-favoriteRole__item-image {
    width:100%;
    height:auto;
    margin-left:0;
    margin-right:0;
    box-sizing:border-box;
}
#page_mypage_favorite .ec-favoriteRole__item-image img {
    display:block;
    width:100%;
    max-width:100%;
    height:auto;
    margin:0;
    object-fit:contain;
}

#page_mypage_favorite .ec-favoriteRole__itemList {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    width:100%;
    margin:0;
    padding:0;
}
@media only screen and (min-width:641px) and (max-width:767px) {
    #page_mypage_favorite .ec-favoriteRole__detail { padding:30px; }
    #page_mypage_favorite .ec-favoriteRole__item { width:50%; }
}
@media only screen and (min-width:768px) and (max-width:1022px) {
    #page_mypage_favorite .ec-favoriteRole__detail { padding:15px; }
    #page_mypage_favorite .ec-favoriteRole__item { width:50%; }
}
@media only screen and (min-width:1023px) and (max-width:1023px) {
    #page_mypage_favorite .ec-favoriteRole__detail { padding:20px; }
    #page_mypage_favorite .ec-favoriteRole__item { width:50%; }
}
@media only screen and (min-width:1024px) {
    #page_mypage_favorite .ec-favoriteRole__detail { padding:15px; }
}

/*
 * 768-899: EC-CUBE標準の50% / margin-left:25%では見出し末尾が1文字落ちる。
 * 中央を維持したまま60% / 20%へ広げる。900px以上は標準幅のまま。
 */
@media only screen and (min-width:768px) and (max-width:899px) {
    #page_mypage_withdraw .ec-withdrawRole .ec-off3Grid .ec-off3Grid__cell {
        width:60%;
        margin-left:20%;
    }
}

/* Mypage order/download/withdraw blocks use the actual main width. */
.mypage .ec-orderRole,
.mypage .ec-withdrawRole,
.mypage .ec-withdrawConfirmRole {
    width:100%;
    max-width:none;
    margin-left:0;
    margin-right:0;
}

/* ==========================================================================
   6. DOWNLOAD PAGE
   D2k3: card spacing / title / 900-1023 three-column layout
   ========================================================================== */

#page_sheeb_dlc_downloads .ec-orderRole,
#page_sheeb_dlc_downloads .ec-shelfRole {
    width:100%;
    max-width:none;
    margin-left:0;
    margin-right:0;
    padding-left:0;
    padding-right:0;
    box-sizing:border-box;
}

#page_sheeb_dlc_downloads .download_grid {
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    width:100%;
    margin:0;
    padding:0;
}

/* 基本は2列。最終行に余りが出ても左寄せのまま。 */
#page_sheeb_dlc_downloads .download_grid .download_item {
    width:calc((100% - 20px) / 2);
    margin:0;
    padding:0;
    border:var(--kinema-border);
    box-sizing:border-box;
}

/* 900〜1023だけ3列。1024以上は右サイドがあるため2列へ戻す。 */
@media only screen and (min-width:900px) and (max-width:1023px) {
    #page_sheeb_dlc_downloads .download_grid .download_item {
        width:calc((100% - 40px) / 3);
    }
}

#page_sheeb_dlc_downloads .download_item > hr {
    display:none;
}

/*
 * 商品画像＋タイトル側のリンク。
 * flow-rootでタイトルmarginをリンク外へcollapseさせず、
 * 「画像→タイトル20px / タイトル→ボタン20px」を確定する。
 */
#page_sheeb_dlc_downloads .download_item > a:first-child {
    display:flow-root;
    width:100%;
    margin:0;
    padding:0;
    color:inherit;
    text-decoration:none;
}

/* 現在のTwigではタイトルにclassがないため、画像直後のpを限定して指定。 */
#page_sheeb_dlc_downloads
.download_item > a:first-child > .ec-shelfGrid__item-image + p {
    margin:20px 0;
    padding:0 10px;
    font-size:16px;
    font-weight:normal;
    line-height:1.4;
    text-align:center;
}

/*
 * ダウンロードボタン側リンク。
 * ボタン自体の下marginではなく親paddingで20pxを所有し、
 * margin collapse等で最終余白が変わらないようにする。
 */
#page_sheeb_dlc_downloads .download_item > a.ec-productRole__btn {
    display:block;
    width:100%;
    margin:0;
    padding:0 0 20px;
    box-sizing:border-box;
    text-decoration:none;
}

.mypage .dlc-button,
#page_sheeb_dlc_downloads .dlc-button {
    display:flex;
    align-items:center;
    justify-content:center;
    width:88%;
    max-width:520px;
    min-height:60px;
    margin:0 auto;
    padding:10px 52px 10px 20px;
    box-sizing:border-box;
    position:relative;
    font-family:'Lucida Grande','Segoe UI','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',Meiryo,Verdana,Arial,sans-serif;
    font-size:15px;
    font-weight:600;
    line-height:1.25;
    text-align:center;
    white-space:nowrap;
}

@media only screen and (max-width:767px) {
    #page_sheeb_dlc_downloads .dlc-button {
        width:84%;
        max-width:none;
        padding-left:10px;
        padding-right:40px;
        font-size:13px;
    }
}

/*
 * 760 / 768 / 785:
 * cart/order系の共通 .ec-orderRole 指定がダウンロードページにも当たり、
 * 商品カード全体の外側に白背景＋1px枠が出ていた。
 * ダウンロードページだけ外枠を解除し、900px以上と同じ見た目へ揃える。
 */
@media only screen and (max-width:785px) {
    #page_sheeb_dlc_downloads .ec-orderRole {
        background:transparent;
        border:0;
        padding-top:0;
        padding-bottom:0;
    }
}

#page_sheeb_dlc_downloads .download_item .p-name,
#page_sheeb_dlc_downloads .download_item .recommend_title {
    border-bottom:0;
    padding-bottom:0;
}

/* ==========================================================================
   7. CART / ORDER
   ========================================================================== */

/* 760px以上: 768pxで確定済みのテーブル型カート表示を使用。
   759px以下は狭幅端末向けの縦積み表示を維持する。 */
@media only screen and (min-width:760px) {
    .ec-cartTable {
        display:table;
        width:100%;
        border:1px solid #ccc;
        border-bottom:0;
        border-collapse:collapse;
        box-sizing:border-box;
    }
    .ec-cartHeader { display:table-row; width:100%; }
    .ec-cartHeader .ec-cartHeader__label {
        display:table-cell;
        padding:10px;
        background:#efefef;
        border-top:0;
        border-right:1px solid #ccc;
        border-bottom:1px solid #ccc;
        box-sizing:border-box;
        text-align:center;
        font-weight:bold;
    }
    .ec-cartHeader .ec-cartHeader__label:nth-child(1) { width:8.333333%; }
    .ec-cartHeader .ec-cartHeader__label:nth-child(2) { width:58.333334%; }
    .ec-cartHeader .ec-cartHeader__label:nth-child(3) { width:16.666667%; }
    .ec-cartHeader .ec-cartHeader__label:nth-child(4) { width:16.666666%; border-right:0; }

    .ec-cartRow { display:table-row; }
    .ec-cartRow .ec-cartRow__delColumn,
    .ec-cartRow .ec-cartRow__contentColumn,
    .ec-cartRow .ec-cartRow__amountColumn,
    .ec-cartRow .ec-cartRow__subtotalColumn {
        display:table-cell;
        vertical-align:middle;
        border-top:0;
        border-left:0;
        border-right:1px solid #ccc;
        border-bottom:1px solid #ccc;
        box-sizing:border-box;
    }
    .ec-cartRow .ec-cartRow__delColumn { width:8.333333%; text-align:center; }
    .ec-cartRow .ec-cartRow__contentColumn { width:58.333334%; padding:10px; }
    .ec-cartRow .ec-cartRow__amountColumn { width:16.666667%; text-align:center; }
    .ec-cartRow .ec-cartRow__subtotalColumn { width:16.666666%; padding-right:20px; text-align:right; border-right:0; }

    .ec-cartRow .ec-cartRow__img {
        display:inline-block; min-width:80px; max-width:100px; padding-right:0; vertical-align:middle;
    }
    .ec-cartRow .ec-cartRow__summary {
        display:inline-block; width:calc(100% - 130px); margin-left:20px; vertical-align:middle;
    }
    .ec-cartRow .ec-cartRow__summary .ec-cartRow__sutbtotalSP { display:none; }
    .ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amount { display:block; }
    .ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountSP { display:none; }
    .ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountUpDown { display:block; }

    .ec-cartRole .ec-cartRole__total {
        border:1px solid #ccc;
        border-top:0;
        background:#efefef;
        padding:0;
        font-weight:bold;
        font-size:16px;
    }

    .cart_page .ec-cartRole__actions ul {
        display:flex;
        flex-wrap:nowrap;
        gap:20px;
        width:100%;
        margin:25px auto;
        padding:0;
        list-style:none;
    }
    .cart_page .ec-cartRole__actions ul li {
        flex:1 1 0;
        width:auto;
        min-width:0;
    }
    .cart_page .ec-cartRole__actions ul li .ec-blockBtn--action,
    .cart_page .ec-cartRole__actions ul li .ec-blockBtn--cancel,
    .cart_page .ec-cartRole__actions ul li .ec-blockBtn {
        width:100%;
        max-width:none;
        margin:0;
        box-sizing:border-box;
    }
}

/*
 * 狭幅カート:
 * 760pxでは768pxと同じテーブル型表示を採用するため、
 * カート専用の縦積みルールは759px以下だけに限定する。
 */
@media only screen and (max-width:759px) {
    .ec-cartRow .ec-cartRow__contentColumn {
        padding-top:20px;
        padding-bottom:20px;
    }

    .cart_page .ec-cartRole__actions ul {
        display:flex;
        flex-wrap:wrap;
        gap:10px;
        width:100%;
        margin:25px auto;
        padding:0;
        list-style:none;
    }

    .cart_page .ec-cartRole__actions ul li {
        width:100%;
    }
}

/* 注文系レイアウトは従来どおり767px以下を維持する。 */
@media only screen and (max-width:767px) {
    .ec-orderRole {
        background:#fff;
        border:1px solid #ccc;
        margin-bottom:30px;
        box-sizing:border-box;
    }
}


/*
 * 760pxカート：
 * 注文フロー全体で使われている外側 .ec-orderRole の白枠を主枠として維持。
 * テーブル側の外周罫線だけ外し、二重罫線を解消する。
 *
 * 横マージンは追加しないため、760pxでも商品表の有効幅は減らさない。
 * 内部の行罫線・列罫線・合計欄の区切りは維持する。
 */
@media only screen and (min-width:760px) and (max-width:767px) {
    .cart_page .ec-cartTable {
        border-left:0;
        border-right:0;
        border-top:0;
    }

    .cart_page .ec-cartRole__total {
        border-left:0;
        border-right:0;
    }

    /*
     * 760pxでは表の横幅を守るため外側marginは増やさず、
     * ボタンエリア内部に左右20pxだけ余白を確保する。
     * 2ボタンは十分な幅を維持でき、759px以下には影響しない。
     */
    .cart_page .ec-cartRole__actions ul {
        padding-left:20px;
        padding-right:20px;
        box-sizing:border-box;
    }
}

/* 768 / 785: same one-column order structure as 760; fixes back-arrow overlap. */
@media only screen and (min-width:768px) and (max-width:785px) {
    .ec-orderRole {
        display:flex;
        flex-direction:column;
        width:100%;
        margin-top:0;
        padding:20px;
        background:#fff;
        border:1px solid #ccc;
        box-sizing:border-box;
    }
    .ec-orderRole .ec-orderRole__detail,
    .ec-orderRole .ec-orderRole__summary {
        width:100%;
        max-width:none;
        margin-left:0;
        margin-right:0;
        padding-left:0;
        padding-right:0;
        box-sizing:border-box;
    }
    /*
 * 768 / 785:
 * EC-CUBE側のsummary margin指定が勝つと、flex column内でmargin-topが
 * 数千pxまで膨らみ、ページ下部に巨大な空白が発生する。
 * 外部/core側の競合に限定して、ここだけ!importantで最終値20pxを固定する。
 */
.ec-orderRole .ec-orderRole__summary { margin:20px 0 0!important; }
    .ec-orderRole .ec-blockBtn--cancel { padding-left:52px; padding-right:20px; }
}

/*
 * 786px以上のご注文手続き:
 * EC-CUBE標準の横並びレイアウトは維持しつつ、
 * 760〜785と同じくコンテンツ全体を白背景＋1px枠でまとめる。
 * 900 / 1023 / 1024 / PCで消えていた外枠を復元する。
 */
@media only screen and (min-width:786px) {
    #page_shopping .ec-orderRole {
        margin-top:20px;
        padding:20px;
        background:#fff;
        border:1px solid #ccc;
        box-sizing:border-box;
    }
}


/* ==========================================================================
   8. FOOTER — structural cleanup / responsive grid
   2026-09-08

   対応HTML: footer_block_replacement_v1.twig

   方針:
   - 旧HTMLの「表示行ごとに分割した複数ul」「&nbsp;」「<br><br>」を廃止。
   - ナビはリンク単位で自然にwrap。
   - 760〜899: 左列を縦に使い、右列へ決済会社 / 運営会社を積む2列。
   - 900以上: 3列。
   ========================================================================== */

#footer > ul.kinema-footer-grid {
    display: grid;
    width: 100%;
    margin: 0;
    padding: 30px 0 0;
    list-style: none;
    box-sizing: border-box;
}

#footer > ul.kinema-footer-grid > li.kinema-footer-column {
    float: none;
    display: block;
    width: auto;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* タイトル。既存footerの色味を維持しつつ、各列の上端を揃える。 */
#footer .kinema-footer-title {
    color: #58bafc;
    font-weight: bold;
    margin: 0 0 12px;
    padding: 10px 0 0;
    background: url(../img/footer/line_bg.gif) repeat-x 0 0;
    text-align: left;
}

#footer .kinema-footer-title--sub {
    margin-top: 24px;
}

/* メニュー：リンク文字の途中では折り返さず、リンク単位で次行へ送る。 */
#footer ul.kinema-footer-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0;
    row-gap: 8px;
    margin: 0;
    padding: 0;
    overflow: visible;
    list-style: none;
}

#footer ul.kinema-footer-nav + ul.kinema-footer-nav {
    margin-top: 22px;
}

#footer ul.kinema-footer-nav > li {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    position: relative;
    margin: 0;
    padding: 0 9px;
    white-space: nowrap;
    line-height: 1.55;
}

/*
 * 区切り線は各リンクの左側だけ。
 * 高さ10pxの短い線にし、折返し行同士がつながって見えないようにする。
 */
#footer ul.kinema-footer-nav > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 10px;
    background: #8a8a8a;
    transform: translateY(-50%);
}

#footer ul.kinema-footer-nav > li:last-child::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 1px;
    height: 10px;
    background: #8a8a8a;
    transform: translateY(-50%);
}

#footer ul.kinema-footer-nav a:link,
#footer ul.kinema-footer-nav a:visited {
    color: #999;
    text-decoration: none;
}

#footer ul.kinema-footer-nav a:hover {
    color: #58bafc;
    text-decoration: underline;
}

/* 本文：HTML側で強制改行しない。列幅に合わせて自然にwrap。 */
#footer .kinema-footer-text,
#footer .kinema-footer-textGroup p {
    margin: 0;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

#footer .kinema-footer-textGroup + .kinema-footer-textGroup {
    margin-top: 20px;
}

/* 760〜899: 2列 */
@media only screen and (min-width: 641px) and (max-width: 899px) {
    #footer > ul.kinema-footer-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "left center"
            "left right";
        column-gap: 30px;
        row-gap: 24px;
    }

    #footer .kinema-footer-column--left   { grid-area: left; }
    #footer .kinema-footer-column--center { grid-area: center; }
    #footer .kinema-footer-column--right  { grid-area: right; }
}

/* 900〜1199: 3列 */
@media only screen and (min-width: 900px) and (max-width: 1199px) {
    #footer > ul.kinema-footer-grid {
        grid-template-columns:
            minmax(0, 1.15fr)
            minmax(0, 1fr)
            minmax(0, .85fr);
        column-gap: 30px;
        row-gap: 0;
    }
}

/* 1200以上: 3列 */
@media only screen and (min-width: 1200px) {
    #footer > ul.kinema-footer-grid {
        grid-template-columns:
            minmax(0, 1.15fr)
            minmax(0, 1fr)
            minmax(0, .85fr);
        column-gap: 40px;
        row-gap: 0;
    }
}

/* ==========================================================================
   END FOOTER
   ========================================================================== */

/* ==========================================================================
   PRODUCT TITLE — icon / title / tag vertical alignment
   2026-09-08

   実DOM:
   .z_product_title > h2.ec-headingTitle
     ├─ img (16x16)
     ├─ 商品タイトル文字
     └─ span.ec-productRole__tag

   旧inline/baseline配置では、h2実高37pxに対してアイコン中心が
   約1.5px下へ寄っていたため、flexで同一軸の中央へ揃える。
   ========================================================================== */

#page_product_detail .z_product_title .ec-headingTitle {
    display: flex;
    align-items: center;
}

#page_product_detail .z_product_title .ec-headingTitle > img {
    display: block;
    flex: 0 0 auto;
    margin-top: 0;
    margin-right: 8px;
    margin-bottom: 0;
    vertical-align: initial;
}

#page_product_detail .z_product_title .ec-headingTitle > .ec-productRole__tag {
    align-self: center;
    float: none;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
}

/*
 * タグが複数ある場合も右端で1グループとして並べる。
 * auto margin は先頭タグだけに与える。
 */
#page_product_detail .z_product_title .ec-headingTitle > .ec-productRole__tag:first-of-type {
    margin-left: auto;
}

/* ==========================================================================
   END PRODUCT TITLE
   ========================================================================== */



/* ==========================================================================
   PRODUCT LIST — category header width / SideRight login alignment
   2026-09-08

   対象:
   768 / 785 / 900 / 1023:
     - カテゴリタイトル画像をメインコンテンツ幅いっぱいにする。
   1024 / PC:
     - 同じくタイトル画像をメインカラム幅いっぱいにする。
     - SideRightのログインボックス上端をタイトル画像上端に揃える。

   旧指定:
   #category_content_ex_contents { padding-right:40px; }
   #loginarea { margin-top:30px; }
   を商品一覧ページだけで正規化する。
   ========================================================================== */

/* 768以上の商品一覧：旧40px右paddingを解除し、画像をコンテンツ幅いっぱいへ。 */
@media only screen and (min-width: 768px) {
    #page_product_list #category_content_ex_contents {
        width: 100%;
        padding-right: 0;
        box-sizing: border-box;
    }

    #page_product_list #category_content_ex_contents > p {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    #page_product_list #category_content_ex_contents > p > img {
        display: block;
        width: 100%;
        max-width: none;
        height: auto;
    }
}

/* 1024以上：SideRight自体は既存flex配置のまま、ログインだけ上端を揃える。 */
@media only screen and (min-width: 1024px) {
    #page_product_list .ec-layoutRole__right #loginarea {
        margin-top: 0;
    }
}

/* ==========================================================================
   END PRODUCT LIST HEADER
   ========================================================================== */


/* ==========================================================================
   MOBILE HEADER CART — modal treatment
   2026-09-09

   対象: 〜767px
   既存JSの .is-active 開閉はそのまま利用し、見た目だけ
   「ページが切り替わった」のではなく「カートパネルが開いた」と
   明確に分かるモーダルUIへ変更する。
   ========================================================================== */

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

    /*
     * カート本体を画面上に浮かせる。
     * 大きなshadowで背景を暗くし、ページ本体とのレイヤー差を明示。
     */
    .ec-cartNaviWrap .ec-cartNaviIsset.is-active {
        position: fixed;
        top: 96px;
        left: 50%;
        right: auto;
        bottom: auto;
        z-index: 1200;

        width: calc(100vw - 40px);
        max-width: 680px;
        max-height: calc(100dvh - 120px);

        margin: 0;
        padding: 0 24px 24px;

        overflow-x: hidden;
        overflow-y: auto;
        box-sizing: border-box;

        background: #fff;
        border: 1px solid rgba(0, 0, 0, .14);
        border-radius: 10px;

        box-shadow:
            0 18px 50px rgba(0, 0, 0, .28),
            0 0 0 100vmax rgba(0, 0, 0, .36);

        transform: translateX(-50%);
    }

    /*
     * モーダル見出し。
     * 閉じる操作は既存「キャンセル」ボタンに任せ、
     * 非機能の×アイコンは追加しない。
     */
    .ec-cartNaviWrap .ec-cartNaviIsset.is-active::before {
        content: "カートの中身";
        display: block;

        margin: 0 -24px;
        padding: 17px 24px 15px;

        color: #444;
        background: #fafafa;
        border-bottom: 1px solid #ddd;

        font-size: 18px;
        font-weight: 600;
        letter-spacing: .04em;
        line-height: 1.4;
        text-align: left;
    }

    /* 商品1件をコンパクトな横並びカードへ */
    .ec-cartNaviWrap .ec-cartNaviIsset.is-active .ec-cartNaviIsset__cart {
        display: grid;
        grid-template-columns: 132px minmax(0, 1fr);
        column-gap: 18px;
        align-items: start;

        width: 100%;
        margin: 0;
        padding: 18px 0;

        border: 0;
        border-bottom: 1px solid #e4e4e4;
        box-sizing: border-box;
    }

    .ec-cartNaviWrap .ec-cartNaviIsset.is-active .ec-cartNaviIsset__cartImage {
        width: 132px;
        min-width: 0;
        margin: 0;
        padding: 0;
    }

    .ec-cartNaviWrap .ec-cartNaviIsset.is-active .ec-cartNaviIsset__cartImage img {
        display: block;
        width: 100%;
        height: auto;
        margin: 0;

        border-radius: 4px;
    }

    .ec-cartNaviWrap .ec-cartNaviIsset.is-active .ec-cartNaviIsset__cartContent {
        width: auto;
        min-width: 0;
        margin: 0;
        padding: 2px 0 0;
    }

    .ec-cartNaviWrap .ec-cartNaviIsset.is-active .ec-cartNaviIsset__cartContentTitle {
        margin: 0 0 8px;

        color: #454858;
        font-size: 16px;
        font-weight: 500;
        line-height: 1.45;
    }

    .ec-cartNaviWrap .ec-cartNaviIsset.is-active .ec-cartNaviIsset__cartContentPrice {
        display: flex;
        align-items: baseline;
        gap: 8px;

        margin: 0 0 4px;

        color: #454858;
        font-size: 18px;
        font-weight: 600;
        line-height: 1.35;
    }

    .ec-cartNaviWrap .ec-cartNaviIsset.is-active .ec-cartNaviIsset__cartContentTax {
        display: inline;
        margin: 0;

        font-size: 12px;
        font-weight: 400;
    }

    .ec-cartNaviWrap .ec-cartNaviIsset.is-active .ec-cartNaviIsset__cartContentNumber {
        color: #666;
        font-size: 14px;
        line-height: 1.4;
    }

    /* 操作エリアをモーダルフッターとして明確化 */
    .ec-cartNaviWrap .ec-cartNaviIsset.is-active .ec-cartNaviIsset__action {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 12px;

        width: 100%;
        margin: 0;
        padding: 20px 0 0;

        border: 0;
        box-sizing: border-box;
    }

    .ec-cartNaviWrap .ec-cartNaviIsset.is-active .ec-cartNaviIsset__action .ec-blockBtn--action,
    .ec-cartNaviWrap .ec-cartNaviIsset.is-active .ec-cartNaviIsset__action .ec-blockBtn.ec-cartNavi--cancel {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        min-width: 0;
        height: 52px;
        min-height: 52px;
        margin: 0;
        padding: 0 14px;

        border: 1px solid #bbb;
        border-radius: 4px;
        box-sizing: border-box;

        font-size: 15px;
        line-height: 1.35;
        text-align: center;
        text-decoration: none;
    }

    .ec-cartNaviWrap .ec-cartNaviIsset.is-active .ec-cartNaviIsset__action .ec-blockBtn--action {
        color: #fff;
        background: #4c4f57;
        border-color: #4c4f57;
    }

    .ec-cartNaviWrap .ec-cartNaviIsset.is-active .ec-cartNaviIsset__action .ec-blockBtn--action:hover,
    .ec-cartNaviWrap .ec-cartNaviIsset.is-active .ec-cartNaviIsset__action .ec-blockBtn--action:focus {
        color: #fff;
        background: #393c43;
        border-color: #393c43;
    }

    .ec-cartNaviWrap .ec-cartNaviIsset.is-active .ec-cartNaviIsset__action .ec-blockBtn.ec-cartNavi--cancel {
        color: #555;
        background: linear-gradient(to bottom, #fff 0%, #ececec 100%);
        border-color: #c6c6c6;
    }

    .ec-cartNaviWrap .ec-cartNaviIsset.is-active .ec-cartNaviIsset__action .ec-blockBtn.ec-cartNavi--cancel:hover,
    .ec-cartNaviWrap .ec-cartNaviIsset.is-active .ec-cartNaviIsset__action .ec-blockBtn.ec-cartNavi--cancel:focus {
        color: #333;
        background: #e5e5e5;
        border-color: #aaa;
    }
}

/* ==========================================================================
   END MOBILE HEADER CART
   ========================================================================== */


/* ==========================================================================
   PAGE HEADER — main-content left alignment
   2026-09-09

   マイページで確定している位置を基準に、通常の .ec-pageHeader h1 も
   メインコンテンツ左端へ揃える。

   対象例:
   - カート / 注文フロー
   - ご利用ガイド
   - お問い合わせ
   - 当サイトについて
   - プライバシーポリシー
   - 特定商取引法に基づく表記
   - その他、同じ標準 pageHeader を使う下層ページ

   旧 .ec-pageHeader h1 { padding:20px; } や、
   ページ別に残る左右paddingだけを正規化する。
   上下padding / margin / 文字サイズは変更しない。
   ========================================================================== */

@media only screen and (min-width: 760px) {
    .ec-layoutRole__contents > main .ec-pageHeader h1 {
        padding-left: 0;
        padding-right: 0;
    }
}

/* ==========================================================================
   END PAGE HEADER ALIGNMENT
   ========================================================================== */


/* ==========================================================================
   760px PAGE TITLE / SHOPPING ACTIONS
   2026-09-09

   1) 標準h1:
      760pxだけ24px指定を45pxへ戻し、768px以上の46pxに近い見え方へ。

   2) ご注文手続き:
      .ec-totalBox__btn 内の
        - 購入確認へ進む
        - カートへ戻る
      の2ボタンを、カートトップと同じ横2列へ。
      759px以下は狭幅端末向けの縦並びを維持する。
   ========================================================================== */

/* 760pxのみ：標準h1を45px */
@media only screen and (min-width:760px) and (max-width:767px) {
    .ec-layoutRole__contents > main .ec-pageHeader h1 {
        font-size:45px;
    }
}

/*
 * ご注文手続きのアクションボタン：
 * 760 / 768 / 785 を同じ横2列レイアウトに統一。
 * 759px以下は狭幅端末向け縦並びを維持し、
 * 786px以上は既存レイアウトへ任せる。
 */
@media only screen and (min-width:760px) and (max-width:785px) {
    #page_shopping .ec-orderRole .ec-totalBox__btn {
        display:flex;
        flex-wrap:nowrap;
        gap:20px;
        width:100%;
        margin:20px 0 0;
        padding:0 20px;
        box-sizing:border-box;
    }

    #page_shopping .ec-orderRole .ec-totalBox__btn .ec-blockBtn--action,
    #page_shopping .ec-orderRole .ec-totalBox__btn .ec-blockBtn--cancel,
    #page_shopping .ec-orderRole .ec-totalBox__btn .ec-blockBtn {
        flex:1 1 0;
        width:auto;
        max-width:none;
        min-width:0;
        margin:0;
        box-sizing:border-box;
    }

    /* カートトップと同じ向き：戻るを左、次へ進むを右。 */
    #page_shopping .ec-orderRole .ec-totalBox__btn .ec-blockBtn--cancel {
        order:1;
    }

    #page_shopping .ec-orderRole .ec-totalBox__btn .ec-blockBtn--action {
        order:2;
    }
}

/*
 * 760pxのみ：
 * 768/785の .ec-orderRole は20px paddingを持つが、760は外枠だけで
 * 下側の白余白が短く見えるため、横幅を減らさず下だけ20px確保する。
 */
@media only screen and (min-width:760px) and (max-width:767px) {
    #page_shopping .ec-orderRole {
        padding-bottom:20px;
    }
}

/* ==========================================================================
   END 760px PAGE TITLE / SHOPPING ACTIONS
   ========================================================================== */


/* ==========================================================================
   CART / SHOPPING — 1024〜1199 single-column checkout flow
   2026-09-09

   背景:
   共通レイアウトでは1024px以上で SideRight が存在すると2カラム化する。
   これはマイページ等では必要だが、カート〜購入手続きでは
   PC表示と同じく購入導線へ集中させるため1カラムを優先する。

   対象:
   - カートページ（.cart_page）
   - ご注文手続き（#page_shopping）

   1200px以上のPC表示は既存の1カラム挙動をそのまま維持。
   ========================================================================== */

@media only screen and (min-width:1024px) and (max-width:1199px) {

    .cart_page .ec-layoutRole__contents > .ec-layoutRole__right,
    #page_shopping .ec-layoutRole__contents > .ec-layoutRole__right {
        display:none;
    }

    .cart_page .ec-layoutRole__contents > .ec-layoutRole__main,
    .cart_page .ec-layoutRole__contents > .ec-layoutRole__mainWithColumn,
    #page_shopping .ec-layoutRole__contents > .ec-layoutRole__main,
    #page_shopping .ec-layoutRole__contents > .ec-layoutRole__mainWithColumn {
        width:100%;
        max-width:none;
        flex:1 1 100%;
        margin-left:0;
        margin-right:0;
    }
}

/* ==========================================================================
   END CART / SHOPPING SINGLE COLUMN
   ========================================================================== */


/*
 * ご注文手続き 786px以上:
 * 共通ボタンCSSの width:280px を解除し、summary内のwrapper幅へ100%追従。
 *
 * 実測:
 * - 900px: wrapper 約195px / 旧button 280px
 * - PC:    wrapper 約263px / 旧button 280px
 *
 * PCでも旧280px固定により右へ約17pxはみ出していたため、
 * 786px以上は同一ルールに統一する。
 * 760〜785の横2列ボタンは別設計のため変更しない。
 */
@media only screen and (min-width:786px) {
    #page_shopping .ec-orderRole .ec-totalBox__btn .ec-blockBtn--action,
    #page_shopping .ec-orderRole .ec-totalBox__btn .ec-blockBtn--cancel,
    #page_shopping .ec-orderRole .ec-totalBox__btn .ec-blockBtn {
        width:100%;
        max-width:100%;
        min-width:0;
        margin-left:0;
        margin-right:0;
        box-sizing:border-box;
    }
}



/* ==========================================================================
   ORDER CONFIRM — responsive consistency
   2026-09-09

   対象: #page_shopping_confirm（ご注文内容のご確認）

   ご注文手続きページで確定した設計を確認ページにも揃える。
   - 760 / 768 / 785: 戻る＋確定系ボタンを横2列
   - 786px以上: 白背景＋1px外枠＋20px内側余白
   - 786px以上: 280px固定ボタンを解除してsummary幅へ追従
   - 1024〜1199: SideRightを非表示、1カラム
   ========================================================================== */

/* 760〜785：操作ボタンを横2列。戻るを左、確定を右。 */
@media only screen and (min-width:760px) and (max-width:785px) {
    #page_shopping_confirm .ec-orderRole .ec-totalBox__btn {
        display:flex;
        flex-wrap:nowrap;
        gap:20px;
        width:100%;
        margin:20px 0 0;
        padding:0 20px;
        box-sizing:border-box;
    }

    #page_shopping_confirm .ec-orderRole .ec-totalBox__btn .ec-blockBtn--action,
    #page_shopping_confirm .ec-orderRole .ec-totalBox__btn .ec-blockBtn--cancel,
    #page_shopping_confirm .ec-orderRole .ec-totalBox__btn .ec-blockBtn {
        flex:1 1 0;
        width:auto;
        max-width:none;
        min-width:0;
        margin:0;
        box-sizing:border-box;
    }

    #page_shopping_confirm .ec-orderRole .ec-totalBox__btn .ec-blockBtn--cancel {
        order:1;
    }

    #page_shopping_confirm .ec-orderRole .ec-totalBox__btn .ec-blockBtn--action {
        order:2;
    }
}

/* 760だけ、外枠下部の白余白を注文手続きページと同じ20pxへ。 */
@media only screen and (min-width:760px) and (max-width:767px) {
    #page_shopping_confirm .ec-orderRole {
        padding-bottom:20px;
    }
}

/* 786px以上：消えていた白背景・外枠を復元。 */
@media only screen and (min-width:786px) {
    #page_shopping_confirm .ec-orderRole {
        margin-top:20px;
        padding:20px;
        background:#fff;
        border:1px solid #ccc;
        box-sizing:border-box;
    }

    /*
     * 280px固定ボタンを解除。
     * 900 / 1023 / 1024 / PCともsummary内wrapper幅へ100%追従させる。
     */
    #page_shopping_confirm .ec-orderRole .ec-totalBox__btn .ec-blockBtn--action,
    #page_shopping_confirm .ec-orderRole .ec-totalBox__btn .ec-blockBtn--cancel,
    #page_shopping_confirm .ec-orderRole .ec-totalBox__btn .ec-blockBtn {
        width:100%;
        max-width:100%;
        min-width:0;
        margin-left:0;
        margin-right:0;
        box-sizing:border-box;
    }
}

/* 1024〜1199：購入フロー中はSideRightを消してPC同様1カラム。 */
@media only screen and (min-width:1024px) and (max-width:1199px) {
    #page_shopping_confirm .ec-layoutRole__contents > .ec-layoutRole__right {
        display:none;
    }

    #page_shopping_confirm .ec-layoutRole__contents > .ec-layoutRole__main,
    #page_shopping_confirm .ec-layoutRole__contents > .ec-layoutRole__mainWithColumn {
        width:100%;
        max-width:none;
        flex:1 1 100%;
        margin-left:0;
        margin-right:0;
    }
}

/* ==========================================================================
   END ORDER CONFIRM
   ========================================================================== */


/* ==========================================================================
   CREDIX PAYMENT HANDOFF — compact card UI
   2026-09-09

   対象:
   CREDIX決済へ遷移する直前の中継画面だけ。
   form action に credix-web.co.jp を含む .ec-cartCompleteRole に限定し、
   通常の注文完了画面には影響させない。

   方針:
   - 「まだ購入完了ではない」ことを明確に見せる
   - 注文番号 / 主ボタン / 戻るボタンを1枚のカードへ集約
   - 主操作と副操作の優先順位を視覚的に分ける
   - 決済フォームやhidden値、送信動作には一切触れない
   ========================================================================== */

.ec-cartCompleteRole:has(form[action*="credix-web.co.jp"]) {
    width:calc(100% - 40px);
    max-width:680px;
    margin:40px auto 80px;
    padding:0 44px 44px;

    background:#fff;
    border:1px solid #d3d3d3;
    border-top:4px solid #58b8bc;
    border-radius:6px;
    box-shadow:0 14px 34px rgba(0,0,0,.08);
    box-sizing:border-box;
}

/* 見出し */
.ec-cartCompleteRole:has(form[action*="credix-web.co.jp"]) .ec-reportHeading {
    width:calc(100% + 88px);
    max-width:none;
    margin:0 -44px 28px;
    padding:32px 44px 26px;

    background:#fafafa;
    border-bottom:1px solid #e2e2e2;
    text-align:center;
    box-sizing:border-box;
}

.ec-cartCompleteRole:has(form[action*="credix-web.co.jp"]) .ec-reportHeading h2 {
    margin:0;
    color:#454858;
    font-size:28px;
    font-weight:700;
    line-height:1.45;
    letter-spacing:.02em;
}

/* 注文番号：HTML内の不要なbr余白をCSS側で無効化 */
.ec-cartCompleteRole:has(form[action*="credix-web.co.jp"]) .ec-reportDescription br {
    display:none;
}

.ec-cartCompleteRole:has(form[action*="credix-web.co.jp"]) .ec-reportDescription {
    width:100%;
    max-width:360px;
    margin:0 auto 28px;
    padding:14px 18px;

    background:#f3f4f5;
    border:1px solid #dedfe1;
    border-radius:4px;

    color:#555866;
    font-size:15px;
    line-height:1.5;
    text-align:center;
    box-sizing:border-box;
}

.ec-cartCompleteRole:has(form[action*="credix-web.co.jp"]) .ec-reportDescription strong {
    font-weight:700;
}

/* 旧off-grid幅・offsetを解除し、カード幅へ統一 */
.ec-cartCompleteRole:has(form[action*="credix-web.co.jp"]) .ec-off3Grid,
.ec-cartCompleteRole:has(form[action*="credix-web.co.jp"]) .ec-off4Grid {
    width:100%;
    margin:0;
    padding:0;
}

.ec-cartCompleteRole:has(form[action*="credix-web.co.jp"]) .ec-off3Grid__cell,
.ec-cartCompleteRole:has(form[action*="credix-web.co.jp"]) .ec-off4Grid__cell {
    width:100%;
    max-width:none;
    margin:0;
    padding:0;
}

/* form内の旧<center>をレイアウト用途として無効化 */
.ec-cartCompleteRole:has(form[action*="credix-web.co.jp"]) form center {
    display:block;
    width:100%;
    margin:0;
}

/* 2ボタン共通 */
.ec-cartCompleteRole:has(form[action*="credix-web.co.jp"]) .ec-blockBtn--action,
.ec-cartCompleteRole:has(form[action*="credix-web.co.jp"]) .ec-blockBtn--cancel {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;
    max-width:420px;
    height:58px;
    min-height:58px;
    margin:0 auto;
    padding:0 52px;

    border-radius:4px;
    box-sizing:border-box;

    font-size:16px;
    font-weight:600;
    line-height:1.35;
    text-align:center;
    text-decoration:none;
}

/*
 * CREDIX中継画面は全幅で矢印を明示する。
 * 760px以下で共通CSSが pseudo element を消すため、
 * この画面だけ後勝ちで再定義する。
 */
.ec-cartCompleteRole:has(form[action*="credix-web.co.jp"]) .ec-blockBtn--action::after {
    content:"";
    position:absolute;
    top:0;
    right:20px;
    bottom:0;
    width:14px;
    height:14px;
    margin:auto;
    padding:0;
    background-image:url(../img/common/icon_btn_arrow.png);
    background-repeat:no-repeat;
    background-position:center;
    background-size:100%;
}

.ec-cartCompleteRole:has(form[action*="credix-web.co.jp"]) .ec-blockBtn--cancel::after {
    content:none;
}

.ec-cartCompleteRole:has(form[action*="credix-web.co.jp"]) .ec-blockBtn--cancel::before {
    content:"";
    position:absolute;
    top:0;
    left:20px;
    bottom:0;
    width:14px;
    height:14px;
    margin:auto;
    padding:0;
    background-image:url(../img/common/icon_btn_arrow.png);
    background-repeat:no-repeat;
    background-position:center;
    background-size:100%;
    transform:rotate(180deg);
}

.ec-cartCompleteRole:has(form[action*="credix-web.co.jp"]) .ec-blockBtn--action:hover::after,
.ec-cartCompleteRole:has(form[action*="credix-web.co.jp"]) .ec-blockBtn--action:focus::after {
    background-image:url(../img/common/icon_btn_arrow_hov.png);
}

.ec-cartCompleteRole:has(form[action*="credix-web.co.jp"]) .ec-blockBtn--cancel:hover::before,
.ec-cartCompleteRole:has(form[action*="credix-web.co.jp"]) .ec-blockBtn--cancel:focus::before {
    background-image:url(../img/common/icon_btn_arrow_hov.png);
}

/* 主操作：決済へ */
.ec-cartCompleteRole:has(form[action*="credix-web.co.jp"]) .ec-blockBtn--action {
    color:#555;
    background:#fff;
    background:linear-gradient(to bottom,#fff 0%,#e5e5e5 100%);
    border:1px solid #ccc;
}

.ec-cartCompleteRole:has(form[action*="credix-web.co.jp"]) .ec-blockBtn--action:hover,
.ec-cartCompleteRole:has(form[action*="credix-web.co.jp"]) .ec-blockBtn--action:focus {
    color:#a14d33;
    background:#fff;
    background:linear-gradient(to bottom,#fff 0%,#e5e5e5 100%);
    border-color:#a14d33;
    outline:none;
}

/* 副操作：戻る */
.ec-cartCompleteRole:has(form[action*="credix-web.co.jp"]) .ec-off4Grid {
    margin-top:14px;
}

.ec-cartCompleteRole:has(form[action*="credix-web.co.jp"]) .ec-blockBtn--cancel {
    color:#555;
    background:linear-gradient(to bottom,#fff 0%,#ececec 100%);
    border:1px solid #c7c7c7;
}

.ec-cartCompleteRole:has(form[action*="credix-web.co.jp"]) .ec-blockBtn--cancel:hover,
.ec-cartCompleteRole:has(form[action*="credix-web.co.jp"]) .ec-blockBtn--cancel:focus {
    color:#333;
    background:#e5e5e5;
    border-color:#aaa;
}

/* 760〜899ではカードを少しコンパクトに */
@media only screen and (min-width:760px) and (max-width:899px) {
    .ec-cartCompleteRole:has(form[action*="credix-web.co.jp"]) {
        width:calc(100% - 40px);
        margin-top:30px;
        margin-bottom:70px;
        padding-left:30px;
        padding-right:30px;
        padding-bottom:34px;
    }

    .ec-cartCompleteRole:has(form[action*="credix-web.co.jp"]) .ec-reportHeading {
        width:calc(100% + 60px);
        margin-left:-30px;
        margin-right:-30px;
        padding-left:30px;
        padding-right:30px;
    }

    .ec-cartCompleteRole:has(form[action*="credix-web.co.jp"]) .ec-reportHeading h2 {
        font-size:24px;
    }

    .ec-cartCompleteRole:has(form[action*="credix-web.co.jp"]) .ec-blockBtn--action,
    .ec-cartCompleteRole:has(form[action*="credix-web.co.jp"]) .ec-blockBtn--cancel {
        max-width:420px;
        height:56px;
        min-height:56px;
        font-size:15px;
    }
}

/* ==========================================================================
   END CREDIX PAYMENT HANDOFF
   ========================================================================== */


/* ==========================================================================
   ORDER — 768 / 785 exact 50:50 action buttons
   2026-09-09

   実測:
   wrapper 614px（左右padding各20px）
   有効幅 574px、gap 20px
   旧表示:
     戻る 297px / 確認 257px

   flex:1 1 0 だけでは、左右ボタンの内部padding差の影響で
   外形幅が40pxずれていたため、768 / 785だけ外形幅を明示的に50:50へ固定。
   760は現状正常なので触らない。
   ========================================================================== */

@media only screen and (min-width:768px) and (max-width:785px) {
    #page_shopping .ec-orderRole .ec-totalBox__btn .ec-blockBtn--action,
    #page_shopping .ec-orderRole .ec-totalBox__btn .ec-blockBtn--cancel,
    #page_shopping .ec-orderRole .ec-totalBox__btn .ec-blockBtn {
        flex:0 0 calc((100% - 20px) / 2);
        width:calc((100% - 20px) / 2);
        max-width:calc((100% - 20px) / 2);
        min-width:0;
        box-sizing:border-box;
    }
}

/* ==========================================================================
   END ORDER 768 / 785 EQUAL BUTTONS
   ========================================================================== */





/* ==========================================================================
   ORDER — 768 / 785 exact 50:50 action buttons
   ========================================================================== */

@media only screen and (min-width:768px) and (max-width:785px) {
    #page_shopping .ec-orderRole .ec-totalBox__btn,
    #page_shopping_confirm .ec-orderRole .ec-totalBox__btn {
        display:grid;
        grid-template-columns:minmax(0,1fr) minmax(0,1fr);
        gap:20px;
    }

    #page_shopping .ec-orderRole .ec-totalBox__btn .ec-blockBtn--cancel,
    #page_shopping .ec-orderRole .ec-totalBox__btn .ec-blockBtn--action,
    #page_shopping .ec-orderRole .ec-totalBox__btn .ec-blockBtn,
    #page_shopping_confirm .ec-orderRole .ec-totalBox__btn .ec-blockBtn--cancel,
    #page_shopping_confirm .ec-orderRole .ec-totalBox__btn .ec-blockBtn--action,
    #page_shopping_confirm .ec-orderRole .ec-totalBox__btn .ec-blockBtn {
        flex:none;
        width:100%;
        max-width:none;
        min-width:0;
        margin:0;
        box-sizing:border-box;
    }

    #page_shopping .ec-orderRole .ec-totalBox__btn .ec-blockBtn--cancel,
    #page_shopping_confirm .ec-orderRole .ec-totalBox__btn .ec-blockBtn--cancel {
        grid-column:1;
    }

    #page_shopping .ec-orderRole .ec-totalBox__btn .ec-blockBtn--action,
    #page_shopping_confirm .ec-orderRole .ec-totalBox__btn .ec-blockBtn--action {
        grid-column:2;
    }
}

/* ==========================================================================
   END ORDER EQUAL BUTTONS
   ========================================================================== */





/* ==========================================================================
   CART ADD MODAL — unified site UI
   2026-09-09

   対象:
   「カートに追加しました。」等で使われる
   #ec-modal-header + ec-inlineBtn--cancel/action を持つEC-CUBEモーダル。

   方針:
   - 既存JSの開閉動作には触れない
   - 白→薄グレーのサイト共通ボタンへ統一
   - 左右ボタンを完全同幅
   - 戻る=左矢印 / カートへ進む=右矢印
   - ×ボタンは見やすく、クリック領域を確保
   ========================================================================== */

.ec-modal:has(#ec-modal-header):has(.ec-inlineBtn--cancel) {
    z-index:2000;
}

.ec-modal:has(#ec-modal-header):has(.ec-inlineBtn--cancel) .ec-modal-overlay {
    position:fixed;
    inset:0;
    z-index:2000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:30px;
    box-sizing:border-box;
    background:rgba(0,0,0,.34);
}

.ec-modal:has(#ec-modal-header):has(.ec-inlineBtn--cancel) .ec-modal-wrap {
    position:relative;
    z-index:2001;
    width:100%;
    max-width:620px;
    margin:0;
    padding:0 34px 34px;
    background:#fff;
    border:1px solid #d0d0d0;
    border-top:4px solid #61c2c3;
    border-radius:8px;
    box-shadow:0 18px 48px rgba(0,0,0,.20);
    box-sizing:border-box;
}

/* close */
.ec-modal:has(#ec-modal-header):has(.ec-inlineBtn--cancel) .ec-modal-close {
    position:absolute;
    top:14px;
    right:14px;
    z-index:2003;
    display:flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    margin:0;
    padding:0;
    cursor:pointer;
    pointer-events:auto;
    border-radius:50%;
}

.ec-modal:has(#ec-modal-header):has(.ec-inlineBtn--cancel) .ec-modal-close:hover,
.ec-modal:has(#ec-modal-header):has(.ec-inlineBtn--cancel) .ec-modal-close:focus {
    background:#f1f1f1;
}

.ec-modal:has(#ec-modal-header):has(.ec-inlineBtn--cancel) .ec-modal-close .ec-icon {
    display:flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
}

.ec-modal:has(#ec-modal-header):has(.ec-inlineBtn--cancel) .ec-modal-close img {
    display:block;
    width:22px;
    height:22px;
    pointer-events:none;
}

/* heading */
.ec-modal:has(#ec-modal-header):has(.ec-inlineBtn--cancel) #ec-modal-header {
    margin:0 -34px 28px;
    padding:34px 70px 26px 34px;
    border-bottom:1px solid #e0e0e0;
    background:#fafafa;
    color:#454858;
    font-size:24px;
    font-weight:600;
    line-height:1.45;
    text-align:center;
}

/* inner */
.ec-modal:has(#ec-modal-header):has(.ec-inlineBtn--cancel) .ec-modal-box {
    margin:0;
    padding:0;
}

.ec-modal:has(#ec-modal-header):has(.ec-inlineBtn--cancel) .ec-role {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:14px;
    width:100%;
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* equal buttons */
.ec-modal:has(#ec-modal-header):has(.ec-inlineBtn--cancel) .ec-inlineBtn--cancel,
.ec-modal:has(#ec-modal-header):has(.ec-inlineBtn--cancel) .ec-inlineBtn--action {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    max-width:none;
    min-width:0;
    height:58px;
    min-height:58px;
    margin:0;
    padding:0 48px;
    box-sizing:border-box;

    color:#555;
    background:#fff;
    background:linear-gradient(to bottom,#fff 0%,#e5e5e5 100%);
    border:1px solid #c7c7c7;
    border-radius:4px;

    font-size:16px;
    font-weight:600;
    line-height:1.35;
    text-align:center;
    text-decoration:none;
    cursor:pointer;
}

/* cancel: left */
.ec-modal:has(#ec-modal-header):has(.ec-inlineBtn--cancel) .ec-inlineBtn--cancel {
    grid-column:1;
}

/* action: right */
.ec-modal:has(#ec-modal-header):has(.ec-inlineBtn--cancel) .ec-inlineBtn--action {
    grid-column:2;
}

/* arrows */
.ec-modal:has(#ec-modal-header):has(.ec-inlineBtn--cancel) .ec-inlineBtn--cancel::before {
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:18px;
    width:14px;
    height:14px;
    margin:auto;
    background:url(../img/common/icon_btn_arrow.png) no-repeat center;
    background-size:100%;
    transform:rotate(180deg);
}

.ec-modal:has(#ec-modal-header):has(.ec-inlineBtn--cancel) .ec-inlineBtn--cancel::after {
    content:none;
}

.ec-modal:has(#ec-modal-header):has(.ec-inlineBtn--cancel) .ec-inlineBtn--action::before {
    content:none;
}

.ec-modal:has(#ec-modal-header):has(.ec-inlineBtn--cancel) .ec-inlineBtn--action::after {
    content:"";
    position:absolute;
    top:0;
    right:18px;
    bottom:0;
    width:14px;
    height:14px;
    margin:auto;
    background:url(../img/common/icon_btn_arrow.png) no-repeat center;
    background-size:100%;
    transform:none;
}

.ec-modal:has(#ec-modal-header):has(.ec-inlineBtn--cancel) .ec-inlineBtn--cancel:hover,
.ec-modal:has(#ec-modal-header):has(.ec-inlineBtn--cancel) .ec-inlineBtn--cancel:focus,
.ec-modal:has(#ec-modal-header):has(.ec-inlineBtn--cancel) .ec-inlineBtn--action:hover,
.ec-modal:has(#ec-modal-header):has(.ec-inlineBtn--cancel) .ec-inlineBtn--action:focus {
    color:#a14d33;
    border-color:#a14d33;
    outline:none;
}

.ec-modal:has(#ec-modal-header):has(.ec-inlineBtn--cancel) .ec-inlineBtn--cancel:hover::before,
.ec-modal:has(#ec-modal-header):has(.ec-inlineBtn--cancel) .ec-inlineBtn--cancel:focus::before,
.ec-modal:has(#ec-modal-header):has(.ec-inlineBtn--cancel) .ec-inlineBtn--action:hover::after,
.ec-modal:has(#ec-modal-header):has(.ec-inlineBtn--cancel) .ec-inlineBtn--action:focus::after {
    background-image:url(../img/common/icon_btn_arrow_hov.png);
}

/* 760〜785 */
@media only screen and (min-width:760px) and (max-width:785px) {
    .ec-modal:has(#ec-modal-header):has(.ec-inlineBtn--cancel) .ec-modal-overlay {
        padding:30px 40px;
    }

    .ec-modal:has(#ec-modal-header):has(.ec-inlineBtn--cancel) .ec-modal-wrap {
        max-width:620px;
        padding:0 28px 28px;
    }

    .ec-modal:has(#ec-modal-header):has(.ec-inlineBtn--cancel) #ec-modal-header {
        margin-left:-28px;
        margin-right:-28px;
        padding:30px 64px 22px 28px;
        font-size:22px;
    }

    .ec-modal:has(#ec-modal-header):has(.ec-inlineBtn--cancel) .ec-role {
        gap:12px;
    }

    .ec-modal:has(#ec-modal-header):has(.ec-inlineBtn--cancel) .ec-inlineBtn--cancel,
    .ec-modal:has(#ec-modal-header):has(.ec-inlineBtn--cancel) .ec-inlineBtn--action {
        height:56px;
        min-height:56px;
        padding-left:42px;
        padding-right:42px;
        font-size:15px;
    }
}

/* 759px以下は操作性優先で縦並び */
@media only screen and (max-width:759px) {
    .ec-modal:has(#ec-modal-header):has(.ec-inlineBtn--cancel) .ec-modal-overlay {
        padding:20px;
    }

    .ec-modal:has(#ec-modal-header):has(.ec-inlineBtn--cancel) .ec-modal-wrap {
        max-width:520px;
        padding:0 22px 24px;
    }

    .ec-modal:has(#ec-modal-header):has(.ec-inlineBtn--cancel) #ec-modal-header {
        margin-left:-22px;
        margin-right:-22px;
        padding:28px 58px 20px 22px;
        font-size:20px;
    }

    .ec-modal:has(#ec-modal-header):has(.ec-inlineBtn--cancel) .ec-role {
        grid-template-columns:1fr;
        gap:10px;
    }

    .ec-modal:has(#ec-modal-header):has(.ec-inlineBtn--cancel) .ec-inlineBtn--cancel,
    .ec-modal:has(#ec-modal-header):has(.ec-inlineBtn--cancel) .ec-inlineBtn--action {
        grid-column:1;
        height:54px;
        min-height:54px;
    }
}

/* ==========================================================================
   END CART ADD MODAL
   ========================================================================== */


/* ==========================================================================
   CART ADD MODAL — close button hidden
   ========================================================================== */

.ec-modal:has(#ec-modal-header):has(.ec-inlineBtn--cancel) .ec-modal-close {
    display:none;
}

/* ==========================================================================
   END CART ADD MODAL CLOSE
   ========================================================================== */





/* ==========================================================================
   THANK YOU PAGE — FINAL (actual HTML structure)
   2026-09-09

   実HTMLでは説明文と注文番号は別々のpではなく、
   1つの .ec-reportDescription の中に
     説明テキスト → <br> → <br><br> → <strong>注文番号</strong>
   と入っている。

   そのため first-of-type / last-of-type を使わず、
   p本体と内部strongで余白を管理する。
   ========================================================================== */

.ec-cartCompleteRole:not(:has(form[action*="credix-web.co.jp"])) {
    width:calc(100% - 80px);
    max-width:980px;
    margin:36px auto 80px;
    padding:0 48px 40px;

    background:#fff;
    border:1px solid #d2d2d2;
    border-top:4px solid #61c2c3;
    border-radius:10px;
    box-shadow:0 10px 28px rgba(0,0,0,.06);
    box-sizing:border-box;
    overflow:hidden;
}

/* 「ご注文ありがとうございました」：上下30pxを完全に同値にする */
.ec-cartCompleteRole:not(:has(form[action*="credix-web.co.jp"])) .ec-reportHeading {
    display:flex;
    align-items:center;
    justify-content:center;

    width:calc(100% + 96px);
    height:auto;
    min-height:0;
    margin:0 -48px;
    padding:30px 48px;

    background:#fff;
    border-bottom:1px solid #d9d9d9;
    box-sizing:border-box;
}

.ec-cartCompleteRole:not(:has(form[action*="credix-web.co.jp"])) .ec-reportHeading h1,
.ec-cartCompleteRole:not(:has(form[action*="credix-web.co.jp"])) .ec-reportHeading h2 {
    margin:0;
    color:#55556b;
    font-size:34px;
    font-weight:700;
    line-height:1.2;
    letter-spacing:.02em;
    text-align:center;
}

/* 旧off-gridの位置・余白を解除 */
.ec-cartCompleteRole:not(:has(form[action*="credix-web.co.jp"])) .ec-off3Grid,
.ec-cartCompleteRole:not(:has(form[action*="credix-web.co.jp"])) .ec-off3Grid__cell,
.ec-cartCompleteRole:not(:has(form[action*="credix-web.co.jp"])) .ec-off4Grid,
.ec-cartCompleteRole:not(:has(form[action*="credix-web.co.jp"])) .ec-off4Grid__cell {
    width:100%;
    max-width:none;
    float:none;
    margin:0;
    padding:0;
    box-sizing:border-box;
}

.ec-cartCompleteRole:not(:has(form[action*="credix-web.co.jp"])) .ec-off3Grid.ec-text-ac {
    padding-top:0;
}

/*
 * 「ただいま〜お願いいたします。」
 * 上側30px = pのpadding-top
 * 下側30px = strongのmargin-top
 *
 * HTML内のbrはレイアウト余白として使わない。
 */
.ec-cartCompleteRole:not(:has(form[action*="credix-web.co.jp"])) .ec-reportDescription {
    max-width:760px;
    margin:0 auto;
    padding:30px 0 0;

    color:#55556b;
    font-size:18px;
    line-height:1.9;
    text-align:center;
    box-sizing:border-box;
}

.ec-cartCompleteRole:not(:has(form[action*="credix-web.co.jp"])) .ec-reportDescription br {
    display:none;
}

/* 注文番号：説明文の下に必ず30px空ける */
.ec-cartCompleteRole:not(:has(form[action*="credix-web.co.jp"])) .ec-reportDescription strong {
    display:block;
    max-width:640px;
    margin:30px auto 0;
    padding:26px 30px;

    background:#fafafa;
    border:1px solid #d6d6d6;
    border-radius:8px;

    color:#55556b;
    font-size:22px;
    font-weight:700;
    line-height:1.45;
    letter-spacing:.02em;
}

/* 注文番号 → トップページボタンも30px */
.ec-cartCompleteRole:not(:has(form[action*="credix-web.co.jp"])) .ec-off4Grid {
    margin-top:30px;
}

/* CTA */
.ec-cartCompleteRole:not(:has(form[action*="credix-web.co.jp"])) .ec-blockBtn--action,
.ec-cartCompleteRole:not(:has(form[action*="credix-web.co.jp"])) .ec-blockBtn--cancel,
.ec-cartCompleteRole:not(:has(form[action*="credix-web.co.jp"])) .ec-blockBtn {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;
    max-width:420px;
    height:68px;
    min-height:68px;
    margin:0 auto;
    padding:0 56px 0 32px;

    color:#555;
    background:linear-gradient(to bottom,#fff 0%,#e5e5e5 100%);
    border:1px solid #c7c7c7;
    border-radius:4px;
    box-sizing:border-box;

    font-size:22px;
    font-weight:700;
    line-height:1.35;
    text-align:center;
    text-decoration:none;
}

/* このCTAは右矢印だけ */
.ec-cartCompleteRole:not(:has(form[action*="credix-web.co.jp"])) .ec-blockBtn::before,
.ec-cartCompleteRole:not(:has(form[action*="credix-web.co.jp"])) .ec-blockBtn--action::before,
.ec-cartCompleteRole:not(:has(form[action*="credix-web.co.jp"])) .ec-blockBtn--cancel::before {
    content:none !important;
    display:none !important;
}

.ec-cartCompleteRole:not(:has(form[action*="credix-web.co.jp"])) .ec-blockBtn--action::after,
.ec-cartCompleteRole:not(:has(form[action*="credix-web.co.jp"])) .ec-blockBtn--cancel::after,
.ec-cartCompleteRole:not(:has(form[action*="credix-web.co.jp"])) .ec-blockBtn::after {
    content:"";
    position:absolute;
    top:0;
    right:20px;
    bottom:0;
    left:auto;

    width:14px;
    height:14px;
    margin:auto;

    background:url(../img/common/icon_btn_arrow.png) no-repeat center;
    background-size:100%;
    transform:none;
}

/* 760 / 768 / 785 */
@media only screen and (min-width:760px) and (max-width:785px) {
    .ec-cartCompleteRole:not(:has(form[action*="credix-web.co.jp"])) {
        width:calc(100% - 60px);
        margin-top:24px;
        margin-bottom:70px;
        padding:0 36px 40px;
    }

    .ec-cartCompleteRole:not(:has(form[action*="credix-web.co.jp"])) .ec-reportHeading {
        width:calc(100% + 72px);
        margin:0 -36px;
        padding:30px 36px;
    }

    .ec-cartCompleteRole:not(:has(form[action*="credix-web.co.jp"])) .ec-reportHeading h1,
    .ec-cartCompleteRole:not(:has(form[action*="credix-web.co.jp"])) .ec-reportHeading h2 {
        font-size:28px;
    }

    .ec-cartCompleteRole:not(:has(form[action*="credix-web.co.jp"])) .ec-reportDescription {
        padding-top:30px;
        font-size:16px;
        line-height:1.8;
    }

    .ec-cartCompleteRole:not(:has(form[action*="credix-web.co.jp"])) .ec-reportDescription strong {
        margin-top:30px;
        padding:22px 20px;
        font-size:20px;
    }

    .ec-cartCompleteRole:not(:has(form[action*="credix-web.co.jp"])) .ec-blockBtn--action,
    .ec-cartCompleteRole:not(:has(form[action*="credix-web.co.jp"])) .ec-blockBtn--cancel,
    .ec-cartCompleteRole:not(:has(form[action*="credix-web.co.jp"])) .ec-blockBtn {
        max-width:340px;
        height:60px;
        min-height:60px;
        padding:0 48px 0 24px;
        font-size:19px;
    }

    .ec-cartCompleteRole:not(:has(form[action*="credix-web.co.jp"])) .ec-blockBtn--action::after,
    .ec-cartCompleteRole:not(:has(form[action*="credix-web.co.jp"])) .ec-blockBtn--cancel::after,
    .ec-cartCompleteRole:not(:has(form[action*="credix-web.co.jp"])) .ec-blockBtn::after {
        right:18px;
        width:13px;
        height:13px;
    }
}

/* 786〜1199 */
@media only screen and (min-width:786px) and (max-width:1199px) {
    .ec-cartCompleteRole:not(:has(form[action*="credix-web.co.jp"])) {
        width:calc(100% - 100px);
    }

    .ec-cartCompleteRole:not(:has(form[action*="credix-web.co.jp"])) .ec-reportHeading h1,
    .ec-cartCompleteRole:not(:has(form[action*="credix-web.co.jp"])) .ec-reportHeading h2 {
        font-size:32px;
    }

    .ec-cartCompleteRole:not(:has(form[action*="credix-web.co.jp"])) .ec-blockBtn--action,
    .ec-cartCompleteRole:not(:has(form[action*="credix-web.co.jp"])) .ec-blockBtn--cancel,
    .ec-cartCompleteRole:not(:has(form[action*="credix-web.co.jp"])) .ec-blockBtn {
        max-width:400px;
    }
}

/* 1200以上 */
@media only screen and (min-width:1200px) {
    .ec-cartCompleteRole:not(:has(form[action*="credix-web.co.jp"])) {
        max-width:1040px;
    }

    .ec-cartCompleteRole:not(:has(form[action*="credix-web.co.jp"])) .ec-reportHeading h1,
    .ec-cartCompleteRole:not(:has(form[action*="credix-web.co.jp"])) .ec-reportHeading h2 {
        font-size:36px;
    }
}

/* ==========================================================================
   END THANK YOU PAGE FINAL
   ========================================================================== */


/* ==========================================================================
   D2k84 — GUIDE STEP top alignment / 1024 note line break
   2026-09-11
   ========================================================================== */

/*
 * 760:
 * 後段の max-width:767px 共通ルールで h3内span に padding-top:10px が
 * 入っていたため、画像上端よりテキストブロックが下がっていた。
 * 760だけ上paddingを0へ戻し、画像と見出しの上端を揃える。
 */
@media only screen and (min-width:760px) and (max-width:767px) {
    .stepcont h3 span,
    .stepcont .stepLast h3 span {
        padding-top:0;
    }
}

/*
 * 1024〜1199:
 * SideRight表示で本文列が狭くなり、STEP3の注記だけ末尾1文字が
 * 不自然に折り返されるため、注記を「※」から独立行にする。
 *
 * 既存の900px以上ルールにより、その後の
 * 「すぐにご覧頂けます」も次行に送られる。
 */
@media only screen and (min-width:1024px) and (max-width:1199px) {
    .stepcont .stepLast h3 span.note {
        display:block;
        margin-left:0;
        padding-top:0;
    }
}

/* ==========================================================================
   END D2k84
   ========================================================================== */


/* ==========================================================================
   D2k85 — GUIDE service/content info
   2026-09-11
   ========================================================================== */

/*
 * 760:
 * 「サービスのご案内 / コンテンツの説明」の各項目を
 * 768px以上と同じ「画像左＋本文右」の2列構造にする。
 */
@media only screen and (min-width:760px) and (max-width:767px) {
    .infocont {
        display:table;
        width:100%;
        min-height:130px;
        margin-bottom:30px;
        overflow:visible;
        table-layout:fixed;
    }

    .infocont .contentimg {
        display:table-cell;
        width:100px;
        margin:0;
        padding:0;
        vertical-align:top;
    }

    .infocont .info {
        display:table-cell;
        width:auto;
        min-width:0;
        vertical-align:top;
    }
}

/*
 * 全チェック幅:
 * .info直下にある「※〜」の裸テキストはpのpadding-leftを持たないため、
 * 本文より左へ飛び出していた。
 *
 * 左余白の所有者を.infoへ移し、
 * p側の重複paddingを解除する。
 * h3だけは従来位置を維持するため同量だけ戻す。
 */
@media only screen and (min-width:760px) {
    .infocont .info {
        padding-left:25px;
        box-sizing:border-box;
    }

    .infocont .info p {
        padding-left:0;
    }

    .infocont .info h3 {
        margin-left:-25px;
    }
}

/* ==========================================================================
   END D2k85
   ========================================================================== */


/* ==========================================================================
   D2k86 — GUIDE service/content info 760 refinement
   2026-09-11
   ========================================================================== */

/*
 * 760:
 * max-width:767px の旧ルールで .info h3 に上下15px、
 * 疑似アイコンに top:14px / left:0 が入っていたため、
 * 画像上端より見出しが下がっていた。
 *
 * 768px以上と同じ見出しジオメトリへ戻す。
 *
 * また table-cell では margin-right が効かないため、
 * 画像セル自体を100px→120pxにして20px分の列間を確保する。
 */
@media only screen and (min-width:760px) and (max-width:767px) {
    .infocont .contentimg {
        width:120px;
    }

    .infocont .info h3 {
        margin:0 0 0 -25px;
        padding:0 0 0 50px;
    }

    .infocont .info h3::before,
    .infocont .info h3::after {
        top:0;
        left:20px;
    }
}

/* ==========================================================================
   END D2k86
   ========================================================================== */


/* ==========================================================================
   D2k87 — GUIDE service title/icon vertical centering
   2026-09-11
   ========================================================================== */

/*
 * 全サイズ:
 * アイコンを h3 の上端基準(top:0)ではなく、
 * h3自身の高さの50%位置を基準にして縦中央へ固定する。
 * タイトル文字のline-heightも明示して、ブラウザ差を抑える。
 */
@media only screen and (min-width:760px) {
    .infocont .info h3 {
        line-height:1.2;
    }

    .infocont .info h3::before,
    .infocont .info h3::after {
        top:50%;
        transform:translateY(-50%);
    }
}

/*
 * 760:
 * 見出しと本文が詰まって見えるため、
 * アイコン＋タイトルのブロック下に12pxを確保する。
 */
@media only screen and (min-width:760px) and (max-width:767px) {
    .infocont .info h3 {
        margin:0 0 12px -25px;
    }

    .infocont .info p {
        margin-top:0;
    }
}

/* ==========================================================================
   END D2k87
   ========================================================================== */


/* ==========================================================================
   D2k88 — GUIDE 「緊縛桟敷キネマ館の特徴」 image-to-text grid
   2026-09-11

   guide_special1〜4.gif を廃止し、
   HTMLテキスト＋CSSの2列×2段グリッドとして再構成する。
   ========================================================================== */

.pointcont.pointcont--text {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:0;
    width:100%;
    margin:0;
    padding:0;
}

.pointcont.pointcont--text .point {
    position:relative;
    width:auto;
    height:auto;
    min-height:210px;
    margin:0;
    padding:28px 34px 32px;
    box-sizing:border-box;
    text-align:left;
}

/* 2×2中央の朱色ドットクロス */
.pointcont.pointcont--text .point:nth-of-type(1) {
    border-right:1px dotted #6f2622;
    border-bottom:1px dotted #6f2622;
}
.pointcont.pointcont--text .point:nth-of-type(2) {
    border-bottom:1px dotted #6f2622;
}
.pointcont.pointcont--text .point:nth-of-type(3) {
    border-right:1px dotted #6f2622;
}

/* 見出し */
.pointcont.pointcont--text .point__title {
    margin:0 0 20px;
    padding:0;
    color:#6f2622;
    font-family:"Noto Serif JP", serif;
    font-size:clamp(24px, 2.4vw, 34px);
    font-weight:600;
    line-height:1.55;
    letter-spacing:.06em;
}

/* 本文 */
.pointcont.pointcont--text .point__body {
    margin:0;
    padding:0;
    color:#222;
    font-size:clamp(15px, 1.45vw, 18px);
    line-height:1.9;
    letter-spacing:.03em;
}

/* 中央の 1 / 2 / 3 / 4 */
.pointcont.pointcont--text .point .num {
    position:absolute;
    z-index:1;
    margin:0;
    padding:0;
    color:#e0cbca;
    font-family:"Noto Serif JP", serif;
    font-size:24px;
    font-weight:600;
    line-height:1;
    pointer-events:none;
}

.pointcont.pointcont--text .point:nth-of-type(1) .num {
    right:16px;
    bottom:10px;
}
.pointcont.pointcont--text .point:nth-of-type(2) .num {
    left:16px;
    bottom:10px;
}
.pointcont.pointcont--text .point:nth-of-type(3) .num {
    right:16px;
    top:10px;
}
.pointcont.pointcont--text .point:nth-of-type(4) .num {
    left:16px;
    top:10px;
}

/*
 * 760〜900付近は横幅が小さいため文字を少し詰める。
 * 2列×2段の構成自体は維持。
 */
@media only screen and (min-width:760px) and (max-width:900px) {
    .pointcont.pointcont--text .point {
        min-height:190px;
        padding:24px 26px 28px;
    }

    .pointcont.pointcont--text .point__title {
        margin-bottom:16px;
        font-size:22px;
        line-height:1.5;
    }

    .pointcont.pointcont--text .point__body {
        font-size:14px;
        line-height:1.8;
    }
}

/* ==========================================================================
   END D2k88
   ========================================================================== */


/* ==========================================================================
   D2k89 — GUIDE feature text grid / 760 cleanup
   2026-09-11

   旧max-width:767px用 .point 系ルールの
   border / top / left が残って新テキスト版へ干渉していたため、
   pointcont--text 内では位置・罫線を明示的にリセットする。
   ========================================================================== */

.pointcont.pointcont--text .point {
    border:0;
}

/* 2×2中央のクロスだけを持たせる */
.pointcont.pointcont--text .point:nth-of-type(1) {
    border-right:1px dotted #6f2622;
    border-bottom:1px dotted #6f2622;
}
.pointcont.pointcont--text .point:nth-of-type(2) {
    border-bottom:1px dotted #6f2622;
}
.pointcont.pointcont--text .point:nth-of-type(3) {
    border-right:1px dotted #6f2622;
}
.pointcont.pointcont--text .point:nth-of-type(4) {
    border:0;
}

/*
 * 旧760ルールの left/top を必ず解除。
 * 1〜4を中央クロス付近へ配置する。
 */
.pointcont.pointcont--text .point:nth-of-type(1) .num {
    top:auto;
    right:12px;
    bottom:10px;
    left:auto;
}
.pointcont.pointcont--text .point:nth-of-type(2) .num {
    top:auto;
    right:auto;
    bottom:10px;
    left:12px;
}
.pointcont.pointcont--text .point:nth-of-type(3) .num {
    top:10px;
    right:12px;
    bottom:auto;
    left:auto;
}
.pointcont.pointcont--text .point:nth-of-type(4) .num {
    top:10px;
    right:auto;
    bottom:auto;
    left:12px;
}

/* 760だけ、2列のまま読みやすく収まるよう微調整 */
@media only screen and (min-width:760px) and (max-width:767px) {
    .pointcont.pointcont--text .point {
        min-height:0;
        padding:24px 28px 30px;
    }

    .pointcont.pointcont--text .point__title {
        margin:0 0 16px;
        font-size:21px;
        line-height:1.55;
        letter-spacing:.04em;
    }

    .pointcont.pointcont--text .point__body {
        font-size:14px;
        line-height:1.8;
        letter-spacing:.02em;
    }

    .pointcont.pointcont--text .point .num {
        font-size:22px;
    }
}

/* ==========================================================================
   END D2k89
   ========================================================================== */


/* ==========================================================================
   D2k90 — GUIDE feature center-number spacing
   2026-09-11

   中央の1/2/3/4が十字ドットラインに近すぎるため、
   各番号を交点から外側へ少し離す。
   ========================================================================== */

.pointcont.pointcont--text .point:nth-of-type(1) .num {
    right:22px;
    bottom:18px;
}
.pointcont.pointcont--text .point:nth-of-type(2) .num {
    left:22px;
    bottom:18px;
}
.pointcont.pointcont--text .point:nth-of-type(3) .num {
    right:22px;
    top:18px;
}
.pointcont.pointcont--text .point:nth-of-type(4) .num {
    left:22px;
    top:18px;
}

/* ==========================================================================
   END D2k90
   ========================================================================== */


/* ==========================================================================
   D2k91 — GUIDE feature text spacing from center numbers
   2026-09-11

   D2k90で番号自体を中央から離したが、意図は逆。
   番号位置はD2k89の位置へ戻し、
   テキストブロック側だけを中央の番号／十字線から外側へ離す。
   ========================================================================== */

/* 番号位置はD2k89の基準へ戻す */
.pointcont.pointcont--text .point:nth-of-type(1) .num {
    right:12px;
    bottom:10px;
}
.pointcont.pointcont--text .point:nth-of-type(2) .num {
    left:12px;
    bottom:10px;
}
.pointcont.pointcont--text .point:nth-of-type(3) .num {
    right:12px;
    top:10px;
}
.pointcont.pointcont--text .point:nth-of-type(4) .num {
    left:12px;
    top:10px;
}

/*
 * 中央側だけ余白を増やし、
 * 1/2/3/4の番号から本文・見出しを遠ざける。
 * 外周側の位置はなるべく維持。
 */
.pointcont.pointcont--text .point:nth-of-type(1) {
    padding-right:46px;
    padding-bottom:46px;
}
.pointcont.pointcont--text .point:nth-of-type(2) {
    padding-left:46px;
    padding-bottom:46px;
}
.pointcont.pointcont--text .point:nth-of-type(3) {
    padding-right:46px;
    padding-top:46px;
}
.pointcont.pointcont--text .point:nth-of-type(4) {
    padding-left:46px;
    padding-top:46px;
}

/* 760では少し控えめにして2列の可読幅を確保 */
@media only screen and (min-width:760px) and (max-width:767px) {
    .pointcont.pointcont--text .point:nth-of-type(1) {
        padding-right:38px;
        padding-bottom:40px;
    }
    .pointcont.pointcont--text .point:nth-of-type(2) {
        padding-left:38px;
        padding-bottom:40px;
    }
    .pointcont.pointcont--text .point:nth-of-type(3) {
        padding-right:38px;
        padding-top:40px;
    }
    .pointcont.pointcont--text .point:nth-of-type(4) {
        padding-left:38px;
        padding-top:40px;
    }
}

/* ==========================================================================
   END D2k91
   ========================================================================== */


/* ==========================================================================
   D2k92 — GUIDE feature spacing balance
   2026-09-11

   D2k91で中央番号との距離を確保した結果、
   各テキスト欄の有効幅が少し狭くなり、不要な改行が増えた。
   番号位置はそのまま維持し、中央側の余白だけ少し戻して
   旧サイトの密度感に近づける。
   ========================================================================== */

/* 768px以上：中央側の余白を控えめに */
@media only screen and (min-width:768px) {
    .pointcont.pointcont--text .point:nth-of-type(1) {
        padding-right:36px;
        padding-bottom:38px;
    }
    .pointcont.pointcont--text .point:nth-of-type(2) {
        padding-left:36px;
        padding-bottom:38px;
    }
    .pointcont.pointcont--text .point:nth-of-type(3) {
        padding-right:36px;
        padding-top:38px;
    }
    .pointcont.pointcont--text .point:nth-of-type(4) {
        padding-left:36px;
        padding-top:38px;
    }
}

/* 760：列幅が限られるため、さらに少しだけ詰める */
@media only screen and (min-width:760px) and (max-width:767px) {
    .pointcont.pointcont--text .point:nth-of-type(1) {
        padding-right:30px;
        padding-bottom:34px;
    }
    .pointcont.pointcont--text .point:nth-of-type(2) {
        padding-left:30px;
        padding-bottom:34px;
    }
    .pointcont.pointcont--text .point:nth-of-type(3) {
        padding-right:30px;
        padding-top:34px;
    }
    .pointcont.pointcont--text .point:nth-of-type(4) {
        padding-left:30px;
        padding-top:34px;
    }
}

/* ==========================================================================
   END D2k92
   ========================================================================== */


/* ==========================================================================
   D2k93 — GUIDE feature responsive typography / spacing balance
   2026-09-14

   <br>に依存せず、画面幅ごとに
   「文字サイズ」と「使える文字幅」を調整する。
   760はD2k92の完成状態をそのまま維持。
   ========================================================================== */

/*
 * 768 / 785:
 * 長い見出しが3行になりやすいため、見出しだけ少し小さくする。
 * 2列構成・番号位置・中央クロスは変更しない。
 */
@media only screen and (min-width:768px) and (max-width:785px) {
    .containerB .content:has(> .pointcont.pointcont--text) {
        padding:32px;
    }

    .pointcont.pointcont--text .point__title {
        margin-bottom:16px;
        font-size:19px;
        line-height:1.5;
        letter-spacing:.025em;
    }

    .pointcont.pointcont--text .point__body {
        font-size:14px;
        line-height:1.8;
        letter-spacing:.015em;
    }
}

/*
 * 1024〜1199:
 * SideRight等で実効幅が狭くなるため、
 * 外側・中央側の余白を縮めて文字領域を広げる。
 */
@media only screen and (min-width:1024px) and (max-width:1199px) {
    .containerB .content:has(> .pointcont.pointcont--text) {
        padding:24px;
    }

    .pointcont.pointcont--text .point {
        padding:24px 24px 28px;
    }

    .pointcont.pointcont--text .point:nth-of-type(1) {
        padding-right:26px;
        padding-bottom:32px;
    }
    .pointcont.pointcont--text .point:nth-of-type(2) {
        padding-left:26px;
        padding-bottom:32px;
    }
    .pointcont.pointcont--text .point:nth-of-type(3) {
        padding-right:26px;
        padding-top:32px;
    }
    .pointcont.pointcont--text .point:nth-of-type(4) {
        padding-left:26px;
        padding-top:32px;
    }

    .pointcont.pointcont--text .point__title {
        margin-bottom:18px;
        font-size:23px;
        line-height:1.5;
        letter-spacing:.035em;
    }

    .pointcont.pointcont--text .point__body {
        font-size:15px;
        line-height:1.8;
        letter-spacing:.015em;
    }
}

/*
 * PC:
 * 旧画像の雰囲気は残しつつ、見出しを少し抑えて
 * 「大きな文字が並ぶ」印象を弱める。
 */
@media only screen and (min-width:1200px) {
    .containerB .content:has(> .pointcont.pointcont--text) {
        padding:30px;
    }

    .pointcont.pointcont--text .point {
        padding:26px 30px 30px;
    }

    .pointcont.pointcont--text .point:nth-of-type(1) {
        padding-right:30px;
        padding-bottom:36px;
    }
    .pointcont.pointcont--text .point:nth-of-type(2) {
        padding-left:30px;
        padding-bottom:36px;
    }
    .pointcont.pointcont--text .point:nth-of-type(3) {
        padding-right:30px;
        padding-top:36px;
    }
    .pointcont.pointcont--text .point:nth-of-type(4) {
        padding-left:30px;
        padding-top:36px;
    }

    .pointcont.pointcont--text .point__title {
        margin-bottom:18px;
        font-size:28px;
        line-height:1.48;
        letter-spacing:.035em;
    }

    .pointcont.pointcont--text .point__body {
        font-size:16px;
        line-height:1.8;
        letter-spacing:.015em;
    }
}

/* ==========================================================================
   END D2k93
   ========================================================================== */


/* ==========================================================================
   D2k204 — GUIDE narrow layout / feature text and media images
   2026-10-21

   Only <=499px, page_help_guide. The 2x2 feature layout does not fit
   narrow phones, so use four rows: number + heading / description.
   The media section is already one column; center its images and give
   every item equal vertical padding. Keep >=500px and the prior 760+
   cross-line implementation unchanged.

   Only the CONTENT owning these two pointcont blocks has 20px padding.
   Do not change shared .containerB rules or other guide sections.
   ========================================================================== */
@media only screen and (max-width: 499px) {
    #page_help_guide .containerB .content:has(> .pointcont.pointcont--text),
    #page_help_guide .containerB .content:has(> .pointcont.media) {
        padding: 20px;
        box-sizing: border-box;
    }

    /* Features: 4 stacked sections, each with a number/title row. */
    #page_help_guide .pointcont.pointcont--text {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    #page_help_guide .pointcont.pointcont--text .point {
        display: grid;
        grid-template-columns: 26px minmax(0, 1fr);
        grid-template-rows: auto auto;
        column-gap: 10px;
        row-gap: 12px;
        align-items: start;
        width: 100%;
        height: auto;
        min-height: 0;
        margin: 0;
        padding: 20px 0;
        border: 0;
        border-bottom: 1px dotted #6f2622;
        box-sizing: border-box;
        text-align: left;
    }

    #page_help_guide .pointcont.pointcont--text .point:nth-of-type(4) {
        border-bottom: 0;
    }

    #page_help_guide .pointcont.pointcont--text .point .num {
        position: static;
        grid-column: 1;
        grid-row: 1;
        display: block;
        font-size: 22px;
        line-height: 1.4;
        text-align: center;
    }

    #page_help_guide .pointcont.pointcont--text .point__title {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
        margin: 0;
        padding: 0;
        font-size: 20px;
        line-height: 1.5;
        letter-spacing: .02em;
    }

    #page_help_guide .pointcont.pointcont--text .point__body {
        grid-column: 1 / -1;
        grid-row: 2;
        min-width: 0;
        margin: 0;
        padding: 0;
        font-size: 14px;
        line-height: 1.8;
        letter-spacing: .02em;
    }

    /* Media: remain 1 column. Equal inset, centered responsive images. */
    #page_help_guide .pointcont.media {
        display: flex;
        flex-direction: column;
        gap: 0;
        width: 100%;
    }

    #page_help_guide .pointcont.media .point {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: auto;
        min-height: 0;
        margin: 0;
        padding: 20px 0;
        border: 0;
        border-bottom: 1px dotted #6f2622;
        box-sizing: border-box;
        text-align: center;
    }

    #page_help_guide .pointcont.media .point:nth-of-type(4) {
        border-bottom: 0;
    }

    #page_help_guide .pointcont.media .point a {
        display: block;
        width: 100%;
        text-align: center;
    }

    #page_help_guide .pointcont.media .point img {
        display: block;
        width: auto;
        max-width: 100%;
        height: auto;
        margin: 0 auto;
    }
}
/* ==========================================================================
   END D2k204 GUIDE narrow feature/media layout
   ========================================================================== */


/* ==========================================================================
   D2k96 — GUIDE 「楽しむ方法」 cross / image spacing refinement
   2026-09-14

   実HTML:
   <div class="pointcont media">...</div>

   4セル個別borderで十字線を作る方式をやめ、
   pointcont.media自身に縦横ラインを描画する。
   これにより760 / 1023でのライン位置ずれを防ぐ。
   ========================================================================== */

@media only screen and (min-width:760px) and (max-width:1023px) {
    .pointcont.media {
        position:relative;
        display:grid;
        grid-template-columns:minmax(0,1fr) minmax(0,1fr);
        grid-auto-rows:1fr;
        gap:0;
        width:100%;
        margin:0;
        padding:0;
        align-items:stretch;
        box-sizing:border-box;
    }

    /* 中央の縦ドットライン */
    .pointcont.media::before {
        content:"";
        position:absolute;
        z-index:2;
        top:0;
        bottom:0;
        left:50%;
        width:1px;
        transform:translateX(-.5px);
        background:
            repeating-linear-gradient(
                to bottom,
                #6f2622 0,
                #6f2622 2px,
                transparent 2px,
                transparent 4px
            );
        pointer-events:none;
    }

    /* 中央の横ドットライン */
    .pointcont.media::after {
        content:"";
        position:absolute;
        z-index:2;
        left:0;
        right:0;
        top:50%;
        height:1px;
        transform:translateY(-.5px);
        background:
            repeating-linear-gradient(
                to right,
                #6f2622 0,
                #6f2622 2px,
                transparent 2px,
                transparent 4px
            );
        pointer-events:none;
    }

    .pointcont.media .point {
        position:relative;
        display:flex;
        align-items:center;
        justify-content:center;
        width:auto;
        height:auto;
        min-height:0;
        margin:0;
        border:0;
        box-sizing:border-box;
        text-align:left;
    }

    .pointcont.media .point a {
        display:block;
        width:100%;
    }

    .pointcont.media .point img {
        display:block;
        width:100%;
        max-width:100%;
        height:auto;
        margin:0 auto;
    }

    /* 旧セルborderは完全に使わない */
    .pointcont.media .point:nth-of-type(1),
    .pointcont.media .point:nth-of-type(2),
    .pointcont.media .point:nth-of-type(3),
    .pointcont.media .point:nth-of-type(4) {
        border:0;
    }
}

/* 760：現在の見た目を大きく変えず、十字線から少しだけ離す */
@media only screen and (min-width:760px) and (max-width:767px) {
    .pointcont.media .point:nth-of-type(1),
    .pointcont.media .point:nth-of-type(2),
    .pointcont.media .point:nth-of-type(3),
    .pointcont.media .point:nth-of-type(4) {
        padding:12px;
    }
}

/*
 * 1023付近：
 * 画像がセルいっぱいに大きく見えすぎるため、
 * セル内側に余白（padding）を持たせて画像の見た目を一段小さくする。
 */
@media only screen and (min-width:901px) and (max-width:1023px) {
    .pointcont.media {
        padding:18px 22px;
    }

    .pointcont.media .point:nth-of-type(1),
    .pointcont.media .point:nth-of-type(2),
    .pointcont.media .point:nth-of-type(3),
    .pointcont.media .point:nth-of-type(4) {
        padding:20px 24px;
    }

    .pointcont.media .point img {
        width:92%;
        max-width:430px;
    }
}

/* ==========================================================================
   END D2k96
   ========================================================================== */


/* ==========================================================================
   D2k97 — GUIDE 「楽しむ方法」 center-gap balance
   2026-09-14

   768 / 785 / 900:
   D2k96で十字線をcontainer側へ移した際に中央側paddingが消えたため、
   縦ドットライン側だけ余白を戻す。

   1023:
   画像自体に横方向の白余白が含まれているため、
   中央の縦ライン側だけさらに広くして見た目の余白感を均す。
   ========================================================================== */

/* 768 / 785 / 900：中央縦ライン側にだけ十分な空きを作る */
@media only screen and (min-width:768px) and (max-width:900px) {
    .pointcont.media .point:nth-of-type(1),
    .pointcont.media .point:nth-of-type(3) {
        padding-right:24px;
    }

    .pointcont.media .point:nth-of-type(2),
    .pointcont.media .point:nth-of-type(4) {
        padding-left:24px;
    }

    .pointcont.media .point img {
        width:96%;
        max-width:100%;
        margin-left:auto;
        margin-right:auto;
    }
}

/* 901〜1022：中央側余白を少し広げる */
@media only screen and (min-width:901px) and (max-width:1022px) {
    .pointcont.media .point:nth-of-type(1),
    .pointcont.media .point:nth-of-type(3) {
        padding-right:34px;
    }

    .pointcont.media .point:nth-of-type(2),
    .pointcont.media .point:nth-of-type(4) {
        padding-left:34px;
    }
}

/*
 * 1023：
 * D2k96の左右24pxを基準に、中央縦ライン側だけ約2倍へ。
 * 外周側・上下側はそのままにして、中央だけ広げる。
 */
@media only screen and (min-width:1023px) and (max-width:1023px) {
    .pointcont.media .point:nth-of-type(1),
    .pointcont.media .point:nth-of-type(3) {
        padding-right:48px;
    }

    .pointcont.media .point:nth-of-type(2),
    .pointcont.media .point:nth-of-type(4) {
        padding-left:48px;
    }

    .pointcont.media .point img {
        width:92%;
        max-width:430px;
    }
}

/* ==========================================================================
   END D2k97
   ========================================================================== */


/* ==========================================================================
   D2k98 — GUIDE Q&A 760 inner spacing
   2026-09-14

   max-width:767px の旧ルールで
   .acc_wrap .acc { padding:0; }
   に上書きされ、Q&Aの罫線がコンテンツ端まで広がっていた。

   760だけ本来の上下左右40pxへ戻す。
   ========================================================================== */

@media only screen and (min-width:760px) and (max-width:767px) {
    .acc_wrap .acc {
        padding:40px;
        box-sizing:border-box;
    }
}

/* ==========================================================================
   END D2k98
   ========================================================================== */


/* ==========================================================================
   D2k99 — GUIDE Q&A 760 side border restore
   2026-09-14

   760用の旧ルールで外側dlだけ
   border-left / border-right:none になっていたため、
   Q&Aコンテンツ外周の青い縦罫線を復活させる。
   ========================================================================== */

@media only screen and (min-width:760px) and (max-width:767px) {
    .acc_wrap .acc li dl {
        border-left:1px solid #a2c0c8;
        border-right:1px solid #a2c0c8;
    }
}

/* ==========================================================================
   END D2k99
   ========================================================================== */


/* ==========================================================================
   D2k100 — MEDIA GUIDE menu
   2026-09-14

   「メディアガイド」の3項目メニューを、
   ご利用ガイドと同じデザイン言語で横1列・3等分に統一する。

   対象HTML:
   <div id="media_menu">
       <ul class="guide_nav"> ... 3 items ... </ul>
   </div>

   760 / 768 / 785 / 900 / 1023 / 1024 / PC 共通。
   ========================================================================== */

@media only screen and (min-width:760px) {
    #media_menu .guide_nav {
        display:grid;
        grid-template-columns:repeat(3, minmax(0, 1fr));
        gap:12px 14px;
        width:100%;
        margin:0 0 30px;
        padding:0;
        list-style:none;
    }

    #media_menu .guide_nav li {
        display:flex;
        align-items:center;
        width:100%;
        min-width:0;
        height:44px;
        min-height:44px;
        margin:0;
        padding:0 44px 0 18px;
        box-sizing:border-box;

        background-color:#e5e4e4;
        border:1px solid #ccc;
        border-radius:5px;
        box-shadow:-1px -1px 0 #333;

        color:#2a6c9d;
        font-family:"Noto Serif JP", serif;
        font-size:clamp(15px, 1.35vw, 19px);
        font-weight:normal;
        letter-spacing:.06em;
        line-height:1.25;
        white-space:nowrap;
        position:relative;
    }

    #media_menu .guide_nav li a {
        display:flex;
        align-items:center;
        width:100%;
        min-width:0;
        height:100%;
        color:inherit;
        text-decoration:none;
    }

    #media_menu .guide_nav li::after {
        right:16px;
    }

    #media_menu .guide_nav li.current {
        pointer-events:none;
        color:#a14d33;
        background:#fbebe2;
    }
}

/*
 * 実スマホ幅では3項目横並びは文字が潰れるため、
 * 759px以下だけは1列縦並びを維持する。
 * プロジェクトの確認幅760以上では常に横1列。
 */
@media only screen and (max-width:759px) {
    #media_menu .guide_nav {
        display:grid;
        grid-template-columns:1fr;
        gap:8px;
        width:100%;
        margin:0 0 30px;
        padding:0;
    }

    /* D2k206: center the link label vertically inside the fixed 44px row. */
    #media_menu .guide_nav li {
        display:flex;
        align-items:center;
        width:100%;
        height:44px;
        min-height:44px;
        margin:0;
        padding:0 44px 0 18px;
        box-sizing:border-box;
    }

    #media_menu .guide_nav li a {
        display:flex;
        align-items:center;
        width:100%;
        min-width:0;
        height:100%;
        line-height:1.35;
    }
}

/* ==========================================================================
   END D2k100
   ========================================================================== */

/* ==========================================================================
   END D2 MANAGED CSS
   ========================================================================== */

/* ==========================================================================
   PAGE TOP SCROLL — disable native smooth only during custom JS animation
   2026-09-14

   EC-CUBE標準 style.css の
   @media (prefers-reduced-motion: no-preference) {
       :root { scroll-behavior: smooth; }
   }
   が、ページトップ用jQuery animateのlinear移動に重なって
   クリック直後の「ぬるっ」とした補間を発生させていた。

   function.js がページトップ移動中だけ html に
   .is-pagetop-scrolling を付与するため、その間だけnative smoothを解除する。
   通常のページ内アンカー等には影響させない。
   ========================================================================== */

html.is-pagetop-scrolling {
    scroll-behavior: auto;
}

/* ==========================================================================
   END PAGE TOP SCROLL
   ========================================================================== */

/* ==========================================================================
   GUIDE PAGE SCROLL — disable native smooth only during custom JS animation
   2026-09-14

   ご利用ガイド / メディアガイドのページ内リンクでは、
   function.js がスクロール中だけ html に .is-guide-scrolling を付与する。
   EC-CUBE標準 style.css の :root { scroll-behavior: smooth; } を
   その間だけ無効化し、jQuery animate の linear 移動だけを有効にする。
   ========================================================================== */

html.is-guide-scrolling {
    scroll-behavior: auto;
}

/* ==========================================================================
   END GUIDE PAGE SCROLL
   ========================================================================== */

/* ==========================================================================
   CONTACT / 760px — restore border structure
   2026-09-15

   760pxでは max-width:767px の既存指定により、
   お問い合わせページの外枠 .ec-off1Grid と
   フォーム各行 .ec-borderedDefs dl の罫線が解除されていた。

   768px以上で成立している罫線構造を、
   お問い合わせページの760〜767pxだけに限定して復元する。
   他ページ / 759px以下 / 768px以上には影響させない。
   ========================================================================== */

@media only screen and (min-width: 760px) and (max-width: 767px) {
    #page_contact .ec-off1Grid {
        border: 1px solid #ccc;
    }

    #page_contact .ec-borderedDefs dl {
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
    }
}

/* ==========================================================================
   END CONTACT / 760px
   ========================================================================== */

/* ==========================================================================
   HELP ABOUT / TRADELAW — responsive nested table panel
   2026-09-15

   SP帯では .ec-off1Grid__cell の余白が0になり、
   外枠 .ec-off1Grid と内側 .ec-borderedDefs が同位置に重なって
   上罫線が二重に見えていた。

   760pxではPC側に近い40pxの入れ子余白を確保しつつ、
   狭幅では余白を自動的に縮める。
   特定幅だけを最適化せず、max-width:767px の範囲全体で成立させる。

   760px付近: 40px
   640px付近: 約34px
   500px付近: 約26px
   375px以下: 20px下限
   ========================================================================== */

@media only screen and (max-width: 767px) {
    #page_help_about .ec-off1Grid,
    #page_help_tradelaw .ec-off1Grid {
        padding: clamp(20px, 5.263vw, 40px);
    }

    #page_help_about .ec-borderedDefs,
    #page_help_tradelaw .ec-borderedDefs {
        border: 1px solid #ccc;
    }
}

/* ABOUT / TRADE-LAW / <=375px — remove redundant nested outer frame/inset.
   The inner .ec-borderedDefs is already a complete 1px-bordered table.
   Keeping both borders without spacing would double the visible line.
   Retain the responsive nested frames from 376px upwards. */
@media only screen and (max-width: 375px) {
    #page_help_about .ec-off1Grid,
    #page_help_tradelaw .ec-off1Grid {
        padding: 0;
        border: 0;
    }
}

/* ==========================================================================
   END HELP ABOUT / TRADELAW
   ========================================================================== */

/* ==========================================================================
   PRIVACY POLICY — restore SP outer panel border
   2026-09-15

   max-width:767px の既存指定で #page_help_privacy .ec-off1Grid は
   下罫線だけを残して上・左右を消していた。
   プライバシーポリシーのメインコンテンツはSP帯でも
   1つの白いパネルとして成立するため、外枠4辺を復元する。

   1px枠のみなので狭幅でも可読領域への影響は小さく、
   760pxだけでなくSP帯全体へ適用する。
   ========================================================================== */

@media only screen and (max-width: 767px) {
    #page_help_privacy .ec-off1Grid {
        border: 1px solid #ccc;
    }
}

/* ==========================================================================
   END PRIVACY POLICY
   ========================================================================== */

/* ==========================================================================
   ENTRY / REGISTRATION — responsive panel spacing + horizontal actions
   2026-09-15

   760px付近では .ec-off1Grid と .ec-borderedDefs の上罫線が
   padding:0 のため同位置に重なり、二重線に見えていた。
   376〜767pxでは外枠内余白を可変にして入れ子を維持する。
   D2k210: 375px以下だけ外枠の内側余白を解除。
   D2k211: 375px以下では内枠罫線を解除し、外枠のみ残す。
   D2k212: 375px以下では枠の終点をフォーム最終行に変更。
           フォーム枠→操作ボタン30px、操作ボタン→フッター60px。
   D2k213: 外側パネルの白背景を解除して、白地の終点もフォーム最終行へ。
   D2k214: 500px/640pxのフッター前60pxを追加し、500〜759pxの
           会員登録タイトルを他の確認済みページ同様30pxへ合わせる。

   また「同意する / 同意しない」は全幅で横並び・等幅に統一する。
   ボタン側に残る既存width / max-width / margin差をページ限定で解除し、
   flexで利用可能幅を均等配分する。
   ========================================================================== */

/* Keep the existing nested panel inset at 376–767px. */
@media only screen and (min-width: 376px) and (max-width: 767px) {
    #page_entry .ec-off1Grid {
        padding: clamp(20px, 5.263vw, 40px);
    }
}

/* D2k212–D2k213 / <=375px: form-only white frame and final rhythm.
   The newsletter receive / do-not-receive choice is the final form row.
   The inner .ec-borderedDefs owns both the visible border AND white fill.
   The outer .ec-off1Grid remains a transparent layout wrapper, so the
   action area and footer gap return to the standard gray page background.
   No changes to the nested-panel design at >=376px. */
@media only screen and (max-width: 375px) {
    #page_entry .ec-off1Grid {
        padding: 0;
        border: 0;
        background-color: transparent;
    }

    #page_entry .ec-borderedDefs {
        border: 1px solid #ccc;
        background-color: #fff;
        margin-bottom: 0;
        box-sizing: border-box;
    }

    /* 30px from the bottom of the form frame to the top of the buttons. */
    #page_entry .ec-registerRole__actions {
        margin-top: 30px;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    #page_entry .ec-registerRole__actions .ec-off4Grid,
    #page_entry .ec-registerRole__actions .ec-off4Grid__cell {
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    #page_entry .ec-registerRole__actions .ec-blockBtn--action,
    #page_entry .ec-registerRole__actions .ec-blockBtn--cancel {
        margin-top: 0;
        margin-bottom: 0;
    }

}

/* D2k214 — T7 ENTRY: keep the accepted <=375px spacing and extend
   only the outer 60px footer gap to 376–640px (including 500/640). */
@media only screen and (max-width: 640px) {
    body#page_entry .ec-layoutRole > .ec-layoutRole__contents {
        padding-bottom: var(--kinema-mobile-footer-gap);
        box-sizing: border-box;
    }
}

/* D2k214 — ENTRY heading: same 500–759px 30px standard as other
   accepted narrow pages; <=499px remains at the existing 24px. */
@media only screen and (min-width: 500px) and (max-width: 759px) {
    body#page_entry .ec-pageHeader h1 {
        font-size: 30px;
    }
}

#page_entry .ec-registerRole__actions .ec-off4Grid__cell {
    display: flex;
    flex-wrap: nowrap;
    gap: clamp(10px, 2.6vw, 20px);
}

#page_entry .ec-registerRole__actions .ec-blockBtn--action,
#page_entry .ec-registerRole__actions .ec-blockBtn--cancel {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
}

/* ==========================================================================
   END ENTRY / REGISTRATION
   ========================================================================== */

/* ==========================================================================
   ENTRY / REGISTRATION — SP inner border + action order
   2026-09-15

   SP帯では既存CSSにより .ec-borderedDefs が上罫線だけになっていたため、
   外枠との間に余白を復元した後も内側フォーム枠が不完全だった。
   376〜767pxでは会員登録ページの内側枠4辺を復元する。
   375px以下はD2k212–D2k213でフォーム側に枠と白背景を一本化する。

   またHTML順は「同意する → 同意しない」だが、
   画面上は「同意しない → 同意する」となるよう
   flex-direction: row-reverse を指定する。
   ========================================================================== */

@media only screen and (min-width: 376px) and (max-width: 767px) {
    #page_entry .ec-borderedDefs {
        border: 1px solid #ccc;
    }
}

#page_entry .ec-registerRole__actions .ec-off4Grid__cell {
    flex-direction: row-reverse;
}

/* ==========================================================================
   END ENTRY / REGISTRATION
   ========================================================================== */

/* ==========================================================================
   ENTRY — confirm spacing / button typography / complete page redesign
   2026-09-15

   1) 確認ページ:
      説明文と確認表の間を15px空ける。

   2) 会員登録系アクション:
      入力 / 確認ページのアクションボタン文字を18pxへ。

   3) 仮登録完了:
      注文完了ページのカードUIを基準に、
      会員登録カラー #b21214 をアクセントとして再構成。
      狭幅端末まで破綻しないよう余白・文字・ボタン寸法は可変化する。
   ========================================================================== */

/* --------------------------------------------------------------------------
   ENTRY CONFIRM
   -------------------------------------------------------------------------- */

#page_entry .ec-off1Grid__cell form > p + .ec-borderedDefs {
    margin-top:15px;
}

#page_entry .ec-registerRole__actions .ec-blockBtn--action,
#page_entry .ec-registerRole__actions .ec-blockBtn--cancel {
    font-size:18px;
}

/* --------------------------------------------------------------------------
   ENTRY COMPLETE — full-width transactional layout
   -------------------------------------------------------------------------- */

/*
 * 仮登録完了は操作フローの終点なので、右サイドを外して
 * 注文完了ページと同様にメインコンテンツを1カラム化する。
 */
#page_entry_complete .ec-layoutRole__contents > .ec-layoutRole__right {
    display:none;
}

#page_entry_complete .ec-layoutRole__contents > .ec-layoutRole__main,
#page_entry_complete .ec-layoutRole__contents > .ec-layoutRole__mainWithColumn {
    width:100%;
    max-width:none;
    flex:1 1 100%;
    margin-left:0;
    margin-right:0;
}

/*
 * カード余白は画面幅に応じて20〜48pxで可変。
 * 375px級でも内容幅を確保し、PCでは注文完了ページ相当の余白へ。
 */
#page_entry_complete .ec-registerCompleteRole {
    --kinema-entry-complete-pad:clamp(20px, 4vw, 48px);

    width:min(calc(100% - 32px), 980px);
    margin:clamp(24px, 3vw, 36px) auto 80px;
    padding:0 var(--kinema-entry-complete-pad) clamp(28px, 4vw, 40px);

    background:#fff;
    border:1px solid #d2d2d2;
    border-top:4px solid #b21214;
    border-radius:10px;
    box-shadow:0 10px 28px rgba(0,0,0,.06);
    box-sizing:border-box;
    overflow:hidden;
}

/* カード見出し */
#page_entry_complete .ec-registerCompleteRole .ec-reportHeading {
    display:flex;
    align-items:center;
    justify-content:center;

    width:calc(100% + (var(--kinema-entry-complete-pad) * 2));
    margin:0 calc(var(--kinema-entry-complete-pad) * -1);
    padding:clamp(24px, 3vw, 30px) var(--kinema-entry-complete-pad);

    background:#fff;
    border-bottom:1px solid #d9d9d9;
    box-sizing:border-box;
}

#page_entry_complete .ec-registerCompleteRole .ec-reportHeading h2 {
    margin:0;
    color:#b21214;
    font-size:clamp(24px, 3vw, 34px);
    font-weight:700;
    line-height:1.25;
    letter-spacing:.02em;
    text-align:center;
}

/* 旧off-gridの幅・offsetを解除 */
#page_entry_complete .ec-registerCompleteRole .ec-off3Grid,
#page_entry_complete .ec-registerCompleteRole .ec-off3Grid__cell,
#page_entry_complete .ec-registerCompleteRole .ec-off4Grid,
#page_entry_complete .ec-registerCompleteRole .ec-off4Grid__cell {
    width:100%;
    max-width:none;
    float:none;
    margin-left:0;
    margin-right:0;
    padding-left:0;
    padding-right:0;
    box-sizing:border-box;
}

#page_entry_complete .ec-registerCompleteRole .ec-off3Grid.ec-text-ac {
    padding-top:clamp(24px, 3vw, 30px);
}

/* 仮登録案内 */
#page_entry_complete .ec-registerCompleteRole .ec-reportDescription {
    width:100%;
    max-width:760px;
    margin:0 auto;
    padding:clamp(20px, 2.8vw, 26px) clamp(18px, 3vw, 30px);

    background:#fafafa;
    border:1px solid #dedede;
    border-radius:8px;

    color:#55556b;
    font-size:clamp(15px, 1.8vw, 18px);
    line-height:1.9;
    text-align:center;
    box-sizing:border-box;
}

/* 末尾の空brによる余白増加を防ぐ */
#page_entry_complete .ec-registerCompleteRole .ec-reportDescription br:last-child {
    display:none;
}

/* 案内 → CTA */
#page_entry_complete .ec-registerCompleteRole .ec-off4Grid {
    margin-top:30px;
}

/* 「トップページへ」 */
#page_entry_complete .ec-registerCompleteRole .ec-blockBtn--cancel {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;
    max-width:420px;
    height:clamp(56px, 6vw, 68px);
    min-height:56px;
    margin:0 auto;
    padding:0 56px 0 32px;

    color:#555;
    background:linear-gradient(to bottom,#fff 0%,#e5e5e5 100%);
    border:1px solid #c7c7c7;
    border-radius:4px;
    box-sizing:border-box;

    font-size:clamp(17px, 2vw, 22px);
    font-weight:700;
    line-height:1.35;
    text-align:center;
    text-decoration:none;
}

#page_entry_complete .ec-registerCompleteRole .ec-blockBtn--cancel:hover,
#page_entry_complete .ec-registerCompleteRole .ec-blockBtn--cancel:focus {
    color:#b21214;
    border-color:#b21214;
    outline:none;
}

/* 完了画面CTAは「進む」方向の右矢印に統一 */
#page_entry_complete .ec-registerCompleteRole .ec-blockBtn--cancel::before {
    content:none !important;
    display:none !important;
}

#page_entry_complete .ec-registerCompleteRole .ec-blockBtn--cancel::after {
    content:"";
    position:absolute;
    top:0;
    right:20px;
    bottom:0;
    left:auto;

    width:14px;
    height:14px;
    margin:auto;

    background:url(../img/common/icon_btn_arrow.png) no-repeat center;
    background-size:100%;
    transform:none;
}

#page_entry_complete .ec-registerCompleteRole .ec-blockBtn--cancel:hover::after,
#page_entry_complete .ec-registerCompleteRole .ec-blockBtn--cancel:focus::after {
    background-image:url(../img/common/icon_btn_arrow_hov.png);
}

/* D2k216 — temporary-registration COMPLETE title baseline (T3 / T7).
   Narrow widths only. The generic .ec-role h1 {padding:20px} was the
   effective owner of the unwanted horizontal/vertical inner whitespace.
   Own the 30px TOP gap on the page contents, the 30px BELOW the heading
   on h1 itself (not a collapsing wrapper margin), and cancel the card's
   former 24px top margin so these spaces do not accumulate.
   No change to card width or report heading: the D2k215 one-line text
   must remain intact at 375px. >=760px and all other pages unchanged. */
@media only screen and (max-width: 759px) {
    body#page_entry_complete .ec-layoutRole > .ec-layoutRole__contents {
        padding-top: 30px;
    }

    body#page_entry_complete .ec-pageHeader h1 {
        margin: 0;
        padding: 0 0 30px;
        text-align: left;
    }

    #page_entry_complete .ec-registerCompleteRole {
        margin-top: 0;
    }
}

@media only screen and (min-width: 500px) and (max-width: 759px) {
    body#page_entry_complete .ec-pageHeader h1 {
        font-size: 30px;
    }
}

/* 375px級ではCTAの左右paddingも少し縮める */
@media only screen and (max-width:499px) {
    #page_entry_complete .ec-registerCompleteRole {
        width:calc(100% - 24px);
        margin-bottom:60px;
    }

    /* D2k215: keep the long temporary-registration page title on one
       line at 375px without changing titles on other pages. */
    body#page_entry_complete .ec-pageHeader h1 {
        font-size:clamp(18px, 5.8vw, 24px);
    }

    /* Use a small amount of header inset rather than reducing the
       success message excessively. Allow natural wrapping if the user
       enlarges text or the available width is unusually narrow. */
    #page_entry_complete .ec-registerCompleteRole .ec-reportHeading {
        padding-left:10px;
        padding-right:10px;
    }

    #page_entry_complete .ec-registerCompleteRole .ec-reportHeading h2 {
        font-size:clamp(18px, 5.2vw, 24px);
    }

    #page_entry_complete .ec-registerCompleteRole .ec-blockBtn--cancel {
        padding-left:24px;
        padding-right:44px;
    }

    #page_entry_complete .ec-registerCompleteRole .ec-blockBtn--cancel::after {
        right:16px;
        width:13px;
        height:13px;
    }
}

/* ==========================================================================
   END ENTRY CONFIRM / COMPLETE
   ========================================================================== */

/* ==========================================================================
   ENTRY ACTIVATE — registered-member completion UI
   2026-09-15

   本会員登録完了ページを、仮登録完了ページと同じ
   「白カード＋赤アクセント＋1カラム」の完了UIへ統一する。
   DOM構造は .ec-registerCompleteRole 以下が仮登録完了と同一。
   ========================================================================== */

/* 右サイドを外して1カラム化 */
#page_entry_activate .ec-layoutRole__contents > .ec-layoutRole__right {
    display:none;
}

#page_entry_activate .ec-layoutRole__contents > .ec-layoutRole__main,
#page_entry_activate .ec-layoutRole__contents > .ec-layoutRole__mainWithColumn {
    width:100%;
    max-width:none;
    flex:1 1 100%;
    margin-left:0;
    margin-right:0;
}

/* 完了カード */
#page_entry_activate .ec-registerCompleteRole {
    --kinema-entry-complete-pad:clamp(20px, 4vw, 48px);

    width:min(calc(100% - 32px), 980px);
    margin:clamp(24px, 3vw, 36px) auto 80px;
    padding:0 var(--kinema-entry-complete-pad) clamp(28px, 4vw, 40px);

    background:#fff;
    border:1px solid #d2d2d2;
    border-top:4px solid #b21214;
    border-radius:10px;
    box-shadow:0 10px 28px rgba(0,0,0,.06);
    box-sizing:border-box;
    overflow:hidden;
}

/* カード見出し */
#page_entry_activate .ec-registerCompleteRole .ec-reportHeading {
    display:flex;
    align-items:center;
    justify-content:center;

    width:calc(100% + (var(--kinema-entry-complete-pad) * 2));
    margin:0 calc(var(--kinema-entry-complete-pad) * -1);
    padding:clamp(24px, 3vw, 30px) var(--kinema-entry-complete-pad);

    background:#fff;
    border-bottom:1px solid #d9d9d9;
    box-sizing:border-box;
}

#page_entry_activate .ec-registerCompleteRole .ec-reportHeading h2 {
    margin:0;
    color:#b21214;
    font-size:clamp(24px, 3vw, 34px);
    font-weight:700;
    line-height:1.25;
    letter-spacing:.02em;
    text-align:center;
}

/* 旧off-grid解除 */
#page_entry_activate .ec-registerCompleteRole .ec-off3Grid,
#page_entry_activate .ec-registerCompleteRole .ec-off3Grid__cell,
#page_entry_activate .ec-registerCompleteRole .ec-off4Grid,
#page_entry_activate .ec-registerCompleteRole .ec-off4Grid__cell {
    width:100%;
    max-width:none;
    float:none;
    margin-left:0;
    margin-right:0;
    padding-left:0;
    padding-right:0;
    box-sizing:border-box;
}

#page_entry_activate .ec-registerCompleteRole .ec-off3Grid.ec-text-ac {
    padding-top:clamp(24px, 3vw, 30px);
}

/* 完了案内 */
#page_entry_activate .ec-registerCompleteRole .ec-reportDescription {
    width:100%;
    max-width:760px;
    margin:0 auto;
    padding:clamp(20px, 2.8vw, 26px) clamp(18px, 3vw, 30px);

    background:#fafafa;
    border:1px solid #dedede;
    border-radius:8px;

    color:#55556b;
    font-size:clamp(15px, 1.8vw, 18px);
    line-height:1.9;
    text-align:center;
    box-sizing:border-box;
}

#page_entry_activate .ec-registerCompleteRole .ec-reportDescription br:last-child {
    display:none;
}

/* 案内 → CTA */
#page_entry_activate .ec-registerCompleteRole .ec-off4Grid {
    margin-top:30px;
}

/* トップページへ */
#page_entry_activate .ec-registerCompleteRole .ec-blockBtn--cancel {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;
    max-width:420px;
    height:clamp(56px, 6vw, 68px);
    min-height:56px;
    margin:0 auto;
    padding:0 56px 0 32px;

    color:#555;
    background:linear-gradient(to bottom,#fff 0%,#e5e5e5 100%);
    border:1px solid #c7c7c7;
    border-radius:4px;
    box-sizing:border-box;

    font-size:clamp(17px, 2vw, 22px);
    font-weight:700;
    line-height:1.35;
    text-align:center;
    text-decoration:none;
}

#page_entry_activate .ec-registerCompleteRole .ec-blockBtn--cancel:hover,
#page_entry_activate .ec-registerCompleteRole .ec-blockBtn--cancel:focus {
    color:#b21214;
    border-color:#b21214;
    outline:none;
}

#page_entry_activate .ec-registerCompleteRole .ec-blockBtn--cancel::before {
    content:none !important;
    display:none !important;
}

#page_entry_activate .ec-registerCompleteRole .ec-blockBtn--cancel::after {
    content:"";
    position:absolute;
    top:0;
    right:20px;
    bottom:0;
    left:auto;

    width:14px;
    height:14px;
    margin:auto;

    background:url(../img/common/icon_btn_arrow.png) no-repeat center;
    background-size:100%;
    transform:none;
}

#page_entry_activate .ec-registerCompleteRole .ec-blockBtn--cancel:hover::after,
#page_entry_activate .ec-registerCompleteRole .ec-blockBtn--cancel:focus::after {
    background-image:url(../img/common/icon_btn_arrow_hov.png);
}

/* D2k217 — registered-member activation complete (T3 / T7).
   Align the page heading with its content at ALL widths; at <=759px,
   mirror the accepted D2k216 temporary-registration complete title gaps.
   Preserve the existing large-heading layout at >=760px. */
body#page_entry_activate .ec-pageHeader h1 {
    padding-left: 0;
    padding-right: 0;
    text-align: left;
}

@media only screen and (max-width: 759px) {
    body#page_entry_activate .ec-layoutRole > .ec-layoutRole__contents {
        padding-top: 30px;
    }

    body#page_entry_activate .ec-pageHeader h1 {
        margin: 0;
        padding-top: 0;
        padding-bottom: 30px;
    }

    #page_entry_activate .ec-registerCompleteRole {
        margin-top: 0;
    }
}

/* T7 confirmed mobile heading scale: 24px at 375; 30px at 500/640.
   Below 760px, use the same title typography as the accepted signup
   confirmation and provisional-registration complete screens. */
@media only screen and (min-width: 500px) and (max-width: 759px) {
    body#page_entry_activate .ec-pageHeader h1 {
        font-size: 30px;
    }
}

@media only screen and (max-width:499px) {
    #page_entry_activate .ec-registerCompleteRole {
        width:calc(100% - 24px);
        margin-bottom:60px;
    }

    /* Match D2k215/D2k216 accepted single-line success message at 375px;
       allow natural wrapping on unusually narrow or enlarged-text views. */
    #page_entry_activate .ec-registerCompleteRole .ec-reportHeading {
        padding-left:10px;
        padding-right:10px;
    }

    #page_entry_activate .ec-registerCompleteRole .ec-reportHeading h2 {
        font-size:clamp(18px, 5.2vw, 24px);
    }

    #page_entry_activate .ec-registerCompleteRole .ec-blockBtn--cancel {
        padding-left:24px;
        padding-right:44px;
    }

    #page_entry_activate .ec-registerCompleteRole .ec-blockBtn--cancel::after {
        right:16px;
        width:13px;
        height:13px;
    }
}

/* ==========================================================================
   END ENTRY ACTIVATE
   ========================================================================== */

/* ==========================================================================
   HELP / AGREEMENT — SP inner spacing
   2026-09-15

   760px側では利用規約の外枠内余白がなく、内容が四辺に接して見えるため、
   SP帯全体で外枠内のpaddingを可変化する。
   760px付近では約40px、狭幅では20pxまで自然に縮小。
   ========================================================================== */

@media only screen and (max-width: 767px) {
    #page_help_agreement .ec-off1Grid {
        padding: clamp(20px, 5.263vw, 40px);
    }
}

/* D2k223 — HELP / AGREEMENT title alignment and footer gap.
   Preserve the accepted agreement box padding above, all other page
   families and the existing >=760px presentation. */
@media only screen and (max-width: 759px) {
    body#page_help_agreement .ec-layoutRole > .ec-layoutRole__contents {
        padding-top: 30px;
    }

    /* Heading's own bottom padding owns the visible 30px gap.
       Cancel the legacy .ec-role h1 20px inset on all sides. */
    body#page_help_agreement .ec-pageHeader h1 {
        margin: 0;
        padding: 0 0 30px;
        font-size: 24px;
        text-align: left;
    }
}

@media only screen and (min-width: 500px) and (max-width: 759px) {
    body#page_help_agreement .ec-pageHeader h1 {
        font-size: 30px;
    }
}

@media only screen and (max-width: 640px) {
    /* Outer page contents alone owns the 60px last-content/footer gap. */
    body#page_help_agreement .ec-layoutRole > .ec-layoutRole__contents {
        padding-bottom: var(--kinema-mobile-footer-gap);
        box-sizing: border-box;
    }
}

/* ==========================================================================
   END HELP / AGREEMENT
   ========================================================================== */

/* ==========================================================================
   FORGOT PASSWORD — form spacing + button typography
   2026-09-15

   ・「次へ」ボタン文字を18pxへ統一。
   ・メールアドレス行の上下余白を同値にし、入力欄の上下バランスを整える。
   ・説明文末尾からメールアドレス欄までの間隔を広めに確保する。
   ・375px級まで破綻しないよう、余白はclamp()で可変化。
   ========================================================================== */

/* 説明文 → メールアドレス欄 */
#page_forgot .ec-forgotRole__intro {
    margin-bottom: clamp(30px, 4vw, 44px);
}

/* メールアドレス行：上下余白を均等化 */
#page_forgot .ec-borderedDefs dt,
#page_forgot .ec-borderedDefs dd {
    padding-top: clamp(24px, 3vw, 32px);
    padding-bottom: clamp(24px, 3vw, 32px);
    box-sizing: border-box;
}

/* 「次へ」 */
#page_forgot .ec-off4Grid .ec-blockBtn--action {
    font-size: 18px;
}

/* ==========================================================================
   END FORGOT PASSWORD
   ========================================================================== */

/* ==========================================================================
   FORGOT PASSWORD — vertically center email input
   2026-09-15

   padding上下を同値にしても、既存レイアウト側の行高・子要素位置の影響で
   入力欄が上寄りに見えていたため、メールアドレス欄だけ縦中央配置する。
   ========================================================================== */

#page_forgot .ec-borderedDefs dd {
    display: flex;
    align-items: center;
}

#page_forgot .ec-borderedDefs dd .ec-input {
    width: 100%;
    margin: 0;
}

#page_forgot .ec-borderedDefs dd .ec-input input {
    margin-top: 0;
    margin-bottom: 0;
}

/* ==========================================================================
   D2k218 — T7 FORGOT PASSWORD / MOBILE FORM RHYTHM
   2026-10-21

   Keep edits on the actual #page_forgot page.  The T7 page-heading
   standard uses a 30px outside top gap and an h1-owned 30px bottom gap;
   the latter avoids the collapsed-wrapper margin seen on login.
   Narrow 375px intro, input border, action and footer are page-local.
   The previously accepted >375px form layout remains unchanged.
   ========================================================================== */
@media only screen and (max-width: 759px) {
    body#page_forgot .ec-layoutRole > .ec-layoutRole__contents {
        padding-top: 30px;
    }

    body#page_forgot .ec-pageHeader h1 {
        margin: 0;
        padding: 0 0 30px;
        text-align: left;
    }
}

@media only screen and (min-width: 500px) and (max-width: 759px) {
    body#page_forgot .ec-pageHeader h1 {
        font-size: 30px;
    }
}

@media only screen and (max-width: 375px) {
    /* The two explanatory paragraphs belong to the same white intro.
       Preserve the 20px inner text inset; remove oversized paragraph
       margins/vertical padding and use one controlled 20px gap. */
    #page_forgot .ec-forgotRole__intro {
        padding: 20px;
        box-sizing: border-box;
    }

    #page_forgot .ec-forgotRole__intro > p {
        margin: 0;
        padding: 0;
    }

    #page_forgot .ec-forgotRole__intro > p + p {
        margin-top: 20px;
    }

    /* Remove only the separate line above the tinted email-label row. */
    #page_forgot .ec-borderedDefs {
        border-top: 0;
    }

    /* Visible input-panel border -> button top: 30px, not the old
       button's additional 10px auto margin. */
    #page_forgot .ec-off4Grid {
        margin-top: 30px;
        margin-bottom: 0;
    }

    #page_forgot .ec-off4Grid .ec-blockBtn--action {
        margin-top: 0;
        margin-bottom: 0;
    }

}
/* ==========================================================================
   END D2k218 T7 FORGOT PASSWORD
   ========================================================================== */

/* ==========================================================================
   D2k219 — T7 FORGOT PASSWORD / 375–640px FOOTER GAP
   2026-10-21

   Keep all approved D2k218 375px form spacing intact. Extend only the
   already-approved 60px last-content-to-footer gap to 500px/640px.
   The outer content wrapper owns the gap, like other T7 pages.
   ========================================================================== */
@media only screen and (max-width: 640px) {
    body#page_forgot .ec-layoutRole > .ec-layoutRole__contents {
        padding-bottom: var(--kinema-mobile-footer-gap);
        box-sizing: border-box;
    }
}
/* ==========================================================================
   END D2k219 T7 FORGOT PASSWORD
   ========================================================================== */

/* ==========================================================================
   END FORGOT PASSWORD — vertical centering
   ========================================================================== */

/* ==========================================================================
   FORGOT COMPLETE — completion card UI
   2026-09-16

   パスワード再発行メール送信完了ページを、
   会員登録完了ページと同系統の
   「白カード＋赤アクセント＋中央メッセージ」へ統一する。

   ※右サイドカラムは維持し、メインコンテンツ内だけを整える。
   ========================================================================== */

#page_forgot_complete .ec-forgetCompleteRole {
    --kinema-complete-pad: clamp(20px, 4vw, 40px);

    width: 100%;
    margin: clamp(24px, 3vw, 36px) 0 80px;
    padding: 0 var(--kinema-complete-pad) clamp(28px, 4vw, 40px);

    background: #fff;
    border: 1px solid #d2d2d2;
    border-top: 4px solid #b21214;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0,0,0,.06);
    box-sizing: border-box;
    overflow: hidden;
}

#page_forgot_complete .ec-forgetCompleteRole .ec-off3Grid,
#page_forgot_complete .ec-forgetCompleteRole .ec-off3Grid__cell {
    width: 100%;
    max-width: none;
    float: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
}

#page_forgot_complete .ec-forgetCompleteRole .ec-reportHeading {
    display: flex;
    align-items: center;
    justify-content: center;

    width: calc(100% + (var(--kinema-complete-pad) * 2));
    margin: 0 calc(var(--kinema-complete-pad) * -1);
    padding: clamp(24px, 3vw, 30px) var(--kinema-complete-pad);

    background: #fff;
    border-bottom: 1px solid #d9d9d9;
    box-sizing: border-box;
}

#page_forgot_complete .ec-forgetCompleteRole .ec-reportHeading h2 {
    margin: 0;
    color: #b21214;
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: .02em;
    text-align: center;
}

#page_forgot_complete .ec-forgetCompleteRole .ec-reportDescription {
    width: 100%;
    max-width: 760px;
    margin: clamp(24px, 3vw, 30px) auto 0;
    padding: clamp(20px, 2.8vw, 26px) clamp(18px, 3vw, 30px);

    background: #fafafa;
    border: 1px solid #dedede;
    border-radius: 8px;

    color: #55556b;
    font-size: clamp(15px, 1.8vw, 18px);
    line-height: 1.9;
    text-align: center;
    box-sizing: border-box;
}

@media only screen and (max-width: 499px) {
    #page_forgot_complete .ec-forgetCompleteRole {
        margin-bottom: 60px;
    }
}

/* D2k220 — T3/T7 password-reset mail sent / narrow page framing.
   Limit the 20px gutters to the three approved check widths (<=640px).
   The outer contents owns horizontal/upper spacing; the h1 owns the
   bottom 30px, while the card's old top margin is removed.  This avoids
   summing the old 20px h1 padding with the card's 24–36px top margin.
   The completion card, message text, footer, and >=760px layout are not
   otherwise restyled. */
@media only screen and (max-width: 640px) {
    body#page_forgot_complete .ec-layoutRole > .ec-layoutRole__contents {
        padding-top: 30px;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }

    /* D2k221: the live page header is 20px farther right than its card,
       even after D2k220 reset the H1's own padding. Compensate the
       header wrapper (as previously approved for the media-guide T9),
       without moving the card or other page content. */
    body#page_forgot_complete .ec-pageHeader {
        margin-left: -20px;
    }

    body#page_forgot_complete .ec-pageHeader h1 {
        margin: 0;
        padding: 0 0 30px;
        /* Long 16-character heading: a fluid size gives one natural line
           at 375 and 500 while reaching the normal 30px at 600–640. */
        font-size: clamp(16px, 5vw, 30px);
        text-align: left;
    }

    #page_forgot_complete .ec-forgetCompleteRole {
        margin-top: 0;
    }
}

/* ==========================================================================
   END FORGOT COMPLETE
   ========================================================================== */

/* ==========================================================================
   FORGOT COMPLETE / RESET — heading tone + reset form fixes
   2026-09-16

   ・メール送信完了ページの見出しを、赤ではなく濃いグレーへ変更。
   ・見出しサイズを控えめにし、20〜26pxで可変化。
   ・パスワード再設定ページはSP帯で外枠と内枠を分離し、
     760px付近の二重罫線を解消。
   ・再設定ページの「登録する」ボタン文字を18pxへ。
   ========================================================================== */

/* --------------------------------------------------------------------------
   FORGOT COMPLETE — calmer heading treatment
   -------------------------------------------------------------------------- */

#page_forgot_complete .ec-forgetCompleteRole .ec-reportHeading h2 {
    color: #55556b;
    font-size: clamp(20px, 2.2vw, 26px);
}

/* D2k221: the 22-character success heading requires more text width than
   the short registration-success heading. At narrow sizes, reduce only
   this card's heading size and, below 500px, its heading-side inset.
   Do not force white-space:nowrap; respect user text zoom. */
@media only screen and (max-width: 599px) {
    #page_forgot_complete .ec-forgetCompleteRole .ec-reportHeading h2 {
        font-size: clamp(13px, 3.65vw, 20px);
    }
}
@media only screen and (max-width: 499px) {
    #page_forgot_complete .ec-forgetCompleteRole .ec-reportHeading {
        padding-left: 6px;
        padding-right: 6px;
    }
    #page_forgot_complete .ec-forgetCompleteRole .ec-reportHeading h2 {
        letter-spacing: 0;
    }
}

/* --------------------------------------------------------------------------
   FORGOT RESET — nested border / action typography
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 767px) {
    #page_forgot_reset .ec-off1Grid {
        padding: clamp(20px, 5.263vw, 40px);
    }

    #page_forgot_reset .ec-borderedDefs {
        border: 1px solid #ccc;
    }
}

#page_forgot_reset .ec-registerRole__actions .ec-blockBtn--action {
    font-size: 18px;
}

/* D2k222 — T7 password reset: 60px before footer at 375/500/640px.
   The outer page-content wrapper owns this gap, as on #page_forgot.
   Preserve the form, actions and all >=641px layouts. */
@media only screen and (max-width: 640px) {
    body#page_forgot_reset .ec-layoutRole > .ec-layoutRole__contents {
        padding-bottom: var(--kinema-mobile-footer-gap);
        box-sizing: border-box;
    }
}

/* ==========================================================================
   END FORGOT COMPLETE / RESET
   ========================================================================== */

/* ==========================================================================
   SHOPPING / SHIPPING MULTIPLE — main content redesign
   2026-09-16

   「お届け先の複数指定」を、既存の下層ページ／購入系UIに合わせて整理。
   右サイドカラムは維持し、メインコンテンツ内だけを整える。

   ・外側を白いパネル化
   ・商品単位をサブカード化
   ・商品画像／商品情報を整理
   ・お届け先／数量を横並び（狭幅では縦積み）
   ・追加系ボタンを補助ボタンとして統一
   ・最終アクションは「戻る＝左／送る＝右」で横並び
   ・狭幅では安全に縦積み
   ========================================================================== */

#page_shopping_shipping_multiple .ec-AddAddress {
    width: 100%;
    margin: 24px 0 70px;
    padding: clamp(22px, 3.6vw, 40px);

    background: #fff;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Intro / new address
   -------------------------------------------------------------------------- */

#page_shopping_shipping_multiple .ec-AddAddress__info {
    margin: 0 0 24px;
}

#page_shopping_shipping_multiple .ec-AddAddress__info p {
    margin: 0;
    color: #55556b;
    font-size: clamp(15px, 1.6vw, 18px);
    line-height: 1.7;
}

#page_shopping_shipping_multiple .ec-AddAddress__new {
    margin: 0 0 28px;
    padding: 0 0 28px;
    border-bottom: 1px solid #e2e2e2;
}

#page_shopping_shipping_multiple .ec-AddAddress__new .ec-inlineBtn,
#page_shopping_shipping_multiple .ec-AddAddress__btn .ec-inlineBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 46px;
    margin: 0;
    padding: 0 18px;

    color: #555;
    background: linear-gradient(to bottom, #fff 0%, #ececec 100%);
    border: 1px solid #c8c8c8;
    border-radius: 3px;
    box-sizing: border-box;

    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    text-decoration: none;
}

#page_shopping_shipping_multiple .ec-AddAddress__new .ec-inlineBtn:hover,
#page_shopping_shipping_multiple .ec-AddAddress__new .ec-inlineBtn:focus,
#page_shopping_shipping_multiple .ec-AddAddress__btn .ec-inlineBtn:hover,
#page_shopping_shipping_multiple .ec-AddAddress__btn .ec-inlineBtn:focus {
    color: #b21214;
    border-color: #b21214;
    outline: none;
}

/* --------------------------------------------------------------------------
   Product / shipping card
   -------------------------------------------------------------------------- */

#page_shopping_shipping_multiple .ec-AddAddress__add {
    margin: 0 0 28px;
    padding: clamp(18px, 2.8vw, 28px);

    background: #fafafa;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-sizing: border-box;
}

#page_shopping_shipping_multiple .ec-AddAddress__item {
    display: grid;
    grid-template-columns: clamp(110px, 19vw, 160px) minmax(0, 1fr);
    gap: clamp(16px, 2.8vw, 26px);
    align-items: center;

    margin: 0 0 24px;
    padding: 0 0 24px;
    border-bottom: 1px solid #ddd;
}

#page_shopping_shipping_multiple .ec-AddAddress__itemThumb {
    width: 100%;
}

#page_shopping_shipping_multiple .ec-AddAddress__itemThumb img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 180px;
    object-fit: contain;
}

#page_shopping_shipping_multiple .ec-AddAddress__itemtContent {
    min-width: 0;
}

#page_shopping_shipping_multiple .ec-AddAddress__itemtTitle {
    margin: 0 0 10px;
    color: #444452;
    font-size: clamp(17px, 1.9vw, 21px);
    font-weight: 700;
    line-height: 1.5;
}

#page_shopping_shipping_multiple .ec-AddAddress__itemtPrice,
#page_shopping_shipping_multiple .ec-AddAddress__itemtNumber {
    margin-top: 4px;
    color: #55556b;
    font-size: clamp(15px, 1.5vw, 17px);
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Address / quantity controls
   -------------------------------------------------------------------------- */

#page_shopping_shipping_multiple .ec-AddAddress__select {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px;
    gap: 18px;
    align-items: end;

    margin: 0;
}

#page_shopping_shipping_multiple .ec-AddAddress__selectAddress,
#page_shopping_shipping_multiple .ec-AddAddress__selectNumber {
    min-width: 0;
}

#page_shopping_shipping_multiple .ec-AddAddress__select .ec-select,
#page_shopping_shipping_multiple .ec-AddAddress__select .ec-input {
    width: 100%;
    margin: 0;
}

#page_shopping_shipping_multiple .ec-AddAddress__select label {
    display: block;
    margin: 0 0 8px;
    color: #55556b;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
}

#page_shopping_shipping_multiple .ec-AddAddress__select select,
#page_shopping_shipping_multiple .ec-AddAddress__select input[type="number"] {
    width: 100%;
    height: 48px;
    margin: 0;
    padding: 0 12px;

    background: #fff;
    border: 1px solid #c9c9c9;
    border-radius: 3px;
    box-sizing: border-box;

    color: #444452;
    font-size: 16px;
}

#page_shopping_shipping_multiple .ec-AddAddress__select input[type="number"] {
    text-align: center;
}

#page_shopping_shipping_multiple .ec-AddAddress__btn {
    margin: 18px 0 0;
}

/* 削除ボタンがJSで表示された場合も同系統にする */
#page_shopping_shipping_multiple .ec-AddAddress__select .ec-inlineBtn.delete {
    align-self: end;
    min-height: 42px;
    margin: 0;
    padding: 0 14px;
    font-size: 15px;
}

/* --------------------------------------------------------------------------
   Final actions
   -------------------------------------------------------------------------- */

#page_shopping_shipping_multiple .ec-AddAddress__actions {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    gap: clamp(12px, 2.4vw, 20px);

    width: 100%;
    max-width: 720px;
    margin: 34px auto 0;
}

#page_shopping_shipping_multiple .ec-AddAddress__actions .ec-blockBtn--action,
#page_shopping_shipping_multiple .ec-AddAddress__actions .ec-blockBtn--cancel {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    max-width: none;
    min-height: 58px;
    margin: 0;
    box-sizing: border-box;

    font-size: 18px;
    line-height: 1.4;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 767px) {
    #page_shopping_shipping_multiple .ec-AddAddress {
        margin-top: 20px;
        padding: clamp(20px, 5.263vw, 40px);
    }

    #page_shopping_shipping_multiple .ec-AddAddress__select {
        grid-template-columns: minmax(0, 1fr) 110px;
        gap: 14px;
    }
}

@media only screen and (max-width: 499px) {
    #page_shopping_shipping_multiple .ec-AddAddress {
        padding: 20px;
    }

    #page_shopping_shipping_multiple .ec-AddAddress__item {
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 14px;
    }

    #page_shopping_shipping_multiple .ec-AddAddress__select {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    #page_shopping_shipping_multiple .ec-AddAddress__selectNumber {
        width: 120px;
    }

    #page_shopping_shipping_multiple .ec-AddAddress__new .ec-inlineBtn,
    #page_shopping_shipping_multiple .ec-AddAddress__btn .ec-inlineBtn {
        width: 100%;
    }

    #page_shopping_shipping_multiple .ec-AddAddress__actions {
        flex-direction: column;
        gap: 12px;
    }

    #page_shopping_shipping_multiple .ec-AddAddress__actions .ec-blockBtn--action,
    #page_shopping_shipping_multiple .ec-AddAddress__actions .ec-blockBtn--cancel {
        width: 100%;
        min-height: 56px;
    }
}

/* ==========================================================================
   END SHOPPING / SHIPPING MULTIPLE
   ========================================================================== */

/* ==========================================================================
   SHOPPING / SHIPPING MULTIPLE — refinements + address-add form
   2026-09-16

   1) 複数指定ページ
      ・下部2ボタンの文字位置を縦横中央へ。
      ・商品情報部に残っている #f4f4f4 背景を解除。

   2) お届け先の追加ページ
      ・SP帯で外枠と内枠を分離し、760px付近の二重罫線を解消。
      ・「戻る / 登録する」を全サイズ横一段・等幅化。
      ・ボタン文字サイズを18pxへ。
      ・表示順は左「戻る」／右「登録する」。
   ========================================================================== */

/* --------------------------------------------------------------------------
   SHIPPING MULTIPLE — small refinements
   -------------------------------------------------------------------------- */

#page_shopping_shipping_multiple .ec-AddAddress .ec-AddAddress__item {
    background-color: transparent;
}

#page_shopping_shipping_multiple .ec-AddAddress__actions .ec-blockBtn--action,
#page_shopping_shipping_multiple .ec-AddAddress__actions .ec-blockBtn--cancel {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --------------------------------------------------------------------------
   SHIPPING MULTIPLE EDIT — nested panel + horizontal actions
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 767px) {
    #page_shopping_shipping_multiple_edit .ec-off1Grid {
        padding: clamp(20px, 5.263vw, 40px);
    }

    #page_shopping_shipping_multiple_edit .ec-borderedDefs {
        border: 1px solid #ccc;
    }
}

#page_shopping_shipping_multiple_edit .ec-registerRole__actions .ec-off4Grid__cell {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    gap: clamp(10px, 2.6vw, 20px);
}

#page_shopping_shipping_multiple_edit .ec-registerRole__actions .ec-blockBtn--action,
#page_shopping_shipping_multiple_edit .ec-registerRole__actions .ec-blockBtn--cancel {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 1 1 0;
    min-width: 0;
    width: auto;
    max-width: none;
    min-height: 58px;

    margin: 0;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;

    font-size: 18px;
    line-height: 1.4;
}

/* 375px級でも2ボタンを1段維持。文言が短いため横並びで安全。 */
@media only screen and (max-width: 499px) {
    #page_shopping_shipping_multiple_edit .ec-registerRole__actions .ec-off4Grid__cell {
        gap: 10px;
    }

    #page_shopping_shipping_multiple_edit .ec-registerRole__actions .ec-blockBtn--action,
    #page_shopping_shipping_multiple_edit .ec-registerRole__actions .ec-blockBtn--cancel {
        min-height: 56px;
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* ==========================================================================
   END SHOPPING / SHIPPING MULTIPLE REFINEMENTS + EDIT
   ========================================================================== */

/* ==========================================================================
   SHOPPING / SHIPPING SELECT — action layout refinement
   2026-09-16

   「お届け先の指定」ページ
   ・下部ボタンを全サイズで横1列・等幅化
   ・表示順は左「戻る」／右「選択したお届け先に送る」
   ・ボタン文字サイズを18pxへ
   ========================================================================== */

#page_shopping_shipping .ec-registerRole__actions .ec-off4Grid__cell {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    gap: clamp(10px, 2.6vw, 20px);
}

#page_shopping_shipping .ec-registerRole__actions .ec-blockBtn--action,
#page_shopping_shipping .ec-registerRole__actions .ec-blockBtn--cancel {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 1 1 0;
    min-width: 0;
    width: auto;
    max-width: none;
    min-height: 58px;

    margin: 0;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;

    font-size: 18px;
    line-height: 1.4;
}

@media only screen and (max-width: 499px) {
    #page_shopping_shipping .ec-registerRole__actions .ec-off4Grid__cell {
        gap: 10px;
    }

    #page_shopping_shipping .ec-registerRole__actions .ec-blockBtn--action,
    #page_shopping_shipping .ec-registerRole__actions .ec-blockBtn--cancel {
        min-height: 56px;
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* ==========================================================================
   END SHOPPING / SHIPPING SELECT
   ========================================================================== */

/* ==========================================================================
   SHOPPING / SHIPPING SELECT — SP inner spacing
   2026-09-16

   760px側では外枠内の余白がなく、住所一覧や下部ボタンが枠に接して見えるため、
   SP帯だけ外枠内のpaddingを復元する。
   760px付近では約40px、狭幅では20pxまで自然に縮小。
   ========================================================================== */

@media only screen and (max-width: 767px) {
    #page_shopping_shipping .ec-off1Grid {
        padding: clamp(20px, 5.263vw, 40px);
    }
}

/* ==========================================================================
   END SHOPPING / SHIPPING SELECT — SP inner spacing
   ========================================================================== */

/* ==========================================================================
   SHOPPING / SHIPPING EDIT — SP nested panel + horizontal actions
   2026-09-16

   通常購入側「お届け先の追加」ページ
   ・SP帯で外枠と内枠を分離し、760px付近の二重罫線を解消。
   ・「戻る / 登録する」を全サイズ横1列・等幅化。
   ・表示順は左「戻る」／右「登録する」。
   ・ボタン文字サイズを18pxへ。
   ========================================================================== */

@media only screen and (max-width: 767px) {
    #page_shopping_shipping_edit .ec-off1Grid {
        padding: clamp(20px, 5.263vw, 40px);
    }

    #page_shopping_shipping_edit .ec-borderedDefs {
        border: 1px solid #ccc;
    }
}

/*
 * 実DOMではクラス名が ec-RegisterRole__actions（Rが大文字）。
 * HTML class名は大文字小文字を区別して正確に指定する。
 */
#page_shopping_shipping_edit .ec-RegisterRole__actions .ec-off4Grid__cell {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    gap: clamp(10px, 2.6vw, 20px);
}

#page_shopping_shipping_edit .ec-RegisterRole__actions .ec-blockBtn--action,
#page_shopping_shipping_edit .ec-RegisterRole__actions .ec-blockBtn--cancel {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 1 1 0;
    min-width: 0;
    width: auto;
    max-width: none;
    min-height: 58px;

    margin: 0;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;

    font-size: 18px;
    line-height: 1.4;
}

@media only screen and (max-width: 499px) {
    #page_shopping_shipping_edit .ec-RegisterRole__actions .ec-off4Grid__cell {
        gap: 10px;
    }

    #page_shopping_shipping_edit .ec-RegisterRole__actions .ec-blockBtn--action,
    #page_shopping_shipping_edit .ec-RegisterRole__actions .ec-blockBtn--cancel {
        min-height: 56px;
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* ==========================================================================
   END SHOPPING / SHIPPING EDIT
   ========================================================================== */

/* ==========================================================================
   SHOPPING / SHIPPING EDIT — action spacing
   2026-09-16

   「お届け先の追加」ページで、入力フォーム直後にボタンが接して見えるため、
   全サイズ共通でアクションエリア上部に余白を追加する。
   ========================================================================== */

#page_shopping_shipping_edit .ec-RegisterRole__actions {
    margin-top: 30px;
}

/* ==========================================================================
   END SHOPPING / SHIPPING EDIT — action spacing
   ========================================================================== */

/* ==========================================================================
   PRODUCT REVIEW — form spacing / SP nested panel / horizontal actions
   2026-09-16

   レビュー投稿ページ
   ・説明文と入力表の間に15pxの余白を追加。
   ・SP帯で外枠と内枠を分離し、760px付近の二重罫線を解消。
   ・「戻る / 確認ページへ」を全サイズ横1列・等幅化。
   ・表示順は左「戻る」／右「確認ページへ」。
   ・ボタン文字サイズを18pxへ。
   ========================================================================== */

/* 説明文 → 入力表 */
#page_product_review_index .ec-off1Grid__cell form > .ec-para-nomal + .ec-borderedDefs {
    margin-top: 15px;
}

/* 760/SPの入れ子罫線を分離 */
@media only screen and (max-width: 767px) {
    #page_product_review_index .ec-off1Grid {
        padding: clamp(20px, 5.263vw, 40px);
    }

    #page_product_review_index .ec-borderedDefs {
        border: 1px solid #ccc;
    }
}

/* 下部アクションを横1列・等幅化 */
#page_product_review_index .ec-registerRole__actions .ec-off4Grid__cell {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    gap: clamp(10px, 2.6vw, 20px);
}

#page_product_review_index .ec-registerRole__actions .ec-blockBtn--action,
#page_product_review_index .ec-registerRole__actions .ec-blockBtn--cancel {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 1 1 0;
    min-width: 0;
    width: auto;
    max-width: none;
    min-height: 58px;

    margin: 0;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;

    font-size: 18px;
    line-height: 1.4;
}

@media only screen and (max-width: 499px) {
    #page_product_review_index .ec-registerRole__actions .ec-off4Grid__cell {
        gap: 10px;
    }

    #page_product_review_index .ec-registerRole__actions .ec-blockBtn--action,
    #page_product_review_index .ec-registerRole__actions .ec-blockBtn--cancel {
        min-height: 56px;
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* ==========================================================================
   END PRODUCT REVIEW
   ========================================================================== */

/* ==========================================================================
   PRODUCT REVIEW COMPLETE — standard completion card UI
   2026-09-16

   レビュー投稿完了ページを、他の完了系ページと同じデザイン体系へ統一。

   ・右サイドカラムは維持。
   ・メイン内に白カード。
   ・上辺をサイトカラーの赤でアクセント。
   ・カード内の完了見出しは濃いグレーの太字。
   ・説明文は薄いグレーのサブボックス。
   ・戻るボタンは18pxで中央配置。
   ・狭幅では余白・文字サイズを自然に縮小。
   ========================================================================== */

/*
 * EC-CUBEのoff-gridによる中央寄せ・狭幅指定を解除し、
 * メインカラムの利用可能幅いっぱいに完了カードを配置する。
 */
#page_product_review_complete .ec-off3Grid {
    width: 100%;
    max-width: none;
    margin: clamp(24px, 3vw, 36px) 0 80px;
    padding: 0;
    box-sizing: border-box;
}

#page_product_review_complete .ec-off3Grid__cell {
    --kinema-review-complete-pad: clamp(20px, 4vw, 40px);

    width: 100%;
    max-width: none;
    float: none;
    margin: 0;
    padding: 0 var(--kinema-review-complete-pad) clamp(28px, 4vw, 40px);

    background: #fff;
    border: 1px solid #d2d2d2;
    border-top: 4px solid #b21214;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0,0,0,.06);
    box-sizing: border-box;
    overflow: hidden;
    text-align: center;
}

/* 完了見出し */
#page_product_review_complete .ec-reportHeading {
    display: flex;
    align-items: center;
    justify-content: center;

    width: calc(100% + (var(--kinema-review-complete-pad) * 2));
    margin: 0 calc(var(--kinema-review-complete-pad) * -1);
    padding: clamp(24px, 3vw, 30px) var(--kinema-review-complete-pad);

    background: #fff;
    border-bottom: 1px solid #d9d9d9;
    box-sizing: border-box;
}

#page_product_review_complete .ec-reportHeading h2 {
    margin: 0;
    color: #55556b;
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .02em;
    text-align: center;
}

/* 完了メッセージ */
#page_product_review_complete .ec-reportDescription {
    width: 100%;
    max-width: 760px;
    margin: clamp(24px, 3vw, 30px) auto 0;
    padding: clamp(20px, 2.8vw, 26px) clamp(18px, 3vw, 30px);

    background: #fafafa;
    border: 1px solid #dedede;
    border-radius: 8px;

    color: #55556b;
    font-size: clamp(15px, 1.8vw, 18px);
    line-height: 1.9;
    text-align: center;
    box-sizing: border-box;
}

/* ボタン周り */
#page_product_review_complete .ec-off4Grid,
#page_product_review_complete .ec-off4Grid__cell {
    width: 100%;
    max-width: none;
    float: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
}

#page_product_review_complete .ec-off4Grid {
    margin-top: 30px;
}

#page_product_review_complete .ec-off4Grid__cell {
    display: flex;
    justify-content: center;
}

#page_product_review_complete .ec-blockBtn--cancel,
#page_product_review_complete .ec-blockBtn--action {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    max-width: 420px;
    min-height: 58px;
    margin: 0 auto;
    box-sizing: border-box;

    font-size: 18px;
    line-height: 1.4;
}

/* SP / narrow */
@media only screen and (max-width: 499px) {
    #page_product_review_complete .ec-off3Grid {
        margin-top: 20px;
        margin-bottom: 60px;
    }

    #page_product_review_complete .ec-reportHeading h2 {
        font-size: 22px;
    }

    #page_product_review_complete .ec-blockBtn--cancel,
    #page_product_review_complete .ec-blockBtn--action {
        min-height: 56px;
    }
}

/* ==========================================================================
   END PRODUCT REVIEW COMPLETE
   ========================================================================== */

/* ==========================================================================
   D2k123
   MY PAGE / ORDER HISTORY DETAIL — reorder button overflow fix
   2026-10-02

   #page_mypage_history の「再注文する」ボタンだけを対象にする。
   PC 2カラム時、summary内の .ec-totalBox より共通ボタン幅280pxの方が
   大きくなり、右側へはみ出していたため、親幅に追従させる。
   ========================================================================== */

#page_mypage_history .ec-totalBox > .ec-blockBtn--action {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
}

/* ==========================================================================
   END MY PAGE / ORDER HISTORY DETAIL
   ========================================================================== */

/* ==========================================================================
   D2k124
   MY PAGE / ORDER HISTORY DETAIL — bottom back area
   2026-10-02

   760 / 768 / 785:
   注文履歴詳細の最下部「戻る」専用 .ec-orderRole を対象にする。

   ・左右20pxの内側余白を確保し、コンテンツと左ラインを合わせる。
   ・直前の注文内容ブロック下罫線を残し、この戻るブロック側の上罫線を
     消して二重罫線を防ぐ。
   ・小さい ec-inlineBtn を、サイト共通の戻るボタンと同じデザイン言語へ統一。
   ========================================================================== */

@media only screen and (min-width: 760px) and (max-width: 785px) {

    /*
     * 「戻る」リンクだけを持つ最下部ブロックに限定。
     * :has() により他の注文内容 .ec-orderRole には影響させない。
     */
    #page_mypage_history .ec-orderRole:has(> .ec-orderRole__detail > a.ec-inlineBtn.ec-font-bold) {
        width: 100%;
        margin-top: 0;
        padding: 20px;
        border-top: 0;
        box-sizing: border-box;
    }

    #page_mypage_history
    .ec-orderRole:has(> .ec-orderRole__detail > a.ec-inlineBtn.ec-font-bold)
    > .ec-orderRole__detail {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    /*
     * 共通 .ec-blockBtn--cancel と同じ白→薄グレー、
     * Noto Serif、18px、左向き矢印。
     * 既存HTMLは ec-inlineBtn のままなので、このページだけ見た目を揃える。
     */
    #page_mypage_history
    .ec-orderRole:has(> .ec-orderRole__detail > a.ec-inlineBtn.ec-font-bold)
    a.ec-inlineBtn.ec-font-bold {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 280px;
        max-width: 100%;
        min-height: 56px;
        margin: 0;
        padding: 0 20px 0 52px;
        box-sizing: border-box;

        border: 1px solid #ccc;
        border-radius: 3px;
        background: #ffffff;
        background: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);

        color: #555;
        font-family: "Noto Serif JP", serif;
        font-size: 18px;
        font-weight: normal;
        letter-spacing: .05em;
        line-height: 1.4;
        text-decoration: none;
        position: relative;
    }

    #page_mypage_history
    .ec-orderRole:has(> .ec-orderRole__detail > a.ec-inlineBtn.ec-font-bold)
    a.ec-inlineBtn.ec-font-bold::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 20px;

        width: 14px;
        height: 14px;
        margin: auto;

        background-image: url(../img/common/icon_btn_arrow.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100%;
        transform: scale(-1, 1);
    }

    #page_mypage_history
    .ec-orderRole:has(> .ec-orderRole__detail > a.ec-inlineBtn.ec-font-bold)
    a.ec-inlineBtn.ec-font-bold:hover,
    #page_mypage_history
    .ec-orderRole:has(> .ec-orderRole__detail > a.ec-inlineBtn.ec-font-bold)
    a.ec-inlineBtn.ec-font-bold:focus {
        color: #a14d33;
        border-color: #a14d33;
        background: #ffffff;
        background: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
        outline: none;
        text-decoration: none;
    }

    #page_mypage_history
    .ec-orderRole:has(> .ec-orderRole__detail > a.ec-inlineBtn.ec-font-bold)
    a.ec-inlineBtn.ec-font-bold:hover::after,
    #page_mypage_history
    .ec-orderRole:has(> .ec-orderRole__detail > a.ec-inlineBtn.ec-font-bold)
    a.ec-inlineBtn.ec-font-bold:focus::after {
        background-image: url(../img/common/icon_btn_arrow_hov.png);
    }
}

/* ==========================================================================
   END MY PAGE / ORDER HISTORY DETAIL — bottom back area
   ========================================================================== */

/* ==========================================================================
   D2k125
   MY PAGE / ORDER HISTORY DETAIL — restore compact back button
   2026-10-02

   D2k124で整えた
   ・最下部「戻る」エリアの左右20px余白
   ・戻るエリア上罫線の解除
   は維持。

   「戻る」ボタン自体は、主操作の「再注文する」と同格に見せないため、
   元のコンパクトな ec-inlineBtn デザインへ戻す。
   ========================================================================== */

@media only screen and (min-width: 760px) and (max-width: 785px) {

    #page_mypage_history
    .ec-orderRole:has(> .ec-orderRole__detail > a.ec-inlineBtn.ec-font-bold)
    a.ec-inlineBtn.ec-font-bold {
        display: inline-block;

        width: auto;
        max-width: none;
        min-height: 0;
        margin: 0;
        padding: 10px 16px;

        border: 1px solid #ccc;
        border-radius: 0;
        background: rgb(245, 247, 248);

        color: #525263;
        font-family: inherit;
        font-size: inherit;
        font-weight: bold;
        letter-spacing: normal;
        line-height: normal;
        text-decoration: none;
        position: static;
    }

    #page_mypage_history
    .ec-orderRole:has(> .ec-orderRole__detail > a.ec-inlineBtn.ec-font-bold)
    a.ec-inlineBtn.ec-font-bold::after {
        content: none;
    }

    #page_mypage_history
    .ec-orderRole:has(> .ec-orderRole__detail > a.ec-inlineBtn.ec-font-bold)
    a.ec-inlineBtn.ec-font-bold:hover,
    #page_mypage_history
    .ec-orderRole:has(> .ec-orderRole__detail > a.ec-inlineBtn.ec-font-bold)
    a.ec-inlineBtn.ec-font-bold:focus {
        color: inherit;
        border-color: #ccc;
        background: rgb(245, 247, 248);
        outline: none;
        text-decoration: none;
    }
}

/* ==========================================================================
   END MY PAGE / ORDER HISTORY DETAIL — restore compact back button
   ========================================================================== */

/* ==========================================================================
   D2k126
   MY PAGE / ORDER HISTORY DETAIL — 760px bottom frame top border
   2026-10-02

   760pxだけ、最下部「戻る」エリアが前ブロックと離れて独立して見えるため、
   D2k124で消した上罫線を760pxに限って復元する。
   768 / 785pxは二重罫線防止のため従来どおり上罫線なし。
   ========================================================================== */

@media only screen and (min-width: 760px) and (max-width: 760px) {
    #page_mypage_history .ec-orderRole:has(> .ec-orderRole__detail > a.ec-inlineBtn.ec-font-bold) {
        border-top: 1px solid #ccc;
    }
}

/* ==========================================================================
   END MY PAGE / ORDER HISTORY DETAIL — 760px bottom frame top border
   ========================================================================== */

/* ==========================================================================
   D2k127
   MY PAGE / ORDER HISTORY DETAIL — join bottom back area at 760–767px
   2026-10-02

   760–767pxでは共通SPルールにより、直前の注文内容 .ec-orderRole に
   margin-bottom:30px が付くため、「戻る」エリアだけが切り離されて見える。

   対応：
   ・「戻る」エリア直前の注文内容ブロックだけ margin-bottom:0
   ・接合部は直前ブロックの下罫線を残す
   ・「戻る」エリア側の上罫線は0にして二重線を防ぐ

   768 / 785pxには影響させない。
   ========================================================================== */

@media only screen and (min-width: 760px) and (max-width: 767px) {

    #page_mypage_history
    .ec-orderRole:has(+ .ec-orderRole > .ec-orderRole__detail > a.ec-inlineBtn.ec-font-bold) {
        margin-bottom: 0;
    }

    #page_mypage_history
    .ec-orderRole:has(> .ec-orderRole__detail > a.ec-inlineBtn.ec-font-bold) {
        border-top: 0;
    }
}

/* ==========================================================================
   END MY PAGE / ORDER HISTORY DETAIL — join bottom back area
   ========================================================================== */

/* ==========================================================================
   D2k128
   MY PAGE / ORDER HISTORY DETAIL — reorder button visual centering
   2026-10-02

   1024–1199pxの2カラム時は「再注文する」ボタン幅が狭く、
   文字自体はtext-align:centerでも、右端の矢印分だけ視覚的に右重心に見える。
   右側に矢印スペースを多めに確保し、文字の見た目の中心を少し左へ補正する。
   PC広幅・760〜1023には影響させない。
   ========================================================================== */

@media only screen and (min-width: 1024px) and (max-width: 1199px) {
    #page_mypage_history .ec-totalBox > .ec-blockBtn--action {
        padding-left: 8px;
        padding-right: 36px;
        box-sizing: border-box;
        white-space: nowrap;
    }
}

/* ==========================================================================
   END MY PAGE / ORDER HISTORY DETAIL — reorder button visual centering
   ========================================================================== */

/* ==========================================================================
   D2k129
   MY PAGE / CHANGE COMPLETE — administrative completion card
   2026-10-02

   会員情報変更完了は「歓迎・登録完了」ではなく事務的な処理完了なので、
   赤ではなく濃いグレーを基調にする。
   右サイドカラム／マイページナビは維持し、完了メッセージ部分だけカード化。
   ========================================================================== */

#page_mypage_change_complete .ec-registerCompleteRole {
    --kinema-mypage-complete-pad: clamp(20px, 4vw, 40px);

    width: 100%;
    margin: clamp(24px, 3vw, 36px) 0 80px;
    padding: 0 var(--kinema-mypage-complete-pad) clamp(28px, 4vw, 40px);

    background: #fff;
    border: 1px solid #d2d2d2;
    border-top: 4px solid #666678;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0,0,0,.06);
    box-sizing: border-box;
    overflow: hidden;
}

/* 旧off-gridの幅・offsetを解除 */
#page_mypage_change_complete .ec-registerCompleteRole .ec-off2Grid,
#page_mypage_change_complete .ec-registerCompleteRole .ec-off2Grid__cell,
#page_mypage_change_complete .ec-registerCompleteRole .ec-off4Grid,
#page_mypage_change_complete .ec-registerCompleteRole .ec-off4Grid__cell {
    width: 100%;
    max-width: none;
    float: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
}

/* 完了見出し */
#page_mypage_change_complete .ec-registerCompleteRole .ec-reportHeading {
    display: flex;
    align-items: center;
    justify-content: center;

    width: calc(100% + (var(--kinema-mypage-complete-pad) * 2));
    margin: 0 calc(var(--kinema-mypage-complete-pad) * -1);
    padding: clamp(24px, 3vw, 30px) var(--kinema-mypage-complete-pad);

    background: #fff;
    border-bottom: 1px solid #d9d9d9;
    box-sizing: border-box;
}

#page_mypage_change_complete .ec-registerCompleteRole .ec-reportHeading h2 {
    margin: 0;
    color: #55556b;
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .02em;
    text-align: center;
}

/* 説明文 */
#page_mypage_change_complete .ec-registerCompleteRole .ec-reportDescription {
    width: 100%;
    max-width: 760px;
    margin: clamp(24px, 3vw, 30px) auto 0;
    padding: clamp(20px, 2.8vw, 26px) clamp(18px, 3vw, 30px);

    background: #fafafa;
    border: 1px solid #dedede;
    border-radius: 8px;

    color: #55556b;
    font-size: clamp(15px, 1.8vw, 18px);
    line-height: 1.9;
    text-align: center;
    box-sizing: border-box;
}

/* 説明文 → 戻る */
#page_mypage_change_complete .ec-registerCompleteRole .ec-off4Grid {
    margin-top: 30px;
}

/* 戻るボタン */
#page_mypage_change_complete .ec-registerCompleteRole .ec-blockBtn--cancel {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    max-width: 420px;
    min-height: 58px;
    margin: 0 auto;
    box-sizing: border-box;

    font-size: 18px;
    line-height: 1.4;
}

@media only screen and (max-width: 499px) {
    #page_mypage_change_complete .ec-registerCompleteRole {
        margin-bottom: 60px;
    }

    #page_mypage_change_complete .ec-registerCompleteRole .ec-blockBtn--cancel {
        min-height: 56px;
    }
}

/* ==========================================================================
   END MY PAGE / CHANGE COMPLETE
   ========================================================================== */

/* ==========================================================================
   D2k130
   MY PAGE / DELIVERY NEW — remove doubled bottom border
   2026-10-02

   お届け先追加フォームでは、
   ・外側 .ec-off1Grid が1pxの外枠を持つ
   ・最後の .ec-borderedDefs dl にも1pxの下罫線がある
   ため、登録ボタン直前の下辺が二重に見える。

   このページだけ最後の行の下罫線を消し、
   最終下辺は外側 .ec-off1Grid の1本に任せる。
   ========================================================================== */

#page_mypage_delivery_new .ec-editRole .ec-borderedDefs dl:last-child {
    border-bottom: 0;
}

/* ==========================================================================
   END MY PAGE / DELIVERY NEW
   ========================================================================== */

/* ==========================================================================
   D2k131
   MY PAGE / WITHDRAW — warning card
   2026-10-02

   退会ページは完了系カードとは分けて「警告カード」として整理。
   ・白カード + 控えめな赤アクセント
   ・警告アイコンは既存 exclamation.svg の形を活かし #b21214 で表示
   ・見出し／本文は濃いグレー
   ・退会手続きボタンは通常ボタンのデザイン言語を維持
   ========================================================================== */

#page_mypage_withdraw .ec-withdrawRole {
    margin-top: clamp(20px, 3vw, 30px);
    padding: clamp(36px, 4.5vw, 48px) clamp(20px, 4vw, 40px) clamp(32px, 4vw, 42px);

    background: #fff;
    border: 1px solid #d2d2d2;
    border-top: 4px solid #b21214;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0,0,0,.06);
    box-sizing: border-box;
}

/* 警告アイコン：既存SVGの形をmaskとして利用し、サイト赤で正確に着色 */
#page_mypage_withdraw .ec-withdrawRole .ec-icon {
    position: relative;
    width: clamp(74px, 9vw, 100px);
    height: clamp(60px, 7.2vw, 80px);
    margin: 0 auto clamp(22px, 3vw, 30px);
}

#page_mypage_withdraw .ec-withdrawRole .ec-icon img[src$="/assets/icon/exclamation.svg"] {
    display: none;
}

#page_mypage_withdraw .ec-withdrawRole .ec-icon::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: #b21214;

    -webkit-mask: url("../icon/exclamation.svg") no-repeat center / contain;
    mask: url("../icon/exclamation.svg") no-repeat center / contain;
}

/* 警告本文は赤くしすぎず、読みやすい濃いグレーで統一 */
#page_mypage_withdraw .ec-withdrawRole p {
    color: #55556b;
}

/* 先頭の警告見出し */
#page_mypage_withdraw .ec-withdrawRole p:first-of-type {
    margin-top: 0;
    margin-bottom: clamp(14px, 2vw, 20px);
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 700;
    line-height: 1.45;
}

/* 説明文 */
#page_mypage_withdraw .ec-withdrawRole p:not(:first-of-type) {
    font-size: clamp(15px, 1.6vw, 18px);
    line-height: 1.85;
}

/* 退会手続きボタン：通常のサイトボタンとして扱う */
#page_mypage_withdraw .ec-withdrawRole .ec-blockBtn--action,
#page_mypage_withdraw .ec-withdrawRole .ec-blockBtn--cancel {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    max-width: 520px;
    min-height: 58px;
    margin: 34px auto 0;
    box-sizing: border-box;

    font-size: 18px;
    line-height: 1.4;
}

/* 実スマホ幅ではカード余白を自然に縮小 */
@media only screen and (max-width: 499px) {
    #page_mypage_withdraw .ec-withdrawRole {
        padding-left: 20px;
        padding-right: 20px;
    }

    #page_mypage_withdraw .ec-withdrawRole .ec-blockBtn--action,
    #page_mypage_withdraw .ec-withdrawRole .ec-blockBtn--cancel {
        min-height: 56px;
    }
}

/* ==========================================================================
   END MY PAGE / WITHDRAW — warning card
   ========================================================================== */

/* ==========================================================================
   D2k132
   MY PAGE / WITHDRAW CONFIRM — final destructive-action confirmation
   2026-10-02

   page_mypage_withdraw は通常の退会案内ページと共通bodyId。
   ここでは .ec-withdrawConfirmRole だけを対象にし、
   「最終確認」画面として通常の退会案内より一段強い警告表現にする。

   ・白カード + #b21214 の上辺アクセント
   ・既存 exclamation.svg をmaskとして利用し #b21214 で表示
   ・見出しは濃いグレー
   ・説明文は薄い警告ボックス
   ・左「いいえ、退会しません」＝安全側の通常ボタン
   ・右「はい、退会します」＝破壊的操作として赤系ボタン
   ・760以上は横2列、狭幅は縦積み
   ========================================================================== */

#page_mypage_withdraw .ec-withdrawConfirmRole {
    --kinema-withdraw-confirm-pad: clamp(20px, 4vw, 40px);

    width: 100%;
    margin: clamp(24px, 3vw, 36px) 0 80px;
    padding: 0 var(--kinema-withdraw-confirm-pad) clamp(30px, 4vw, 42px);

    background: #fff;
    border: 1px solid #d2d2d2;
    border-top: 4px solid #b21214;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0,0,0,.06);
    box-sizing: border-box;
    overflow: hidden;
}

/* 旧off-gridの幅・offsetを解除 */
#page_mypage_withdraw .ec-withdrawConfirmRole .ec-off3Grid,
#page_mypage_withdraw .ec-withdrawConfirmRole .ec-off3Grid__cell,
#page_mypage_withdraw .ec-withdrawConfirmRole .ec-off4Grid,
#page_mypage_withdraw .ec-withdrawConfirmRole .ec-off4Grid__cell {
    width: 100%;
    max-width: none;
    float: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
}

/* 警告アイコン */
#page_mypage_withdraw .ec-withdrawConfirmRole .ec-icon {
    position: relative;
    width: clamp(74px, 9vw, 100px);
    height: clamp(60px, 7.2vw, 80px);
    margin: clamp(30px, 4vw, 42px) auto clamp(20px, 3vw, 28px);
}

#page_mypage_withdraw .ec-withdrawConfirmRole .ec-icon img[src$="/assets/icon/exclamation.svg"] {
    display: none;
}

#page_mypage_withdraw .ec-withdrawConfirmRole .ec-icon::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: #b21214;

    -webkit-mask: url("../icon/exclamation.svg") no-repeat center / contain;
    mask: url("../icon/exclamation.svg") no-repeat center / contain;
}

/* 最終確認見出し */
#page_mypage_withdraw .ec-withdrawConfirmRole__title {
    max-width: 760px;
    margin: 0 auto clamp(18px, 2.5vw, 24px);

    color: #55556b;
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 700;
    line-height: 1.45;
    text-align: center;
}

/* 説明文：最終確認なので少し警告感を強める */
#page_mypage_withdraw .ec-withdrawConfirmRole__description {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: clamp(18px, 2.5vw, 24px) clamp(18px, 3vw, 30px);

    background: #fffafa;
    border: 1px solid #e7c9ca;
    border-radius: 8px;

    color: #55556b;
    font-size: clamp(15px, 1.6vw, 18px);
    line-height: 1.85;
    text-align: center;
    box-sizing: border-box;
}

/* ボタンエリア */
#page_mypage_withdraw .ec-withdrawConfirmRole form > .ec-off4Grid {
    margin-top: 32px;
}

#page_mypage_withdraw .ec-withdrawConfirmRole form > .ec-off4Grid > .ec-off4Grid__cell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(12px, 2vw, 20px);
}

/* 左：退会しない */
#page_mypage_withdraw .ec-withdrawConfirmRole__cancel {
    order: 1;
}

/* 右：退会する */
#page_mypage_withdraw .ec-withdrawConfirmRole form button[name="mode"][value="complete"] {
    order: 2;
}

#page_mypage_withdraw .ec-withdrawConfirmRole__cancel,
#page_mypage_withdraw .ec-withdrawConfirmRole form button[name="mode"][value="complete"] {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 58px;
    margin: 0;
    padding: 0 44px;
    box-sizing: border-box;

    font-family: "Noto Serif JP", serif;
    font-size: 18px;
    line-height: 1.4;
    letter-spacing: .03em;
    text-align: center;
}

/* 安全側は通常の戻るボタン */
#page_mypage_withdraw .ec-withdrawConfirmRole__cancel {
    border: 1px solid #ccc;
    border-radius: 3px;
    background: linear-gradient(to bottom, #fff 0%, #e5e5e5 100%);
    color: #555;
    text-decoration: none;
}

/* 破壊的操作のみ赤系で明確化 */
#page_mypage_withdraw .ec-withdrawConfirmRole form button[name="mode"][value="complete"] {
    border: 1px solid #9f1113;
    border-radius: 3px;
    background: #b21214;
    color: #fff;
}

#page_mypage_withdraw .ec-withdrawConfirmRole form button[name="mode"][value="complete"]:hover,
#page_mypage_withdraw .ec-withdrawConfirmRole form button[name="mode"][value="complete"]:focus {
    background: #971012;
    border-color: #7f0d0f;
    color: #fff;
    outline: none;
}

/* 狭い実スマホでは無理に2列にせず縦積み */
@media only screen and (max-width: 499px) {
    #page_mypage_withdraw .ec-withdrawConfirmRole {
        margin-bottom: 60px;
    }

    #page_mypage_withdraw .ec-withdrawConfirmRole form > .ec-off4Grid > .ec-off4Grid__cell {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    #page_mypage_withdraw .ec-withdrawConfirmRole__cancel,
    #page_mypage_withdraw .ec-withdrawConfirmRole form button[name="mode"][value="complete"] {
        min-height: 56px;
        padding-left: 40px;
        padding-right: 40px;
    }
}

/* ==========================================================================
   END MY PAGE / WITHDRAW CONFIRM
   ========================================================================== */

/* ==========================================================================
   D2k133
   MY PAGE / WITHDRAW COMPLETE — administrative completion card
   2026-10-02

   退会完了は警告画面ではなく「処理完了」なので、
   他の事務的な完了ページと同じ
   白カード + 濃いグレー見出し + 薄グレー説明ボックスへ統一。
   右サイドカラムは維持する。
   ========================================================================== */

#page_mypage_withdraw_complete .ec-withdrawCompleteRole {
    --kinema-withdraw-complete-pad: clamp(20px, 4vw, 40px);

    width: 100%;
    margin: clamp(24px, 3vw, 36px) 0 80px;
    padding: 0 var(--kinema-withdraw-complete-pad) clamp(30px, 4vw, 42px);

    background: #fff;
    border: 1px solid #d2d2d2;
    border-top: 4px solid #666678;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0,0,0,.06);
    box-sizing: border-box;
    overflow: hidden;
}

#page_mypage_withdraw_complete .ec-withdrawCompleteRole .ec-reportHeading {
    display: flex;
    align-items: center;
    justify-content: center;

    width: calc(100% + (var(--kinema-withdraw-complete-pad) * 2));
    margin: 0 calc(var(--kinema-withdraw-complete-pad) * -1);
    padding: clamp(24px, 3vw, 30px) var(--kinema-withdraw-complete-pad);

    background: #fff;
    border-bottom: 1px solid #d9d9d9;
    box-sizing: border-box;
}

#page_mypage_withdraw_complete .ec-withdrawCompleteRole .ec-reportHeading h2 {
    margin: 0;
    color: #55556b;
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .02em;
    text-align: center;
}

#page_mypage_withdraw_complete .ec-withdrawCompleteRole .ec-off3Grid,
#page_mypage_withdraw_complete .ec-withdrawCompleteRole .ec-off3Grid__cell,
#page_mypage_withdraw_complete .ec-withdrawCompleteRole .ec-off4Grid,
#page_mypage_withdraw_complete .ec-withdrawCompleteRole .ec-off4Grid__cell {
    width: 100%;
    max-width: none;
    float: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
}

#page_mypage_withdraw_complete .ec-withdrawCompleteRole .ec-reportDescription {
    width: 100%;
    max-width: 760px;
    margin: clamp(24px, 3vw, 30px) auto 0;
    padding: clamp(20px, 2.8vw, 26px) clamp(18px, 3vw, 30px);

    background: #fafafa;
    border: 1px solid #dedede;
    border-radius: 8px;

    color: #55556b;
    font-size: clamp(15px, 1.8vw, 18px);
    line-height: 1.9;
    text-align: center;
    box-sizing: border-box;
}

#page_mypage_withdraw_complete .ec-withdrawCompleteRole .ec-off4Grid {
    margin-top: 30px;
}

#page_mypage_withdraw_complete .ec-withdrawCompleteRole .ec-blockBtn--cancel {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    max-width: 420px;
    min-height: 58px;
    margin: 0 auto;
    box-sizing: border-box;

    font-size: 18px;
    line-height: 1.4;
}

@media only screen and (max-width: 499px) {
    #page_mypage_withdraw_complete .ec-withdrawCompleteRole {
        margin-bottom: 60px;
    }

    #page_mypage_withdraw_complete .ec-withdrawCompleteRole .ec-blockBtn--cancel {
        min-height: 56px;
    }
}

/* ==========================================================================
   END MY PAGE / WITHDRAW COMPLETE
   ========================================================================== */

/* ==========================================================================
   D2k134
   FINAL QA / 375–640px — mobile header / flasharea / footer
   2026-10-07

   対象:
   - 375px: SPヘッダーロゴと操作ボタンの重なり回避
   - 375 / 500 / 640px: flasharea背景画像の構図調整
   - 640px以下: footer区切り線の上下余白を30pxへ統一
   - 640px以下: copyrightの1行表示と見切れ防止

   760px以上で完成済みのレイアウトには影響させない。
   ========================================================================== */

/* 375付近: 中央ロゴを少し下へ逃がし、右上操作ボタンとの重なりを防ぐ。 */
@media only screen and (max-width: 480px) {
    .ec-layoutRole__header .sp > .ec-headerRole h1 {
        top: calc(50% + 25px);
    }
}

/*
 * FLASH AREA 背景画像の横位置。
 * タイトル画像（右側）は既存位置のまま、背景画像だけ左へ移動する。
 * 実画面基準:
 *   375px = 左へ320px
 *   500px = 左へ240px
 *   640px = 左へ 60px
 * 640〜767pxは既存のcenterへ滑らかに戻す。
 */
@media only screen and (max-width: 375px) {
    div#flasharea {
        background-position: calc(50% - 320px) top;
    }
}

@media only screen and (min-width: 376px) and (max-width: 500px) {
    div#flasharea {
        background-position: calc(50% - (320px - (100vw - 375px) * 0.64)) top;
    }
}

@media only screen and (min-width: 501px) and (max-width: 640px) {
    div#flasharea {
        background-position: calc(50% - (240px - (100vw - 500px) * 1.285714)) top;
    }
}

@media only screen and (min-width: 641px) and (max-width: 767px) {
    div#flasharea {
        background-position: calc(50% - (60px - (100vw - 640px) * 0.472441)) top;
    }
}

/*
 * FOOTER / 640以下
 * 区切り線（各タイトル背景のline_bg.gif）の
 * 「線の上」と「線の下」を30pxで統一する。
 */
@media only screen and (max-width: 640px) {
    /* 最初の区切り線の上 */
    #footer > ul.kinema-footer-grid {
        padding-top: 30px;
    }

    /* 区切り線の下 → タイトルまで */
    #footer .kinema-footer-title {
        padding-top: 30px;
    }

    /* 同一カラム内の次ブロック: 前ブロック末尾 → 次の線 */
    #footer .kinema-footer-title--sub {
        margin-top: 30px;
    }

    /* 次カラムへ移る箇所: 前ブロック末尾 → 次の線 */
    #footer > ul.kinema-footer-grid > li.kinema-footer-column + li.kinema-footer-column .kinema-footer-title:first-child {
        margin-top: 30px;
    }

    /*
     * Copyrightは狭幅で2行化すると旧height/overflowで見切れるため、
     * 640以下は1行を維持し、固定heightを解除する。
     * 500px以上では従来12px、375px付近だけ約9pxまで自然に縮小。
     */
    div#footer_copy {
        height: auto;
        min-height: 40px;
        padding: 12px 6px;
        overflow: visible;
        box-sizing: border-box;
        white-space: nowrap;
        font-size: clamp(9px, 2.4vw, 12px);
        line-height: 1.2;
    }
}

/* ==========================================================================
   END D2k134
   ========================================================================== */

/* ==========================================================================
   D2k135
   FINAL QA / 375px tune — header / flasharea / footer
   2026-10-07

   D2k134 実画面確認後の微調整:
   - 375付近で下げたロゴ画像の白地がヘッダー外へはみ出す部分をクリップ
   - 375pxのflasharea背景移動量を 左320px → 左140px に変更
   - 640px以下のfooter区切り線前後余白を 30px → 15px に変更

   500px / 640px のflasharea位置は現時点ではD2k134値を維持。
   ========================================================================== */

/* 375付近: ロゴを下げた際に画像の白背景だけが黄色帯へはみ出すのを隠す。 */
@media only screen and (max-width: 480px) {
    .ec-layoutRole__header .sp > .ec-headerRole {
        overflow: hidden;
    }
}

/* 375px: 背景画像の左移動量を実画面確認値へ修正。 */
@media only screen and (max-width: 375px) {
    div#flasharea {
        background-position: calc(50% - 140px) top;
    }
}

/* 640px以下: footerの横ライン前後余白を15pxへ統一。 */
@media only screen and (max-width: 640px) {
    #footer > ul.kinema-footer-grid {
        padding-top: 15px;
    }

    #footer .kinema-footer-title {
        padding-top: 15px;
    }

    #footer .kinema-footer-title--sub {
        margin-top: 15px;
    }

    #footer > ul.kinema-footer-grid > li.kinema-footer-column + li.kinema-footer-column .kinema-footer-title:first-child {
        margin-top: 15px;
    }
}

/* ==========================================================================
   END D2k135
   ========================================================================== */

/* ==========================================================================
   D2k136
   FINAL QA / flasharea background position — 375 / 500 / 640
   2026-10-07

   実画面確認値:
   - 375px : calc(50% - 140px)
   - 500px : calc(50% -  90px)
   - 640px : calc(50% -  20px)

   各基準幅の間は連続補間。
   ========================================================================== */

/* 375px以下は375基準値で固定 */
@media only screen and (max-width: 375px) {
    div#flasharea {
        background-position: calc(50% - 140px) top;
    }
}

/* 376〜500px: 140px → 90px へ連続補間 */
@media only screen and (min-width: 376px) and (max-width: 500px) {
    div#flasharea {
        background-position:
            calc(50% - (140px - (100vw - 375px) * 0.4)) top;
    }
}

/* 501〜640px: 90px → 20px へ連続補間 */
@media only screen and (min-width: 501px) and (max-width: 640px) {
    div#flasharea {
        background-position:
            calc(50% - (90px - (100vw - 500px) * 0.5)) top;
    }
}

/* ==========================================================================
   END D2k136
   ========================================================================== */

/* ==========================================================================
   D2k137
   FORM UI — label tint / MY PAGE edit action spacing
   2026-10-07

   ・フォーム左側の項目見出し背景を、サイトのキーカラーに寄せた
     ごく薄い赤 #fdf7f7 へ統一。
   ・MYページ系編集フォームの最下部アクション領域は、
     登録ボタンの上・下余白を30pxで統一。
   ========================================================================== */

/* フォーム項目見出し：全サイズ共通 */
.ec-borderedDefs dt {
    background-color: #fdf7f7;
}

/* MYページ編集系フォーム：登録ボタンの上下余白を同じ30pxにする */
.mypage .ec-editRole .ec-RegisterRole__actions {
    padding-top: 30px;
    padding-bottom: 30px;
    box-sizing: border-box;
}

/* ==========================================================================
   END D2k137
   ========================================================================== */

/* ==========================================================================
   D2k138
   FORM UI — label tint specificity fix
   2026-10-07

   D2k137 の .ec-borderedDefs dt より、
   既存の .ec-editRole .ec-borderedDefs dt の方が詳細度が高く、
   #efefef が残っていたため詳細度を合わせて最終上書きする。
   ========================================================================== */

.ec-editRole .ec-borderedDefs dt,
.ec-borderedDefs dt {
    background-color: #fdf7f7;
}

/* ==========================================================================
   END D2k138
   ========================================================================== */

/* ==========================================================================
   D2k139
   MY PAGE / FAVORITE — 375 / 500 / 640 spacing
   2026-10-07

   ・「◯件のお気に入りがあります」の左端を商品画像の左端付近へ合わせる。
   ・商品一覧の開始位置に余白を追加し、見出し直下の詰まりを解消する。
   ・375pxだけ、商品タイトル／価格エリアを商品画像と同じ横幅へ広げる。
   ========================================================================== */

@media only screen and (max-width: 640px) {
    #page_mypage_favorite .ec-favoriteRole__header {
        padding-left: 40px;
        box-sizing: border-box;
    }

    #page_mypage_favorite .ec-favoriteRole__detail {
        padding-top: 30px;
    }
}

/* 375pxだけ：タイトル／価格の左右インセットを解除して画像幅へ合わせる */
@media only screen and (max-width: 375px) {
    #page_mypage_favorite .ec-favoriteRole__itemTitle {
        margin-left: 0;
        margin-right: 0;
    }

    #page_mypage_favorite .ec-favoriteRole__itemPrice {
        padding-left: 0;
        padding-right: 0;
    }
}

/* ==========================================================================
   END D2k139
   ========================================================================== */

/* ==========================================================================
   D2k140
   MY PAGE / ORDER HISTORY — 375px header inset
   2026-10-07

   375pxでは注文ごとの
   ・日付
   ・ご注文番号
   ・ご注文状況
   ・「詳細を見る」
   が注文ブロック左端に寄りすぎていたため、
   商品画像側と同程度の左右20px余白へ揃える。
   ========================================================================== */

@media only screen and (max-width: 375px) {
    #page_mypage .ec-historyRole__header {
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }
}

/* ==========================================================================
   END D2k140
   ========================================================================== */

/* ==========================================================================
   D2k141
   MY PAGE / ORDER HISTORY — 375px detail alignment
   2026-10-07

   商品画像の左端を「詳細を見る」ボタンの左端に合わせるため、
   375pxのみ商品詳細エリアにも左右20pxの内側余白を追加。
   ========================================================================== */

@media only screen and (max-width: 375px) {
    #page_mypage .ec-historyRole__detail {
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }
}

/* ==========================================================================
   END D2k141
   ========================================================================== */

/* ==========================================================================
   D2k142
   MY PAGE / ORDER HISTORY — 375px image left alignment
   2026-10-07

   実測:
   - 「詳細を見る」左端: 20px
   - 商品画像左端:      30px

   差分10pxだけ商品画像を左へ戻し、
   ボタン左端と画像左端を一致させる。
   タイトル・金額側の位置は変更しない。
   ========================================================================== */

@media only screen and (max-width: 375px) {
    #page_mypage .ec-historyRole__detail .ec-imageGrid__img img {
        margin-left: -10px;
    }
}

/* ==========================================================================
   END D2k142
   ========================================================================== */

/* ==========================================================================
   D2k143
   MY PAGE / ORDER HISTORY — 500 / 640 header alignment
   2026-10-07

   500 / 640pxでは商品画像側は既に約20px内側だが、
   注文情報（日付・注文番号・注文状況・詳細を見る）が左端に寄っていた。
   375pxで採用した20px基準を640px以下へ拡張する。
   375pxの商品画像10px補正はD2k142をそのまま維持。
   ========================================================================== */

@media only screen and (max-width: 640px) {
    #page_mypage .ec-historyRole__header {
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }
}

/* ==========================================================================
   END D2k143
   ========================================================================== */

/* ==========================================================================
   D2k144
   MY PAGE / ORDER HISTORY — 376–640px image left alignment
   2026-10-07

   実測（640px）:
   - 「詳細を見る」左端: 20px
   - 商品画像左端:      10px

   376〜640pxのみ商品画像を10px右へ移動し、
   ボタン左端と画像左端を一致させる。
   375pxはD2k142の完成状態を維持。
   ========================================================================== */

@media only screen and (min-width: 376px) and (max-width: 640px) {
    #page_mypage .ec-historyRole__detail .ec-imageGrid__img img {
        margin-left: 10px;
    }
}

/* ==========================================================================
   END D2k144
   ========================================================================== */

/* ==========================================================================
   D2k145
   MY PAGE / ORDER HISTORY — mobile detail cleanup
   2026-10-07

   375 / 500 / 640:
   ・「詳細を見る」と商品サムネイルの間に見える内部の点線を削除。
   ・サムネイルと商品タイトル／金額の間隔を20pxへ広げる。
   注文ごとの外側区切り線は維持する。
   ========================================================================== */

@media only screen and (max-width: 640px) {
    /* 注文情報と商品詳細の内部区切り線だけ消す */
    #page_mypage .ec-historyRole__header {
        border-bottom: 0;
    }

    #page_mypage .ec-historyRole__detail {
        border-top: 0;
    }

    /* サムネイル右側の文字エリアに適度な間隔を確保 */
    #page_mypage .ec-historyRole__detail .ec-imageGrid__content {
        padding-left: 20px;
        box-sizing: border-box;
    }
}

/* ==========================================================================
   END D2k145
   ========================================================================== */

/* ==========================================================================
   D2k146
   MY PAGE / ORDER HISTORY — 375px thumbnail/text gap correction
   2026-10-07

   D2k142で375pxの商品画像だけを10px左へ移動しているため、
   375pxではその時点で画像と文字の間に十分な余白ができていた。

   D2k145の共通 padding-left:20px を375pxにも重ねたことで、
   375pxだけ余白が過剰になったため、375px以下では追加paddingを解除。
   376〜640pxはD2k145の20pxを維持する。
   ========================================================================== */

@media only screen and (max-width: 375px) {
    #page_mypage .ec-historyRole__detail .ec-imageGrid__content {
        padding-left: 0;
    }
}

/* ==========================================================================
   END D2k146
   ========================================================================== */

/* ==========================================================================
   D2k147
   DOWNLOAD PAGE — 375px button cleanup / back-button bottom spacing
   2026-10-07

   375px:
   ・2列カードは幅を削らないため現状の外枠いっぱいレイアウトを維持。
   ・ダウンロードボタンの左右paddingを対称化して文字を視覚中央へ。
   ・文字はみ出し防止のため幅を少し広げ、letter-spacingを解除。
   ・「前のページへ戻る」ボタン下に30px余白を追加。
   ========================================================================== */

@media only screen and (max-width: 375px) {
    #page_sheeb_dlc_downloads .download_item .dlc-button {
        width: 90%;
        min-height: 56px;
        padding: 10px 34px;
        font-size: 12px;
        line-height: 1.25;
        letter-spacing: 0;
        text-align: center;
        white-space: nowrap;
        box-sizing: border-box;
    }

    #page_sheeb_dlc_downloads .ec-blockBtn--cancel {
        margin-bottom: 30px;
    }
}

/* ==========================================================================
   END D2k147
   ========================================================================== */

/* ==========================================================================
   D2k148
   DOWNLOAD PAGE — 500 / 640px side spacing + back-button bottom spacing
   2026-10-07

   376〜640px:
   ・カードグリッド全体を左右20px内側へ入れる。
   ・375pxはD2k147の現状を維持。
   ・「前のページへ戻る」下の30px余白を640px以下へ拡張。

   ※ 商品一覧など他ページのカードグリッドへ波及させないため、
      download page の body id 配下だけに限定する。
   ========================================================================== */

@media only screen and (min-width: 376px) and (max-width: 640px) {
    #page_sheeb_dlc_downloads .download_grid {
        width: calc(100% - 40px);
        margin-left: auto;
        margin-right: auto;
    }
}

@media only screen and (max-width: 640px) {
    #page_sheeb_dlc_downloads .ec-blockBtn--cancel {
        margin-bottom: 30px;
    }
}

/* ==========================================================================
   END D2k148
   ========================================================================== */

/* ==========================================================================
   D2k149
   DOWNLOAD PAGE — 500 / 640px button centering + first-row top gap
   2026-10-07

   原因:
   767px以下では共通CSSが .ec-blockBtn--action::after を content:none にして
   矢印を非表示にしている一方、download button には右40pxの余白が残っていた。
   そのため文字だけが左へ寄って見えていた。

   376〜640px:
   ・矢印なしを明示。
   ・左右paddingを同値にして文字を真ん中へ。
   ・カードグリッド最上部の余白を現状より10px追加。
   375pxの確定済みレイアウトは変更しない。
   ========================================================================== */

@media only screen and (min-width: 376px) and (max-width: 640px) {
    #page_sheeb_dlc_downloads .download_grid {
        margin-top: 10px;
    }

    #page_sheeb_dlc_downloads .download_item .dlc-button {
        padding-left: 10px;
        padding-right: 10px;
        text-align: center;
    }

    #page_sheeb_dlc_downloads .download_item .dlc-button::after {
        content: none;
    }
}

/* ==========================================================================
   END D2k149
   ========================================================================== */

/* ==========================================================================
   D2k150 / D2k178 / D2k179 / D2k184
   PRODUCT LIST + HOMEPAGE + PRODUCT DETAIL RELATED CARD inner gutters

   D2k179 (2026-10-21): <=640px, final 10px inset for HOME/LIST cards.
   D2k184 (2026-10-21): extend that same 10px inset to RELATED cards on
   product detail without affecting the main product panels or MyPage.
   Related card titles and descriptions inherit --kinema-card-inset;
   do not alter the grid's separate outer 20px gutters at 376–640px.

   The 375px category-title bar adjustment is intentionally independent.
   Number of columns, card images, and footer gap are untouched.
   ========================================================================== */
@media only screen and (max-width: 640px) {
    #page_product_list,
    #page_homepage,
    #page_product_detail #RelatedProduct-product_area {
        --kinema-card-inset: 10px;
    }
}

@media only screen and (max-width: 375px) {
    /* ヘッダ画像直下のカテゴリタイトルバーを全幅へ（既存指定維持） */
    #page_product_list #category_extension_ex_category_icon {
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box;
    }
}

/* ==========================================================================
   END D2k150 / D2k178 / D2k179
   ========================================================================== */

/* ==========================================================================
   D2k151
   PRODUCT LIST — mobile EqualHeight inline-height release
   2026-10-07

   実測（375px）:
   各 .ec-shelfGrid__item に旧EqualHeight系JSから
   inline style="height: 377.359px;" が付与されていた。

   そのため全商品カードが同じ固定高さとなり、
   内容が短いカードでは説明文とボタンの間に大きな空白が発生。

   640px以下の商品一覧ではinline固定高さを解除し、
   flexの align-items:stretch による「各行の最も高いカード基準」だけを残す。
   ========================================================================== */

@media only screen and (max-width: 640px) {
    #page_product_list .ec-shelfGrid .ec-shelfGrid__item {
        height: auto !important;
        align-self: stretch;
    }
}

/* ==========================================================================
   END D2k151
   ========================================================================== */

/* ==========================================================================
   D2k152
   PRODUCT LIST — 500 / 640px grid side spacing
   2026-10-07

   共通方針:
   376〜640pxの商品グリッドページでは、
   商品カード群全体を左右20px内側へ入れる。

   375pxは画面幅優先のため現状維持。
   カード内部の余白・列数・ボタン仕様は変更しない。
   ========================================================================== */

@media only screen and (min-width: 376px) and (max-width: 640px) {
    #page_product_list .ec-shelfGrid {
        width: calc(100% - 40px);
        margin-left: auto;
        margin-right: auto;
    }
}

/* ==========================================================================
   END D2k152
   ========================================================================== */

/* ==========================================================================
   D2k153
   MY PAGE FAMILY — 500 / 640px page-wide side gutter
   2026-10-07

   方針:
   376〜640pxのマイページ系は、個別パーツではなく
   main content 全体を左右20px内側へ入れる。
   これにより、
   ・アイコン＋タイトルバー
   ・マイページナビ
   ・ようこそ／ポイント
   ・各フォーム／一覧／履歴
   を同じ外側基準へ揃える。

   375pxは有効幅優先のため現状維持。

   ダウンロードページはD2k148でグリッド自体に左右20pxを
   既に持たせていたため、ページ全体20pxとの二重化を解除する。
   ========================================================================== */

@media only screen and (min-width: 376px) and (max-width: 640px) {
    body.mypage .ec-layoutRole__contents,
    body#page_sheeb_dlc_downloads .ec-layoutRole__contents {
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }

    /* 外側ページgutterへ一本化：グリッド自身の追加20pxは解除 */
    #page_sheeb_dlc_downloads .download_grid {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

/* ==========================================================================
   END D2k153
   ========================================================================== */

/* Mobile footer space (former D2k154–155) is now owned by the shared
   layout definition in SECTION 1, not by separate MyPage rules. */

/* ==========================================================================
   D2k156
   PRODUCT DETAIL — mobile QA (375 / 500 / 640)
   2026-10-07

   1) 375px: 作品詳細情報の先頭行だけ上余白を少し増やす。
   2) 375px: 購入UIの旧GIFカートボタンを、760px以上で採用済みの
      CSSボタン＋カートアイコン仕様へ統一。
   3) 375px: 関連商品カードの内側余白（当初15px、D2k184で10pxに統一）。
   4) 375 / 500 / 640: コンテンツ最下部に60px余白。
   5) 500 / 640: 共通方針どおりメインコンテンツ左右20px。
   ========================================================================== */

/* Product detail bottom space now uses the shared mobile footer rule. */

@media only screen and (min-width: 376px) and (max-width: 640px) {
    #page_product_detail .ec-layoutRole__contents {
        padding-left: 20px;
        padding-right: 20px;
    }
}

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

    /* 作品詳細情報：見出し直下の先頭行だけ少し広げる */
    #page_product_detail .z_product_detail dl:first-of-type {
        margin-top: 12px;
    }

    /* 購入エリア本体をタブレット版と同じ白パネルへ */
    #page_product_detail #productcartarea {
        margin: 0;
        padding: 30px 20px;
        background: #fff;
        border: var(--kinema-border);
        box-sizing: border-box;
    }

    #page_product_detail #productcartarea .ec-productRole__btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        min-width: 0;
        max-width: none;
        margin-top: 0;
        margin-bottom: 0;
        box-sizing: border-box;
    }

    #page_product_detail #productcartarea > form + form {
        margin-top: 10px;
    }

    #page_product_detail #productcartarea .ec-productRole__btn .ec-blockBtn--action,
    #page_product_detail #productcartarea .ec-productRole__btn #favorite.ec-blockBtn--cancel {
        width: 100%;
        max-width: 240px;
        height: 56px;
        min-height: 56px;
        margin-left: 0;
        margin-right: 0;
    }

    /* 旧GIFカートボタンを、タブレット版のCSSボタンへ */
    #page_product_detail #productcartarea .ec-productRole__btn .ec-blockBtn--action {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 46px 0 16px;
        border: 1px solid #ccc;
        border-radius: 3px;
        background-image: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
        background-color: #eee;
        color: #555;
        font-size: 14px;
        font-family: "Noto Serif JP", serif;
        letter-spacing: .05em;
        line-height: 1.4;
        text-align: center;
    }

    #page_product_detail #productcartarea .ec-productRole__btn .ec-blockBtn--action::before {
        content: "この作品を買物カゴに入れる";
        display: block;
        white-space: nowrap;
    }

    /* SP共通で消される::afterを、このカートボタンだけ復活 */
    #page_product_detail #productcartarea .ec-productRole__btn .ec-blockBtn--action::after {
        content: "";
        width: 28px;
        height: 28px;
        right: 12px;
        background-image: url(../img/common/icon_cart.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    #page_product_detail #productcartarea .ec-productRole__btn .ec-blockBtn--action:hover,
    #page_product_detail #productcartarea .ec-productRole__btn .ec-blockBtn--action:focus,
    #page_product_detail #productcartarea .ec-productRole__btn .ec-blockBtn--action:active {
        color: #a14d33;
        border-color: #a14d33;
        background-image: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
        background-color: #eee;
        outline: none;
    }

    #page_product_detail #productcartarea .ec-productRole__btn .ec-blockBtn--action:hover::after,
    #page_product_detail #productcartarea .ec-productRole__btn .ec-blockBtn--action:focus::after,
    #page_product_detail #productcartarea .ec-productRole__btn .ec-blockBtn--action:active::after {
        background-image: url(../img/common/icon_cart_hov.png);
    }
}

/* ==========================================================================
   END D2k156
   ========================================================================== */

/* ==========================================================================
   D2k157
   PRODUCT DETAIL — 375px purchase panel top-gap correction
   2026-10-07

   原因:
   規格なし商品でも .ec-productRole__actions が残っており、
   中の数量欄は非表示でもactions自体の領域が上側に空白を作っていた。
   760px以上では既に「規格なしactionsは非表示」になっているため、
   375pxにも同じ処理を適用する。

   パネル自体の上下paddingはD2k156の30pxを維持し、
   上下の見た目を同じ余白に揃える。
   ========================================================================== */

@media only screen and (max-width: 375px) {
    #page_product_detail #productcartarea .ec-productRole__actions:not(:has(.ec-select)) {
        display: none;
    }

    #page_product_detail #productcartarea .ec-productRole__actions:has(.ec-select) {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        min-width: 0;
        margin: 0 0 10px;
        padding: 0;
        box-sizing: border-box;
    }
}

/* ==========================================================================
   END D2k157
   ========================================================================== */

/* ==========================================================================
   D2k158
   PRODUCT DETAIL — 500 / 640px gutter ownership correction
   2026-10-07

   D2k156で商品詳細ページ全体へ左右20pxを追加したが、
   商品詳細の各コンテンツ自体が既存の内側余白を持っているため、
   500 / 640pxでは二重に見えて左右が空きすぎた。

   修正方針:
   ・商品詳細ページ全体への左右20pxを解除。
   ・関連商品グリッドだけは現在の見た目が正常なので、
     グリッド自身に左右20pxを持たせて維持。
   ・最下部60pxは維持。
   ・375pxは変更しない。
   ========================================================================== */

@media only screen and (min-width: 376px) and (max-width: 640px) {
    #page_product_detail .ec-layoutRole__contents {
        padding-left: 0;
        padding-right: 0;
    }

    #page_product_detail #RelatedProduct-product_area .ec-shelfGrid {
        width: calc(100% - 40px);
        margin-left: auto;
        margin-right: auto;
    }
}

/* ==========================================================================
   END D2k158
   ========================================================================== */

/* ==========================================================================
   D2k159
   PRODUCT DETAIL — 500 / 640px purchase panel + related tab alignment
   2026-10-07
   ========================================================================== */

@media only screen and (min-width: 376px) and (max-width: 640px) {
    #page_product_detail #productcartarea {
        margin: 0;
        padding: 30px 20px;
        background: #fff;
        border: var(--kinema-border);
        box-sizing: border-box;
    }

    #page_product_detail #productcartarea .ec-productRole__actions:not(:has(.ec-select)) {
        display: none;
    }

    #page_product_detail #productcartarea .ec-productRole__actions:has(.ec-select) {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        min-width: 0;
        margin: 0 0 10px;
        padding: 0;
        box-sizing: border-box;
    }

    #page_product_detail #productcartarea .ec-productRole__btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        min-width: 0;
        max-width: none;
        margin-top: 0;
        margin-bottom: 0;
        box-sizing: border-box;
    }

    #page_product_detail #productcartarea > form + form {
        margin-top: 10px;
    }

    #page_product_detail #productcartarea .ec-productRole__btn .ec-blockBtn--action,
    #page_product_detail #productcartarea .ec-productRole__btn #favorite.ec-blockBtn--cancel {
        width: 100%;
        max-width: 240px;
        height: 56px;
        min-height: 56px;
        margin-left: 0;
        margin-right: 0;
    }

    #page_product_detail #productcartarea .ec-productRole__btn .ec-blockBtn--action {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 46px 0 16px;
        border: 1px solid #ccc;
        border-radius: 3px;
        background-image: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
        background-color: #eee;
        color: #555;
        font-size: 14px;
        font-family: "Noto Serif JP", serif;
        letter-spacing: .05em;
        line-height: 1.4;
        text-align: center;
    }

    #page_product_detail #productcartarea .ec-productRole__btn .ec-blockBtn--action::before {
        content: "この作品を買物カゴに入れる";
        display: block;
        white-space: nowrap;
    }

    #page_product_detail #productcartarea .ec-productRole__btn .ec-blockBtn--action::after {
        content: "";
        width: 28px;
        height: 28px;
        right: 12px;
        background-image: url(../img/common/icon_cart.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    #page_product_detail #productcartarea .ec-productRole__btn .ec-blockBtn--action:hover,
    #page_product_detail #productcartarea .ec-productRole__btn .ec-blockBtn--action:focus,
    #page_product_detail #productcartarea .ec-productRole__btn .ec-blockBtn--action:active {
        color: #a14d33;
        border-color: #a14d33;
        background-image: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
        background-color: #eee;
        outline: none;
    }

    #page_product_detail #productcartarea .ec-productRole__btn .ec-blockBtn--action:hover::after,
    #page_product_detail #productcartarea .ec-productRole__btn .ec-blockBtn--action:focus::after,
    #page_product_detail #productcartarea .ec-productRole__btn .ec-blockBtn--action:active::after {
        background-image: url(../img/common/icon_cart_hov.png);
    }

    #page_product_detail #RelatedProduct-product_area h2.subtitle > img,
    #page_product_detail #RelatedProduct-product_area h2.subtitle > span {
        margin-left: 20px;
    }
}

/* ==========================================================================
   END D2k159
   ========================================================================== */

/* ==========================================================================
   D2k160
   PRODUCT DETAIL — 500 / 640px related tab underline alignment
   2026-10-07

   関連作品タブ下のborderがページ全幅まで伸びていたため、
   h2.subtitle自体を関連商品カード群と同じ左右20px内側へ。
   D2k159で子要素へ付けた左20pxは解除し、二重余白を防ぐ。
   ========================================================================== */

@media only screen and (min-width: 376px) and (max-width: 640px) {
    #page_product_detail #RelatedProduct-product_area h2.subtitle {
        width: calc(100% - 40px);
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }

    #page_product_detail #RelatedProduct-product_area h2.subtitle > img,
    #page_product_detail #RelatedProduct-product_area h2.subtitle > span {
        margin-left: 0;
    }
}

/* ==========================================================================
   END D2k160
   ========================================================================== */

/* ==========================================================================
   D2k161 — Product detail PC-DOM layout, responsive placement

   Requires kinema_product_detail_responsive_D2k161.js in function.js.
   The script MOVES existing .pc nodes to #kinema-product-mainTop ONLY
   when the PC template lacks its own .ec-layoutRole__mainTop.

   760–1023: existing tablet two-column grid; title's own bottom margin
   gives the upper 20px, so no extra wrapper top margin. Bottom = 20px.
   <=759: stack in one column and preserve the same outer gaps.
   1024+: script restores original sidebar markup; these rules do not apply.
   ========================================================================== */

@media only screen and (max-width: 1023px) {
    #page_product_detail #kinema-product-mainTop {
        width: 100%;
        min-width: 0;
        margin-top: 0;
        margin-bottom: 20px;
        box-sizing: border-box;
    }

    /* Override the generic <768px .pc {display:none!important} only for
       the two moved, live nodes. Other .pc elements remain unchanged. */
    #page_product_detail #kinema-product-mainTop > .z_product_detail.pc,
    #page_product_detail #kinema-product-mainTop > #productcartarea.pc {
        display: block !important;
        width: 100%;
        max-width: none;
        min-width: 0;
        margin: 0;
        box-sizing: border-box;
    }
}

@media only screen and (max-width: 759px) {
    /* At narrower widths the two-column tablet layout no longer fits. */
    #page_product_detail #kinema-product-mainTop {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        row-gap: 20px;
        align-items: start;
    }
}

@media only screen and (min-width: 641px) and (max-width: 759px) {
    /* Bridge the gap between the mobile cart-panel styles (<=640px)
       and the tablet cart-panel styles (>=760px), for this PC-DOM path. */
    #page_product_detail #kinema-product-mainTop > #productcartarea {
        padding: 30px 20px;
        background: #fff;
        border: var(--kinema-border);
    }
}

/* ==========================================================================
   END D2k161
   ========================================================================== */

/* ==========================================================================
   D2k162 — product detail PC-DOM: stable order + measured outer gaps

   This targets only the existing PC-template nodes moved by D2k162 JS.
   At <=1023px the wrapper is now a DIRECT child of .flash, immediately
   after .video-js-box. Other SP/tablet layout branches remain unchanged.

   Final visible spaces:
     main visual -> product info + cart : 20px
     product info + cart -> description : 26px

   The next .description owns the second gap to avoid doubling the default
   h2.subtitle top margin with the wrapper's old margin-bottom.
   ========================================================================== */
@media only screen and (max-width: 1023px) {
    #page_product_detail #kinema-product-mainTop {
        margin-top: 20px;
        margin-bottom: 0;
    }

    /* Eliminate the inline video baseline gap (~4–5px) below its pixels. */
    #page_product_detail .ec-productRole__description > .flash:has(> #kinema-product-mainTop) > .video-js-box video {
        display: block;
    }

    /* Own the final 26px gap on the next content block, not both siblings. */
    #page_product_detail .ec-productRole__description > .flash:has(> #kinema-product-mainTop) + .description {
        margin-top: 26px;
    }
    #page_product_detail .ec-productRole__description > .flash:has(> #kinema-product-mainTop) + .description > h2.subtitle {
        margin-top: 0;
    }
}
/* ==========================================================================
   END D2k162
   ========================================================================== */

/* ==========================================================================
   D2k164 — PRODUCT DETAIL / 1024–1199px sidebar purchase panel

   The 760–1199px purchase panel's white frame and 20px inner gutters were
   intended for the tablet two-column content, but at 1024–1199px these
   remain applied to the original 250px SideRight column. This leaves only
   208px for the button and clips the cart label against the icon.

   At this width only, the sidebar (not the panel) owns the outer geometry.
   Keep the shared cart/favorite button appearance and behavior unchanged.
   ========================================================================== */
@media only screen and (min-width: 1024px) and (max-width: 1199px) {
    /* Remove ONLY the purchase panel frame inside the genuine PC sidebar. */
    #page_product_detail .ec-layoutRole__right > #productcartarea {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        box-sizing: border-box;
    }

    /* Both buttons occupy the full 250px sidebar width. */
    #page_product_detail .ec-layoutRole__right > #productcartarea .ec-productRole__btn {
        width: 100%;
        min-width: 0;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        box-sizing: border-box;
    }
    #page_product_detail .ec-layoutRole__right > #productcartarea .ec-productRole__btn .ec-blockBtn--action,
    #page_product_detail .ec-layoutRole__right > #productcartarea .ec-productRole__btn #favorite.ec-blockBtn--cancel {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: none;
        min-width: 0;
        margin-left: 0;
        margin-right: 0;
        box-sizing: border-box;
    }

    /* 13-character label + right cart icon must both fit without overlap. */
    #page_product_detail .ec-layoutRole__right > #productcartarea .ec-productRole__btn .ec-blockBtn--action {
        padding-left: 6px;
        padding-right: 40px;
        font-size: 13px;
        letter-spacing: 0;
    }
    #page_product_detail .ec-layoutRole__right > #productcartarea .ec-productRole__btn .ec-blockBtn--action::after {
        right: 7px;
        width: 26px;
        height: 26px;
    }
}
/* ==========================================================================
   END D2k164
   ========================================================================== */

/* ==========================================================================
   D2k165 — PRODUCT DETAIL / 1024–1199px sidebar purchase bottom gap

   D2k164 removed the purchase panel's frame and inner gutters.
   Keep a final 30px space under the purchase-button group before the
   following SideRight block; do not change button sizing or other widths.
   ========================================================================== */
@media only screen and (min-width: 1024px) and (max-width: 1199px) {
    #page_product_detail .ec-layoutRole__right > #productcartarea {
        margin-bottom: 30px;
    }
}
/* ==========================================================================
   END D2k165
   ========================================================================== */

/* ==========================================================================
   D2k166 — CART total price right gutter; expanded at D2k172

   At 375px the total row originally received a 20px right inset. At 500px
   the price again touched the frame, while the quantity above had its
   right edge inset 20px. The 759px-and-under stacked cart shares this
   structure; unify the final 20px gutter across that entire layout.
   Keep the 760px+ table presentation untouched.
   ========================================================================== */
@media only screen and (max-width: 759px) {
    .cart_page .ec-cartRole__total {
        padding-right: 20px;
        box-sizing: border-box;
    }
}
/* ==========================================================================
   END D2k166 (revised D2k172)
   ========================================================================== */


/* ==========================================================================
   D2k167 — SHOPPING / CONFIRM action widths + 25px top gap
   Extended from <=375px to <=759px by D2k173.

   On narrow screens, the general button rule uses width:calc(100% - 40px),
   max-width:320px and margin:10px auto. These checkout buttons instead
   match their containing white summary box at every stacked-layout width.
   Preserve first-button margin-top:10px and add 15px of group padding:
   the finished visible top gap remains 25px, with later spacing unchanged.
   760px+ checkout button layouts stay untouched.
   ========================================================================== */
@media only screen and (max-width: 759px) {
    #page_shopping .ec-orderRole .ec-totalBox__btn,
    #page_shopping_confirm .ec-orderRole .ec-totalBox__btn {
        padding-top: 15px;
        box-sizing: border-box;
    }

    #page_shopping .ec-orderRole .ec-totalBox__btn .ec-blockBtn--action,
    #page_shopping .ec-orderRole .ec-totalBox__btn .ec-blockBtn--cancel,
    #page_shopping .ec-orderRole .ec-totalBox__btn .ec-blockBtn,
    #page_shopping_confirm .ec-orderRole .ec-totalBox__btn .ec-blockBtn--action,
    #page_shopping_confirm .ec-orderRole .ec-totalBox__btn .ec-blockBtn--cancel,
    #page_shopping_confirm .ec-orderRole .ec-totalBox__btn .ec-blockBtn {
        width: 100%;
        max-width: none;
        min-width: 0;
        margin-left: 0;
        margin-right: 0;
        box-sizing: border-box;
    }
}
/* ==========================================================================
   END D2k167
   ========================================================================== */


/* ==========================================================================
   D2k168 — CREDIX handoff, narrow checkout final QA

   The step 4 "credit payment" screen is a payment handoff, NOT the actual
   purchase-complete screen. Only the Credix handoff card is targeted.

   - The preceding checkout screens use a 20px top gap under their stepper.
   - At narrow widths, the previous 52px button gutters left too little room
     for Japanese text plus the forward/back pseudo-element arrow.
   - The standard narrow content-to-footer gap is 60px.
   ========================================================================== */
@media only screen and (max-width: 640px) {
    .ec-cartCompleteRole:has(form[action*="credix-web.co.jp"]) {
        margin-top: 20px;
        margin-bottom: 60px;
    }
}

@media only screen and (max-width: 499px) {
    /* Keep the entire button label and a separate arrow lane on one line. */
    .ec-cartCompleteRole:has(form[action*="credix-web.co.jp"]) .ec-blockBtn--action,
    .ec-cartCompleteRole:has(form[action*="credix-web.co.jp"]) .ec-blockBtn--cancel {
        min-width: 0;
        width: 100%;
        max-width: 100%;
        font-size: clamp(12px, 3.75vw, 14px);
        letter-spacing: 0;
        line-height: 1.35;
        white-space: nowrap;
        box-sizing: border-box;
    }

    /* Forward: reserve space to the right of the text for the icon. */
    .ec-cartCompleteRole:has(form[action*="credix-web.co.jp"]) .ec-blockBtn--action {
        padding-left: 12px;
        padding-right: 30px;
    }
    .ec-cartCompleteRole:has(form[action*="credix-web.co.jp"]) .ec-blockBtn--action::after {
        right: 9px;
        width: 13px;
        height: 13px;
    }

    /* Backward: the left arrow has its own lane; do not overlap the label. */
    .ec-cartCompleteRole:has(form[action*="credix-web.co.jp"]) .ec-blockBtn--cancel {
        padding-left: 32px;
        padding-right: 10px;
    }
    .ec-cartCompleteRole:has(form[action*="credix-web.co.jp"]) .ec-blockBtn--cancel::before {
        left: 9px;
        width: 13px;
        height: 13px;
    }
}
/* ==========================================================================
   END D2k168
   ========================================================================== */

/* ==========================================================================
   D2k169 — CREDIX handoff / narrow progress spacing and readable heading

   - page_payment_credix only: the other shopping steps already have titles.
   - No synthetic page-title text is injected with CSS. The EC-CUBE page
     title should be added through the template/page HTML if desired.
   - At <=759px, reserve a 50px top gap for the stepper as a fallback
     (the original <=375px value is preserved; widened by D2k175).
   - Make the prominent message fit naturally on a narrow screen.
   - D2k168 button and footer rules remain unchanged.
   ========================================================================== */
@media only screen and (max-width: 759px) {
    body#page_payment_credix .ec-cartRole .ec-cartRole__progress {
        margin-top: 50px;
    }
}

@media only screen and (max-width: 499px) {
    body#page_payment_credix .ec-cartCompleteRole:has(form[action*="credix-web.co.jp"]) .ec-reportHeading h2 {
        font-size: clamp(18px, 5.3vw, 20px);
        line-height: 1.5;
        letter-spacing: 0;
        overflow-wrap: anywhere;
    }
}
/* ==========================================================================
   END D2k169
   ========================================================================== */

/* ==========================================================================
   D2k170 — CREDIX / <=375px heading final appearance

   In the 375px QA, the preferred heading is a calm 17px in two lines,
   with 20px horizontal inset instead of the default 44px. The DevTools
   clamp(17px, 5.3vw, 10px) is deliberately normalized to a fixed 17px:
   its maximum is below its minimum and is not a meaningful fluid scale.
   Other checkout screens, CREDIX buttons, and widths >=376px stay intact.
   ========================================================================== */
@media only screen and (max-width: 375px) {
    body#page_payment_credix .ec-cartCompleteRole:has(form[action*="credix-web.co.jp"]) .ec-reportHeading {
        padding: 32px 20px 26px;
    }

    body#page_payment_credix .ec-cartCompleteRole:has(form[action*="credix-web.co.jp"]) .ec-reportHeading h2 {
        font-size: 17px;
        line-height: 1.5;
    }
}
/* ==========================================================================
   END D2k170
   ========================================================================== */


/* ==========================================================================
   D2k171 — PRODUCT DETAIL / SP-DOM main visual -> product info 20px

   DOM verified at 500px:
     .flash > .video-js-box          bottom: 47px
     .flash > .ec-layoutRole__mainTop top:    47px  (gap: 0px)

   D2k162's #kinema-product-mainTop belongs to the alternative PC-DOM path
   and is absent on this page. Give the existing SP mainTop its final 20px
   top gap. The 760–1199px SP-DOM branch already owns a 20px margin;
   so this rule stops at 759px. Keep the video baseline from adding
   invisible pixels to the final measured visual gap.
   No change to following section gaps or other pages.
   ========================================================================== */
@media only screen and (max-width: 759px) {
    #page_product_detail .ec-productRole__description > .flash > .ec-layoutRole__mainTop {
        margin-top: 20px;
    }

    #page_product_detail .ec-productRole__description > .flash:has(> .ec-layoutRole__mainTop) > .video-js-box video {
        display: block;
    }
}
/* ==========================================================================
   END D2k171
   ========================================================================== */

/* ==========================================================================
   D2k172 — CART / stacked layout <=759px: borders and center alignment

   DOM measurement at 500px:
   .ec-cartRole__progress / .ec-progress are both 500px wide, centered at
   x=250. All four .ec-progress__item boxes are exactly 125px wide; the
   stepper is already mathematically centered and must NOT be shifted.

   The first .ec-cartTable border-top (1px dotted #ccc) visually doubles
   the existing solid framing above the product rows. Remove only this
   top dotted edge; retain all row separators. The instruction paragraph
   was forced left at <=767px; restore center alignment on cart pages only.
   The total amount 20px inset is owned by revised D2k166 above.
   ========================================================================== */
@media only screen and (max-width: 759px) {
    .cart_page .ec-cartTable {
        border-top: 0;
    }

    .cart_page .ec-cartRole__actions p.note {
        text-align: center;
    }
}
/* ==========================================================================
   END D2k172
   ========================================================================== */

/* ==========================================================================
   D2k173 — SHOPPING / CONFIRM: narrow checkout spacing + page title

   1) D2k167 button widths/top gap now apply across <=759px (above).
   2) The point box is secondary information: separate it visibly from
      the payment total with a 30px upper margin; do not move the total.
   3) Use the existing .ec-cartRole bottom-margin as the owner of the
      stepper-to-content gap; set it to 30px instead of the old 35px.
      No extra progress padding/margin is added.
   4) On 500–759px ONLY, headings rise from the mobile 24px to 30px.
      Keep <=499px titles and >=760px tablet/PC titles unchanged.
   Only shopping and order-confirmation pages are affected.
   ========================================================================== */
@media only screen and (max-width: 759px) {
    #page_shopping .ec-totalBox__pointBlock,
    #page_shopping_confirm .ec-totalBox__pointBlock {
        margin-top: 30px;
    }

    #page_shopping .ec-cartRole:has(.ec-cartRole__progress),
    #page_shopping_confirm .ec-cartRole:has(.ec-cartRole__progress) {
        margin-bottom: 30px;
    }
}

@media only screen and (min-width: 500px) and (max-width: 759px) {
    #page_shopping .ec-pageHeader h1,
    #page_shopping_confirm .ec-pageHeader h1 {
        font-size: 30px;
    }
}
/* ==========================================================================
   END D2k173
   ========================================================================== */

/* ==========================================================================
   D2k174 / D2k186 / D2k187 — CART / SHOPPING / CONFIRM title baseline

   After comparing STEP 1 (cart) and STEP 2 (shopping) at 640px:
   cart 40px h1 was larger than the approved shopping/confirm 30px title.
   D2k187 aligns all three titles at 30px for 500–759px, preserving the
   shared 30px upper space. <=499px retains the adopted mobile 24px title;
   >=760px retains the tablet/PC layout and heading size.
   ========================================================================== */
@media only screen and (min-width: 500px) and (max-width: 759px) {
    #page_cart .ec-pageHeader h1 {
        font-size: 30px;
    }

    #page_shopping .ec-role:has(> .ec-pageHeader),
    #page_shopping_confirm .ec-role:has(> .ec-pageHeader) {
        margin-top: 30px;
    }
}
/* ==========================================================================
   END D2k174 / D2k186 / D2k187
   ========================================================================== */

/* ==========================================================================
   D2k188 / D2k189 — CHECKOUT / 376–640px main-panel horizontal gutters
   2026-10-21

   Established site alignment: 500 / 640px main content sits 20px from
   the left and right edges. Apply the same to checkout steps 1–3 only.

   STEP 1 cart (D2k189 correction):
     The progress bar stays full width. The total summary strip is already
     correctly inset 20px. The white background and visible 1px outline
     belong to #form_cart itself, NOT to the nested .ec-cartRole__cart or
     .ec-cartRole__actions. Inset the form once; its children retain their
     natural 100% width and must not receive another 20px gutter.
     Keep the previously approved vertical margins and content padding.

   STEP 2/3 shopping/confirmation:
     .ec-orderRole is the single outer white panel; inset it once, instead
     of adding padding to each of its internal tables, summary or buttons.

   Keep <=375px, 641px+, headings/progress and payment handoff unchanged.
   ========================================================================== */
@media only screen and (min-width: 376px) and (max-width: 640px) {
    #page_cart .ec-cartRole .ec-cartRole__totalText,
    #page_cart #form_cart.ec-cartRole,
    #page_shopping .ec-orderRole,
    #page_shopping_confirm .ec-orderRole {
        width: calc(100% - 40px);
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }
}
/* ==========================================================================
   END D2k188 / D2k189
   ========================================================================== */

/* ==========================================================================
   D2k175 — CREDIX handoff / 500px final QA

   The stepper's existing 50px top gap (originally <=375px) now applies
   through the entire <=759px stacked/mobile range in D2k169 above.
   Here only the 500–759px handoff H2 is set to 20px: keep the adopted
   <=375px 17px heading, the 376–499px fluid heading, and 760px+
   presentation untouched. No synthetic page title or JS changes.
   ========================================================================== */
@media only screen and (min-width: 500px) and (max-width: 759px) {
    body#page_payment_credix .ec-cartCompleteRole:has(form[action*="credix-web.co.jp"]) .ec-reportHeading h2 {
        font-size: 20px;
    }
}
/* ==========================================================================
   END D2k175
   ========================================================================== */

/* D2k176/177: homepage and listing footer space now share SECTION 1's
   mobile footer rule; body#page_homepage remains an explicit page target. */


/* ==========================================================================
   D2k180 — HOMEPAGE / <=640px title breathing room + 376–640px grid gutters
   2026-10-21

   Scope to the actual homepage (body#page_homepage), not #page_product_list.
   - Header visual -> first shelf title: a final 20px of vertical space.
     The shelf owns its own top padding, preventing collapsed child margins.
   - At 376–640px only: card grid outer gutters are 20px per side.
     The 375px full-width grid remains intact.
   - Card INNER 10px content insets from D2k179, grid card count/gaps,
     related products, footer bottom gap and other pages remain unchanged.
   ========================================================================== */
@media only screen and (max-width: 640px) {
    body#page_homepage .ec-shelfRole {
        padding-top: 20px;
        box-sizing: border-box;
    }
}

@media only screen and (min-width: 376px) and (max-width: 640px) {
    body#page_homepage .ec-shelfRole > .ec-shelfGrid {
        width: calc(100% - 40px);
        margin-left: auto;
        margin-right: auto;
    }
}
/* ==========================================================================
   END D2k180
   ========================================================================== */


/* ==========================================================================
   D2k181 — HOMEPAGE title gutters + 375px PRODUCT DETAIL title/tag rows
   2026-10-21

   HOMEPAGE (376–640px): the section title and its card grid share the
   same final 20px outer gutters. Preserve 375px full-width section title,
   the existing 20px shelf top padding, and the card grid from D2k180.

   PRODUCT DETAIL (<=375px): the icon/title text occupies the first flex
   line; a zero-height, reordered flex break places all existing tags on
   the following line, right aligned. No font-size reduction, no Twig/JS
   changes, and 376px+ product titles remain unchanged.
   ========================================================================== */
@media only screen and (min-width: 376px) and (max-width: 640px) {
    body#page_homepage .ec-shelfRole h2.title {
        width: calc(100% - 40px);
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }
}

@media only screen and (max-width: 375px) {
    #page_product_detail .z_product_title .ec-headingTitle {
        display: flex;
        flex-wrap: wrap;
        height: auto;
    }

    /* Flex item order: icon/title = 0, line break = 1, tags = 2. */
    #page_product_detail .z_product_title .ec-headingTitle::before {
        content: "";
        order: 1;
        flex: 0 0 100%;
        width: 100%;
        height: 0;
        padding: 0;
        margin: 0;
        border: 0;
    }

    #page_product_detail .z_product_title .ec-headingTitle > .ec-productRole__tag {
        order: 2;
        flex: 0 0 auto;
        margin-top: 5px;
        white-space: nowrap;
    }

    /* Existing first-tag auto margin keeps the tag group at the right. */
}
/* ==========================================================================
   END D2k181
   ========================================================================== */

/* ==========================================================================
   D2k182 — PRODUCT DETAIL 375px compact title + right-aligned tag group
   2026-10-21

   The actual h2 contains an icon, a TEXT NODE, then individual tag spans.
   CSS alone cannot scale the anonymous title text and all tags as a single
   inner group while keeping the h2's original border/outer height intact.

   function.js D2k182 wraps only those existing nodes at <=375px, calculates
   a fitted scale with room for up to five tags, right-aligns the tag group,
   and restores every original node at >=376px. The outer h2 stays unchanged.

   The D2k181 two-row fallback above remains as an intact safe fallback until
   JS has initialized; these scoped rules take over only after JS wraps it.
   ========================================================================== */
@media only screen and (max-width: 375px) {
    #page_product_detail .z_product_title .ec-headingTitle.kinema-d2k182-compact {
        position: relative;
        display: block;
        flex-wrap: nowrap;
        overflow: hidden;
        box-sizing: border-box;
    }

    #page_product_detail .z_product_title .ec-headingTitle.kinema-d2k182-compact::before {
        content: none !important;
        display: none !important;
    }

    #page_product_detail .z_product_title .ec-headingTitle.kinema-d2k182-compact > .kinema-d2k182-row {
        position: absolute;
        top: 50%;
        left: 8px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: max-content;
        white-space: nowrap;
        transform-origin: left center;
        box-sizing: border-box;
    }

    #page_product_detail .kinema-d2k182-title,
    #page_product_detail .kinema-d2k182-tags {
        display: inline-flex;
        align-items: center;
        flex: 0 0 auto;
        gap: 0;
        width: max-content;
        white-space: nowrap;
    }

    #page_product_detail .kinema-d2k182-title > img {
        display: block;
        flex: 0 0 auto;
        margin: 0 8px 0 0;
        vertical-align: initial;
    }

    #page_product_detail .kinema-d2k182-tags > .ec-productRole__tag {
        position: static;
        display: block;
        float: none;
        flex: 0 0 auto;
        width: auto;
        margin: 0;
        padding-left: 2px;
        padding-right: 2px;
        white-space: nowrap;
        box-sizing: border-box;
    }
}
/* ==========================================================================
   END D2k182
   ========================================================================== */

/* ==========================================================================
   D2k198 — GUIDE / CONTACT main contents 20px side gutters (<=640px)

   Expand D2k190's existing 376–640px rule to the 375px mobile layout.
   Both page titles are aligned with the main-content left edge by D2k197;
   they should not touch the viewport at 375px.

   The OUTER .ec-layoutRole__contents owns the 20px side gutters.
   Do not add duplicate padding to the guide sections or contact form.

   Scope only:
     - Guide page containing #guide_menu (not media-guide #media_menu)
     - Contact page #page_contact

   Keep >=641px, header/footer, form-internal rules, title vertical gaps,
   and finished checkout/product layouts unchanged.
   ========================================================================== */
@media only screen and (max-width: 640px) {
    body:has(#guide_menu) .ec-layoutRole > .ec-layoutRole__contents,
    body#page_contact .ec-layoutRole > .ec-layoutRole__contents {
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }
}
/* ==========================================================================
   END D2k198 guide/contact side gutters
   ========================================================================== */

/* ==========================================================================
   D2k197 — FIVE STANDARD STATIC-PAGE TITLES / FINAL 30PX VERTICAL GAPS
   2026-10-21

   Source: real 500px computed geometry on page_contact / page_help_guide.
   Contact header currently 24px and touches first form block (0px gap).
   Guide header likewise touches its menu (0px gap); its 44px menu link
   was anchored to the top rather than vertically centered.

   Shared narrow standard-page title only (not cart, product, MyPage):
     - D2k197: final title-box gap 30px above AND 30px below.
       Old mobile h1 padding-top/bottom of 20px made the D2k196
       15px outer gaps visually 35px on each side. Reset that internal
       padding to 0 and make the OUTER gaps 30px each (60px total).
     - 24px at <=499px; 30px at 500..759px
   Dedicated purchase flow step titles and credit handoff are untouched.

   Contact:
     - Outer .ec-off1Grid mobile border was corrected in-place above.
     - Inner .ec-borderedDefs must not add an isolated top line.
   Guide:
     - Menu 44px vertical centering corrected in-place above.
     - FAQ accordion list gets responsive inner padding rather than full
       bleed and keeps its blue border on all four edges.

   D2k195 extends ONLY title typography, alignment and vertical spacing
   to About, Privacy, and Trade-law (visible 500px screenshots); it does not
   alter their nested white-panel borders, contents or footer spacing.
   D2k197 corrects the interpretation: final 30px top + 30px bottom,
   without the additional legacy 20px top/bottom h1 padding.
   No changes to >=760px or other pages. Keep D2k190 horizontal gutters.
   ========================================================================== */
@media only screen and (max-width: 759px) {
    body#page_contact .ec-layoutRole > .ec-layoutRole__contents,
    body#page_help_guide .ec-layoutRole > .ec-layoutRole__contents,
    body#page_help_about .ec-layoutRole > .ec-layoutRole__contents,
    body#page_help_privacy .ec-layoutRole > .ec-layoutRole__contents,
    body#page_help_tradelaw .ec-layoutRole > .ec-layoutRole__contents {
        padding-top: 30px;
    }

    #page_contact .ec-pageHeader,
    #page_help_guide .ec-pageHeader,
    #page_help_about .ec-pageHeader,
    #page_help_privacy .ec-pageHeader,
    #page_help_tradelaw .ec-pageHeader {
        margin-bottom: 30px;
    }

    /*
     * D2k192: standard page-heading alignment to the main-content left.
     * Contact and three standard static pages have legacy 20px h1 horizontal
     * padding from .ec-role h1. Guide's .ec-pageHeader has an additional
     * wrapper inset, handled below as its previously approved exception.
     * Reset both horizontal and vertical h1 padding in this narrow group;
     * the outer spacing rules above own the 30px gaps on each side.
     */
    #page_contact .ec-pageHeader h1,
    #page_help_guide .ec-pageHeader h1,
    #page_help_about .ec-pageHeader h1,
    #page_help_privacy .ec-pageHeader h1,
    #page_help_tradelaw .ec-pageHeader h1 {
        padding-top: 0;
        padding-bottom: 0;
        padding-left: 0;
        padding-right: 0;
        text-align: left;
    }
    #page_help_guide .ec-pageHeader {
        margin-left: -20px;
        margin-right: -20px;
        width: calc(100% + 40px);
        box-sizing: border-box;
    }

    /* Contact: remove only the isolated line preceding お名前. */
    #page_contact .ec-contactRole .ec-borderedDefs {
        border-top: 0;
    }

    /*
     * D2k192: gray outer frame belongs to the WHOLE last FAQ block.
     * The blue accordion-item borders and D2k191 internal inset stay intact.
     */
    #page_help_guide .acc_wrap {
        border: 1px solid #bbb;
        background-color: #fdfdfd;
        box-sizing: border-box;
    }

    /* Guide FAQ: inset the accordion and restore its blue item borders. */
    #page_help_guide .acc_wrap .acc {
        padding: clamp(20px, 5.263vw, 40px);
        box-sizing: border-box;
    }
    #page_help_guide .acc_wrap .acc li dl {
        border-left: 1px solid #a2c0c8;
        border-right: 1px solid #a2c0c8;
    }
}

/* Space between the whole guide FAQ frame and the CTA button,
   not spacing between the accordion's internal question rows. */
@media only screen and (max-width: 640px) {
    #page_help_guide .acc_wrap {
        margin-bottom: var(--kinema-guide-faq-actions-gap);
    }
}

@media only screen and (min-width: 500px) and (max-width: 759px) {
    #page_contact .ec-pageHeader h1,
    #page_help_guide .ec-pageHeader h1,
    #page_help_about .ec-pageHeader h1,
    #page_help_privacy .ec-pageHeader h1,
    #page_help_tradelaw .ec-pageHeader h1 {
        font-size: 30px;
    }
}
/* ==========================================================================
   END D2k197 title and FAQ corrections
   ========================================================================== */
/* ==========================================================================
   D2k205 / D2k206 — T9 MEDIA GUIDE narrow framing and section rhythm
   2026-10-21

   Only the media guide (guide_media.twig): real markup includes #media_menu.
   This is separate from the standard guide #guide_menu and T1 five-page
   design family. D2k206 changes only narrow-screen menu alignment and gaps.

   <=759: title text block + 30px above / 30px below, as adopted for T1.
     <=499: h1 24px; 500..759: h1 30px.
   <=640: OUTER contents owns both 20px side gutters; no child double-inset.
   <=640: footer gap 60px is controlled ONLY by shared D2k193 above.
   >=760: unchanged (including the D2k100 three-column media menu).

   Since the staging page may require auth, recheck final visible bottom gap
   and title alignment at 375/500/640 on the actual page before adopting.
   ========================================================================== */
@media only screen and (max-width: 759px) {
    body:has(#media_menu) .ec-layoutRole > .ec-layoutRole__contents {
        padding-top: 30px;
    }

    body:has(#media_menu) .ec-pageHeader {
        margin-bottom: 30px;
    }

    /* D2k206: section rhythm: 30px between completed content blocks.
       Exclude the final section to preserve the existing 60px footer gap.
       A section can be followed by another section or a repeated media nav. */
    body:has(#media_menu) .containerA:has(~ .containerA),
    body:has(#media_menu) .containerA:has(~ #media_menu) {
        margin-bottom: 30px;
    }

    /* Media-guide panels previously contributed an extra 10px after their
       visible bottom edge, making the apparent inter-section gaps uneven. */
    body:has(#media_menu) .containerB {
        padding-bottom: 0;
    }

    body:has(#media_menu) .ec-pageHeader h1 {
        margin: 0;
        padding: 0;
        font-size: 24px;
        text-align: left;
    }
}

@media only screen and (min-width: 500px) and (max-width: 759px) {
    body:has(#media_menu) .ec-pageHeader h1 {
        font-size: 30px;
    }
}

@media only screen and (max-width: 640px) {
    body:has(#media_menu) .ec-layoutRole > .ec-layoutRole__contents {
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }

    /* D2k206: like the accepted T1 guide exception, cancel the 20px
       extra inset of the header wrapper; the page's outer 20px gutter stays. */
    body:has(#media_menu) .ec-pageHeader {
        margin-left: -20px;
        margin-right: 0;
    }
}
/* ==========================================================================
   END D2k205 / D2k206 T9 MEDIA GUIDE narrow refinements
   ========================================================================== */

/* ==========================================================================
   D2k208–D2k209 — T7 / MY PAGE LOGIN: mobile heading, independently owned
   2026-10-21

   Source of values: accepted narrow-page heading specification:
     <=499px h1 24px; 500..759px h1 30px
     <=759px 30px above heading and 30px below heading
     Heading text aligns with the existing content-column left edge.

   D2k209 correction (user check): wrapper margin-bottom did not produce
   a visible gap below the title on the live login page. Place the 30px
   gap in the h1 itself (padding-bottom) and cancel the wrapper margin
   so it cannot double-count. The title still has zero top/horizontal
   padding; the outer contents owns the top 30px gap.

   Login only. Preserve existing MY-page nav/panels/form dimensions,
   mobile side gutters, footer gap and every page >=760px.
   D2k207 left-only adjustment remains at 760..767px, where legacy
   .mypage h1 { padding-left:20px } is still active.
   ========================================================================== */
@media only screen and (max-width: 767px) {
    /* D2k207 left alignment retained at 760..767 as well. */
    body#page_mypage_login .ec-pageHeader h1 {
        padding-left: 0;
    }
}

@media only screen and (max-width: 759px) {
    /* Outside contents owns the top gap, not h1's legacy padding. */
    body#page_mypage_login .ec-layoutRole > .ec-layoutRole__contents {
        padding-top: 30px;
    }

    /* The h1, not its possibly collapsing wrapper margin, owns the
       visible title-to-content gap. Do not stack another 30px here. */
    body#page_mypage_login .ec-pageHeader {
        margin-bottom: 0;
    }

    body#page_mypage_login .ec-pageHeader h1 {
        margin: 0;
        padding: 0 0 30px;
        font-size: 24px;
        text-align: left;
    }
}

@media only screen and (min-width: 500px) and (max-width: 759px) {
    body#page_mypage_login .ec-pageHeader h1 {
        font-size: 30px;
    }
}
/* ==========================================================================
   END D2k209 T7 login mobile heading
   ========================================================================== */