/*===============================
base
================================*/
/* 蝓ｺ譛ｬ險ｭ螳� */
:root {
scroll-padding-top: 56px;
@media screen and (max-width: 768px){
scroll-padding-top: 36px;
}
}
body{
color: #333;
font: 400 15px "Helvetica Neue", "Noto Sans JP", "Yu Gothic", YuGothic, "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", "Hiragino Kaku Gothic ProN", Arial, 繝｡繧､繝ｪ繧ｪ, Meiryo, sans-serif;
line-height: 1.6;
letter-spacing: .01em;
counter-reset: aimIndex qaIndex ranking;
}
#c3_lr main *{font-family:inherit;}
main *{line-height:1.6;}
ul, ol, li{
list-style: none;
}
#base{
width: 1220px;
}
/*vue*/
[v-cloak]{display:none;}
/*===============================
layout
================================*/
/* 繝ｩ繝�ヱ繝ｼ */
.l_wrap{}
.l_wrap__wrap{}
.l_wrap__header{
display: contents;
}
.l_wrap__footer{
margin-top: 64px;
}
/* 繝翫ン */
.l_nav{
display: flex;
align-items: stretch;
}
.l_nav__item{
display: flex;
}
.l_nav__target{
display: block;
width: 100%;
}
.l_nav--local{
gap: 5px 10px;
flex-wrap: wrap;
.l_nav__item:has(.not_target){
display: none;
}
@media screen and (max-width: 768px){
gap: 2px 5px;
}
}
.l_nav--header{
border-left: 1px solid;
border-right: 1px solid;
.l_nav__item{
padding: 0 2px;
& + &{
border-left: 1px solid;
}
}
}
/* 遽 */
.l_section{}
.l_section__item{}
.l_section--primary{
> .l_section__item{
margin-bottom: 40px;
&:last-of-type{
margin-bottom: 0;
}
}
}
/*===============================
module
================================*/
/* 隕句�縺� */
.m_heading{}
.m_heading__ttl{
font-weight: normal;
}
.m_heading__sub{}
.m_heading--primary{
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 10px;
width: 100%;
line-height: 1;
.m_heading__ttl{
line-height: 100%;
font-size: 32px;
*{
line-height: 100%;
}
}
@media screen and (max-width: 768px){
display: block;
.m_heading__ttl{
font-size: 20px;
& + .m_heading__sub{
margin-top: 5px;
}
}
.m_heading__sub{
width: fit-content;
margin-left: auto;
}
}
}
.m_heading--secondary{
margin-bottom: 20px;
padding: 0 10px 5px;
border-bottom: 1px solid;
.m_heading__ttl{
font-size: 20px;
}
}
/* 繝ｪ繝ｳ繧ｯ */
.m_link{
width: fit-content;
}
.m_link__target{
color: inherit;
transition: .3s opacity;
&:hover{
color: inherit;
opacity: .7;
}
@media screen and (max-width: 768px){
font-size: 12px;
}
}
.m_link--right{
margin-left: auto;
}
.m_link--normal{
position: relative;
padding-left: 1em;
&::before{
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
display: block;
margin: auto;
width: .4em;
height: .4em;
border-left: 1px solid;
border-bottom: 1px solid;
transform: rotate(-135deg);
}
}
.m_link--inner{
position: relative;
padding-right: 1em;
&::before{
content: "";
position: absolute;
right: 0;
top: 0;
bottom: 0;
display: block;
margin: auto;
width: .4em;
height: .4em;
border-left: 1px solid;
border-bottom: 1px solid;
transform: translate(-2px, -2px) rotate(-45deg);
}
}
/* 繧ｭ繝ｼ繝薙ず繝･繧｢繝ｫ�域ｨｪ螻輔�莠亥ｮ壹≠繧奇ｼ� */
.m_newReleaseFlashKeyvisual{
position: relative;
}
.m_newReleaseFlashKeyvisual__img{
line-height: 0;
text-align: center;
img{
max-width: 100%;
height: auto;
}
}
.m_newReleaseFlashKeyvisual__lineup{
position: absolute;
top: 28%;
left: 5%;
width: 68%;
}
.m_newReleaseFlashKeyvisual__item{
& + &{
margin-top: min(5px, 0.65vw);
padding-top: min(5px, 0.65vw);
border-top: 1px solid #d4d4d4;
}
@media screen and (max-width: 768px){
& + &{
border-top: none;
}
}
}
.m_newReleaseFlashKeyvisualCard{
display: block;
color: inherit;
text-decoration: none;
transition: .3s opacity;
&:hover{
color: inherit;
text-decoration: none;
opacity: .7;
}
}
.m_newReleaseFlashKeyvisualCard__tags{
display: flex;
align-items: center;
gap: min(10px, 1.30vw);
& + .m_newReleaseFlashKeyvisualCard__ttl{
margin-top: min(2px, 0.3vw);
}
}
.m_newReleaseFlashKeyvisualCard__tag{
padding: min(2px, 0.26vw) min(10px, 1.30vw);
border: 1px solid;
border-radius: .4em;
line-height: 1;
font-size: min(10px, 1.30vw);
}
.m_newReleaseFlashKeyvisualCard__date{
color: #d66c00;
line-height: 1;
font-weight: bold;
font-size: min(12px, 1.56vw);
}
.m_newReleaseFlashKeyvisualCard__tag--haken{
color: #842e30;
}
.m_newReleaseFlashKeyvisualCard__tag--bup{
color: #0c3f71;
}
.m_newReleaseFlashKeyvisualCard__tag--douga{
color: #cc2d5e;
}
.m_newReleaseFlashKeyvisualCard__ttl{
position: relative;
height: 1lh;
line-height: 1.2;
font-weight: bold;
font-size: min(15px, 1.9vw);
overflow: hidden;
&::after{
content: '';
position: absolute;
right: 0;
bottom: 0;
display: block;
width: 2em;
height: 1lh;
background: linear-gradient(to left, #fff, rgba(255, 255, 255, 0.96) 25%, rgba(255, 255, 255, 0) 100%);
}
}
/* 繝ｭ繝ｼ繧ｫ繝ｫ繝翫ン縺ｮ繝ｩ繝�ヱ繝ｼ */
.m_localNavWrap{
position: sticky;
top: 0;
z-index: 9999;
display: flex;
align-items: center;
height: 56px;
background: #fff;
}
/* 繝ｭ繝ｼ繧ｫ繝ｫ繝翫ン */
.m_localNav{
display: flex;
align-items: center;
justify-content: center;
padding: 5px;
border-radius: 4px;
border: 1px solid;
color: #980416;
line-height: 1;
font-size: 15px;
&:hover{
color: #fff;
border-color: #980416;
background: #980416;
}
&.is_active{
color: #fff;
border-color: #980416;
background: #980416;
}
&[data-type="middle"]{
color: #842e30;
&:hover{
color: #fff;
border-color: #842e30;
background: #842e30;
}
&.is_active{
color: #fff;
border-color: #842e30;
background: #842e30;
}
}
&[data-type="haken"]{
color: #842e30;
&:hover{
color: #fff;
border-color: #842e30;
background: #842e30;
}
&.is_active{
color: #fff;
border-color: #842e30;
background: #842e30;
}
}
&[data-type="bup"]{
color: #0c3f71;
&:hover{
color: #fff;
border-color: #0c3f71;
background: #0c3f71;
}
&.is_active{
color: #fff;
border-color: #0c3f71;
background: #0c3f71;
}
}
&[data-type="douga"]{
color: #cc2d5e;
&:hover{
color: #fff;
border-color: #cc2d5e;
background: #cc2d5e;
}
&.is_active{
color: #fff;
border-color: #cc2d5e;
background: #cc2d5e;
}
}
&[data-type="lp"]{
color: #0c3f71;
&:hover{
color: #fff;
border-color: #0c3f71;
background: #0c3f71;
}
&.is_active{
color: #fff;
border-color: #0c3f71;
background: #0c3f71;
}
}
@media screen and (max-width: 768px){
padding: 3px 6px;
font-size: 10px;
}
}
/* 繝倥ャ繝繝ｼ蜀�リ繝� */
.m_headerNav{
padding: 2px 6px;
color: inherit;
font-weight: bold;
font-size: 14px;
&:hover{
color: #fff;
background: #980416;
}
&.is_active{
color: #fff;
background: #980416;
}
@media screen and (max-width: 768px){
font-size: 12px;
padding: 2px 0;
}
}
/* 譁ｰ菴懊Μ繧ｹ繝医�繝ｩ繝�ヱ繝ｼ */
.m_releaseListWrap{}
.m_releaseListWrap__heading{
position: sticky;
top: 56px;
z-index: 1;
display: flex;
align-items: center;
height: 56px;
padding: 0 10px;
border-bottom: 1px solid;
background: #fff;
@media screen and (max-width: 768px){
padding: 0;
}
}
.m_releaseListWrap__body{}
.m_releaseListWrap__item{
border-bottom: 1px solid;
}
/* 譁ｰ菴懊Μ繧ｹ繝� */
.m_releaseList{
display: flex;
align-items: stretch;
gap: 20px;
@media screen and (max-width: 768px){
display: block;
}
}
.m_releaseList__dayWrap{
flex: 0 0 160px;
position: relative;
&::before{
content: "";
position: absolute;
top: 0;
left: 50%;
width: 1px;
height: 100%;
background: #333;
}
@media screen and (max-width: 768px){
&::before{
content: none;
}
}
}
.m_releaseList__day{
position: sticky;
top: 112px;
padding: 40px 0;
line-height: 1;
@media screen and (max-width: 768px){
position: static;
padding: 20px 0 0;
}
}
.m_releaseList__date{
position: relative;
left: 50%;
padding-left: 20px;
line-height: 100%;
font-size: 24px;
&::before{
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 15px;
height: 15px;
margin: auto;
background: #980416;
transform: translateX(-50%);
}
@media screen and (max-width: 768px){
left: 0;
font-size: 20px;
&::before{
transform: none;
}
}
}
.m_releaseList__weekDay{
display: inline-block;
margin-left: 3px;
line-height: 1;
font-size: 12px;
padding: 4px;
border-radius: 50%;
color: #fff;
background: #777;
@media screen and (max-width: 768px){
font-size: 10px;
}
}
.m_releaseList__body{
padding: 40px 0;
@media screen and (max-width: 768px){
padding: 20px 0;
}
}
.m_releaseList__item{
opacity: 1;
transform: translateY(0px);
transition: .3s;
margin-bottom: 20px;
&:last-of-type{
margin-bottom: 0;
}
}
/* 譁ｰ菴懊さ繝ｳ繝�Φ繝��繧ｫ繝ｼ繝� */
.m_releaseCard {
display: block;
width: 100%;
color: inherit;
transition: .3s;
&:hover{
opacity: .7;
}
}
.m_releaseCard__cont {
display: flex;
align-items: center;
gap: 30px;
@media screen and (max-width: 768px){
display: block;
}
}
.m_releaseCard__inner {
flex: 1 1 auto;
}
.m_releaseCard__imgWrap{
flex: 0 0 224px;
width: 100%;
line-height: 0;
@media screen and (max-width: 768px){
display: none;
}
}
.m_releaseCard__img{
width: 100%;
line-height: 0;
img{
max-width: 100%;
height: auto;
}
}
.m_releaseCard__heading{
margin-bottom: 5px;
}
.m_releaseCard__tags{
& + .m_releaseCard__ttl{
margin-top: 5px;
}
}
.m_releaseCard__ttl{
font-weight: bold;
font-size: 15px;
}
.m_releaseCard__body{
position: relative;
height: calc(1em * 3 * 1.6);
font-size: 13px;
overflow: hidden;
}
.m_releaseCard__body::after {
content: '';
display: block;
position: absolute;
right: 0;
bottom: 0;
width: 3em;
height: 1.5em;
background: linear-gradient(to left, #fff, rgba(255, 255, 255, 0.96) 25%, rgba(255, 255, 255, 0) 100%);
pointer-events: none;
}
.m_releaseCard__footer{
margin-top: 5px;
}
.m_releaseCard__link{
position: relative;
width: fit-content;
margin-left: auto;
padding-right: 8px;
font-size: 10px;
&::before{
content: '\f105';
font-family: 'FontAwesome';
position: absolute;
display: block;
right: 0;
}
}
/* 繧ｿ繧ｰ繝ｪ繧ｹ繝� */
.m_tagList{
display: flex;
gap: 5px;
}
/* 繧ｿ繧ｰ */
.m_tag{
padding: 2px 10px;
border: 1px solid;
border-radius: 4px;
line-height: 1;
font-size: 10px;
}
.m_tag--middle{
color: #842e30;
}
.m_tag--haken{
color: #842e30;
}
.m_tag--bup{
color: #0c3f71;
}
.m_tag--douga{
color: #cc2d5e;
}
.m_tag--lp{
color: #0c3f71;
}
/* 繧｢繝ｼ繧ｫ繧､繝� */
.m_archive{}
.m_archive__list{}
.m_archive__item{
font-size: 16px;
& + &{
margin-top: 10px;
}
}
/*===============================
utility
================================*/
/* 繧ｫ繝ｩ繝� */
.u_col1{width:8.333%;}
.u_col2{width:16.667%;}
.u_col3{width:25%;}
.u_col4{width:33.333%;}
.u_col5{width:41.666%;}
.u_col6{width:50%;}
.u_col7{width:58.333%;}
.u_col8{width:66.666%;}
.u_col9{width:75%;}
.u_col10{width:83.33%;}
.u_col11{width:91.666%;}
.u_col12{width:100%;}
@media screen and (max-width:768px){
.u_resMdCol1{width:8.333%;}
.u_resMdCol2{width:16.667%;}
.u_resMdCol3{width:25%;}
.u_resMdCol4{width:33.333%;}
.u_resMdCol5{width:41.666%;}
.u_resMdCol6{width:50%;}
.u_resMdCol7{width:58.333%;}
.u_resMdCol8{width:66.666%;}
.u_resMdCol9{width:75%;}
.u_resMdCol10{width:83.33%;}
.u_resMdCol11{width:91.666%;}
.u_resMdCol12{width:100%;}
}
@media screen and (max-width:599px){
.u_resSmCol1{width:8.333%;}
.u_resSmCol2{width:16.667%;}
.u_resSmCol3{width:25%;}
.u_resSmCol4{width:33.333%;}
.u_resSmCol5{width:41.666%;}
.u_resSmCol6{width:50%;}
.u_resSmCol7{width:58.333%;}
.u_resSmCol8{width:66.666%;}
.u_resSmCol9{width:75%;}
.u_resSmCol10{width:83.33%;}
.u_resSmCol11{width:91.666%;}
.u_resSmCol12{width:100%;}
}
/* 譁�ｭ苓｣�｣ｾ */
.u-bold { font-weight: bold; }
.u-underline { text-decoration: underline; }
.u-color-red { color: #9E2730; }
/* display */
.u_disp-ib { display: inline-block; }
/* color */
.u_c-crimson { color: crimson; }
.u_c-red { color: red; }
/* margin */
.u_ml10 { margin-left: 10px; }
.u_ml20 { margin-left: 20px; }
.u_ml30 { margin-left: 30px; }
/* text align */
.u_ta-l { text-align-last: left !important; }
.u_ta-r { text-align: right !important; }
.u_ta-c { text-align: center !important; }
/* order */
.u_ord0 { order: 0 !important; }
.u_ord1 { order: 1 !important; }
.u_ord2 { order: 2 !important; }
.u_ord3 { order: 3 !important; }
.u_ord4 { order: 4 !important; }
.u_ord5 { order: 5 !important; }
.u_ord6 { order: 6 !important; }
.u_ord7 { order: 7 !important; }
.u_ord8 { order: 8 !important; }
.u_ord9 { order: 9 !important; }
.u_ord9999 { order: 9999 !important; }
.u_ord-1 { order: -1 !important; }