/* /brand/hapideli20th/css/style.css */

@charset "UTF-8";

/* 基本 */
.pcOnly{
	display: block !important;
}
.spOnly{
	display: none !important;
}
.mb00{margin-bottom: 0 !important;}
.mb05{margin-bottom: 5px !important;}
.mb10{margin-bottom: 10px !important;}
.mb20{margin-bottom: 20px !important;}
.mb30{margin-bottom: 30px !important;}
.mb40{margin-bottom: 40px !important;}
.mt00{margin-top: 0 !important;}
@media screen and (max-width: 639px){
	.pcOnly{
		display: none !important;
	}
	.spOnly{
		display: block !important;
	}
}
.brandCont {
	padding: 0;
}

.mainWrap{
	padding: 0;
}

.mainWrapInner {
	background-color: #FCE0DC;
}

.main {
	padding: 45px 0 5px 0;
}

.main_sec {
	padding: 20px 0 5px 0;
}

section {
	font-family: 'Noto Sans JP', sans-serif;
	color: #400000;
}

section a:link,
section a:visited p,
section a:hover p,
section a:active p {
	color: #400000;
	text-decoration: none!important;
}

/* ヘッダ周り */
.brandContInner h1{
	font-family: serif;
	font-weight: bold;
	text-align: center;
	font-size: 40px;
	margin: 40px auto 30px;
}
.brandContInner p.mod__brandBlockText.lead{
	font-size: 18px;
	line-height: 1.6;
	text-align: center;
}

@media screen and (max-width: 639px){
	.brandContInner{
		margin: auto 3.125%;
	}
	.main {
		background: none;
		padding: 20px 3.355% 10px 3.355%;
	}
/* ヘッダ周り */
	.brandContInner h1{
		font-size: 24px;
		margin: 25px auto 20px;
	}
	.brandContInner p.mod__brandBlockText.lead{
		font-size: 16px;
		text-align: left;
	}
}

/* 小見出し */
.cp_timeline04 .timeline_item .desc p.txt_ttl{
	font-size: 1.2em;
	line-height: 1.2;
	font-weight: bold;
	margin-bottom: 5px;
}

/* 画像大きさ・画像周り */
img.box_line{
	border: 1px solid #ccc;
}
p img.w40{
	width: 40%;
	margin: auto;
}
p img.w50{
	width: 50%;
	margin: auto;
}
p img.w60{
	width: 60%;
	margin: auto;
}
p img.w80{
	width: 80%;
	margin: auto;
}
p img.w100{
	width: 100%;
	margin: auto;
}

/* タイムライン */
.cp_timeline04 {
  position: relative;
  margin: 4em auto;
  padding-bottom: 2em;
}
.cp_timeline04:before {
  position: absolute;
  top: 0px;
  /*top: -30px; */
  left: 45px;
  width: 3px;
  height: 100%;
  content: '';
  background: #e91e63;
}
.cp_timeline04 .timeline_item {
  margin: 0px 0px 0px 80px;
}
.cp_timeline04 .timeline_item .time_date .time {
  font-family: serif;
  font-size: 8em;
  font-weight: bold;
  position: relative;
  margin: 0;
  letter-spacing: 3px;
  color: rgba(233,30,99,0.3);
}
.cp_timeline04 .timeline_item .time_date .time:before {
  position: absolute;
  top: 50%;
  left: -42px;
  width: 10px;
  height: 10px;
  content: '';
  transform: rotate(45deg);
  border: 3px solid #e91e63;
  background: #fff;
}
.cp_timeline04 .timeline_item .time_date .flag {
  font-size: 2.2em;
  font-weight: bold;
  margin: -45px 0 0 0;
  color: #880e4f;
}
.cp_timeline04 .timeline_item .desc {
  font-size: 16px;
  line-height: 20px;
  margin-top: 10px;
  padding-left: 20px;
  border-left: 1px solid #880e4f;
  margin-bottom: 60px;
}

.cp_timeline04 .timeline_item .desc p{
	line-height: 1.6;
	}

	/* リスト */
.cp_timeline04 .timeline_item .desc ul{
	padding-left: 1em;
}
.cp_timeline04 .timeline_item .desc ul li{
	line-height: 1.6;
	padding-left: 0;
	list-style-type: disc;
}

	/* タイトルが無い場合 */
	.cp_timeline04 .timeline_item .desc.no-title01 {
		margin-top: -35px;
	}
	.cp_timeline04 .timeline_item .desc.no-title02 {
		margin-top: -25px;
	}

/* 画像フロート */
.mod__imgblockRight--80{
	width: 77%;
}
.mod__imgblockText{
	font-size: 16px;
	width: 100%;
}
.cp_timeline04 .timeline_item .desc p.mod__fieldCap{
	font-size: 12px !important;
	line-height: 1.2;
}

/* 吹き出し左 */
.balloon1-left {
	position: relative;
	display: inline-block;
	margin: 1.5em 0 1.5em 15px;
	padding: 10px 16px;
	min-width: 120px;
	max-width: 100%;
	font-size: 16px;
	background: #fcd9e3;
	border-radius: 10px;
}

