@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Zen+Old+Mincho:wght@400;500;600;700;900&display=swap');

#wrap{
}

#Content_feature * {
  font-family: 'Noto Sans JP', "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}
#Content_feature .fontMin {
  font-family: "Zen Old Mincho", serif;
}
#Content_feature{
	position: relative;
	background-color: #ffffff;
	margin-bottom: 20px;
}
#Content_feature a{
	color: #000 !important;
	text-decoration: none;
}
#Content_feature .article_inner{
	margin: 0 auto;
	max-width: 1000px;
}
#Content_feature .inner{
  margin: 0 auto;
  max-width: 870px;
}
#Content_feature a.btn{
	background: #b5976d;
	display: block;
	width: 100%;
	height: 42px;
	line-height: 42px;
	font-size: 18px;
	font-weight: 700;
	color: #ffffff !important;
	text-align: center;
}
#Content_feature a.btn.btnTrial{
	background: #b5976d;
}
#Content_feature a.btn:hover{
	opacity: 0.7;
}
@media (max-width: 820px) {
	#Content_feature .inner{
		max-width: 440px;
 		margin: auto;
		padding-left: 2.6%;
		padding-right: 2.6%;
	}
}/*-SP tablet-*/
@media (max-width: 390px) {
	#Content_feature .inner{
		padding-left: 5.1%;
		padding-right: 5.1%;
	}
}/*-SP-*/
#Content_feature .flex{
	display: flex;
	flex-wrap: wrap;
}
@media screen and (min-width: 769px){
#Content_feature .pcFlex{
	display: flex;
	flex-wrap: wrap;
}
}/*-PC only-*/

/*mainLead*/
.mainLead{
	background-color: #6d298e;
}
.mainLead p{
	display: flex;
	justify-content: center;
	padding: 13px 0;
	gap: 8px 12px;
	font-size: 0;
	text-align: center;
}
.mainLead p img{
	width: auto;
	height: 38px;
}
@media (max-width: 820px) {
	.mainLead p{
		flex-wrap: wrap;
	}
	.mainLead p img{
		height: 19px;
	}
}/*-SP tablet-*/
@media screen and (min-width: 769px){
}/*-PC only-*/

/* mainvisual */
.mainvisual{
	position: relative;
	font-size: 0;
	text-align: center;
	overflow-x: hidden;
/*	background: url("images/mv_bg.png") no-repeat center top / max(100%,1920px) auto;*/
}
.mainvisual img{
	width: max(100%,1920px);
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
@media (max-width: 820px) {
.mainvisual img{
	width: max(100%,820px);
	transform: translateX(-50%);
}
}/*-SP tablet-*/

/* maintitle */
.maintitle{
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	margin: 0 auto;
}
.maintitle img{
	margin: 0 2% 0 auto;
	width: min(96%, 988px);
	text-align: center;
	font-size: 0;
}
.maintitle figure img{
	height: auto;
}
.maintitle ul{
	padding: 28px 13px 5px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0;
}
.maintitle ul li{
	font-size: 14px;
	font-weight: 500;
}
.maintitle ul li:first-child{
	color: #ffffff;
}

@media (max-width: 820px) {
	.maintitle{
	padding: 0px 0;
	}
	.maintitle figure{
		padding-bottom: 10px;
		text-align: center;
	}
	#Content_feature .maintitle figure img{
		width: 96%;
	}
	.maintitle ul{
    	padding: 14px 7px 5px;
	}
	.maintitle ul li{
		font-size: 9px;
	}
}/*-SP tablet-*/
@media (min-width: 821px) {
	.maintitle ul li:first-of-type{
		padding: 0 30px 0 0;
	}
	.maintitle ul li:last-of-type{
		border-right: 0;
		padding: 0 0 0 15px;
	}
}/*-PC only-*/

.anchorLink{
	background-color: #e7ddc9;
	padding: 12px 0;
}
.anchorLink ul li a{
	width: 100%;
	height: 58px;
	display: grid;
	place-content: center;
	border: 2px solid #b5976d;
	background-color: #ffffff;
	font-size: 0;
}
.anchorLink ul li a img{
	height: 26px;
	width: auto;
}
@media (max-width: 820px) {
	.anchorLink ul li a{
		height: max(calc(58 / 820 * 100vw),40px);
	}
	.anchorLink ul li a img {
		height: max(calc(26 / 820 * 100vw),18px);
	}
	.anchorLink ul li + li {
		margin-top: 10px;
	}
}/*-SP tablet-*/
@media (min-width: 821px) {
	.anchorLink ul{
		display: flex;
		justify-content: center;
		gap: 10px 45px;
	}
	.anchorLink ul li{
		width: min(47%,411px);
	}
}/*-PC only-*/

