/* 固定ページテンプレート：brand 用css */

/* 共通 */

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Work Sans", "Noto Sans JP", "Helvetica", "Helvetica Neue", sans-serif, "Arial", "Hiragino Sans", "ヒラギノ角ゴシック", YuGothic, "Yu Gothic", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic" !important;
    background-image: linear-gradient(to top left, #88888800 20%, #f1fcff 25%, #88888800 30% 70%, #f1fcff 75%, #88888800 80%), linear-gradient(to top right, #88888800 20%, #f1fcff 25%, #88888800 30% 70%, #f1fcff 75%, #88888800 80%);
    background-size: 20px 20px;
    background-attachment: fixed;
    font-family: "Work Sans", "Zen Kaku Gothic New", "Noto Sans JP", "Helvetica", "Helvetica Neue", sans-serif, "Arial", "Hiragino Sans", "ヒラギノ角ゴシック", YuGothic, "Yu Gothic", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic" !important;
}

@media screen and (max-width: 768px) {
.sp {
	display: none;
}
}


/* トップ部分 */
.page #main-content {
    padding-top: 0 !important;
}

.brand-head {
    letter-spacing: 0.03em;
}

.head-wrapper {
    width: 100%;
	height: 300px;
    margin: auto;
    position: relative;
    overflow: hidden;
}

.head-text {
    height: 100%;
    display: flex;
    align-items: center;
    color: #fff;
    z-index: 1;
    position: relative;
    text-align: center;
}

.head-text-wrap {
    padding: 0 5%;
    max-width: 1000px;
    margin: auto;
}

.head-text-wrap h1 {
    font-size: 48px;
    font-weight: 700;
    margin: 0;
}

.head-text-wrap p {
	font-size: 20px;
	font-weight: 500;
    line-height: 1.6em;
    white-space: pre-wrap;
    margin-bottom: 3px;
}

.head-text-wrap img {
    max-height: 100px;
    width: auto;
    padding: 0 20px;
}

.head-text-wrap hr {
    width: 90px;
    margin: 14px auto 0;
    border-top: 1px solid #fff;
}

.head-text-explain {
    padding-top: 14px;
}

.head-img {
    width: 100%;
    height: 120%;
    position: absolute;
    top: 0;
    background-size: cover !important;
    background-position: center !important;
}

@media screen and (max-width: 768px) {
.head-wrapper {
    height: 200px;
}

.head-text-wrap h1 {
    font-size: 20px;
}

.head-text-wrap p {
    font-size: 14px;
}
	
.head-text-wrap img {
    max-width: 200px;
}
}






/* brand-v1 */
.brand-introduction {
    margin: 80px auto;
}

