@charset "utf-8";
/**
*
*	/products/ad/cm/css/index.css
*/

/*************************************************************************
 *		CM情報のCSSを定義
*************************************************************************/
html {
  overflow-y: unset;
  margin-right: 0 !important;
}
body {
  width: 100%;
  overflow-y: scroll;
}
.cm_container {
	box-sizing: border-box;
	margin-bottom:120px;
  margin-left:auto;
  margin-right:auto;
  padding:0 15px;
	overflow:hidden;
}
@media (min-width: 768px) {
	.cm_container {
		width:1240px;
	}
}
@media screen and (max-width: 767px) {
	.cm_container {
		margin-bottom:80px;
		padding-left:calc(15px - 2%);
		padding-right:calc(15px - 2%);
	}
}

.cm_title01 {
	margin-bottom:24px;
}
.cm_title01 > h1 {
  padding-top:.1em;
	font-size:34px;
	color:#000;
	font-weight:700;
	line-height:1.5;
}
@media screen and (max-width: 767px) {
	.cm_title01 {
		margin-bottom:18px;
	}
	.cm_title01 > h1 {
		font-size:24px;
	}
}
   
.cm_section {
  font-size: 16px;
}

/* 3カラムレイアウト */
.cm_list {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 28px;
}
@media screen and (max-width: 767px) {
	.cm_list {
    display: flex;
    flex-wrap: wrap;
    gap: 30px 13px;
  }
}

/* ボックス用 */
.cm_item {
  position: relative;
  display: flex;
  flex-direction: column;
	width: calc(100% / 3 - 28px * 2 / 3);
  background-color: #f5f5f5;
}
.cm_item > a:hover .thumb {
  opacity: .7;
}
.cm_item .cm_item_movie {
  margin-bottom: 20px;
}
.cm_item .thumb  {
	position: relative;
}
.cm_item .thumb::before  {
	position: absolute;
  content: "";
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: #10218b;
  width: 66px;
  height: 66px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .41)
}
.cm_item .thumb::after  {
	position: absolute;
  content: "";
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-40%, -50%);
  border-style: solid;
  border-color: transparent transparent transparent #fff;
  border-width: 15px 0 15px 25px;
}
.cm_item .thumb img {
	width: 100%;
  height: auto;
}
.cm_item h2 {
  margin: 0 24px;
  padding-top:24px;
	font-size: 125%;
  letter-spacing: 0.04em;
}
.cm_item .cm_item_text {
  margin: 0 24px;
  padding: 20px 0 24px;
  border-top: 1px solid #ccc;
}

.cm_item_text_link {
	display:block;
	width:fit-content;
	box-sizing: border-box;
	position:relative;
}
.cm_item_text_link::before {
	content:"";
	display:block;
	background-size:cover;
	background-repeat: no-repeat;
	position:absolute;
	top:calc(.75em - 10px);
	left:0;
}
.cm_item_text_link.ico03 {
	padding-left:16px;	
}
.cm_item_text_link.ico03::before {
	width:10px;
	height:10px;
	background-image:url(/common/img/cmp_ico_img_03.svg);
	top:calc(.75em - 5px);
}

.cm_item .cm_item_new {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70px;
  height: 30px;
  color: #fff;
  font-size: 100%;
  background-color: #e60009;
  z-index: 1;
}

.cm_btn {
  position:relative;
	display:flex;
	justify-content: center;
	align-items: center;
	border:none;
  margin-left:auto;
	margin-right:auto;
	padding:10px 16px;
  box-sizing: border-box;
  background-color: #005ab4;
  font-size: 16px;
  color: #fff;
  cursor: pointer;
}
@media (min-width: 768px) {
  .cm_btn:hover {
    opacity: .7;
  }
}
.cm_more_btn,
.cm_close_btn {
  width: 310px;
  min-height: 54px;
  margin: 60px auto 0;
}
.cm_more_btn.cm_btn.anker::after,
.cm_close_btn.cm_btn.anker::after {
  content:"";
	flex-shrink: 0;
	display:block;
	width:20px;
	height:20px;
	background-image:url(/common/img/cmp_ico_img_01.svg);
	background-size:cover;
  transform: rotate(90deg);
  position: absolute;
  right: 25px;
}
.cm_close_btn.cm_btn.anker::after {
  transform: rotate(-90deg);
}