/*.contBgWrap*/
.contBgWrap{
	position: relative;
}
.contBox {
  position: relative;
  width: 100%;
  padding: 0;
  z-index: 0;
}
.contBox::before{
  content: "";
  display: block;
  width: 100%;
  height: 100svh;
  position: sticky;
  top: 80px;
  background-image: url("images/cont_bg.png");
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
  z-index: -1;
}
.contBox::after {
  content: "";
  position: absolute;
  inset: 0;
  mix-blend-mode: multiply;
  z-index: -1;
}
#kyuuchuu.contBox::after {
  background-color: #d9c7e2;
}
#heian.contBox::before {
  background-color: #c7d7a8;
}
#Content_feature .contBoxHead.inner{	
    margin-top: -100vh;
	padding-top: 85px;
}

@media (max-width: 660px) {
  #Content_feature {/*feature.cssを上書き。固定背景のため*/
    overflow: visible;
  }
#Content_feature .contBoxHead.inner{	
	padding-top: 45px;
}
}/*-SP tablet-*/
@media (max-width: 820px) {	
.contBox::before{
  top: 65px;
}
}/*-SP tablet-*/


/* .h2 */
#Content_feature h2.contTi{
	margin-bottom: 10px;
	text-align: center;
}
#Content_feature h2.contTi .tiImg{
	display: block;
	font-size: 0;
}
#Content_feature h2.contTi .tiImg img{
	width: 100%;
	height: auto;
}
/*txtBox*/
.txtBox{
	margin-bottom: 64px;
}
.txtBox p{
	font-size: 24px;
	font-weight: 600;
	text-align: center;
}
@media (max-width: 820px) {
	.txtBox p{
		font-size: 16px;
	}
}/*-SP tablet-*/

/*pointList*/
.pointList{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 28px 3.2%;
}
.pointList li{
	width: 31.2%;
}
.pointList li .pointTi{
	display: grid;
	align-items: center;
	height: 38px;
	text-align: center;
	color: #fff;
	font-size: 18px;
    line-height: 1.5em;
	font-weight: bold;
  clip-path: polygon(
    16px 0,
    calc(100% - 16px) 0,
    100% 16px,
    100% 100%,
    0 100%,
    0 16px
  );
}
#kyuuchuu .pointList li .pointTi{
  background-color: #6d298e;
}
#heian .pointList li .pointTi{
  background-color: #85a942;
}
.pointList li .pointTi .fontL{
	font-size: 1.5em;
}
.pointList li .pointTxt{
	background-color: #000000;
	padding: 18px 0 12px;
}
#Content_feature .pointList li .pointTxt p.txtImg{
	font-size: 0;
}
#Content_feature .pointList li .pointTxt p.txtImg img{
	width: auto;
	height: 59px;
}
#Content_feature .pointList li .pointTxt p{
	color: #ffffff;
	font-size: 24px;
	line-height: 1.54em;
	font-weight: bold;
	text-align: center;
	font-family: "Zen Old Mincho", serif;
}
.pointList li:last-child .pointTxt p{
	letter-spacing: -0.06em;
}
@media (max-width: 820px) {
	.pointList li{
		width: min(100%,271px);
	}
#Content_feature .pointList li .pointTxt p.txtImg img{
	height: 50px;
}
}/*-SP tablet-*/

/*diaTi*/
.diaTi{
	position: relative;
	display: flex;
	justify-content: center;
	gap: 18px;
}
.diaTi span{
	position: relative;
	display: grid;
	place-content: center;
	width: 58px;
	height: 58px;
	font-size: 22.3px;
    z-index: 1;
}
.diaTi span::before{
	position: absolute;
	top: 0;
	left: 0;
	content: "";
	display: block;
	background-color: #000000;
	width: 58px;
	height: 58px;
	clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
	z-index: -2;
}
.diaTi span::after{
	position: absolute;
	top: 2px;
	left: 2px;
	content: "";
	display: block;
	background-color: #ffffff;
	width: 54px;
	height: 54px;
	clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
	z-index: -1;
}
@media (max-width: 820px) {
.diaTi {
    gap: 9px;
}
.diaTi span{
	width: 44px;
	height: 44px;
	font-size: 18px;
}
.diaTi span::before{
	width: 44px;
	height: 44px;
}
.diaTi span::after{
	width: 40px;
	height: 40px;
}
.charaBox .txts h3 {
    font-size: 22px;
}
}/*-SP tablet-*/

/* character */
#Content_feature .characterInner{
	margin-top: 70px;
	padding: 28px 0 80px;
	background: rgba(255, 255, 255, .7);
	border: solid #b5976d;
	border-width: 5px 0;
}
.character ul{
	width: min(100%, 870px);
	margin: min(10.3vw, 60px) auto 0;
}
.character ul li:has(figure){
	display: flex;
	align-items: flex-start;
	gap: 0 calc(18/247*100%);
}