.brand-intro {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.brand-intro-text {
    width: 50%;
    display: flex;
    padding-right: 3%;
}

.brand-intro-text-inner {
    margin: auto;
    max-width: 600px;
    padding: 30px 0;
}

.brand-intro-text-inner-img {
    border-bottom: 2px solid #6aa1c7;
    padding-bottom: 10px;
}

.brand-intro-text-inner img {
    margin-left: 0;
	max-height: 30px;
}

.brand-intro-text-inner h3 {
    letter-spacing: 0.02em;
    line-height: 1.25;
	font-weight: 500;
    margin: 15px auto 10px;
    font-size: 28px;
}

.brand-intro-text-inner p {
    letter-spacing: 0.02em;
    line-height: 1.75;
    margin-top: 10px;
    font-size: 16px;
}

.link-btn-block {
    margin-bottom: 0 !important;
    margin-top: 30px !important;
}

.brand-intro-img {
    width: 50%;
}

.brand-intro-img img {
    border-radius: 20px;
}

@media screen and (max-width: 768px) {
.brand-introduction {	 
    margin: 30px auto;	 
}
	 
.brand-intro {	 
   flex-direction: column-reverse;	 
}
	 
.brand-intro-text {	 
   width: 100%;	 
   padding-right: 0;	 
}
	 
.brand-intro-text-inner {	 
   padding: 0;	 
}

.brand-intro-text-inner h3 {
    font-size: 22px;
}

.brand-intro-text-inner p {
    font-size: 12px;
}
	 
.brand-intro-img {	 
   width: 100%;	 
   margin-bottom: 20px;	 
}

.link-btn-block {
    margin-top: 12px !important;
}

}



/* brand-v3 */
.itemMain-wrap {
    display: flex;
    flex-wrap: wrap;
    margin-top: 40px;
}

.itemMain-img {
    width: 50%;
    height: fit-content;
    position: relative;
    padding: 0 5%;
}

.itemMain-img p {
    margin-bottom: 0;
}

.itemMain-img-swiper {
    margin-bottom: 24px;
}

.itemMain-img-swiper:after {
    content: "";
    position: absolute;
    width: 40px;
    height: 40px;
    bottom: 5%;
    right: 5%;
    background: url(https://komakitsusho.co.jp/pd/wp-content/uploads/2025/05/zoom-icon.webp);
    background-size: cover;
    opacity: 0.3;
}

.itemMain-img-swiper-imgWrap {
    width: 100%;
    height: fit-content;
    aspect-ratio: 1 / 1;
    display: flex;
	padding: 5%;
}

.itemMain-img-swiper-imgWrap a {
	width: 100%;
    height: fit-content;
    aspect-ratio: 1 / 1;
    display: flex;
}

.itemMain-img-swiper-imgWrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    font-family: 'object-fit: contain;';
}

.itemMain-img-swiper-imgText {
	padding: 0 2% 0;
}

.swiper-button-prev {
    left: 0;
}

.swiper-button-next {
    right: 0;
}

.itemMain-thumb-swiper-img {
	border: 1px solid #063f5c66;
	transition: all .3s ease-in-out;
	padding: 0;
}

.itemMain-thumb-swiper-img img {
    opacity: 0.7;
	transition: all .3s ease-in-out;
}

.itemMain-thumb-swiper .swiper-slide.swiper-slide-thumb-active .itemMain-thumb-swiper-img {
	border: 1px solid #063f5c;
}

.itemMain-thumb-swiper .swiper-slide.swiper-slide-thumb-active .itemMain-thumb-swiper-img img {
    opacity: 1;
}



.itemMain-contents {
    width: 50%;
    padding-left: 3%;
}

.itemMain-content {
    width: 95%;
    max-width: 600px;
    margin: 48px auto 0;
}

.itemMain-brand {
    margin: 0px auto;
    font-size: 16px;
    font-weight: 900;
}

.itemMain-name {
    position: relative;
    margin: 0px auto 14px;
    font-size: 32px;
    font-weight: 700;
	border-bottom: 2px solid #6aa1c7;
    padding-bottom: 6px;
}

.itemMain-text {
	line-height: 1.5em;
    font-size: 16px;
    font-weight: 400;
}

.itemMain-text-remark {
    font-size: 0.8em;
    font-weight: 400;
	color: #888888;
}


.itemMain-links {
    margin-top: 24px;
    border-top: 1px solid #c3c3c3;
    padding-top: 20px;
}

.itemMain-linkHead {
    position: relative;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 16px;
    padding-left: 1.5em;
}

.itemMain-linkHead:before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 1.2em;
    height: 1.2em;
    background: url(https://komakitsusho.co.jp/pd/wp-content/uploads/2025/02/ei-fountain_pen.svg);
    background-size: contain;
    background-position: center;
}

.itemMain-linkWrap {
    display: flex;
    flex-wrap: wrap;
}

.itemMain-link {
    width: calc(100% / 3);
    padding: 0 2% 2% 0;
}

.itemMain-link a {
    transition: all .3s ease-in-out;
    font-size: 14px;
}

.itemMain-link a:hover {
    opacity:0.7;
}

.itemMain-link img {
    border-radius: 10px;
    margin-bottom: 4px;
}

.itemMain-link p {
    margin-bottom: 0;
    text-align: center;
    font-weight: 500;
}



.itemMain-dls {
    margin-top: 24px;
    border-top: 1px solid #c3c3c3;
    padding-top: 20px;
}

.itemMain-dlHead {
    position: relative;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 20px;
    padding-left: 1.5em;
}

.itemMain-dlHead:before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 1.2em;
    height: 1.2em;
    background: url(https://komakitsusho.co.jp/pd/wp-content/uploads/2025/02/ei-download.svg);
    background-size: contain;
    background-position: center;
}

.itemMain-dlWrap {
    display: flex;
    flex-wrap: wrap;
}

.itemMain-dl {
    width: calc(100% / 2);
    padding: 0 2% 2% 0;
}

.itemMain-dl a {
    display: block;
    width: 100%;
    padding: 0.3em 0.7em;
    background: #333333;
	border: 1px solid #333333;
    color: #fff;
    font-size: 16px;
    text-align: center;
    border-radius: 7px;
	transition: all .3s;
}

.itemMain-dl a:hover {
    background: #fff;
    color: #333333;
}


@media screen and (max-width: 768px) {
.itemMain-wrap {
    margin-top: 0px;
}

.itemMain-img {
    width: 100%;
}

.itemMain-contents {
    width: 100%;
    padding: 0;
}

.itemMain-brand {
    font-size: 14px;
}

.itemMain-name {
    font-size: 28px;
	padding-bottom: 4px;
}

.itemMain-text {
    font-size: 12px;
}

.itemMain-link {
    width: calc(100% / 2);
    padding: 0 2% 2% 0;
}

.itemMain-link a {
    font-size: 12px;
}

.itemMain-dl a {
    font-size: 14px;
}

}




.brandPrice {
    margin-top: 40px;
    padding-top: 40px;
}

.brandPrice-head {
	margin: 0 0 28px;
}

.brandPrice-head h4 {
	font-size: 32px;
	font-weight: 600;
    letter-spacing: .06em;
    text-indent: .06em;
    line-height: 1.2;
    padding-left: .3em;
    border-left: 4px solid #6aa1c7;
    margin-bottom: 1em;
}

.brandPrice-head span {
    font-size: .6em;
    color: #666;
    letter-spacing: .06em;
    text-indent: .06em;
    padding-left: .6em;
}

.brandPrice-list {
    margin-bottom: 30px;
}

.brandPrice-list-title {
	padding-bottom: 10px;
}

.brandPrice-list-title h5 {
	position: relative;
    font-size: 20px;
	font-weight: bold;
    padding: 0px 0px 0px 14px;
}

.brandPrice-list-title h5::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-left: 8px solid #063f5c;
}

