@charset "UTF-8";
/* //////////////////////////////////////////////////////////

Base style

//////////////////////////////////////////////////////////  */

html {
  position: relative;
  font-size: 62.5%;
  min-height: 100%;
  scroll-behavior: smooth;
}

body {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  font-family: 'Noto Sans', '游ゴシック体', YuGothic, '游ゴシック', 'Yu Gothic',
    'ヒラギノ角ゴシック', 'メイリオ', sans-serif;
  font-weight: 500; /*游ゴシック Windows Chrome　かすれ対策*/
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.75;
  color: #222222;
}

a {
  transition: 0.3s;
}
a:hover {
  opacity: 0.7;
  cursor: pointer;
}

.txt_bold {
  font-weight: bold;
}
.txt_large {
  font-size: 160%;
}
.txt_center {
  text-align: center;
}
.txt_small {
  font-size: 1.28rem;
}
.txt_small_red {
  font-size: 1.28rem;
  color: #d90000;
}

.text_underline {
  display: inline;
  background: linear-gradient(transparent 60%, #dce6e6 30%);
}

.color_sousenkyo {
  background-color: #abb1db;
}
.color_sousenkyo_light {
  background-color: #dce6e6;
}
.color_white {
  background-color: #ffffff;
}
.color_pink {
  background-color: #ffe1e1;
}
.color_darkBlue {
  background-color: #0c318b;
}
.color_breakfast {
  background-color: #eff5f5;
}

.lg {
  display: block;
}
.sm {
  display: none;
}

.br_lg {
  display: inline-block;
}
.br_sm {
  display: none;
}

.br_lg_hidden {
  display: none;
}
.br_sm_visible {
  display: inline-block;
}

.spacer_line {
  margin-top: 30px;
  display: block;
  width: 100%;
  height: 1px;
  border-top: 1px solid #000000;
}
.border-top-white {
  border-top: 4px solid #fff;
}
.border-top-lightgreen {
  border-top: 4px solid #dce6e6;
}

/* //////////////////////////////////////////////////////////

Top Page

////////////////////////////////////////////////////////// */

.top_sec_a {
  padding: 48px 0 0;
}
.top_sec_a_course {
  display: flex;
  margin-top: 48px;
}
.top_sec_a_course a {
  display: block;
  width: calc((100% - 96px) / 3);
  margin-right: 48px;
}
.top_sec_a_course a:last-child {
  margin-right: 0;
}

/*------- ニュース -------*/

.news_sec ul {
  padding: 0 0 48px;
}
.news_sec ul li {
  padding: 24px 0;
  list-style: none;
  border-top: 1px solid #d9d9d9;
}
.news_sec ul li:last-child {
  border-bottom: 1px solid #d9d9d9;
}
.news_sec ul li a {
  display: inline-flex;
  flex-direction: column;
  text-decoration: none;
  color: #222222;
}
.news_date {
  display: inline-flex;
  min-width: 138px;
  margin-right: 12px;
  font-weight: bold;
  font-size: 1.28rem;
  color: #888888;
}
.news_tag {
  padding: 5px;
  color: #ffffff;
  background-color: #999999;
  font-size: 60%;
  font-weight: bold;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  margin-right: 24px;
  min-width: 130px;
}
.news_tag.blue {
  background-color: #0292d2;
}
.news_tag.orange {
  background-color: #f29600;
}
.news_tag.red {
  background-color: #e1003e;
}
.news_tag.green {
  background-color: #509600;
}
.top_partner_area {
  display: flex;
  padding-bottom: 72px;
}
.top_contact_text {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.top_contact_text p:nth-child(3) {
  font-size: 3rem;
}
.top_contact_text span {
  font-size: 1.28rem;
}

/* //////////////////////////////////////////////////////////

Header

//////////////////////////////////////////////////////////  */

.header {
  display: block;
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 3;
  background-color: #ffffff;
  padding: 0;
  height: 100%;
}

.header_inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header_inner_right {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-grow: 1;
}

.header_logo {
  margin-left: 24px;
  max-width: 264px;
}

.header_nav {
  display: flex;
  align-items: center;
  position: relative;
}

.nav {
  display: flex;
  margin-left: 24px;
}

.nav ul {
  padding: 0;
  display: flex;
  max-width: 600px;
}

.nav ul li {
  list-style: none;
  margin-left: 2px;
}

.nav ul li a {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  border-left: 1px solid #0c318b;
}

/* //////////////////////////////////////////////////////////

Contents

//////////////////////////////////////////////////////////  */

/*------- パンくずリスト -------*/

.breadcrumbs {
  padding-top: 20px;
  position: absolute;
  left: 24px;
  z-index: 2;
}

.breadcrumbs.type_b {
  position: absolute;
  padding-top: 20px;
}

.breadcrumbs ul {
  padding: 0;
}

.breadcrumbs ul li {
  list-style: none;
  display: inline-flex;
  align-items: center;
  font-size: 60%;
  color: #0c318b;
}

.breadcrumbs ul li a {
  display: inline-block;
  color: #0c318b;
  position: relative;
}

.breadcrumbs ul li span {
  display: inline-block;
  content: '';
  width: 5px;
  height: 10px;
  background: url('../images/breadcrumbs_arrow.svg') no-repeat;
  background-size: 5px 10px;
  margin: 0 6px;
}

/*------- セクション -------*/

.sec_first {
  display: block;
  position: relative;
}

.sec {
  display: block;
  padding: 48px 0;
  position: relative;
  z-index: 0;
}
.sec_last {
  display: block;
  padding: 0 0 48px;
  position: relative;
}

.content_inner {
  position: relative;
  max-width: 1120px;
  margin: auto;
  padding: 0 48px;
}
.content_inner_typeb {
  position: relative;
  max-width: 1120px;
  margin: auto;
}

.cp_tarm_area {
  position: relative;
  margin-top: -100px;
  padding-bottom: 48px;
}

.top_content02 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.top_content02 a {
  margin-right: 2px;
  max-width: 60px;
}

.sec_title {
  display: flex;
  justify-content: center;
  width: 38.9285714%;
  min-width: 436px;
  margin: 0 auto 48px;
  position: relative;
  text-align: center;
}
.outline_border {
  color: #fff;
  background-color: #5a8caa;
  padding: 4px;
  font-size: 1.28rem;
  text-align: center;
  font-weight: bold;
  margin-top: 24px;
}
.outline_border_b {
  color: #5a8caa;
  background-color: #fff;
  padding: 4px;
  font-size: 1.28rem;
  text-align: center;
  font-weight: bold;
  margin-top: 24px;
  border: 2px solid #5a8caa;
}
.outline_text_bold {
  text-align: center;
  font-weight: bold;
  font-size: 1.92rem;
  margin-top: 24px;
}
.outline_text_bold span {
  color: #e2003e;
  font-size: 2.4rem;
}
.outline_text_bold_small {
  font-size: 1.28rem;
  text-align: center;
}

.video_sec {
  display: flex;
  flex-wrap: wrap;
  margin-top: 60px;
}
.video_sec div {
  width: calc((100% - 20px) / 3);
  margin-right: 10px;
  margin-bottom: 10px;
  background-color: #999999;
}
.video_sec div:nth-child(3n) {
  margin-right: 0;
}

.btn_oubo {
  margin-top: 60px;
  display: flex;
  justify-content: center;
}
.btn_oubo a {
  max-width: 550px;
}

.btn_area {
  display: flex;
  flex-wrap: wrap;
  margin-top: 30px;
}
.btn_area div {
  width: calc((100% - 20px) / 2);
}
.btn_area div:first-child {
  margin-right: 20px;
}

.partner_area {
  margin-top: 30px;
  margin-bottom: 30px;
  color: #ffffff;
  font-size: 85%;
}
.partner_area p:last-child {
  text-align: center;
  margin-top: 20px;
}

.bottom_link_area {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* //////////////////////////////////////////////////////////

Favorite

//////////////////////////////////////////////////////////  */

.favorite_outline {
  margin: 0 auto 48px;
  text-align: center;
}
.favorite_outline .txt_small_red {
  padding: 24px 0;
}
.favorite_outline button {
  width: 369px;
  padding: 0;
  background-color: transparent;
  border: none;
  opacity: 1;
  cursor: pointer;
  transition: 0.3s;
}
.favorite_outline button:hover {
  opacity: 0.7;
}

/* //////////////////////////////////////////////////////////

朝食向上委員会（仮）

//////////////////////////////////////////////////////////  */

.breakfast_outline {
  margin: 0 auto 48px;
  text-align: center;
}
.breakfast_outline h3 {
  margin-bottom: 24px;
}
.breakfast_outline p {
  text-align: left;
}
.breakfast_outline .txt_small {
  padding: 24px 0 0;
}

/* //////////////////////////////////////////////////////////

Footer

//////////////////////////////////////////////////////////  */

.footer {
  margin-top: auto;
}

.footer::before {
  width: 100%;
  display: block;
  content: '';
  border-top: 5px solid #333333;
}

.footer_inner {
  padding: 30px;
}

.footer_contents {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer_contents p {
  position: relative;
  display: inline-block;
  top: 1.4rem;
  left: 0;
  font-size: 60%;
}

.access_logo_area {
  width: 160px;
  position: relative;
  top: 0;
  right: 0;
}

/* //////////////////////////////////////////////////////////

Back to Top

//////////////////////////////////////////////////////////  */

.is_page_top {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  padding: 0;
  position: fixed;
  right: 0;
  bottom: 100px;
  background-color: #333333;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  z-index: 999;
}

.is_page_top img {
  width: 28px;
  transform: rotate(180deg);
}

/* //////////////////////////////////////////////////////////

Sousenkyo

//////////////////////////////////////////////////////////  */

.search_btn_wrapper {
  display: flex;
  margin-top: 48px;
}
.search_btn_wrapper a {
  display: inline-block;
  width: calc((100% - 72px) / 4);
  margin-right: 24px;
  box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
.search_btn_wrapper a:last-child {
  margin-right: 0;
}

.link_category_btn {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
}
.link_category_btn li {
  list-style: none;
  display: inline-flex;
  width: calc((100% - 10px) / 2);
  margin-right: 5px;
  margin-bottom: 5px;
}
.link_category_btn li:nth-child(2n) {
  margin-right: 0;
}
.link_category_btn li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #ffffff;
  font-size: 1.8rem;
  font-weight: bold;
  text-decoration: none;
  padding: 12px;
  width: 100%;
  background-color: #0c318b;
}
.link_category_btn li span {
  display: block;
  content: '';
  width: 15px;
  height: 16px;
  background: url('../images/link_btn_arrow.svg') no-repeat;
  background-size: contain;
  margin-left: 5px;
}

.bnr_area {
  display: flex;
  padding: 48px 0;
  list-style: none;
  margin: auto;
}
.bnr_area li {
  display: inline-block;
  width: calc((100% - 5px) / 2);
  margin-right: 5px;
  margin-bottom: 0;
}
.bnr_area li:last-child {
  margin-right: 0;
}
.bnr_area li a {
  width: 369px;
}

.step_txt_sm_red {
  font-size: 1.28rem;
  text-align: center;
  padding-top: 24px;
  color: #d90000;
}

.mypage_txt {
  text-align: center;
}
.mypage_link {
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 48px;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
}
.mypage_link li {
  display: inline-block;
  width: 50%;
}
.mypage_link li:first-child {
  margin-bottom: 24px;
}
.mypage_link li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #ffffff;
  font-weight: bold;
  text-decoration: none;
  padding: 12px 24px;
  width: 100%;
  background-color: #0c318b;
}
.mypage_link li span {
  display: block;
  content: '';
  width: 18px;
  height: 15px;
  background: url('../images/icon_external_link.svg') no-repeat;
  background-size: contain;
  margin-left: 5px;
}
.mypage_link li:last-child a {
  color: #0c318b;
  background-color: #ffffff;
  border: 2px solid #0c318b;
}
.mypage_link li:last-child span {
  display: block;
  content: '';
  width: 18px;
  height: 15px;
  background: url('../images/icon_external_link_blue.svg') no-repeat;
  background-size: contain;
  margin-left: 5px;
}

.digitalpoint {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto 24px;
}
.digitalpoint_outline {
  padding: 0;
}
.digitalpoint_outline p {
  font-size: 1.28rem;
  padding: 24px 0;
  border-top: 2px solid #d9d9d9;
}
.digitalpoint_outline ul {
  list-style: none;
  margin: 0;
  padding: 24px 0;
  border-top: 2px solid #d9d9d9;
  border-bottom: 2px solid #d9d9d9;
}
.digitalpoint_outline ul li {
  font-size: 1.28rem;
}

.sousenkyo_bottom_link_area {
  display: flex;
}
.sousenkyo_bottom_link_block {
  width: calc(100% / 4);
  color: #ffffff;
}
.sousenkyo_bottom_link_block:last-child div:last-child {
  margin-top: 24px;
}
.sousenkyo_bottom_link_block h4 {
  font-size: 1.6rem;
  margin-bottom: 8px;
}
.sousenkyo_bottom_link_block ul {
  list-style: none;
  padding: 0;
  font-size: 1.28rem;
}
.sousenkyo_bottom_link_block ul li {
  padding: 4px 0;
  font-weight: bold;
}
.sousenkyo_bottom_link_block ul li a {
  text-decoration: none;
  color: #ffffff;
}
.sousenkyo_bottom_link_block ul li a:hover {
  color: #ffffff;
}
.sousenkyo_bottom_link_area_bnr {
  display: flex;
  justify-content: space-between;
  margin-top: 48px;
}
.sousenkyo_bottom_link_area_bnr div:first-child {
  max-width: 495px;
  display: flex;
}
.sousenkyo_bottom_link_area_bnr div:first-child a {
  margin-right: 2px;
}

.sousenkyo_bottom_link_area_bnr div:last-child {
  display: flex;
  max-width: 189px;
}
.sousenkyo_bottom_link_area_bnr div:last-child a {
  width: calc(100% / 4);
  margin-left: 2px;
}

.pet_link_area {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}
.pet_link_area a {
  width: 369px;
  margin: 0 24px;
}

/* //////////////////////////////////////////////////////////

Slider

//////////////////////////////////////////////////////////  */

.swiper-slide a {
  display: flex;
  padding: 30px;
  justify-content: center;
  background-color: #999999;
}

.swiper-slide {
  height: auto;
}

.swiper-button-next:after {
  bottom: 0;
  content: '';
  height: 40px;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  background-image: url(../../drama/assets/images/icon_slide.svg);
  background-size: contain;
  background-repeat: no-repeat;
}
.swiper-button-prev:after {
  bottom: 0;
  content: '';
  height: 40px;
  margin: auto;
  position: absolute;
  top: 0;
  width: 40px;
  background-image: url(../../drama/assets/images/icon_slide.svg);
  transform: rotate(180deg);
  background-size: contain;
  background-repeat: no-repeat;
}

/* //////////////////////////////////////////////////////////

Category

//////////////////////////////////////////////////////////  */

.video_block_wrapper {
  display: flex;
  flex-wrap: wrap;
  margin: 48x 0 0;
}

.video_block {
  display: flex;
  flex-direction: column;
  width: calc((100% - 40px) / 5);
  margin-right: 10px;
  margin-bottom: 10px;
  position: relative;
}

.video_block:nth-child(5n) {
  margin-right: 0;
}

.video_area {
  position: relative;
  top: 0;
  left: 0;
  text-decoration: none;
}

.video_area .video_img {
  position: relative;
}

.video_area .video_img::after {
  display: block;
  content: '';
  width: 54px;
  height: 39px;
  background: url('../../assets/images/icon_video.png') no-repeat;
  background-size: contain;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

/* -- 動画状態表示 -- */
.situation {
  position: absolute;
  display: flex;
  flex-direction: column;
  z-index: 2;
  width: 100%;
  margin-top: 4px;
}
.situation div {
  position: relative;
  display: inline-flex;
  padding-left: 8px;
}
.situation div span {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 4px 0;
  border-radius: 4px;
  position: relative;
  margin-top: 4px;
  color: #ffffff;
  font-size: 60%;
  font-weight: bold;
  z-index: 2;
  line-height: 1rem;
  width: 52px;
}
span.viewed,
span.viewed {
  background-color: #015fa8;
}
span.voted,
span.voted {
  background-color: #e2003e;
}
span.favorite_voted,
span.favorite_voted {
  background-color: #783c8c;
}

.video_block_name {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  color: #ffffff;
  text-decoration: none;
  padding: 12px 12px 0px 12px;
}

.comment_area {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  color: #ffffff;
  text-decoration: none;
  padding: 0 12px 12px;
  font-weight: bold;
  position: relative;
}
#sousenkyo .comment_area {
  padding-top: 12px;
}

.video_block_name,
.comment_area {
  background: linear-gradient(to right, #015fa8, #064096);
}

.company_name {
  font-size: 60%;
  font-weight: bold;
  display: inline-flex;
  flex-grow: 1;
}
.video_area .video_block_name .product_name,
.comment_area .product_name {
  font-size: 75%;
  font-weight: bold;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.comment_area .company_name {
  padding-top: 0;
  margin-top: 0px;
  width: calc(100% - 12px);
}
.comment_area .product_name {
  padding-top: 0;
}

.comment_area span {
  display: block;
  content: '';
  width: 10px;
  height: 10px;
  background: url('../images/icon_double_arrow.png') no-repeat;
  background-size: contain;
  position: absolute;
  bottom: 10px;
  right: 10px;
  top: auto;
  left: auto;
}

.comment_inner_line {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  padding: 8px 0 0;
  border-top: 1px dotted #ffffff;
}

.comment_area .comment_votes {
  font-size: 60%;
  font-weight: normal;
}

.comment_area .comment_link {
  font-size: 60%;
  color: #ffee33;
  text-decoration: underline;
}

#questionnaire .comment_area {
  font-weight: normal;
  text-align: center;
}

/* //////////////////////////////////////////////////////////

Comment

//////////////////////////////////////////////////////////  */

.sec_smallContent {
  display: flex;
  width: 100%;
  height: calc(100vh - 120px);
  /*background: url('../../assets/images/bg_illust.png') repeat-x;*/
  background-size: contain;
  position: relative;
}

.sec_smallContent::after {
  display: block;
  content: '';
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  position: relative;
  top: 0;
  left: 0;
  opacity: 0.8;
}

.smallContent_inner {
  max-width: 810px;
  height: 480px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-color: #0c318b;
  z-index: 2;
  padding: 45px 45px 35px;
  display: flex;
  flex-direction: column;
}

.smallContent_inner button:hover {
  opacity: 0.7;
}

.smallContent_title_area {
  display: flex;
  justify-content: space-between;
  color: #ffffff;
}

.smallContent_title_area.vote,
.smallContent_title_area.thanks {
  justify-content: flex-end;
}

.smallContent_title_area.thanks {
  position: absolute;
  right: 45px;
}

.smallContent_title_inner {
  display: flex;
  flex-direction: column;
  font-size: 75%;
}

.smallContent_title_inner .smallContent_title {
  font-weight: bold;
  display: inline-flex;
  margin-bottom: 10px;
  font-size: 125%;
  align-items: center;
}

.smallContent_title_inner .comment_icon {
  display: inline-flex;
  content: '';
  width: 32px;
  height: 26px;
  background: url('../images/icon_comment.png') no-repeat;
  background-size: contain;
  margin-left: 10px;
}

.smallContent_title_area button {
  width: 30px;
  height: 30px;
  background: url('../images/close_btn_w.png') no-repeat;
  background-size: contain;
  border: none;
  cursor: pointer;
  margin-left: 30px;
  padding: 0;
  transition: 0.3s;
  min-width: 30px;
}

.smallContent_title_area button:hover {
  opacity: 0.7;
}

.comment_productName {
  display: inline;
}
.comment_makerName {
  display: inline;
}

.smallContent_comment {
  display: flex;
  flex-wrap: wrap;
  margin-top: 30px;
  padding: 20px;
  border: 4px solid #dedede;
  border-radius: 4px;
  background-color: #ffffff;
  max-height: 260px;
  overflow-y: scroll;
}

.smallContent_comment dl {
  width: 100%;
  border-bottom: 1px dotted #999999;
  padding: 20px 0px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.smallContent_comment dl:first-child {
  padding-top: 0;
}

.smallContent_comment dl dt {
  color: #0099dd;
  font-weight: bold;
  font-size: 85%;
}

.smallContent_comment dl dd {
  font-size: 85%;
}

.smallContent_bottom_area {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  position: relative;
}

.comment_write,
.comment_submit {
  border: none;
  cursor: pointer;
  padding: 0;
  transition: 0.3s;
  background-color: transparent;
  max-width: 168px;
}

.comment_back {
  border: none;
  cursor: pointer;
  transition: 0.3s;
  background-color: transparent;
  max-width: 254px;
}

.comment_write:hover,
.comment_submit:hover,
.comment_back:hover {
  opacity: 0.7;
}

.comment_submit {
  opacity: 0.5;
}

.comment_submit.active {
  opacity: 1;
}

.comment_back_text {
  background-color: rgba(0, 0, 0, 0);
  border: none;
  font-size: 65%;
  font-weight: bold;
  color: #ffee33;
  text-decoration: underline;
  margin-top: 30px;
  cursor: pointer;
}

.comment_back_text:hover {
  opacity: 0.7;
}

.smallContent_comment_write_area {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  padding: 20px;
  border: 4px solid #dedede;
  border-radius: 4px;
  background-color: #ffffff;
  overflow-y: scroll;
  width: 100%;
  flex-grow: 1;
}

textarea::placeholder {
  font-size: 12px;
}

.smallContent_comment_write_area.comment {
  min-height: 236px;
}

.thanks_text_area {
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: center;
  margin-top: 30px;
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 75%;
}

.thanks_text_area p {
  font-size: 125%;
}

/* //////////////////////////////////////////////////////////

Vote

//////////////////////////////////////////////////////////  */

.smallContent_inner_vote {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-color: #0c318b;
  max-width: 810px;
  height: 480px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
}

.vote_video_ara {
  width: calc(100% / 3);
  position: relative;
  display: flex;
}

.vote_video_area_btn {
  display: none;
}
.vote_video_ara a {
  position: relative;
  display: inline-flex;
}

.vote_video_ara a::after {
  display: block;
  content: '';
  width: 54px;
  height: 39px;
  background: url('../../assets/images/icon_video.png') no-repeat;
  background-size: contain;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.vote_content_area {
  width: calc((100% / 3) * 2);
  position: relative;
  padding: 40px;
  background-color: #0c318b;
  display: flex;
  flex-direction: column;
  max-height: 480px;
}
.vote_title_area {
  color: #ffffff;
  font-weight: bold;
  margin-top: 20px;
}

.vote_title_area.agree {
  margin-top: 0 !important;
}

.vote_title_area p:nth-child(2) {
  margin-top: 15px;
}

.vote_title_area span.txt_bold {
  color: #ffee33;
}

.vote_title_area img {
  max-width: 240px;
  margin-top: 10px;
}

.vote_btn_area {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
}

.vote_btn_area button {
  appearance: none;
  width: calc((100% - 44px) / 3);
  display: flex;
  align-items: center;
  margin-right: 22px;
  border: none;
  transition: 0.3s;
  background-size: cover;
  border-radius: 8px;
  background-color: #0c318b;
  opacity: 0.7;
  padding: 0;
}

.vote_btn_area button.active {
  opacity: 1;
  cursor: pointer;
}

.vote_btn_area button:last-child {
  margin-right: 0;
}

.smallContent_bottom_area_vote {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 20px;
}

.smallContent_bottom_area_vote .vote_bottom_area {
  text-align: justify;
  color: #ffffff;
  width: 100%;
}

.smallContent_bottom_area_vote .vote_bottom_area p {
  font-size: 70%;
}

.smallContent_bottom_area_vote .vote_bottom_area span {
  color: #ffff03;
  font-weight: bold;
  display: inline;
}

.smallContent_bottom_area_vote .vote_bottom_area img {
  max-width: 240px;
  margin-bottom: 10px;
}

.like_btn_wrapper {
  display: flex;
  justify-content: flex-end;
  position: relative;
}

.like_btn {
  display: block;
  content: '';
  width: 30px;
  height: 30px;
  margin-left: 30px;
  border: none;
  background: url('../images/icon_like.png') no-repeat;
  background-size: contain;
  cursor: pointer;
  padding: 0;
  position: relative;
  top: 5px;
}

.like_btn.active {
  background: url('../images/icon_like_activeY.png') no-repeat;
  background-size: contain;
}

.vote_bottom_txt_area {
  margin-top: 20px;
  color: #b0e0fa;
  font-size: 60%;
  font-weight: bold;
}

/* //////////////////////////////////////////////////////////

Win & Lose

//////////////////////////////////////////////////////////  */

.win_lose_img {
  width: calc(100% / 3);
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 23px;
}

.btn_agree {
  border: none;
  border-radius: 8px;
  background-color: transparent;
  padding: 0;
  margin-top: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.btn_agree:hover {
  opacity: 0.7;
}

.agree_txt {
  font-size: 60%;
  margin-top: 10px;
  font-weight: normal;
}

.agree_txt a {
  color: #ffee33;
  font-weight: bold;
}

.smallContent_bottom_area.winLose {
  display: flex;
  align-items: center;
  margin-top: 20px;
}

.vote_title_area_txt_s {
  display: block;
  font-size: 65%;
  font-weight: normal;
  text-align: left;
}

.vote_title_area_txt_s.secound {
  padding-top: 2em;
  font-size: 65%;
}

.vote_title_area_txt_xs {
  display: block;
  font-size: 60%;
}

.winLose .like_btn {
  position: absolute;
  right: 0;
  bottom: 0;
}

/* Lose Content 2024 */
.smallContent_inner_lose {
  max-width: 810px;
  height: 480px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-color: #0c318b;
  z-index: 2;
  padding: 20px 0 35px;
  display: flex;
  flex-direction: column;
}

.lose_content_button {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding: 0 40px;
}

.lose_content_button button {
  height: 30px;
  background-color: transparent;
  border: 1px solid #ffffff;
  cursor: pointer;
  margin-left: 30px;
  padding: 0 10px;
  transition: 0.3s;
  font-size: 1.2rem;
  color: #ffffff;
  border-radius: 4px;
  font-weight: bold;
}
.lose_content_button button:hover {
  opacity: 0.75;
}

.lose_content_wrapper {
  display: flex;
  padding-top: 20px;
}

.lose_content {
  display: flex;
  flex-direction: column;
  width: calc((100% / 3) * 1);
  border-right: 1px dashed #ffffff;
  padding: 0 20px 0 40px;
}

.lose_content .vote_content_area {
  padding: 0;
  width: 100%;
  text-align: center;
}

.lose_content .vote_content_area .vote_title_area {
  padding: 0;
}

.lose_content .vote_content_area .vote_title_area p {
  letter-spacing: -1px;
}

.lose_content .vote_content_area textarea {
  padding: 10px;
  font-size: 1.5rem;
}

.lose_content .comment_submit {
  max-width: 100%;
}

.lose_img {
  padding: 0;
}

.lose_content_slider {
  display: flex;
  width: calc((100% / 3) * 2);
  padding: 0 40px 0 20px;
}

.lose_content_slider .video_block {
  width: 100%;
  margin-right: 0;
  cursor: pointer;
  text-decoration: none;
}

.lose_content_slider .video_block .comment_area {
  background-color: #002868;
  padding: 4px 8px;
}

.lose_content_slider .product_name {
  font-size: 60%;
}

.lose_slider {
  width: 100%;
  overflow: hidden;
}

.lose_content_slider .situation {
  width: 100%;
}

input[type='radio'],
input[type='checkbox'] {
  margin-right: 4px;
}

input[type='text'] {
  width: 100%;
}

.form_thanks_area {
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* ///////////////////////////////////////////////////////// */

/* Modal */

/* ///////////////////////////////////////////////////////// */

.video_wrapper {
  width: 100%;
  /*height: 100%;*/
  position: relative;
  /*padding-bottom: 56.25%;*/
  margin-bottom: 20px;
}
/*
.video_wrapper.vertical {
  padding-bottom: 100%;
}*/

.video_wrapper iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border: none;
}

.remodal {
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 10px;
  padding: 10px;
  transform: translate3d(0, 0, 0);
  color: #2b2e38;
  background: transparent;
  max-width: 420px;
  aspect-ratio: 9/16;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.remodal-cancel {
  min-width: 110px;
  padding: 10px 0;
  line-height: 1;
  margin-top: 10px;
}

.remodal-cancel {
  color: #444444;
  background: #fff;
}

.remodal-cancel:hover,
.remodal-cancel:focus {
  background: #666666;
}

/* //////////////////////////////////////////////////////////

  Receipt

  //////////////////////////////////////////////////////////  */
.receipt_step {
  display: flex;
}
.receipt_course {
  margin: 0 auto;
}
.receipt_course_btn {
  margin: 48px auto 0;
  width: 369px;
}
.receipt_course_btn_first {
  margin-bottom: 48px;
}
.receipt_course_ab {
  margin-bottom: 48px;
}
.receipt_course_ab img {
  margin: 0 auto;
}
.receipt_course_ab_btn {
  display: flex;
  justify-content: center;
}
.receipt_course_ab_btn a {
  width: 369px;
  margin: 0 24px;
}
.receipt_partner_area_wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.receipt_partner_area_wrapper div {
  width: calc((100% - 24px) / 2);
  margin-right: 24px;
  text-align: left;
  margin-bottom: 24px;
}
.receipt_partner_area_wrapper div:nth-child(2n) {
  margin-right: 0;
  margin-bottom: 24px;
}
.receipt_partner_area {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px;
  background-color: #dce6e6;
  margin-bottom: 12px;
  font-size: 1.28rem;
}

.remodal.receipt_remodal_wrapper {
  width: 100%;
  max-width: 1120px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 50svh;
}

.receipt_modal {
  background-color: #fff;
  max-width: 1120px;
  /*height: 480px;*/
  height: 50svh;
  min-height: 400px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  overflow: scroll;
  padding: 0 24px 24px 24px;
  position: relative;
}
.receipt_modal .receipt_modal_header {
  position: sticky;
  top: 0;
  width: 100%;
  background: #fff;
  padding-top: 24px;
}
.receipt_modal .remodal-close {
  position: absolute;
  top: 24px;
  right: 0;
  left: auto;
  width: 36px;
  height: 36px;
  background-color: #0c318b;
  border-radius: 50%;
  z-index: 3;
}
.receipt_modal .remodal-close::before {
  display: block;
  content: '';
  width: 12px;
  height: 12px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-image: url(../images/icon_close.svg);
  background-repeat: no-repeat;
}

.ec_shop_wrapper {
  display: flex;
  max-width: 840px;
  margin: auto;
}
.ec_shop_wrapper a {
  width: calc((100% - 48px) / 3);
  margin-right: 24px;
}
.ec_shop_wrapper a:last-child {
  margin-right: 0;
}
.no_line_break {
  word-break: keep-all;
  display: inline-block;
}

/* //////////////////////////////////////////////////////////

  Drama

  //////////////////////////////////////////////////////////  */
.drama_slide .video_block {
  color: #222222;
  text-decoration: none;
}

.cp_tarm_area.drama_term {
  margin-top: -94px;
}
.drama_platform {
  display: flex;
  width: 87.2%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  margin-top: 24px;
}
.drama_platform a {
  width: calc((100% - 48px) / 3);
  margin-right: 24px;
}
.drama_platform a:last-child {
  margin-right: 0;
}
.drama_platform .fukidasi {
  position: absolute;
  top: -56px;
  left: -48px;
  width: 18.9285714%;
}
.drama_paformers {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.drama_paformers div {
  width: calc((100% - 120px) / 4);
  margin-right: 30px;
  margin-bottom: 30px;
}
.drama_paformers div:nth-child(4n) {
  margin-right: 0;
}
.drama_paformers_bottom {
  margin-bottom: 48px;
}
.drama_img_list img {
  margin: 0 auto;
}

.drama_img_list {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.drama_img_list .drama_img_list_content {
  width: calc(100% / 10);
  background-color: #fff;
  cursor: pointer;
  opacity: 1;
  transition: all 0.35s;
  position: relative;
}

.drama_img_list div:hover {
  opacity: 0.75;
}
.drama_img_lg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1001;
  display: none;
  animation: 0.5s forwards drama_modal;
}
.drama_img_lg.active {
  display: block;
}
.drama_img_lg div {
  aspect-ratio: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1002;
  padding: 4px;
  background-color: #fff;
  overflow: scroll;
  max-width: 80vw;
  max-height: 90vh;
}

.drama_img_lg div img {
  margin: auto;
  height: 100%;
  width: 100%;
}

.drama_bg {
  background: rgba(0, 0, 0, 0.7);
  z-index: 1000;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  animation: 0.5s forwards drama_modal;
}
.drama_bg.active {
  display: block;
}
@keyframes drama_modal {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.remodal.drama_modal_content_wrapper {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  overflow: scroll;
  padding: 0 24px 24px 24px;
  width: 100%;
  max-width: 1120px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  max-height: 540px;
  background-color: #fff;
  z-index: 2;
  aspect-ratio: auto;
}
.drama_modal .drama_modal_header {
  position: relative;
  top: 0;
  width: 100%;
  background: #fff;
  padding-top: 24px;
}
.drama_modal .remodal-close {
  position: absolute;
  top: 24px;
  right: 0;
  left: auto;
  width: 36px;
  height: 36px;
  background-color: #0c318b;
  border-radius: 50%;
  z-index: 3;
}
.drama_modal .remodal-close::before {
  display: block;
  content: '';
  width: 12px;
  height: 12px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-image: url(../images/icon_close.svg);
  background-repeat: no-repeat;
}
.drama_modal_content {
  display: flex;
  padding: 0 30px 30px 30px;
}
.drama_modal_content_left {
  margin-right: 30px;
}
.drama_modal_content_left img {
  max-width: 240px;
}
.drama_modal_content_right {
  display: flex;
  justify-content: flex-start;
  text-align: left;
  font-feature-settings: 'palt';
  letter-spacing: 0.1rem;
}

@media screen and (max-width: 768px) {
  /* //////////////////////////////////////////////////////////

  Base style

  //////////////////////////////////////////////////////////  */

  body {
    font-size: 16px;
    font-size: 1.6rem;
  }

  .lg {
    display: none;
  }
  .sm {
    display: block;
  }

  .br_lg {
    display: none;
  }
  .br_sm {
    display: inline-block;
  }

  .br_lg_hidden {
    display: inline-block;
  }
  .br_sm_visible {
    display: none;
  }

  /* //////////////////////////////////////////////////////////

TOP page

  //////////////////////////////////////////////////////////  */

  .top_sec_a_course {
    flex-direction: column;
  }
  .top_sec_a_course a {
    display: block;
    width: 80%;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 20px;
  }
  .top_sec_a_course a:last-child {
    margin-bottom: 0;
    margin-right: auto;
    margin-left: auto;
  }
  .top_sec_a_course_date {
    padding-bottom: 30px;
  }
  .top_sec_a_course_date img {
    width: 80%;
    max-width: 520px;
  }

  .top_contact_text p:nth-child(3) {
    font-size: 2.4rem;
  }

  .top_bottom_bnr {
    margin-top: 30px;
    margin-bottom: 30px;
  }

  /* //////////////////////////////////////////////////////////

  Header

  //////////////////////////////////////////////////////////  */

  .header_inner {
    flex-direction: column;
  }

  .header_inner .header_logo {
    min-width: 180px;
    padding-left: 0;
  }

  .header_inner_right {
    width: 100%;
    padding: 20px 20px;
  }

  .header_logo {
    margin-left: 0;
    width: 60%;
    max-width: 360px;
  }

  .header_myPage {
    margin-left: 48px;
    width: 40%;
    max-width: 220px;
  }

  .header .header_inner .nav {
    margin-left: 0;
  }

  .header .header_inner .nav ul {
    max-width: 100%;
  }

  .header .header_inner .nav ul.lg {
    display: none;
  }

  .header .header_inner .nav ul.sm {
    display: flex;
  }

  .nav ul li a {
    background-color: #0c318b;
    border: none;
  }

  .nav ul li:first-child {
    margin-left: 0;
  }
  .nav ul li:last-child {
    display: none;
  }

  .nav_list_frozen li,
  .nav_list_ice li {
    width: calc((100% - 20px) / 2);
    margin-right: 20px;
  }

  .nav_list_frozen li:nth-child(3),
  .nav_list_ice li:nth-child(3) {
    border-top: none;
  }

  .nav_list_frozen li:nth-child(3n),
  .nav_list_ice li:nth-child(3n) {
    margin-right: 20px;
  }

  .nav_list_frozen li:nth-child(2n),
  .nav_list_ice li:nth-child(2n) {
    margin-right: 0;
  }

  .nav_list_frozen li a span,
  .nav_list_ice li a span {
    right: 10px;
  }

  .nav_close_btn img {
    width: 25px;
    height: 25px;
  }

  /* //////////////////////////////////////////////////////////

  Contents

  //////////////////////////////////////////////////////////  */

  .breadcrumbs {
    padding: 0 24px;
    padding-top: 20px;
    left: 0;
  }

  .breadcrumbs ul li {
    font-size: 80%;
  }

  .breadcrumbs ul li span {
    width: 8px;
    height: 16px;
    background-size: 8px 16px;
    margin: 0 10px;
  }

  .sec_first {
    padding-bottom: 48px;
  }

  .sec {
    padding: 48px 0;
  }

  .content_inner {
    padding: 0 24px;
  }

  .cp_tarm_area {
    position: relative;
    margin-top: -100px;
    width: 87.2%;
    margin-left: auto;
    margin-right: auto;
  }

  .mypage_link li {
    width: 100%;
  }

  .digitalpoint {
    flex-wrap: wrap;
    justify-content: center;
  }

  #frozenfoods .content_inner:nth-child(2),
  #ice .content_inner:nth-child(2) {
    padding: 15px;
  }

  .content_inner.content_inner_video {
    padding: 0;
  }

  .main_image .swiper {
    margin-bottom: 0px;
  }

  .sec_title {
    width: 87.2%;
    min-width: 100%;
    margin: 0 auto 48px;
    position: relative;
  }

  .video_sec {
    margin-top: 40px;
  }

  .video_sec div {
    width: calc((100% - 10px) / 2);
  }

  .video_sec div:nth-child(3n) {
    margin-right: 10px;
  }

  .video_sec div:nth-child(2n) {
    margin-right: 0;
  }

  .btn_oubo a {
    max-width: 100%;
  }

  .btn_area {
    flex-direction: column;
    margin-top: 30px;
  }

  .btn_area div {
    width: 100%;
  }

  .btn_area div:first-child {
    margin-right: 0;
    margin-bottom: 20px;
  }

  .news_sec ul li {
    padding: 15px 0;
  }

  .news_sec ul li a {
    flex-wrap: wrap;
  }

  .news_date {
    margin-right: 15px;
  }

  .news_tag {
    padding: 0 5px;
    margin-right: 0;
    min-width: 100px;
  }

  .news_title {
    width: 100%;
    display: block;
  }

  .bottom_link_area {
    justify-content: center;
    flex-direction: column;
  }

  /* //////////////////////////////////////////////////////////

  Footer

  //////////////////////////////////////////////////////////  */

  .footer_contents {
    height: auto;
    display: block;
    text-align: center;
  }

  .footer_contents p {
    position: relative;
    top: 0;
    display: block;
  }

  .access_logo_area {
    width: 28%;
    min-width: 105px;
    display: inline-block;
    position: relative;
    margin-top: 20px;
  }

  /* //////////////////////////////////////////////////////////

  Sousenkyo

  //////////////////////////////////////////////////////////  */

  .search_btn_wrapper {
    flex-direction: column;
  }
  .search_btn_wrapper a {
    display: inline-block;
    width: 68.2666667%;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 24px;
    border-radius: 20px;
  }
  .search_btn_wrapper a:last-child {
    margin-right: auto;
  }

  .link_category_btn li {
    width: 100%;
    margin-right: 0;
  }

  .link_category_btn.category_food li:first-child {
    order: 0;
  }
  .link_category_btn.category_food li:nth-child(2) {
    order: 6;
  }
  .link_category_btn.category_food li:nth-child(3) {
    order: 2;
  }
  .link_category_btn.category_food li:nth-child(4) {
    order: 7;
  }
  .link_category_btn.category_food li:nth-child(5) {
    order: 3;
  }
  .link_category_btn.category_food li:nth-child(6) {
    order: 8;
  }
  .link_category_btn.category_food li:nth-child(7) {
    order: 4;
  }
  .link_category_btn.category_food li:nth-child(8) {
    order: 9;
  }
  .link_category_btn.category_food li:nth-child(9) {
    order: 5;
  }
  .link_category_btn.category_food li:nth-child(10) {
    order: 10;
  }
  .link_category_btn.category_food li:nth-child(11) {
    order: 6;
  }

  .link_category_btn.category_ice li:nth-child(3) {
    order: 1;
  }
  .link_category_btn.category_ice li:nth-child(5) {
    order: 2;
  }
  .link_category_btn.category_ice li:nth-child(7) {
    order: 3;
  }
  .link_category_btn.category_ice li:nth-child(2) {
    order: 5;
  }
  .link_category_btn.category_ice li:nth-child(4) {
    order: 6;
  }
  .link_category_btn.category_ice li:nth-child(6) {
    order: 7;
  }
  .link_category_btn.category_ice li:nth-child(7) {
    order: 4;
  }

  .bnr_area {
    flex-direction: column;
  }
  .bnr_area li {
    width: 100%;
    margin-right: 0;
  }
  .bnr_area li:first-child {
    margin-bottom: 24px;
  }

  .sousenkyo_bottom_link_area {
    display: flex;
    flex-wrap: wrap;
  }
  .sousenkyo_bottom_link_block {
    width: calc(100% / 2);
  }
  .sousenkyo_bottom_link_area .sousenkyo_bottom_link_block:nth-child(2) h4 {
    display: none;
  }
  .sousenkyo_bottom_link_area .sousenkyo_bottom_link_block:nth-child(2) {
    order: 2;
  }
  .sousenkyo_bottom_link_area .sousenkyo_bottom_link_block:nth-child(3) {
    order: 1;
  }
  .sousenkyo_bottom_link_area .sousenkyo_bottom_link_block:first-child {
    order: 0;
    margin-bottom: 0;
  }
  .sousenkyo_bottom_link_area .sousenkyo_bottom_link_block:nth-child(4) {
    order: 3;
    margin-top: 24px;
  }

  .sousenkyo_bottom_link_area_bnr {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 48px;
  }
  .sousenkyo_bottom_link_area_bnr div:first-child {
    max-width: 100%;
    flex-wrap: wrap;
    margin: 0 auto;
    margin-bottom: 24px;
  }
  .sousenkyo_bottom_link_area_bnr div:first-child a:first-child {
    margin-bottom: 12px;
  }

  .sousenkyo_bottom_link_area_bnr div:last-child {
    max-width: 100%;
    width: 68.2666667%;
    margin: 0 auto;
  }

  .pet_link_area {
    flex-direction: column;
    width: 68.2666667%;
    margin: 48px auto 0;
    align-items: center;
  }
  .pet_link_area a {
    width: 100%;
    margin: 0 auto 24px;
  }

  /* //////////////////////////////////////////////////////////

  Receipt

  //////////////////////////////////////////////////////////  */

  .receipt_step {
    justify-content: center;
  }
  .receipt_course_btn {
    width: 68.2666667%;
  }

  .receipt_course_ab_btn {
    flex-direction: column;
    width: 68.2666667%;
    margin: 0 auto;
    align-items: center;
  }

  .receipt_course_ab_btn a {
    width: 100%;
    margin: 0 auto 24px;
  }

  .receipt_partner_area_wrapper {
    display: flex;
    flex-direction: column;
  }
  .receipt_partner_area_wrapper div {
    width: 100%;
    margin-right: 0px;
    margin-bottom: 24px;
  }
  .receipt_partner_area_wrapper div:nth-child(2n) {
    margin-right: 0;
    margin-bottom: 24px;
  }
  .receipt_partner_area_wrapper div:last-child {
    margin-bottom: 0;
  }
  .receipt_partner_area {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    background-color: #dce6e6;
    margin-bottom: 12px;
    font-size: 1.28rem;
  }

  .ec_shop_wrapper {
    flex-direction: column;
    max-width: 100%;
    align-items: center;
  }
  .ec_shop_wrapper a {
    width: 68.2666667%;
    margin-right: 0;
    margin-bottom: 24px;
  }
  .ec_shop_wrapper a:last-child {
    margin-bottom: 0;
  }

  .tohoku {
    order: 0;
  }
  .kanto {
    order: 1;
  }
  .kinki {
    order: 2;
  }
  .chubu {
    order: 3;
  }
  .chugokusikoku {
    order: 4;
  }
  .kyusyu {
    order: 5;
  }
  .ec {
    order: 6;
  }

  .remodal.receipt_remodal_wrapper {
    max-width: 100%;
    height: 75svh;
  }

  .receipt_modal {
    max-width: 100%;
    height: 75svh;
    min-height: auto;
  }

  /* //////////////////////////////////////////////////////////

  Drama

  //////////////////////////////////////////////////////////  */
  .drama_platform {
    display: flex;
    width: 68.2666667%;
    flex-direction: column;
    margin-top: 0;
  }
  .drama_platform a {
    width: 100%;
    margin-right: 0;
    margin-bottom: 24px;
  }
  .drama_platform a:last-child {
    margin-bottom: 0;
  }
  .drama_platform .fukidasi {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    margin-bottom: 24px;
  }
  .drama_paformers {
    margin-bottom: 48px;
  }
  .drama_special_thanks {
    margin-bottom: 48px;
  }
  .drama_special_thanks img {
    margin: 0 auto;
  }

  /* //////////////////////////////////////////////////////////

  Category

  //////////////////////////////////////////////////////////  */

  .video_block {
    width: calc((100% - 8px) / 3);
    margin-right: 4px;
    margin-bottom: 4px;
  }

  .video_block:nth-child(5n) {
    margin-right: 4px;
  }

  .video_block:nth-child(3n) {
    margin-right: 0;
  }

  .video_area .video_block_name {
    padding: 10px;
  }

  .comment_area {
    padding: 0 10px 10px 10px;
  }

  #sousenkyo .comment_area {
    padding: 10px;
  }

  .video_area .video_block_name .company_name,
  .comment_area .company_name {
    font-size: 60%;
  }

  .video_area .video_block_name .product_name,
  .comment_area .product_name {
    font-size: 75%;
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  .comment_area .comment_inner_line {
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 10px;
  }

  .comment_area .comment_votes {
    font-size: 75%;
  }

  .comment_area .comment_link {
    font-size: 75%;
  }

  #sousenkyo .video_area .video_block_name .company_name {
    padding-top: 10px;
  }

  /* //////////////////////////////////////////////////////////

  Comment

  //////////////////////////////////////////////////////////  */

  .sec_smallContent {
    flex-direction: column;
    height: auto;
  }

  .sec_smallContent::after {
    display: none;
  }

  .smallContent_inner {
    /*height:calc(100vh - 120px);*/
    height: 100vh;
    position: relative;
    margin: 0;
    padding: 40px 25px 25px;
  }

  .smallContent_title_area {
    align-items: flex-start;
  }

  .smallContent_title_area.vote {
    display: none;
  }

  .comment_write,
  .comment_submit {
    max-width: 135px;
  }

  .comment_back {
    max-width: 325px;
  }

  .comment_back_text {
    font-size: 100%;
    text-align: left;
    margin-top: 0;
  }

  .smallContent_bottom_area.winLose .comment_back_text {
    margin-top: 0;
  }

  .smallContent_title_inner .comment_icon {
    width: 24px;
    height: 20px;
    margin-left: 6px;
  }

  .smallContent_title_area button {
    position: absolute;
    right: 20px;
  }

  .smallContent_bottom_area {
    flex-direction: row-reverse;
  }

  .smallContent_bottom_area {
    margin-top: 30px;
  }

  .smallContent_comment {
    font-size: 100%;
    flex-grow: 1;
  }

  .smallContent_comment {
    margin-top: 20px;
    padding: 15px;
    max-height: 260px;
  }

  .smallContent_title_inner {
    font-size: 100%;
  }

  .smallContent_comment dl dt {
    font-size: 100%;
  }

  .smallContent_comment dl dd {
    font-size: 100%;
  }

  .smallContent_comment_write_area {
    padding: 10px;
    margin-top: 10px;
  }

  /* //////////////////////////////////////////////////////////

  Vote

  //////////////////////////////////////////////////////////  */

  .smallContent_inner_vote {
    position: relative;
    margin: 0;
    height: auto;
    flex-direction: column;
    flex-wrap: wrap;
  }

  .vote_video_ara {
    width: 100%;
    justify-content: center;
    padding: 40px;
  }

  .vote_video_ara a {
    max-width: 300px;
    margin-left: 0px;
  }

  .vote_video_area_btn {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    margin-bottom: 10px;
  }

  .vote_video_area_btn.typeA {
    display: flex;
    width: auto;
    justify-content: flex-end;
    margin-bottom: 10px;
    position: absolute;
    right: 20px;
    top: 40px;
  }

  .vote_video_area_btn button {
    width: 30px;
    height: 30px;
    background: url('../images/close_btn_w.png') no-repeat;
    background-size: contain;
    border: none;
    cursor: pointer;
    margin-left: 30px;
    padding: 0;
    transition: 0.3s;
  }

  .vote_content_area {
    width: 100%;
    padding: 0 25px 25px;
  }

  .vote_title_area {
    border-top: 2px dotted #ffffff;
    padding-top: 25px;
    margin-top: 0;
  }

  .vote_btn_area {
    display: flex;
    flex-wrap: wrap;
    margin-top: 30px;
  }

  .vote_btn_area button {
    width: calc((100% - 20px) / 3);
    margin-right: 10px;
  }

  .smallContent_bottom_area_vote {
    margin-top: 20px;
  }

  .smallContent_bottom_area_vote .vote_bottom_area img {
    max-width: 296px;
    margin-bottom: 10px;
  }

  .smallContent_bottom_area_vote .vote_bottom_area p {
    font-size: 80%;
  }

  .like_btn_wrapper {
    margin-top: 30px;
  }

  .like_btn {
    position: relative;
    top: 5px;
    right: 0;
    min-width: 30px;
  }

  .vote_bottom_txt_area {
    margin-top: 20px;
    font-size: 70%;
  }

  /* //////////////////////////////////////////////////////////

  Win & Lose

  //////////////////////////////////////////////////////////  */

  .win_lose_img {
    width: 100%;
    padding-left: 0;
    padding: 40px 25px 25px;
    justify-content: center;
    flex-direction: column-reverse;
  }

  .win_lose_img div img {
    width: 100%;
    max-width: 325px;
  }

  .smallContent_bottom_area.winLose {
    align-items: center;
    justify-content: center;
  }

  .smallContent_bottom_area.winLose.agree {
    flex-direction: row;
    justify-content: flex-start;
  }

  /* Lose Content 2024 */
  .smallContent_inner_lose {
    max-width: 100%;
    height: 100%;
    padding: 40px 0 35px;
    flex-direction: column;
    position: relative;
  }

  .lose_content_button {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding: 0 20px;
  }

  .lose_content_button button {
    /*width: 30px;*/
    height: 30px;
    margin-left: 30px;
  }

  .lose_content_wrapper {
    padding-top: 20px;
    flex-direction: column;
    background-color: #0c318b;
  }

  .lose_content {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-right: none;
    padding: 0 20px 40px 20px;
  }

  .lose_content .vote_content_area {
    padding: 0;
    width: 100%;
    text-align: center;
  }

  .lose_content .vote_content_area .vote_title_area {
    padding: 20px;
    border: none;
  }

  .lose_content .vote_content_area .vote_title_area p {
    letter-spacing: normal;
    font-size: 2.4rem;
  }

  .lose_content .vote_content_area textarea {
    padding: 10px;
    font-size: 1.8rem;
  }

  .lose_content .comment_submit {
    max-width: 100%;
  }

  .lose_img {
    max-width: 360px;
    margin: auto;
  }

  .lose_content_slider {
    display: flex;
    width: 100%;
    padding: 0px 20px 0 20px;
    flex-direction: column;
  }

  .lose_content_slider::before {
    display: block;
    content: '';
    border-top: 1px dashed #ffffff;
    width: 100%;
    height: 40px;
  }

  .lose_content_slider .video_block {
    width: 100%;
  }

  .lose_content_slider .video_block .comment_area {
    background-color: #002868;
    padding: 0px 8px 10px 8px;
  }

  .lose_content_slider .video_block .comment_area .product_name {
    font-size: 1.4rem;
  }

  /* //////////////////////////////////////////////////////////

Favorite

//////////////////////////////////////////////////////////  */

  .favorite_outline {
    margin: 0 auto 48px;
    padding: 0 24px;
  }
  .favorite_outline p {
    text-align: left;
  }
  .favorite_outline .txt_small_red {
    padding: 24px 0;
  }
  .favorite_outline button {
    width: 68.2666667%;
    margin: auto;
  }
  .favorite_outline button:hover {
    opacity: 0.7;
  }

  /* //////////////////////////////////////////////////////////

朝食向上委員会（仮）

//////////////////////////////////////////////////////////  */

  .breakfast_outline {
    padding: 0 24px;
  }

  /* ///////////////////////////////////////////////////////// */

  /* modal */

  /* ///////////////////////////////////////////////////////// */

  .video_wrapper {
    margin-bottom: 0;
  }
  /*
  .video_wrapper.vertical {
    height: 94%;
    height: 100%;
  }*/

  .remodal {
    padding: 8px;
    /*height: auto;*/
    /*height: 100%;*/
    /*max-width: 75%;*/
  }

  .remodal-wrapper {
    padding: 0;
  }
}
@media screen and (max-width: 480px) {
  /* //////////////////////////////////////////////////////////

  Base style

  //////////////////////////////////////////////////////////  */

  body {
    font-size: 14px;
    font-size: 1.4rem;
  }

  /* //////////////////////////////////////////////////////////

  TOP page

  //////////////////////////////////////////////////////////  */
  .top_sec_a_course a {
    width: 80%;
  }

  /* //////////////////////////////////////////////////////////

  Header

  //////////////////////////////////////////////////////////  */

  .header_inner .login_btn {
    padding: 8px 12.5px;
    max-width: 100px;
  }

  .header_logo {
    max-width: 240px;
  }

  .header_myPage {
    margin-left: 24px;
    max-width: 120px;
  }

  .header_inner_right {
    padding: 8px 12.5px;
  }

  .nav_close_btn img {
    width: 20px;
    height: 20px;
  }

  /* //////////////////////////////////////////////////////////

  Contents

  //////////////////////////////////////////////////////////  */

  .content_main_img {
    margin-top: 10px;
  }

  .breadcrumbs {
    padding: 0 12.5px;
    padding-top: 10px;
  }

  .breadcrumbs.type_b {
    padding-top: 10px;
  }

  .breadcrumbs ul li {
    font-size: 75%;
  }

  .breadcrumbs ul li span {
    width: 5px;
    height: 10px;
    background-size: 5px 10px;
    margin: 0 6px;
  }

  .content_inner {
    padding: 0 12.5px;
  }

  #frozenfoods .content_inner:nth-child(2),
  #ice .content_inner:nth-child(2) {
    padding: 4px;
  }

  .content_inner.content_inner_video {
    padding: 0;
  }

  .sec_first {
    padding-bottom: 24px;
  }

  .sec {
    padding: 24px 0;
  }

  .btn_oubo {
    margin-top: 30px;
  }

  /* //////////////////////////////////////////////////////////

  Footer

  //////////////////////////////////////////////////////////  */

  .footer_contents a {
    display: inline-block;
  }

  /* //////////////////////////////////////////////////////////

  Back to Top

  //////////////////////////////////////////////////////////  */

  .is_page_top {
    width: 40px;
    height: 40px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
  }

  .is_page_top img {
    width: 18px;
    transform: rotate(180deg);
  }

  /* //////////////////////////////////////////////////////////

  Slider

  //////////////////////////////////////////////////////////  */

  /* //////////////////////////////////////////////////////////

  Sousenkyo

  //////////////////////////////////////////////////////////  */

  .link_category_btn {
    margin-top: 30px;
  }

  .link_category_btn li a {
    padding: 15px 10px;
  }

  .link_category_btn li span {
    width: 7px;
    height: 14px;
    background-size: 7px 14px;
  }

  /* //////////////////////////////////////////////////////////

  Category

  //////////////////////////////////////////////////////////  */

  .video_block_wrapper {
    margin: 30px 0 30px;
  }

  .video_block {
    width: calc((100% - 4px) / 3);
    margin-right: 2px;
    margin-bottom: 2px;
  }

  .video_block:nth-child(5n) {
    margin-right: 2px;
  }

  .video_block:nth-child(3n) {
    margin-right: 0;
  }

  .video_area::after {
    width: 36px;
    height: 25px;
  }

  .video_area span {
    padding: 2px 4px;
    font-size: 60%;
  }

  .video_area .video_img::after {
    width: 40px;
  }

  #sousenkyo .comment_area .company_name {
    padding-top: 15px;
    width: calc(100% - 10px);
  }

  #sousenkyo .comment_area .product_name {
    padding-top: 0;
  }

  #sousenkyo .comment_area span {
    bottom: 10px;
    right: 10px;
  }

  /* //////////////////////////////////////////////////////////

  Comment

  //////////////////////////////////////////////////////////  */

  .smallContent_inner {
    padding: 25px 12.5px;
  }

  .smallContent_bottom_area {
    margin-top: 15px;
  }

  .comment_back_text {
    font-size: 80%;
  }

  .smallContent_title_area button {
    width: 20px;
    height: 20px;
  }

  .smallContent_title_area button {
    right: 0;
  }

  .smallContent_title_area.thanks {
    right: 0;
  }

  .smallContent_comment_write_area.comment {
    min-height: 300px;
  }

  .smallContent_comment {
    margin-top: 10px;
    padding: 10px;
    max-height: 400px;
  }

  .smallContent_comment dl {
    padding: 10px 0px;
  }

  /* //////////////////////////////////////////////////////////

  Vote

  //////////////////////////////////////////////////////////  */

  .vote_video_ara {
    padding: 12.5px;
  }

  .vote_video_ara a {
    max-width: 150px;
  }

  .vote_title_area {
    border-top: 2px dotted #ffffff;
    padding-top: 12.5px;
    margin-top: 0;
  }

  .vote_btn_area button {
    width: calc((100% - 8px) / 3);
    margin-right: 4px;
  }

  .vote_content_area {
    width: 100%;
    padding: 0 12.5px 12.5px;
  }

  .smallContent_bottom_area_vote .vote_bottom_area img {
    max-width: 224px;
  }

  .vote_btn_area {
    margin-top: 12.5px;
  }

  .vote_video_area_btn button {
    width: 20px;
    height: 20px;
  }

  .vote_video_area_btn.typeA {
    right: 12.5px;
    top: 12.5px;
  }

  /* //////////////////////////////////////////////////////////

  Win & Lose

  //////////////////////////////////////////////////////////  */

  .win_lose_img {
    padding: 12.5px;
  }

  .btn_agree {
    margin-top: 20px;
  }

  .smallContent_bottom_area.win_lose {
    margin-top: 15px;
  }

  .win_lose_img div img {
    max-width: 200px;
  }

  .vote_title_area_txt_s.secound {
    padding-top: 1em;
  }

  /* Lose Content 2024 */
  .smallContent_inner_lose {
    max-width: 100%;
    height: 100%;
    padding: 12.5px 0 12.5px;
    flex-direction: column;
    position: relative;
  }

  .lose_content_button {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding: 0 12.5px;
  }

  .lose_content_button button {
    /*width: 20px;*/
    height: 20px;
    margin-left: 30px;
  }

  .lose_content_wrapper {
    padding-top: 20px;
    flex-direction: column;
    background-color: #0c318b;
  }

  .lose_content .vote_content_area .vote_title_area p {
    font-size: 1.8rem;
  }

  .lose_content .vote_content_area textarea {
    font-size: 1.6rem;
  }

  .lose_img {
    max-width: 260px;
  }

  .lose_content_slider .video_block .comment_area .product_name {
    font-size: 0.9rem;
  }

  /* //////////////////////////////////////////////////////////

朝食向上委員会（仮）

//////////////////////////////////////////////////////////  */

  .breakfast_outline {
    padding: 0 12px;
  }

  /* ///////////////////////////////////////////////////////// */

  /* Modal */

  /* ///////////////////////////////////////////////////////// */

  .video_wrapper.vertical {
    /*height: 100%;*/
    display: flex;
    justify-content: center;
  }

  .remodal {
    height: 100vh;
    /*height: auto;*/
    max-width: 280px;
    padding-top: 20px;
    padding-bottom: 20px;
  }
}

/* ///////////////////////////////////////////////////////// */

/* questionnaire */

/* ///////////////////////////////////////////////////////// */
#questionnaire .comment_area {
  font-weight: normal;
  text-align: center;
}

.questionnaire_content_area {
  overflow: scroll;
}

.questionnaire_content_title_area {
  text-align: center;
  color: #ffffff;
  margin-bottom: 30px;
}

.questionnaire_content_title {
  font-size: 150%;
  font-weight: bold;
}

.questionnaire_content_area dl {
  color: #ffffff;
  margin-bottom: 30px;
}

.questionnaire_content_area dl dt {
  background-color: #092466;
  padding: 10px;
  font-weight: bold;
  width: 100%;
}

.questionnaire_content_area dl dd {
  padding: 10px;
}

.questionnaire_content_area dl dd span {
  display: block;
  margin-left: 5px;
  position: relative;
}

.questionnaire_content_area dl dd ul {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
}

.questionnaire_content_area dl dd ul li {
  margin-right: 30px;
  list-style: none;
}

.questionnaire_content_area dl dd ul li:last-child {
  margin-right: 0;
}

.questionnaire_content_area dl dd ul li .input_txt {
  margin-top: 10px;
}

input[type='radio'],
input[type='checkbox'] {
  margin-right: 4px;
}

input[type='text'] {
  width: 100%;
}

.form_thanks_area {
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

@media screen and (max-width: 768px) {
  #questionnaire .smallContent_inner {
    height: auto;
  }

  #questionnaire .smallContent_inner.thanks {
    height: 100vh;
  }
}

@media screen and (max-width: 480px) {
  .questionnaire_content_title_area {
    margin-bottom: 20px;
  }

  .questionnaire_content_title {
    font-size: 120%;
  }

  .questionnaire_content_area dl dt {
    margin-bottom: 15px;
  }

  .questionnaire_content_area dl dd ul {
    flex-direction: column;
  }

  .questionnaire_content_area dl dd ul li {
    margin-bottom: 15px;
  }

  .questionnaire_content_area dl dd ul li .input_txt {
    margin-top: 15px;
  }
}