@charset "UTF-8"; /* $gray:#787878; $gray_dark:#4A4A4A; $gray_light:#D2D2D2; $blue: #25A6C0; $blue_bg: #E3F4F4; $brick: #F97E6F; $brick_bg: #FDE7E4; $brick_btn: #FFB884; $main_bg:#F2F2F2; */ /* $font_size_sp_xxl:24px; $font_size_sp_xl:20px; */ /* @include animation(anime-opening_face 4s ease 0.5s); @include keyframes(anime-opening_face){ 0% { transform: translate(-50%,100%); } 30% { transform: translate(-50%,0); } 70% { transform: translate(-50%,0); } 100%{ transform: translate(-50%,100%); } } */ /*============================== reset ==============================*/ * { box-sizing: border-box; } *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } img { max-width: 100%; } ul { list-style: none; margin: 0; padding: 0; } a { text-decoration: none; display: inline; } a:focus { outline: none; } sup, sub { height: 0; line-height: 1; vertical-align: baseline; position: relative; } sup { bottom: 1ex; } sub { top: 0; } p { margin: 0; } @media screen and (max-width: 640px) { .mod-freeHTML .pc_only { display: none; } } @media (min-width: 641px) { .mod-freeHTML .sp_only { display: none; } } .mod-freeHTML .st-contents { margin: 0 auto; } .mod-freeHTML .cmn-main { width: 100%; background: #E3E3E3; text-align: center; } @media (min-width: 641px) { .mod-freeHTML .cmn-main { height: 75vh; min-height: 400px; max-height: 600px; } } @media screen and (max-width: 1260px) { .mod-freeHTML .cmn-main { height: auto; min-height: inherit; max-height: none; } } @media (min-width: 641px) { .mod-freeHTML .cmn-main .cmn-inner { width: auto; height: 100%; } } @media screen and (max-width: 1260px) { .mod-freeHTML .cmn-main .cmn-inner { width: 100%; height: auto; } } @media (min-width: 641px) { .mod-freeHTML .cmn-main .cmn-inner img { max-width: none; width: auto; height: 100%; } } @media screen and (max-width: 1260px) { .mod-freeHTML .cmn-main .cmn-inner img { max-width: 100%; width: 100%; height: auto; } } .mod-freeHTML .cmn-title-red_block { background: #D60012; color: #FFFFFF; display: block; position: relative; padding: 0.5em 0 0.5em 85px; margin: 0; font-size: 28px; } @media screen and (max-width: 640px) { .mod-freeHTML .cmn-title-red_block { padding: 0.5em 0.5em 0.5em 40px; font-size: 16px; line-height: 120%; } } .mod-freeHTML .cmn-title-red_block::before { content: ""; display: block; background: #000000; position: absolute; top: 0; left: 0; width: 55px; height: 100%; } @media screen and (max-width: 640px) { .mod-freeHTML .cmn-title-red_block::before { width: 25px; } } .mod-freeHTML .cmn-title-red_line { position: relative; padding-bottom: 10px; } .mod-freeHTML .cmn-title-red_line::before, .mod-freeHTML .cmn-title-red_line::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 5px; } @media screen and (max-width: 640px) { .mod-freeHTML .cmn-title-red_line::before, .mod-freeHTML .cmn-title-red_line::after { height: 2px; } } .mod-freeHTML .cmn-title-red_line::before { background: #D60012; z-index: 1; } .mod-freeHTML .cmn-title-red_line::after { background: #000000; width: 55px; z-index: 2; } .mod-freeHTML .cmn-title-red_line .cmn-title_text { font-size: 26px; line-height: 140%; margin: 0; } @media screen and (max-width: 640px) { .mod-freeHTML .cmn-title-red_line .cmn-title_text { font-size: 16px; } } .mod-freeHTML .cmn-title-red_line > a { font-size: 14px; position: absolute; top: 0; right: 0; line-height: 1; padding-right: 1em; padding-bottom: 10px; } @media screen and (max-width: 640px) { .mod-freeHTML .cmn-title-red_line > a { font-size: 10px; } } .mod-freeHTML .cmn-title-red_line > a::after { content: ""; z-index: 2; display: inline-block; vertical-align: middle; text-decoration: none; width: 6px; height: 6px; border-top: 2px solid #000000; border-right: 2px solid #000000; transform: rotate(45deg); margin-top: -.25em; margin-left: 6px; } .mod-freeHTML .cmn-section { position: relative; } .mod-freeHTML .cmn-section + .cmn-section { margin-top: 120px; } @media screen and (max-width: 640px) { .mod-freeHTML .cmn-section + .cmn-section { margin-top: 80px; } } .mod-freeHTML .cmn-section .cmn-section_point { position: absolute; top: 0; left: 0; } .mod-freeHTML .cmn-section .cmn-text { padding: 0 140px; margin: 40px 0; font-size: 14px; } @media screen and (max-width: 640px) { .mod-freeHTML .cmn-section .cmn-text { padding: 0; margin: 20px 0; } } .mod-freeHTML .cmn-section .cmn-text .cmn-title-red_line { margin: 40px 0 20px; } .mod-freeHTML .cmn-section .cmn-text .cmn-title-red_line .cmn-title_text { color: #D60012; font-size: 20px; } @media screen and (max-width: 640px) { .mod-freeHTML .cmn-section .cmn-text .cmn-title-red_line .cmn-title_text { font-size: 16px; } } .mod-freeHTML .cmn-section .cmn-text .cmn-img { margin-top: 40px; } .mod-freeHTML .cmn-section .cmn-text .cmn-text_att { font-size: 10px; text-align: left; margin-top: 10px; } .mod-freeHTML .cmn-section .cmn-img .cmn-img_att { font-size: 10px; text-align: left; margin-top: 10px; } .mod-freeHTML .cmn-btn a { display: block; /* width: 100%; max-width: 710px; font-size: $font-size_xm; */ background: #FFFFFF; border: 2px solid #000000; color: #000000; } .mod-freeHTML .cmn-btn a::after { /* width: 10px; height: 10px; */ border-color: #000000; } .mod-freeHTML .cmn-movie { max-width: 780px; margin: 0 auto; } .mod-freeHTML .cmn-movie .modal-dialog-youtube { max-width: 780px; } /* 以降 2024.02 追加 */ .mod-freeHTML .cmn-lineup ul { display: flex; flex-wrap: wrap; gap: 40px 50px; } @media screen and (max-width: 640px) { .mod-freeHTML .cmn-lineup ul { gap: 35px 0; } } .mod-freeHTML .cmn-lineup ul li { width: calc((100% - 50px) / 2); display: flex; flex-direction: column; align-items: center; font-weight: bold; gap: 15px; } @media screen and (max-width: 640px) { .mod-freeHTML .cmn-lineup ul li { width: 100%; } } .mod-freeHTML .cmn-btn { display: flex; flex-direction: column; align-items: center; gap: 20px; margin: 70px auto; } .mod-freeHTML .cmn-btn .mod-viewList { margin: 0 auto; width: 68%; } .mod-freeHTML img { width: 100%; height: auto; } @media screen and (max-width: 640px) { .mod-freeHTML .cmn-section .cmn-img { text-align: center; } } .mod-freeHTML .cmn-title-theme { position: relative; padding-left: 145px; margin-bottom: 45px; padding-top: 15px; } @media screen and (max-width: 640px) { .mod-freeHTML .cmn-title-theme { padding-left: 0; margin-bottom: 20px; padding-top: 8.75%; } } .mod-freeHTML .cmn-title-theme .cmn-title-theme_icon { content: ""; display: block; position: absolute; top: 0; left: 0; width: 175px; z-index: 2; } @media screen and (max-width: 640px) { .mod-freeHTML .cmn-title-theme .cmn-title-theme_icon { width: 27.34375%; } } .mod-freeHTML .cmn-title-theme .cmn-title-theme_text { background: #D60012; color: #ffffff; display: block; position: relative; padding: 0.5em 0 0.5em 85px; margin: 0; font-size: 28px; z-index: 1; } @media screen and (max-width: 640px) { .mod-freeHTML .cmn-title-theme .cmn-title-theme_text { padding: 4.6875% 0; font-size: 16px; line-height: 140%; min-height: 6em; display: flex; align-items: center; justify-content: center; } } @media screen and (max-width: 640px) { .cmn-u_pc { display: none; } } @media (min-width: 641px) { .cmn-u_sp { display: none; } }