.brandPrice-list-title h6 {
	font-size: 16px;
	font-weight: normal;
	line-height: 1.4em;
	padding-left: 14px;
	margin: 0 0 8px;
}

.brandPrice-list-table {
    overflow: auto;
    padding-bottom: 8px;
}

.brandPrice-list-grid {
    width: 100%;
    min-width: max-content;
    font-size: 16px;
    background: #fff;
}

.brandPrice-list-grid tr {
    width: 100%;
}

.brandPrice-list-grid1 {
    width: 14%;
}

.brandPrice-list-grid2 {
    width: 20%;
	min-width: 130px;
}

.brandPrice-list-grid3 {
    width: 20%;
	font-weight: 600;
}

.brandPrice-list-grid3 p {
    margin: 0;
}

.brandPrice-list-grid3 span {
    font-size: 0.8em;
}

.brandPrice-list-grid4 {
    width: 46%;
}

.brandPrice-list-grid th {
	padding: 8px 4px;
	border-bottom: 1px solid #c3c3c3;
}

.brandPrice-list-grid td {
	padding: 4px;
	border-bottom: 1px solid #c3c3c3;
}

.brandPrice-list-head {
    background: #f2f5f9;
}

.brandPrice-list-img {
    max-width: 70px;
    max-height: 70px;
    aspect-ratio: 1 / 1;
    display: flex;
    margin: auto;
    background: #fff;
    border-radius: 10px;
}

.brandPrice-list-img img {
    object-fit: contain;
}

.brandPrice-list-grid-kataban {
    font-weight: bold;
}

.brandPrice-list-grid-kataban a {
    position: relative;
	font-size: 18px;
    color: #063f5c;
    margin: 0;
    padding-left: 12px;
}

.brandPrice-list-grid-kataban a::before {
    content: "";
    position: absolute;
    left: -3px;
    top: 0.44lh;
    display: inline-block;
    width: 8px;
    height: 8px;
    font-size: inherit;
    line-height: inherit;
    transform: translateY(-50%) rotate(45deg);
    border-top: 2px solid rgb(0, 64, 152);
    border-right: 2px solid rgb(0, 64, 152);
}


.brandPrice-list-grid-kataban span {
    font-weight: normal;
    display: block;
    font-size: 12px;
    margin-top: 4px;
    color: #888888;
}


@media screen and (max-width: 768px) {
.brandPrice {
    margin-top: 0;
}
	
.brandPrice-head {
	margin: 0 0 10px;
}

.brandPrice-head h4 {
    font-size: 20px;
}

.brandPrice-list-title h5 {
	font-size: 14px;
	margin-bottom: 6px;
}

.brandPrice-list-title h6 {
	font-size: 12px;
	line-height: 1.3em;
}	
	
.brandPrice-list-grid {
    font-size: 12px;
}

.brandPrice-list-grid th,
.brandPrice-list-grid td {
    padding: 8px 10px;
}

.brandPrice-list-grid3 {
    width: 20%;
}

.brandPrice-list-grid4 {
    width: 46%;
}

.brandPrice-list-img {
    max-width: 40px;
    max-height: 40px;
}

.brandPrice-list-grid-kataban a {
	font-size: 14px;
}

.brandPrice-list-grid-kataban span {
    font-size: 10px;
}


}