@media screen and (max-width: 767px) {
  /* ボックス用 */
  .cm_item {
    position: relative;
    display: flex;
    flex-direction: column;
    width: calc(100% / 2 - 13px* 1 / 2);
  }
  .cm_item:first-child {
    width: 100%;
  }
  .cm_item:not(:first-child) {
    background-color: transparent;
  }
  .cm_item .thumb::before  {
    position: absolute;
    content: "";
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    width: min(calc(30 / 375 * 100 * 1vw), 56px);
    height: min(calc(30 / 375 * 100 * 1vw), 56px);
  }
  .cm_item:first-child .thumb::before  {
    width: min(calc(56 / 375 * 100 * 1vw), 95px);
    height: min(calc(56 / 375 * 100 * 1vw), 95px);
  }
  .cm_item .thumb::after  {
    position: absolute;
    content: "";
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-40%, -50%);
    border-style: solid;
    border-color: transparent transparent transparent #fff;
    border-width: min(calc(8 / 375 * 100 * 1vw), 15px) 0 min(calc(8 / 375 * 100 * 1vw), 15px) min(calc(13 / 375 * 100 * 1vw), 25px);
  }
  .cm_item:first-child .thumb::after  {
    border-width: min(calc(15 / 375 * 100 * 1vw), 25px) 0 min(calc(15 / 375 * 100 * 1vw), 25px) min(calc(25 / 375 * 100 * 1vw), 45px);
  }
  .cm_item h2 {
    margin: 0;
    padding-top:20px;
    font-size: min(calc(14 / 375 * 100 * 1vw), 16px);
  }
  .cm_item:first-child h2 {
    margin: 0 15px;
    font-size: min(calc(16 / 375 * 100 * 1vw), 20px);
  }
  .cm_item .cm_item_text {
    margin: 0;
    padding: 15px 0;
    font-size: min(calc(12 / 375 * 100 * 1vw), 14px);
  }
  .cm_item:first-child .cm_item_text {
    margin: 0 15px;
    font-size: min(calc(14 / 375 * 100 * 1vw), 16px);
  }
  .cm_item:not(:first-child) .cm_item_text {
    padding: 0;
    border: none;
  }

  .cm_item .cm_item_new {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: max(55px, 10vw);
    height: max(20px, 5vw);
    color: #fff;
    font-size: min(calc(10 / 375 * 100 * 1vw), 16px);
    z-index: 1;
  }
  .cm_item:first-child .cm_item_new {
    width: max(60px, 16vw);
    height: max(22px, 7vw);
    font-size: min(calc(16 / 375 * 100 * 1vw), 18px);
  }

  .cm_more_btn, .cm_close_btn {
    width: calc(100% - 70px - 16px);
    margin: 30px auto 0;
    padding: 10px 20px;
  }
}


/* # =================================================================
#	Modal
# ================================================================= */
/* Magnific Popup CSS */
.mfp-bg {
  overflow: hidden;
  position: fixed !important;
  z-index: 10042;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000000;
  opacity: 0.8;
  animation: mfp-bg-fadein 0.3s linear;
}
.mfp-bg.mfp-ready.mfp-removing {
  opacity: 0;
  transition: opacity 0.3s linear 0.3s;
}
.mfp-wrap {
  position: fixed !important;
  z-index: 10043;
  top: 0 !important;
  left: 0;
  width: 100%;
  height: 100%;
  /*outline: none !important;*/
}
html:not(.sp) .mfp-wrap {
  overflow-y: scroll !important;
}
.mfp-container {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  width: 100%;
  height: 100%;
  text-align: center;
}
.mfp-container:before {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  content: "";
}
.mfp-align-top .mfp-container:before {
  display: none;
}
.mfp-content {
  display: inline-block;
  position: relative;
  z-index: 10045;
  margin: 20px auto;
  opacity: 0;
  text-align: left;
  vertical-align: middle;
  /*transform: scale(0.9);*/
  -webkit-backface-visibility: hidden;
}
.mfp-wrap.mfp-ready .mfp-content {
  opacity: 1;
  transition: transform 0.3s ease-out, opacity 0.3s linear;
}
.mfp-wrap.mfp-ready.mfp-removing .mfp-content {
  opacity: 0;
  transition: transform 0.2s ease-in 0.2s, opacity 0.2s linear 0.2s;
  /*transform: scale(0.9);*/
}
.mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content {
  width: 100%;
  padding: 70px 30px 40px;
  cursor: auto;
}
.mfp-inline-holder .mfp-content > div {
  position: relative;
  margin: 0 auto;
}
.mfp-inline-holder .mfp-content .content {
  position: relative;
  padding: 30px 30px 10px;
}
.mfp-ajax-cur {
  cursor: progress;
}
.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: zoom-out;
  cursor: -moz-zoom-out;
}
.mfp-zoom {
  cursor: zoom-in;
  cursor: -webkit-zoom-in;
  cursor: pointer;
}
.mfp-auto-cursor .mfp-content {
  cursor: auto;
}
.mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter {
  user-select: none;
}
.mfp-loading.mfp-figure {
  display: none;
}
.mfp-hide {
  display: none !important;
}
.mfp-preloader {
  overflow: hidden;
  position: absolute;
  z-index: 10044;
  top: 50%;
  width: 100%;
  height: 60px;
  margin-top: -30px;
  text-indent: -9999px;
}
.mfp-preloader:before {
  display: block;
  width: 60px;
  height: 60px;
  margin: 0 auto;
  background-repeat: no-repeat;
  /*background-image: url(../images/preloader.gif);*/
  background-position: 0 0;
  background-size: 60px 60px;
  content: "";
}
.mfp-s-ready .mfp-preloader {
  display: none;
}
.mfp-s-error .mfp-content {
  display: none;
}
.mfp-close {
  position: absolute;
  top: -40px;
  right: 0;
  width: 81px;
	height: 26px;
  padding: 0;
  text-indent: -9999px;
  background: url(/products/ad/cm/img/lightbox_btn_close.png) no-repeat left top;
	cursor: pointer;
  border: none;
}
html:not(.sp) .mfp-close:hover {
  opacity:0.7;
}
.mfp-iframe-holder .mfp-content {
  max-width: 960px;
  width: 100%;
  padding: 70px 30px 40px;
  background: #fff;
  line-height: 0;
  box-sizing: border-box;
}
.mfp-iframe-scaler {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
}
.mfp-iframe-scaler iframe {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 767px) {
  .mfp-iframe-holder .mfp-content {
    width: 96%;
    padding: 65px 15px 25px;
  }
}


.sf {
	font-size: 80% !important;
}
.sf p {
	line-height:1.4;
	letter-spacing: 0.025em;
}
.mT18 {
	margin-top: 18px;
}
.txtM {
	font-size: 9.5pt;
	letter-spacing: 0.025em;
}