#kyuuchuu .character ul{
	display: flex;
	flex-wrap: wrap;
    justify-content: center;
	gap: 40px calc(68/870*100%);
}
#kyuuchuu .character ul li{
	width: calc((870 - 68*2)/3/870*100%);
}
#heian .character ul li:not(:has(figure)) .txts{
	display: flex;
	align-items: center;
	gap: 10px 3px;
    margin-top: -9px;
}
.charaBox figure{
	margin: 0 auto;
	width: 111px;
}
.charaBox figure img{
	width: 100%;
	height: 100%;
	object-fit: contain;
	aspect-ratio: 111 / 139;
}
.charaBox:has(figure) .txts{
	flex: 1;
    margin-top: -9px;
}
.charaBox .txts h3{
	font-size: 25px;
	line-height: 1;
	font-weight: 700;
	white-space: nowrap;
}
.charaBox:has(figure) .txts h3{
	margin-bottom: 18px;
}
#kyuuchuu .charaBox .txts h3{
    margin-right: -1em;
}
#heian .charaBox .txts h3{
    margin-bottom: 9px;
}
.charaBox .txts h3 rt {
    font-size: 9px;
    font-weight: 600;
}
.charaBox .txts h3 .kerningTxt:nth-of-type(odd){
    margin-left: -0.4em;
}
.charaBox .txts p{
	font-size: 14px;
	line-height: 1.43em;
}
#heian .charaBox .txts .dots {
flex: 1;
  height: 2px;
  flex-grow: 1;
  
  background-image: linear-gradient(
    to right, 
    #b5976d 0px, 
    #b5976d 2px, 
    transparent 2px, 
    transparent 5px /* 2px(幅) + 3px(間隔) = 5px */
  );
  background-size: 5px 2px; /* 5pxごとに繰り返し */
  background-repeat: repeat-x;
}
#heian .charaBox .txts .dots + p {
	width: min(56%,316px);
}
@media (max-width: 820px) {
#character ul{
	flex-wrap: wrap;
}
#kyuuchuu .character ul li{
	width: min(100%, 320px);
	margin: 0 auto;
}
#heian .character ul li{
	width: min(100%, 320px);
	margin: 0 auto;
}
#heian .character ul li:not(:has(figure)){
	margin-top: 30px;
}
#heian .character ul li:not(:has(figure)) .txts{
	flex-wrap: wrap;
}
#heian .character ul li:not(:has(figure)) .txts h3{
	margin-bottom: 0;
}
#heian .character ul li:nth-of-type(2) .txts h3{
	width: 5em;
	white-space: normal;
}
}/*-SP tablet-*/
@media (min-width: 821px) {	
#heian .character ul{
	display: grid;
	grid-template-columns: calc((870 - 68*2)/3/870*100%) 1fr;
	gap: 28px calc(53/870*100%);
}
#heian .character ul li:nth-of-type(1){
  grid-column: 1 / 2;
  grid-row: 1 / 4;
}
#heian .character ul li:nth-of-type(2){
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}
#heian .character ul li:nth-of-type(3){
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}
#heian .character ul li:nth-of-type(4){
  grid-column: 2 / 3;
  grid-row: 3 / 4;
}
}/*-PC only-*/


/* book */
.book{
	padding: 90px 0 112px;
}
#Content_feature .bnrWrap {
	margin-bottom: 92px;
	text-align: center;
}
#Content_feature .bnrWrap img{
	width: min(100%,516px);
	height: auto;	
}
.book h2{
	margin-bottom: 38px;
}
.bookList{
	display: flex;
	flex-wrap: wrap;
	gap: 76px 5%;
}
.bookList li{
	width: min( 47.5% ,413px);
}
.bookList h3{
	font-size: 0;
	text-align: left;
}
#Content_feature .bookList h3 img{
	height: 51px;
	width: auto;
}
.bookList .bookContent .txt p {
	font-size: 14px;
	line-height: 1.8em;
	letter-spacing: 0.03em;
	font-weight: 500;
}
.bookList .btnWrap a + a{
	margin-top: 16px;
}
@media (max-width: 820px) {
#Content_feature .bookList h3 img{
	height: 44px;
}
.bookList li{
	width: min( 100% ,413px);
	margin: 0 auto;
}
.bookList .bookContent > *{
	margin-top: 20px;
}
}/*-SP tablet-*/
@media (min-width: 821px) {
.bookList li{
	width: min( 47.5% ,413px);
    display: flex;
    flex-direction: column;
}
.bookList .bookContent{
    flex-grow: 1;
}
.bookList .bookContent{
	display: grid;
	grid-template-columns: 196px 1fr;
	gap: 22px 5.55%;
}
.bookList .bookContent .img {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}
.bookList .bookContent .txt {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
}
.bookList .bookContent .btnWrap {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
}/*-PC only-*/

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
@media (min-width: 821px) {
.sp { display: none !important; }
}
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media (max-width: 820px) {
.pc { display: none !important; }
}