.brandArtist {
    margin-top: 8px;
    padding-top: 40px;
}

.brandArtist-head {
	margin: 0 0 28px;
}

.brandArtist-head h4 {
    font-size: 32px;
    font-weight: 600;
    letter-spacing: .06em;
    text-indent: .06em;
    line-height: 1.2;
    padding-left: .3em;
    border-left: 4px solid #6aa1c7;
    margin-bottom: 1em;
}

.brandArtist-head span {
    font-size: .6em;
    color: #666;
    letter-spacing: .06em;
    text-indent: .06em;
    padding-left: .6em;
}

.brandArtist-list {
	position: relative;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 24px;
    padding: 24px;
    background: #fff;
	border: 1px solid #c3c3c3;
    border-radius: 12px;
}

.brandArtist-list-tag {
	position: absolute;
	right: -10px;
	top: -16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 16px;
    background-color: #6aa1c7;
    border-radius: 6px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .04em;
}

.brandArtist-list-tag:before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 25%;
	border-style: solid;
	border-width: 10px 16px 0 0;
	border-color: #6aa1c7 transparent transparent;
	translate: calc(-50% - 0.4px) 100%;
	transform: skew(-25deg);
	transform-origin: top;
}

.brandArtist-list-artist {
    width: 20%;
    padding: 1% 2% 1% 1%;
    border-right: 1px solid #c3c3c3;
}

.brandArtist-list-artist-img {
    aspect-ratio: 1 / 1;
    display: flex;
    margin: auto;
    background: #fff;
}

.brandArtist-list-artist-img img {
    object-fit: cover;
    font-family: 'object-fit: cover;';
    border-radius: 12px;
	width: 100%;
	height: 100%;
}

.brandArtist-list-artist-text {
	margin-top: 12px;
}

.brandArtist-list-artist-text b {
	font-size: 16px;
}

.brandArtist-list-artist-text p {
	margin: 0;
	font-size: 14px;
	color: #666666;
}

.brandArtist-list-artist-link {
	margin-top: 10px;
}

.brandArtist-list-artist-link a {
	position: relative;
    display: block;
	width: 90%;
    margin: auto;
    padding: 4px 30px 4px 16px;
    border-radius: 25px;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    transition: 0.3s;
    background: #333333;
    border: 1px solid #333333;
    color: #fff;
}

.brandArtist-list-artist-link a::after {
	content: "";
    position: absolute;
    top: 9px;
    right: 19px;
    width: 6px;
    height: 6px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(35deg) skewX(-20deg);
    transition: 0.3s;
}

.brandArtist-list-artist-link a:hover {
    background: #fff;
    color: #333333;
}

.brandArtist-list-artist-link a:hover::after {
    border-top: 2px solid #333333;
	border-right: 2px solid #333333;
}

.brandArtist-list-text {
	width: 80%;
	padding: 1% 1% 1% 2%;
}

.brandArtist-list-text h6 {
	margin: 4px 0 12px;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.4em;
}

.brandArtist-list-text p {
	font-size: 16px;
	margin-bottom: 0.8em;
}



@media screen and (max-width: 768px) {
.brandArtist {
    margin-top: 0px;
    padding-top: 12px;
}

.brandArtist-head {
	margin: 0 0 10px;
}	

.brandArtist-head h4 {
    font-size: 20px;
}

.brandArtist-list {
	padding: 12px;
}

.brandArtist-list-tag {
	font-size: 10px;
	right: -10px;
	top: -10px;
}
	
.brandArtist-list-tag:before {
    border-width: 8px 12px 0 0;
}
	
.brandArtist-list-artist {
	width: 100%;
    border: 0;
    display: flex;
    align-items: center;
}

.brandArtist-list-artist-img {
	width: 25%;
}	
	
.brandArtist-list-artist-text {
	width: 65%;
    padding-left: 3%;
    margin: 0;
}	

.brandArtist-list-artist-text b {
	font-size: 14px;
}

.brandArtist-list-artist-text p {		
	font-size: 12px;
}	

.brandArtist-list-artist-link {
	width: 10%;
	padding-left: 1%;
	margin: 0;
}	
	
.brandArtist-list-artist-link a {
	width: 100%;
    padding: 14px;
}
	
.brandArtist-list-artist-link a::after {
    top: 10px;
    right: 12px;
    width: 8px;
    height: 8px;
}
	
.brandArtist-list-text {
	width: 100%;
}	
	
.brandArtist-list-text h6 {
	font-size: 14px;
	margin: 8px 0 0;
}
	
.brandArtist-list-text p {
	font-size: 12px;
	margin-bottom: 0.5em;
}	
	

}






