@charset "utf-8"; /* ---------------------------------------------- ! Top header Elements ---------------------------------------------- */ .t-contents-header__box { margin: 0 40px; width: 996px; display: -webkit-box; display: -moz-box; display: -webkit-flexbox; display: -moz-flexbox; display: -ms-flexbox; display: -webkit-flex; display: -moz-flex; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .t-contents-header__box a.btn { position: relative; display: block; width: 237px; min-height: 335px; margin-right: 16px; float: left; overflow: hidden; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.1); } .t-contents-header__box a.btn:nth-of-type(4n) { margin-right: 0; } .t-contents-header__box a.btn img { margin: 3px 0 14px; } .t-contents-header__box a.btn::before { content: ''; position: absolute; width: 0; height: 0; border-style: solid; border-width: 87px 87px 0 0; top: 3px; left: 0px; } .t-contents-header__box a.btn::after { content: ''; position: absolute; height: 42px; background-repeat: no-repeat; background-position: center center; background-size: 100% 100%; top: 5px; left: 10px; } .t-contents-header__box .bg-color01.btn::before { border-color: #f33b69 transparent transparent transparent; } .t-contents-header__box .bg-color02.btn::before { border-color: #3069be transparent transparent transparent; } .t-contents-header__box .bg-color03.btn::before { border-color: #23b460 transparent transparent transparent; } .t-contents-header__box .bg-color04.btn::before { border-color: #ffb400 transparent transparent transparent; } .t-contents-header__box .bg-color01.btn::after { width: 25px; background-image: url('../images/common/icon01_mc.png'); } .t-contents-header__box .bg-color02.btn::after { width: 39px; background-image: url('../images/common/icon02_mc.png'); } .t-contents-header__box .bg-color03.btn::after { width: 35px; background-image: url('../images/common/icon03_mc.png'); } .t-contents-header__box .bg-color04.btn::after { width: 30px; background-image: url('../images/common/icon04_mc.png'); } .t-contents-header__box h2 { min-height: 42px; font-size: 18px; line-height: 1.2; color: #fff; padding: 0 10px; } .t-contents-header__box .notes { font-size: 12px; line-height: 1.5; color: #fff; padding: 10px 10px 52px; } .t-contents-header__box .st-category { position: absolute; /* display: table; */ width: 100%; height: 42px; background-color: #fff; bottom: 0; padding: 0 10px; } .t-contents-header__box .st-category p { position: relative; margin: 0 !important; font-size: 12px !important; line-height: 1; padding: 15.5px 0 15.5px 28px; letter-spacing: -0.03em; } .t-contents-header__box .st-category p::before { content: ''; position: absolute; display: block; width: 22px; height: 22px; background-repeat: no-repeat; background-position: center center; background-size: 100%; margin: auto; top: 0; bottom: 0; left: 0px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; } .t-contents-header__box .st-category p { /* display: table-cell; vertical-align: middle; */ } .t-contents-header__box .st-category p.color01::before { background-image: url('../images/common/icon01.png'); } .t-contents-header__box .st-category p.color02::before { background-image: url('../images/common/icon02.png'); } .t-contents-header__box .st-category p.color03::before { background-image: url('../images/common/icon03.png'); } .t-contents-header__box .st-category p.color04::before { background-image: url('../images/common/icon04.png'); } .t-contents-header__box .st-category p.color05::before { background-image: url('../images/common/icon05.png'); } @media screen and (max-width: 640px) { .t-contents-header__box { width: 93.75%; margin: 0 auto; } .t-contents-header__box a.btn { width: 48%; min-height: 64.0625vw; /*410*/ margin-right: 2%; margin-bottom: 3.125vw; /*20*/ border-radius: 0.78125vw; /*5*/ -moz-border-radius: 0.78125vw; -webkit-border-radius: 0.78125vw; -o-border-radius: 0.78125vw; -ms-border-radius: 0.78125vw; } .t-contents-header__box a.btn:nth-of-type(2n) { margin-right: 0; } .t-contents-header__box a.btn img { margin: 0.625vw 0 3.125vw; /*4,20*/ } .t-contents-header__box a.btn::before { border-width: 16.875vw 16.875vw 0 0; /*108 108*/ top: 0.625vw; /*4*/ } .t-contents-header__box a.btn::after { height: 8.125vw; /*52*/ top: 1.25vw; /*8*/ left: 2.1875vw; /*14*/ } .t-contents-header__box .bg-color01.btn::after { width: 4.84375vw; /*31*/ } .t-contents-header__box .bg-color02.btn::after { width: 7.5vw; /*48*/ } .t-contents-header__box .bg-color03.btn::after { width: 6.71875vw; /*43*/ } .t-contents-header__box .bg-color04.btn::after { width: 5.78125vw; /*37*/ } .t-contents-header__box h2 { min-height: 3.75vw; /*24*/ font-size: 3.4375vw; /*22*/ padding: 0 3.125vw; /*20*/ } .t-contents-header__box .notes { font-size: 3.125vw; /*20*/ line-height: 1.3; padding: 3.125vw 3.125vw 11.5625vw; /*20,20,74*/ } .t-contents-header__box .st-category { height: 0; min-height: 10vw; /*64*/ padding: 0 3.125vw; /*20*/ } .t-contents-header__box .st-category p { padding: 1.25vw 0 1.25vw 5.3125vw; /*8,8,34*/ font-size: 3.125vw !important; /*20*/ line-height: 1.2; } .t-contents-header__box .st-category p::before { width: 4.0625vw; /*26*/ height: 4.0625vw; /*26*/ } } /* ---------------------------------------------- ! section01 Elements ---------------------------------------------- */ .t-section01 { margin-top: 30px; } .t-section01__sub { margin-bottom: 40px; } .t-section01__sub p { font-size: 12px; } @media screen and (max-width: 640px) { .t-section01__sub { margin: 5.3125vw 7.8125vw; /*34,50*/ } .t-section01__sub p { font-size: 3.125vw; /*20*/ text-indent: -1em; padding-left: 1em; line-height: 1.8; } } .random { display: none !important; }