@charset "utf-8";

/*******html*******/
@media print, screen and (min-width: 768px){
  html {
      font-size: 14px;
  }
}
@media screen and (max-width: 767px){
  html {
      font-size: 3.2vw;
  }

}
/*******title-none*******/
#header {
    display: none;
}

/*******customize*******/
#main .l-container.fp-wrap{
	line-height: 1;
	margin-top: 0;
	padding: 0;
	width: 100%;
	max-width: none;
}
#main .l-container.fp-wrap .-h2ttl{
	display:none;
}

body#pagetop {
    padding-top: 95px;
}

.l-main {
	overflow-x: visible;
}

.l-main-box {
    width: 100%;
}
.l-pagebody{
	background:#fff;
	padding: 0;
}


	/**************-768px***************/
	@media screen and (max-width: 768px) {
		body#pagetop {
			padding-top: 29vw;
		}
		#main .l-container.fp-wrap{
			margin: 0;
		}
		.is-fixed #main{
			margin:0;
		}
	}

	/**************-560px***************/
	@media screen and (max-width: 560px) {
		body#pagetop {
			padding-top: 15vw;
		}

	}

/* common
---------------------------------------------------------------------------- */
#banner-distribution{font-family: 'Noto Sans JP', sans-serif;font-feature-settings: "pkna";padding-bottom: calc(16rem / 1.4);}
#banner-distribution h2,
#banner-distribution h3,
#banner-distribution h4,
#banner-distribution h5,
#banner-distribution p{
  line-height: 1.5em;
  letter-spacing: 0.05em;
  font-weight: 500;
  font-size: 1.6rem;
  color: #333333;
  margin: 0;
  padding: 0;
}
#banner-distribution img{max-width: 100%;height:auto;display:block;}
#banner-distribution .span-br{display: inline-block;}
#banner-distribution .pc-none{display: none;}
#banner-distribution .sp-none{display: block;}

	/**************-768px***************/
	@media screen and (max-width: 768px) {
	  #banner-distribution .pc-none{display: block;}
	  #banner-distribution .sp-none{display: none;}
	#banner-distribution{padding-bottom: calc(6rem / 1.4);}
	}

/*******wrapper*******/
#banner-distribution .l-inner{
  padding-left: calc(4rem / 1.4);
  padding-right: calc(4rem / 1.4);
  max-width:1200px;
  margin-inline: auto;
}
  /***-768px***/
  @media screen and (max-width: 768px) {
    #banner-distribution .l-inner{
      padding-left: calc(2rem / 1.4);
      padding-right: calc(2rem / 1.4);
    }
  }

/*******txt*******/
#banner-distribution ._en{font-family: 'Cabin', sans-serif;}



/* mv-wrap
---------------------------------------------------------------------------- */
#banner-distribution .mv-wrap{
  width: 100%;
  position: relative;
  display:flex;
  justify-content: center;
  align-items:center;
  background: url(../../img/banner-distribution/mv_pc.webp) center / cover no-repeat;
  height: calc(44rem / 1.4);
}

#banner-distribution .mv-wrap .-logo{
	position:absolute;
	top: calc(3rem / 1.4);
	left: calc(4rem / 1.4);
}

#banner-distribution .mv-wrap .-txt{
	text-align:center;
}
#banner-distribution .mv-wrap .-txt h2{
	color:#fff;
	font-size:calc(4rem / 1.4);
	border-bottom:1px solid;
	display:inline-block;
	padding-bottom:calc(3rem / 1.4);
	margin-bottom: calc(3rem / 1.4);
}
#banner-distribution .mv-wrap .-txt p{
	color:#fff;
	font-size:calc(1.8rem / 1.4);
}

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

		#banner-distribution .mv-wrap .mv__txt{
			padding: calc(2rem / 1.4);
			width: 52%;
		}
		#banner-distribution .mv-wrap .mv__img{
			width: 18%;
		}
		#banner-distribution .mv-wrap .mv__form{
			margin-right:1%;
		}

	}

	/**************-768px***************/
	@media screen and (max-width: 768px) {
	#banner-distribution .mv-wrap{
      height: calc(35rem / 1.4);
      background: url(../../img/banner-distribution/mv_sp.webp) center / cover no-repeat;
    }
		#banner-distribution .mv-wrap .-txt h2{
			font-size:calc(3rem / 1.4);
			padding-bottom:calc(2rem / 1.4);
			margin-bottom: calc(2rem / 1.4);
		}
		#banner-distribution .mv-wrap .-txt p{
			font-size:calc(1.6rem / 1.4);
		}
		#banner-distribution .mv-wrap .-logo{
			top: calc(2rem / 1.4);
			left: calc(2rem / 1.4);
			width: calc(12rem / 1.4);
		}
	}

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

	}