.brandFeature {
    margin-top: 24px;
    padding-top: 40px;
}

.brandFeature-head {
	margin: 0 0 28px;
}

.brandFeature-head h4 {
    font-size: 32px;
    font-weight: 600;
    letter-spacing: .06em;
    text-indent: .06em;
    line-height: 1.2;
    padding-left: .3em;
    border-left: 4px solid #6aa1c7;
    margin-bottom: 1em;
}

.brandFeature-head span {
    font-size: .6em;
    color: #666;
    letter-spacing: .06em;
    text-indent: .06em;
    padding-left: .6em;
}

.brandFeature-grids {
    display: flex;
    flex-wrap: wrap;
}

.brandFeature-grid {
	width: calc(100% / 3);
    padding: 1% 1% 3% 1%;
}

.brandFeature-title {
    position: relative;
    padding: 14px 0px 10px 14px;
    font-size: 20px;
    font-weight: bold;
}

.brandFeature-title::before{
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%); 
    border: 5px solid transparent;
    border-left: 8px solid #063f5c;
}

.brandFeature-title:after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5px;
    content: '';
    background-image: repeating-linear-gradient(-45deg, #063f5c, #063f5c 1px, transparent 2px, transparent 5px);
    background-size: 7px 7px;
    backface-visibility: hidden;
}



.brandFeature-img {
    width: 95%;
    max-width: 600px;
    height: fit-content;
    aspect-ratio: 16 / 9;
    display: flex;
    margin: 16px auto 0;
}

.brandFeature-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    font-family: 'object-fit: contain;';
	border-radius: 12px;
}

.brandFeature-text {
    width: 100%;
    max-width: 600px;
    margin: 10px auto 0;
    font-size: 16px;
}

.brandFeature-attention {
    width: 100%;
    max-width: 600px;
    margin: 4px auto 0;
    font-size: 12px;
    color: #888888;
}

@media screen and (max-width: 768px) {
.brandFeature {
    margin-top: 0px;
    padding-top: 12px;
}

.brandFeature-head h4 {
    font-size: 20px;
}

.brandFeature-grid {
    width: calc(100% / 1);
    padding: 0 0 4% 0;
}

.brandFeature-title {
    font-size: 16px;
}

.brandFeature-img {
    width: 80%;
    margin: 8px auto 0;
}


.brandFeature-text {
    font-size: 12px;
}

.brandFeature-attention {
    font-size: 10px;
}

}



.brandSpec {
    padding-top: 40px;
	padding-bottom: 60px;
}

.brandSpec-head {
	margin: 0 0 28px;
}

.brandSpec-head h4 {
    font-size: 32px;
    font-weight: 600;
    letter-spacing: .06em;
    text-indent: .06em;
    line-height: 1.2;
    padding-left: .3em;
    border-left: 4px solid #6aa1c7;
    margin-bottom: 1em;
}

.brandSpec-head span {
    font-size: .6em;
    color: #666;
    letter-spacing: .06em;
    text-indent: .06em;
    padding-left: .6em;
}

.brandSpec-table table {
    width: 100%;
}

.brandSpec-table td {
    padding: 20px 10px;
    border-bottom: 1px solid #c3c3c3;
    font-size: 16px;
}

.brandSpec-table td p {
    margin-bottom: 0;
}

.brandSpec-td1 {
    width: 34%;
    color: #063f5c;
    font-weight: bold;
    background: #f2f5f9;
}

.brandSpec-td2 {
    width: 66%;
    background: #fff;
}


@media screen and (max-width: 768px) {
.brandSpec {
    margin-top: 0px;
    padding-top: 12px;
	padding-bottom: 0;
}

.brandSpec-head {
	margin: 0 0 10px;
}

.brandSpec-head h4 {
    font-size: 20px;
}

.brandSpec-table tr:last-child {
    border-bottom: 1px solid #c3c3c3;
}

.brandSpec-table td {
    display: block;
    border-bottom: 0px solid #c3c3c3;
    width: 100%;
    padding: 12px 10px;
    font-size: 12px;
}

}



.brandMedia {
    margin-top: 12px;
    padding-top: 40px;
}

.brandMedia-head {
	margin: 0 0 28px;
}

.brandMedia-head h4 {
	font-size: 32px;
	font-weight: 600;
    letter-spacing: .06em;
    text-indent: .06em;
    line-height: 1.2;
    padding-left: .3em;
    border-left: 4px solid #6aa1c7;
    margin-bottom: 1em;
}