.balloon1-left:before {
	content: "";
	position: absolute;
	top: 50%;
	left: -29px;
	margin-top: -15px;
	border: 15px solid transparent;
	border-right: 15px solid #fcd9e3;
}
.balloon1-left p {
	margin: 0;
	padding: 0;
}

/* 吹き出し上 */
.balloon1-top {
	position: relative;
	display: inline-block;
	margin: 1.5em 0;
	padding: 10px 15px;
	min-width: 120px;
	max-width: 100%;
	font-size: 16px;
	background: #fcd9e3;
	border-radius: 15px;
}

.balloon1-top:before {
	content: "";
	position: absolute;
	top: -28px;
	left: 50%;
	margin-left: -15px;
	border: 15px solid transparent;
	border-bottom: 15px solid #fcd9e3;
}

.balloon1-top p {
  margin: 0;
  padding: 0;
}

/* 吹き出し左 */
.balloon1 {
	position: relative;
	display: inline-block;
	margin: 1.5em 0;
	padding: 10px 15px;
	min-width: 120px;
	max-width: 100%;
	font-size: 16px;
	background: #fcd9e3;
	border-radius: 15px;
}

.balloon1:before {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -15px;
	border: 15px solid transparent;
	border-top: 15px solid #fcd9e3;
}

.balloon1 p {
  margin: 0;
  padding: 0;
}

/* スラッシュ */
 
.slash {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
 
.slash::before,
.slash::after {
  content: "";
  width: 25px;
  height: 1px;
  background-color: #000;
  margin: 0px 4px 4px;
}
 
.slash::before {
  transform: rotate(45deg);
}
 
.slash::after {
  transform: rotate(-45deg);
}

/* ページ数 */
.fukidashi-01-10 {
	 position: relative;
	 display: grid;
	 place-items: center;
	 width: 120px;
	 height: 120px;
	 border: 2px solid #880e4f;
	 border-radius: 50%;
	margin: auto;
	text-align: center;

  &::before {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 58%;
    width: 15px;
    height: 15px;
    box-sizing: border-box;
    background-color: #ffffff; /* 背景色と同じ色を指定 */
    rotate: 135deg;
  }

  &::after {
    content: "";
    position: absolute;
    top: calc(100% + 5px);
    left: 54%;
    width: 20px;
    height: 2px;
    box-sizing: border-box;
    background-color: #880e4f;
    box-shadow:
      0 2px 0 #ffffff,
      0 -2px 0 #ffffff; /* 背景色と同じ色を指定 */
    rotate: 50deg;
  }
}

/* エンド */
	p.end{
		font-size: 30px;
		font-family: serif;
		margin: 70px auto 70px;
		text-align: center;
		line-height: 1.8;
	}

@media only screen and (max-width: 767px) {
	.cp_timeline04 {
	  margin: 2em auto;
	}
	.cp_timeline04 .timeline_item .time_date .time {
		font-size: 4em;
	}
	.cp_timeline04:before {
		left: 15px;
	}
	.cp_timeline04 .timeline_item .time_date .time:before {
		left: -32px;
	}
	.cp_timeline04 .timeline_item {
		margin: 0px 0px 0px 40px;
	}
	.cp_timeline04 .timeline_item .time_date .flag {
	  font-size: 1.8em;
	  margin: -20px 0 0 0;
	}
	.cp_timeline04 .timeline_item .desc {
		padding-left: 0px;
		border-top: 1px solid #880e4f;
		border-left: none;
		margin-bottom: 40px;
	}
	p img.w100{
		width: 100%;
	}
	.cp_timeline04 .timeline_item .desc p.w60{
		width: 60%;
		text-align: center;
	}

	.cp_timeline04 .timeline_item .desc p.w60 a:hover{
		opacity: 60%;
	}
		/* タイトルが無い場合 */
		.cp_timeline04 .timeline_item .desc.no-title01,
 		.cp_timeline04 .timeline_item .desc.no-title02{
			margin-top: -10px;
		}
		.cp_timeline04 .timeline_item .desc img.w100 {
			width: 100%;
		}
	/* 小見出し */
	.cp_timeline04 .timeline_item .desc p.txt_ttl{
		font-size: 1.1em;
	}

	/* 画像大きさ */
	p img.w50,
	p img.w60,
	p img.w80{
		width: 90%;
	}

	p img.w40{
		width: 70%;
	}

/* 画像フロート */
	.mod__imgblockImg img.w60{
		width: 60%;
		margin: auto;
	}
	.mod__imgblockRight--80{
		width: 100%;
	}
	.mod__imgblockLeft--20.w70{
		max-width: 70% !important;
		width: 70% !important;
		margin: auto;
	}
	.mod__imgblockLeft--20.w50{
		max-width: 50% !important;
		width: 50% !important;
		margin: auto;
	}
	.mod__imgblockText{
		margin-bottom: 10px;
	}
	/* エンド */
		p.end{
			margin-top: 10px;
			font-size: 18px;
			font-family: serif;
		}
	
	/* ページ数 */
	.fukidashi-01-10 {
		 width: 100px;
		 height: 100px;
	}
}