/* WebP対応 */
@media screen and (max-width: 767px) {
	.no-webp #banner-distribution .mv-wrap {
		background-image:url(../../img/banner-distribution/mv_pc.jpg);
	}
}
@media print, screen and (min-width: 768px) {
	.no-webp #banner-distribution .mv-wrap {
		background-image:url(../../img/banner-distribution/mv_sp.jpg);
	}
}


/* cw
---------------------------------------------------------------------------- */
#banner-distribution .cw {
	width: 100%;
	padding: calc(8rem / 1.4) 0 calc(6rem / 1.4);
	box-sizing:border-box;
}

#banner-distribution .cw .cw-flex{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
}


	/**************-560px***************/
	@media screen and (max-width: 560px) {
		#banner-distribution .cw {padding: calc(6rem / 1.4) 0;}


	}


/* title
---------------------------------------------------------------------------- */

#banner-distribution .c-ttl{
	text-align:center;
	margin-bottom: calc(4rem / 1.4);
}
#banner-distribution .c-ttl h3{
	color:#213787;
	font-size:calc(3.2rem / 1.4);
	border-bottom:1px solid;
	display:inline-block;
	padding-bottom:3px;
	margin-bottom: 6px;
	font-weight: bold;
}
#banner-distribution .c-ttl p{
	color:#D4D9E9;
}


	/**************-768px***************/
	@media screen and (max-width: 768px) {
		#banner-distribution .c-ttl h3{
			font-size: calc(2.4rem / 1.4);
		}
	}
	/**************-560px***************/
	@media screen and (max-width: 560px) {
	}


/* point
---------------------------------------------------------------------------- */
#point{
	background: linear-gradient(transparent 60%, #F2F4FB 60%);
}
#point .cw-flex-box{
	width: 24%;
	background: #fff;
	padding: calc(1.6rem / 1.4);
	border-radius: 1rem;
	box-shadow: 0 0 1rem rgba(19,58,113,0.2);
	position:relative;
	box-sizing: border-box;
}
#point .-ribbon{
	position:absolute;
	top:0;
	left: calc(1rem / 1.4);
	text-align:center;
	background:#213787;
	color:#fff;
	font-family: 'Cabin', sans-serif;
	font-size: calc(2.2rem / 1.4);
	padding: 0 calc(1.2rem / 1.4) calc(1rem / 1.4);
	clip-path: polygon(0 0, 100% 0%, 100% 100%, 50% 92%, 0 100%);
}
#point .-ribbon span{
	font-size: 10px;
}
#point .-img{
	background:#FBF6F1;
	border-radius:1rem 1rem 0 0;
	padding:calc(1.6rem / 1.4);
}
#point .-img img{
	max-width:calc(5rem / 1.4);
	margin-inline:auto;
}
#point h4{
	font-size:calc(1.8rem / 1.4);
	color:#F33E07;
	font-weight:bold;
	text-align:center;
	letter-spacing: normal;
	padding-top:calc(1.6rem / 1.4);
	padding-bottom:calc(.8rem / 1.4);
}

#point p{
	font-size:13px;
}

	/**************-768px***************/
	@media screen and (max-width: 768px) {
		#point .cw-flex-box{
			width: 100%;
			margin-bottom: 10px;
		}
		#point{
			background: linear-gradient(transparent 27%, #F2F4FB 27%);
		}
	}

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


	}