.brandMedia-head span {
    font-size: .6em;
    color: #666;
    letter-spacing: .06em;
    text-indent: .06em;
    padding-left: .6em;
}

.brandMedia-table {
    margin-bottom: 40px;
}

.brandMedia-table table {
    width: 100%;
}

.brandMedia-table td {
    padding: 15px 10px;
    border-bottom: 1px solid #c3c3c3;
    font-size: 16px;
}

.brandMedia-td1 {
    width: 25%;
    color: #063f5c;
    font-weight: bold;
}

.brandMedia-td2 {
    width: 75%;
}

.brandMedia-td2 audio {
    width: 100%;
}

.brandMedia-movie {
    display: flex;
    flex-wrap: wrap;
}

.brandMedia-movie-grid {
    width: calc(100% / 2);
    padding: 1%;
}

.brandMedia-movie-grid .youtube {
    width: 100%;
    aspect-ratio: 16 / 9;
}

.brandMedia-movie-grid .youtube video {
    width: 100%;
    height: 100%;
}

.brandMedia-movie-grid .youtube iframe {
    width: 100%;
    height: 100%;
	border-radius: 12px;
}

@media screen and (max-width: 768px) {
.brandMedia {
    margin-top: 8px;
    padding-top: 12px;
}

.brandMedia-head {
	margin: 0 0 10px;
}

.brandMedia-head h4 {
    font-size: 20px;
}

.brandMedia-table td {
    display: block;
    border-bottom: 0px solid #c3c3c3;
    width: 100%;
    font-size: 14px;
}

.brandMedia-td1 {
    padding: 8px 10px 0 !important;
}

.brandMedia-td2 {
    padding: 5px 10px 8px !important;
    border-bottom: 1px solid #c3c3c3 !important;
}

.brandMedia-td2 audio {
    height: 40px;
}

.brandMedia-movie-grid {
    width: calc(100% / 1);
}
}








/* ショートコード
  [brandpage_item] */
.brand-content {
    margin: 80px auto 0;
    letter-spacing: 0.03em;
}
@media screen and (max-width: 768px) {
.brand-content {
    margin: 40px auto 0;
}
}

.content-grid {
	margin-bottom: 120px;
}

.content-grid-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 0 0 10px;
    border-bottom: 2px solid #6aa1c7;
}

.content-grid-title-text {
	width: 75%;
}

.content-grid-title-text h3 {
    font-size: 28px;
	font-weight: 500;
	margin: 0;
}

.content-grid-title-sub {
	display: inline-block !important;
	padding: 0;
	font-weight: 500 !important;
}

.content-grid-title-text span {
    display: block;
    padding-top: 11px;
	font-size: 16px;
	font-weight: normal;
	letter-spacing: 0.02em;
}

.content-grid-title-link {
    position: relative;
	width: 20%;
    min-width: 300px;
}




@media screen and (max-width: 768px) {
.content-grid {
    margin-bottom: 60px;
}

.content-grid-title {
    flex-direction: column;
	align-items: flex-start;
    margin-bottom: 14px;
}
	
.content-grid-title-link {
    margin-top: 10px;
}
	
.content-grid-title-link .link-btn {
	margin-left: 0;
    font-size: 12px;
    width: 60%;
}
	
.content-grid-title-link .link-btn::after {
	top: 9px;
}
	
.content-grid-title-text {
	width: 100%;
}
	
.content-grid-title-text h3 {
    font-size: 20px;
}
	
.content-grid-title-text span {
    padding-top: 10px;
	font-size: 12px;
}	
	
	
}




/* 商品リスト(左画像)(右画像) */
.content-grid-list {
    position: relative;
    display: flex;
    flex-wrap: wrap;
}

.content-grid-list-main {
    position: absolute;
    top: 0;
    width: 40%;
    height: 100%;
}

.brand2-main-ord {
    left: 0;
    padding-right: 2%;
}

.brand2-main-rev {
    right: 0;
    padding-left: 2%;
}

.content-grid-list-main a {
    display: flex;
    height: 100%;
}

.content-grid-list-main a img  {
    object-fit: cover;
    border-radius: 15px;
    width: 100%;
}

.content-grid-list-more {
    width: 60%;
    display: flex;
    flex-wrap: wrap;
}

.brand2-more-ord {
    margin-left: 40%;
    padding-left: 2%;
}

.brand2-more-rev {
    margin-right: 40%;
    padding-right: 2%;
}

.content-grid-list-grid {
    width: calc(100% / 3);
    padding: 0 0 2% 2%;
}

.content-grid-list-grid-img {
	width: 100%;
}

.content-grid-list-grid-img a:hover {
    opacity: 0.7;
}