/* banners
---------------------------------------------------------------------------- */
#banners .cw-flex{
	margin-bottom:10px;
}
#banners .cw-flex-t{
	width: 20%;
	background:#213787;
	display:flex;
	justify-content:center;
	align-items:center;
	text-align:center;
	border-radius:calc(1rem / 1.4) 0 0 calc(1rem / 1.4);
}
#banners .cw-flex-t h4{
	color:#fff;
	font-size:calc(2rem / 1.4);
	font-weight:bold;
}
#banners .cw-flex-d{
	width: 80%;
	border:1px solid #DEDEDE;
	box-sizing:border-box;
	border-radius:0 calc(1rem / 1.4) calc(1rem / 1.4) 0;
	padding:calc(3rem / 1.4) calc(4.8rem / 1.4);
}
#banners .cw-flex-d > p{
	font-size:calc(1.6rem / 1.4);
	margin-bottom:10px;
}
#banners .cw-flex-d > p a{
	font-weight:bold;
	color:#213787;
	text-decoration:none;
}
#banners .cw-flex-d > p a:hover{
	text-decoration:underline;
}
#banners .cw-flex-d-txt{
	background:#FCF5EE;
	border-radius:1rem;
	margin-top:calc(5rem / 1.4);
	padding: 0 calc(4rem / 1.4) calc(2.4rem / 1.4);
	position:relative;
	display: flex;
	flex-wrap: wrap;
}
#banners .cw-flex-d-txt .-txt{
	width:100%;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: calc(1.6rem / 1.4);
	color: #0A0A0A;
	line-height: 1.5em;
	font-weight: 500;
	word-wrap: break-word;
}
#banners .cw-flex-d-txt p{
	color:#213787;
	font-weight:bold;
	font-size: calc(2rem / 1.4);
	margin-right: calc(1.6rem / 1.4);
}
#banners .cw-flex-d-txt button {
  appearance: none;
  border: 0;
  background:transparent;
  cursor:pointer;
  font-family: 'Noto Sans JP', sans-serif;
border:2px solid #213787;
 border-radius: 2rem;
	overflow:hidden;
	  background: #213787;
}
#banners .cw-flex-d-txt button:hover{
  opacity:0.8;
}
#banners .cw-flex-d-txt button::before {
  background: #213787;
  color: #fff;
  padding: 2px  calc(2rem / 1.4);
  font-size: calc(1.6rem / 1.4);
  font-weight: bold;
  content: 'コピーする';
}
#banners .cw-flex-d-txt button._on::before {
  background: #fff;
  color: #213787;
  content: 'コピーしました';
}

#banners .cw-flex-d-txt p,#banners .cw-flex-d-txt button {
  transform: translateY(-1rem);
}
	/**************-768px***************/
	@media screen and (max-width: 768px) {
		#banners .cw-flex-t,
		#banners .cw-flex-d{
			width: 100%;
		}
		#banners .cw-flex-t{
			padding: calc(1rem / 1.4);
			border-radius: calc(1rem / 1.4) calc(1rem / 1.4) 0 0;
		}
		#banners .cw-flex-d{
			padding: calc(2rem / 1.4) calc(2rem / 1.4);
			border-radius: 0 0 calc(1rem / 1.4) calc(1rem / 1.4);
		}
		#banners .cw-flex-d-txt{
			margin-top: calc(4rem / 1.4);
			padding: 0 calc(2rem / 1.4) calc(2rem / 1.4);
		}

	}

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


	}

/* banners
---------------------------------------------------------------------------- */
#precautions .c-ttl{
	position:absolute;
	top:0;
	left:50%;
	min-width: 380px;
	transform:translate(-50%,-50%);
	background: #fff;
	padding-inline: calc(5rem / 1.4);
}
#precautions .cw-box{
	border:1px solid #213787;
	border-radius:2rem;
	padding: calc(7rem / 1.4)  calc(6rem / 1.4) calc(4rem / 1.4) calc(8rem / 1.4);
	position: relative;
}
#precautions ul li{
	padding-bottom:10px;
	font-size: calc(1.6rem / 1.4);
	list-style: disc;
	font-weight: 500;
	line-height: 1.5em;
}

	/**************-768px***************/
	@media screen and (max-width: 768px) {
		#precautions .cw-box{
			padding: calc(5rem / 1.4)  calc(2rem / 1.4) calc(2rem / 1.4) calc(4rem / 1.4);
		}
		#precautions .c-ttl{
			min-width: 75vw;
			padding-inline: calc(2rem / 1.4);
		}
	}

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


	}