.content-grid-list-grid-img a {
	aspect-ratio: 1 / 1;
    display: flex;
    transition: all 0.2s;
    background: #fff;
	padding: 5%;
	width: 100%;
	height: 100%;
}

.content-grid-list-grid-img a img {
    object-fit: contain;
    border-radius: 10px;
}




.content-grid-list-grid-text {
    margin: 10px 0 15px;
}

.content-grid-list-grid-text p {
    margin-bottom: 0;
}

.content-grid-list-grid-name {
    font-size: 16px;
}

.content-grid-list-grid-sku {
    font-size: 14px;
}

.brand-link-btn {
    position: relative;
    display: block;
    width: 80%;
    margin: auto;
    padding: 7px 0px 8px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: normal;
    text-align: center;
    text-decoration: none;
    transition: 0.3s;
}

.brand-link-btn::after {
    position: absolute;
    top: 14px;
    right: 26px;
    width: 8px;
    height: 8px;
    transform: rotate(35deg) skewX(-20deg);
    transition: 0.3s;
    content: "";
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
}

@media screen and (max-width: 768px) {
.content-grid-list-main {
    position: relative;
    width: 100%;
    height: 100%;
}

.content-grid-list-main a {
    height: 200px;
}

.content-grid-list-more {
    width: 100%;
    display: grid;
    grid-auto-flow: column;
}

.content-grid-list-grid {
    width: 150px;
    padding: 0 10px 15px 0;
}

.brand2-main-ord,
.brand2-main-rev {
    padding-right: inherit;
    padding-bottom: 10px;
}

.brand2-more-ord,
.brand2-more-rev {
    margin: auto;
    padding: inherit;
    overflow-x: scroll;
}
	
.brand-link-btn {
    font-size: 12px;
}

.brand-link-btn::after {
    top: 13px;
    right: 16px;
}
}


/* カテゴリーリスト */
.brand-category {
	margin-bottom: 60px !important;
}

.brand-category-wrap {
    display: flex;
    flex-wrap: wrap;
}

.brand-category-grid {
    width: calc(100% / 4);
    padding: 2% 1% 0% 1%;
}

.brand-category-grid a {
    position: relative;
    display: block;
    overflow: hidden;
}

.brand-category-grid-text {
    padding: 16px 0;
}

.brand-category-grid-text h6 {
    position: relative;
    padding: 0 0 10px 14px;
	margin: 0;
    font-size: 20px;
    font-weight: 500;
}

.brand-category-grid-text h6:before {
    content: "";
    position: absolute;
    top: calc(50% + -5px);
    left: 0;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-left: 8px solid #063f5c;
}
	
.brand-category-grid-text h6:after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5px;
    content: '';
    background-image: repeating-linear-gradient(-45deg, #063f5c, #063f5c 1px, transparent 2px, transparent 5px);
    background-size: 7px 7px;
    backface-visibility: hidden;
}

.brand-category-grid-text p {
	margin: 10px auto 0;
	font-size: 16px;
}
	
.brand-category-grid-img {
    position: relative;
	border-radius: 12px;
	overflow: hidden;
    transition: all 0.5s;
}

.brand-category-grid-img img {
    border-radius: 10px;
	transition: all 0.5s;
}

.brand-category-grid a:hover .brand-category-grid-img img {
    transform: scale(1.1);
}

@media screen and (max-width: 768px) {
.brand-category {
	margin-bottom: 40px !important;
}
	
.brand-category-grid {	 
   width: calc(100% / 2);	 
   padding: 1%;	 
}
	 
.brand-category-grid-text {	 
   padding: 10px 5px;	 
}

.brand-category-grid-text h6 {
	padding: 0 0 7px 7px;
	font-size: 14px;	
}

.brand-category-grid-text h6:before {
    border: 3px solid transparent;
    border-left: 5px solid #063f5c;
}	

.brand-category-grid-text h6:after {
    height: 4px;
}	
	
.brand-category-grid-text p {
	margin: 4px 0 auto;
	font-size: 12px;
}
	
}



/* テキスト付き画像 */
.textImage {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.textImage-rev {
    flex-direction: row-reverse;
}

.textImage-img,
.textImage-text {
    width: 50%;
}

.textImage-img img {
	border-radius: 12px;
}

.textImage-text-wrap {
    padding: 30px;
    max-width: 600px;
    margin: 0 auto;
}

.textImage-text-wrap h3 {
    letter-spacing: 0.02em;
    line-height: 1.25;
    font-weight: 500;
    margin: 15px auto 10px;
    font-size: 28px;
}

.textImage-text-wrap p {
    letter-spacing: 0.02em;
    line-height: 1.75;
    margin-top: 10px;
    font-size: 16px;
}

@media screen and (max-width: 768px) {
.textImage {
    flex-direction: column;
    margin-bottom: 45px;
}

.textImage-img,
.textImage-text {
    width: 100%;
}

.textImage-text-wrap {
    padding: 10px;
}

.textImage-text-wrap h3 {
    font-size: 22px;
    margin: 5px auto;
}

.textImage-text-wrap p {
    font-size: 12px;
}
}	


/* 固定ページへのリンク */
.useful {
    display: flex;
    flex-wrap: wrap;
}

.useful-grid {
    width: calc(100% / 3);
    padding: 1%;
}

.useful-grid-image {
    transition: all 0.3s;
}

.useful-grid-image:hover {
    opacity: 0.7;
}

.useful-grid-image img {
    border-radius: 10px;
}

.useful-grid-text {
    margin: 16px 0 6px;
}

.useful-grid-text h3 {
    font-size: 22px;
    font-weight: normal;
    margin: 0;
}

.useful-grid-text p {
    font-size: 16px;
    margin: 12px auto 0;
}

@media screen and (max-width: 768px) {
.useful-grid {
    width: calc(100% / 2);
}

.useful-grid-text h3 {
    font-size: 18px;
}

.useful-grid-text p {
    font-size: 12px;
}
}	




/* センターテキスト */
.centerText {
    text-align: center;
}

.centerText-title {
    position: relative;
    width: fit-content;
    letter-spacing: 0.02em;
    line-height: 1.25;
    margin: 15px auto 20px;
	font-size: 28px;
	font-weight: 500;
}
@media screen and (max-width: 768px) {
.centerText-title {
	font-size: 22px;
}
}
.centerText-title:after {
    content: "";
    position: absolute;
    background-color: #6aa1c7;
    width: 105%;
    height: 2px;
    z-index: -2;
    bottom: -4px;
    left: -2.5%;
}
@media screen and (max-width: 768px) {
.centerText-title:after {
    height: 2px;
	width: 100%;
	left: 0;
}
}
.centerText-text {
    letter-spacing: 0.02em;
    line-height: 1.75;
	font-size: 16px;
}
@media screen and (max-width: 768px) {
.centerText-text {
	font-size: 12px;
}
}

.centerText-link {
	margin: 20px 0 0;
}

.centerText-link a {
	position: relative;
    display: block;
    width: fit-content;
    margin: auto;
    padding: 12px 60px 10px;
    border-radius: 25px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    transition: 0.3s;
    border: 1px solid #5b5b5b;
    background: #5b5b5b;
    color: #fff;
}

.centerText-link a:after {
	position: absolute;
    top: 19px;
    right: 26px;
    width: 8px;
    height: 8px;
    transform: rotate(35deg) skewX(-20deg);
    transition: 0.3s;
    content: "";
	border-top: 2px solid #fff;
    border-right: 2px solid #fff;
}

.centerText-link a:visited {
    color: #fff;
}

.centerText-link a:hover {
    background: #fff;
    color: #5b5b5b;
}

.centerText-link a:hover::after {
    border-top: 2px solid #5b5b5b;
    border-right: 2px solid #5b5b5b;
}

@media screen and (max-width: 768px) {
.centerText-link a {
	width: 90%;
    margin: auto;
    padding: 5px 30px;
    font-size: 14px;
    font-weight: normal;
}
	
.centerText-link a:after {
	top: 12px;
	border-top: 1px solid #fff;
    border-right: 1px solid #fff;
}
}


/* アーティストブロック */
.brand-artist {
	display: flex;
	flex-wrap: wrap;
}

.brand-artist-grid {
	width: calc(100% / 6);
	padding: 1%;
}

@media screen and (max-width: 768px) {
.brand-artist-grid {
	width: calc(100% / 2);
	padding: 1% 2% 5% 2%;
}
}

.brand-artist-image {
    border-radius: 12px;
    overflow: hidden;
}

.brand-artist-image a {
    width: 100%;
    height: fit-content;
    aspect-ratio: 1 / 1;
    display: flex;
    transition: all 0.2s;
    background: #fff;
}

.brand-artist-image a:hover {
    transform: scale(1.05);
}

.brand-artist-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    font-family: 'object-fit: cover;';
    border-radius: 12px;
}

.brand-artist-name {
    width: 100%;
    text-align: center;
    font-size: 18px;
    margin-top: 8px;
}

@media screen and (max-width: 768px) {
.brand-artist-name {
    font-size: 14px;
    margin-top: 4px;
}
	
	
	
	
	
	
}