@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Noto+Serif+JP:wght@200..900&display=swap');

#concept-block3 .pic,
.concept3 #brand p,
.concept3 .series dd {font-family: 'Hiragino Kaku Gothic Pro', "游ゴシック", YuGothic, 'Hiragino Kaku Gothic Pro', 'Meiryo', sans-serif;}

.pink {color: #ea6d5e;
	font-size: 60%;
}

.eb-g {
  font-family: "EB Garamond", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;

    font-size: 22px;
    width: 160px;
    padding-bottom: 10px;
    border-bottom: 1.5px solid #ccc;
    display: block;
    text-align: center;
}
main{background: #fff4f4}

.faderight {
	opacity: 0;
}
.fadeleft {
	opacity: 0;
}
.faderight_pc {
	opacity: 0;
}
.fadeleft_pc {
	opacity: 0;
}
.fadeleftin{
animation-name:fadeLeftAnime;
animation-duration:2s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeLeftAnime{
  from {
    opacity: 0;
	transform: translateX(-150px);
  }

  to {
    opacity: 1;
	transform: translateX(0);
  }
}
.faderightin{
animation-name:fadeRightAnime;
animation-duration:2s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeRightAnime{
  from {
    opacity: 0;
	transform: translateX(150px);
  }

  to {
    opacity: 1;
	transform: translateX(0);
  }
}

#concept-block2, .ex, .concept-body p.txt, .bt, .bc, h2{font-weight:400;}
/* ===================== pc ===================== */

@media print, screen and (min-width: 769px) {
	
	/*concept*/
	#concept-title {padding: 70px 0 80px 0; box-sizing: border-box;display: flex;justify-content: center;}
	#concept .pkg1 img {width: 150px; height: auto;}
	#concept .pkg2 img {width: 360px; height: auto;margin: 60px 0 60px -30px;}
	#brand .pkg3 img {width: 240px; height: auto;margin: 60px 20px 60px 0px;}
	
	/*concept1*/
	.concept1 #concept-title h2 {width: 580px; margin: 0; font-size: 20px; line-height: 1.6em; text-align: center;}
	.concept1 #concept-title h2 span {display: block; margin-bottom: 20px; text-align: center;}
	.concept1 #concept-title h2 span.ex{font-size: 12px; color: #707070; text-align: right; padding-right: 30px;}
	.concept1 #concept-title sup{font-size: 12px;}
	.concept1 #concept-title h2 img {position: relative; top: 8px; width: 158px; height: auto; padding-top: 10px; vertical-align: bottom;}
	.concept1 #concept-title .pkg {position: absolute; right: 70px; top: 40px; width: 260px;}
	
	/*concept2*/
	.concept2 #concept-title {padding: 100px 0 50px;}
	.concept2 #concept-title h2 {margin: 0 0 30px; font-size: 30px; line-height: 1.6em;}
	.concept2 #concept-title .txt {width: 560px; font-size: 15px;}
	.concept2 #concept-title .pkg {position: absolute; right: 0; top: 50px; width: 320px;}
	
	
	#concept-title,#concept-contents {
		padding: 60px 0; box-sizing: border-box;
		background-image:
			url("/common/images/common/contents_bg2.png"),
			url("/common/images/common/contents_bg1.jpg");
		background-repeat: repeat-y, repeat-y;
		background-position: center center, center top;
		background-size: 100%, 100%;
		background-attachment: fixed, fixed;
		background: #fff4f4;
	}
	
	#concept-block0,#concept-block1, #concept-block2, #concept-block3 {width: 1000px; margin: 0 auto; padding: 0 50px; box-sizing: border-box;}
	
	/*concept1 concept-block0*/
	.concept1 #concept-block0 .concept-body, #concept-block1 .pic {display: inline-block; vertical-align: top;}
	.concept1 #concept-block0 .txt {width: 450px; margin: 0 50px 0 0; font-size: 15px;}
	.concept1 #concept-block0 .pic {width: 350px; height: auto;}
	.concept1 #concept-block0 .pic img {width: 280px; height: auto;}
	.concept1 #concept-block0 .ex {margin-top: 30px; font-size: 12px; color: #707070;}
	.concept1 #concept-block0 .text-combine {-webkit-text-combine: horizontal;-ms-text-combine-horizontal: all;text-combine-upright: all;}
	.concept1 #concept-block0 .v-title {margin-bottom: 0px; font-size: 30px; font-weight: 400; color: #242424; text-align: center;display: flex;align-items: center;flex-direction: column;width:41px;}
	.concept1 #concept-block0 .v-title1 {margin-bottom: -10px;}
	.concept1 #concept-block0 .v-title2 {-ms-writing-mode: tb-rl; writing-mode: vertical-rl;}
	.concept1 #concept-block0 {display: flex;}
	.concept1 #concept-block0 #concept-0-1{display: flex; align-items: center;}


	/*concept1 concept-block1*/
	.concept1 #concept-block1 .concept-body, #concept-block1 .pic {display: inline-block; vertical-align: top;}
	.concept1 #concept-block1 .txt {width: 630px; margin: 0 50px 0 0; font-size: 15px;}
	.concept1 #concept-block1 .ex {margin-top: 30px; font-size: 12px; color: #707070;}

	
	/*concept1 concept-block2*/
	.concept1 #concept-block2 {position: relative; margin-top: 200px; padding-bottom: 30px;}
	.concept1 #concept-block2 h4 {position: relative; width: 480px; height: 46px; margin: 0 auto; line-height: 46px; color: #fff; border-radius: 23px; background-color: #707070; font-size: 21px; text-align: center; z-index: 2;}
	.concept1 #concept-block2 ul {margin: 60px 0 0; padding: 0; list-style-type: none; text-align: center;display: grid; width: fit-content; column-gap: 40px; grid-template-columns: repeat(2, auto); }
	.concept1 #concept-block2 li {display: inline-block; vertical-align: middle; width: 430px; height: 140px; margin: 10px 0;}
	.concept1 #concept-block2 li img {width: 100%; height: 100%;}
	.concept1 #concept-block2 li p{font-size: 16px; padding: 40px 50px 0 50px;}
	.concept1 #concept-block2 li:nth-child(1) p{letter-spacing: -0.1em; color: #808080;}
	.concept1 #concept-block2 li:nth-child(1) p span{letter-spacing: -0.17em;}
	.concept1 #concept-block2 li:nth-child(2) p{ color: #808080;}
	.concept1 #concept-block2 li:nth-child(3) p{ color: #808080;}
	.concept1 #concept-block2 li:nth-child(4) p{ color: #808080;}
	.concept1 #concept-block2 h2 {font-size: 24px;}
	.concept1 #concept-block2 small{float: right; font-size: 22px; padding: 20px 10px; color: #de3e4f;}
	.pc_only{display: block;}
	
	/*concept1 concept-block3*/
	.concept1 #concept-block3 {margin-top: 50px; padding: 50px; background-color: #fff;}
	.concept1 #concept-block3 h4 {position: relative; margin-bottom: 40px; font-size: 30px; line-height: 1.4em;}
	.concept1 #concept-block3 h4 span {font-size: 26px; color: #808080;}
	.concept1 #concept-block3 .txt, #concept-block3 .pic {display: inline-block; vertical-align: top;}
	.concept1 #concept-block3 .txt {width: 630px; margin: 0 50px 0 0; font-size: 15px;}
	.concept1 #concept-block3 .pic {width: 210px; height: auto; font-size: 11px; text-align: right;}
	.concept1 #concept-block3 .pic img {width: 100%; height: auto;}
	
	/*concept2 concept-block1*/
	.concept2 #concept-block1 {display:flex;}
	.concept2 #concept-contents {padding: 0 0 60px;}


	/*concept2 concept-block1-1*/
	.concept2 #concept-block1-1 .concept-body, #concept-block1 .pic {display: inline-block; vertical-align: top;}
	.concept2 #concept-block1-1 .txt {width: 630px; margin: 80px 50px 0 0; font-size: 15px;}
	.concept2 #concept-block1-1 .ex {margin-top: 30px; font-size: 11px; color: #707070;}
	.concept2 #concept-block1-1 #concept-1-1{display: flex; align-items: center;}
	.concept2 #concept-block1-1 #concept-1-2{display: flex; align-items: center;}
	.concept2 #concept-block1-1 .bt{font-size:14px;line-height: 80px;font-family: "EB Garamond", serif;}
	.concept2 #concept-block1-1 .bc{font-size:12px;line-height: 0;}
	.concept2 #concept-block1-1 h2 {font-size: 24px;margin-top: 110px;}
	.concept2 .bc br {display: block;content: "";margin: -10px 0;}
	.concept2 #concept-block1-1 {width:820px;}
	.concept2 #concept-block1-1 .txt1 {margin-top: -30px;}

	/*concept2 concept-block1-2*/
	.concept2 #concept-block1-2 .v-title {margin-bottom: 60px; font-size: 30px; font-weight: 400; color: #242424;width:80px;margin-left:120px; }
	.concept2 #concept-block1-2 .v-title2 {-ms-writing-mode: tb-rl; writing-mode: vertical-rl;margin-left: 5vw}
	.concept2 #concept-block1-2 .pic img {width: 240px; height: auto;margin-left: -130px;margin-left: -20px;}
	
}

@media all and (-ms-high-contrast: none) {
	#concept-contents {
		display: block;
		background-position: center top, center top;
		background-attachment: scroll, scroll;
	}
}


/* ===================== sp ===================== */

@media screen and (max-width: 768px) {
	
	/*concept*/
	#concept-title {padding: 100px 0 80px 0; box-sizing: border-box;display: flex;justify-content: center;}
	#concept .pkg1 img {width: 100%; height: auto;}
	#concept .pkg2 img {width: 100%; height: auto;margin: 60px 0;}
	#brand .pkg3 img {width: 75%; height: auto;margin: 30px 0px;}
	#concept .pkg1 {width: 40%; margin: 0 auto;}
	#concept .pkg2 {width: 100%; margin: 0 auto;}
	#brand .pkg3 {text-align: center;}
	
	/*concept1*/
	.concept1 #concept-title h2 {width: 580px; margin: 0; font-size: 20px; line-height: 1.6em; text-align: center;}
	.concept1 #concept-title h2 span {display: block; margin-bottom: 20px; text-align: center;}
	.concept1 #concept-title h2 span.ex{font-size: 12px; color: #707070; text-align: right; padding-right: 30px;}
	.concept1 #concept-title sup{font-size: 12px;}
	.concept1 #concept-title h2 img {position: relative; top: 8px; width: 158px; height: auto; padding-top: 10px; vertical-align: bottom;}
	.concept1 #concept-title .pkg {position: absolute; right: 70px; top: 40px; width: 260px;}
	
	/*concept2*/
	.concept2 #concept-title {padding: 100px 0 50px;}
	.concept2 #concept-title h2 {margin: 0 0 30px; font-size: 30px; line-height: 1.6em;}
	.concept2 #concept-title .txt {width: 560px; font-size: 15px;}
	.concept2 #concept-title .pkg {position: absolute; right: 0; top: 50px; width: 320px;}
	
	
	#concept-title,#concept-contents {
		box-sizing: border-box;
		background-image:
			url("/common/images/common/contents_bg2.png"),
			url("/common/images/common/contents_bg1.jpg");
		background-repeat: repeat-y, repeat-y;
		background-position: center center, center top;
		background-size: 100%, 100%;
		background-attachment: fixed, fixed;
		background: #fff4f4;
	}
	
	#concept-block0,#concept-block1, #concept-block2, #concept-block3 {margin: 0 auto; padding: 0 30px; box-sizing: border-box;width: 100%;}
	
	/*concept1 concept-block0*/
	.concept1 #concept-block0 .concept-body, #concept-block1 .pic {display: inline-block; vertical-align: top;width:100%;}
	.concept1 #concept-block0 .txt {width: 96%;padding: 0 10px 0 10px; font-size: 15px;}
	.concept1 #concept-block0 .pic {width: 100%; height: auto;}
	.concept1 #concept-block0 .pic img {width: 90%; height: auto;}
	.concept1 #concept-block0 .ex {margin-top: 30px; font-size: 12px; color: #707070;padding: 0 10px 0 10px;}
	.concept1 #concept-block0 .text-combine {-webkit-text-combine: horizontal;-ms-text-combine-horizontal: all;text-combine-upright: all;}
	.concept1 #concept-block0 .v-title {margin-bottom: 0px; font-size: 24px; font-weight: 400; color: #242424; text-align: center;display: flex;align-items: center;flex-direction: column;width:41px;}
	.concept1 #concept-block0 .v-title1 {margin-bottom: -10px;}
	.concept1 #concept-block0 .v-title2 {-ms-writing-mode: tb-rl; writing-mode: vertical-rl;}
	.concept1 #concept-block0 {display: block;margin-bottom:0;}
	.concept1 #concept-block0 #concept-0-1{display: flex; align-items: center;margin-top:0px;height:650px;}


	/*concept1 concept-block1*/
	.concept1 #concept-block1 .concept-body, #concept-block1 .pic {display: inline-block; vertical-align: top;}
	.concept1 #concept-block1 .txt {width: 97%; margin: 0 50px 0 0; font-size: 15px;}
	.concept1 #concept-block1 .ex {margin-top:10px;font-size: 12px; color: #707070;width: 97%;display: block;}

	
	/*concept1 concept-block2*/
	.concept1 #concept-block2 {position: relative; margin-top: 100px; padding-bottom: 30px;}
	.concept1 #concept-block2 h4 {position: relative; width: 480px; height: 46px; margin: 0 auto; line-height: 46px; color: #fff; border-radius: 23px; background-color: #707070; font-size: 21px; text-align: center; z-index: 2;}
	.concept1 #concept-block2 ul {margin: 60px 0 0; padding: 0; list-style-type: none; text-align: center;display: block; }
	.concept1 #concept-block2 li {display: inline-block; vertical-align: middle; width: 100%; height: 120px; margin: 10px 0; }
	.concept1 #concept-block2 li img {width: 100%; height: 100%;}
	.concept1 #concept-block2 li p{font-size: 14px;padding: 30px 20px 0 20px;}
	.concept1 #concept-block2 li:nth-child(1) p{letter-spacing: -0.1em; color: #808080;}
	.concept1 #concept-block2 li:nth-child(1) p span{letter-spacing: -0.17em;}
	.concept1 #concept-block2 li:nth-child(2) p{ color: #808080;}
	.concept1 #concept-block2 li:nth-child(3) p{ color: #808080;}
	.concept1 #concept-block2 li:nth-child(4) p{ color: #808080;}
	.concept1 #concept-block2 h2 {font-size: 24px;margin-left: 10px;margin-right: -10px;}
	.concept1 #concept-block2 small{float: right; font-size: 22px; padding: 20px 10px; color: #de3e4f;}
	.pc_only{display: block;}
	
	/*concept1 concept-block3*/
	.concept1 #concept-block3 {margin-top: 50px; padding: 50px; background-color: #fff;}
	.concept1 #concept-block3 h4 {position: relative; margin-bottom: 40px; font-size: 30px; line-height: 1.4em;}
	.concept1 #concept-block3 h4 span {font-size: 26px; color: #808080;}
	.concept1 #concept-block3 .txt, #concept-block3 .pic {display: inline-block; vertical-align: top;}
	.concept1 #concept-block3 .txt {width: 100%; margin: 0 50px 0 0; font-size: 15px;}
	.concept1 #concept-block3 .pic {width: 100%; height: auto; font-size: 11px; text-align: right;}
	.concept1 #concept-block3 .pic img {width: 100%; height: auto;}
	
	/*concept2 concept-block1*/
	.concept2 #concept-block1 {display:block;}
	.concept2 #concept-contents {padding: 0 0 60px;}


	/*concept2 concept-block1-1*/
	.concept2 #concept-block1-1 .concept-body, #concept-block1 .pic {display: inline-block; vertical-align: top;}
	.concept2 #concept-block1-1 .txt {width: 97%;font-size: 15px;font-feature-settings: "palt";letter-spacing: 0.06em;}
	.concept2 #concept-block1-1 .ex {margin-top: 30px; font-size: 11px; color: #707070;}
	.concept2 #concept-block1-1 #concept-1-1{display: block; align-items: center;}
	.concept2 #concept-block1-1 #concept-1-2{display: block; align-items: center;}
	.concept2 #concept-block1-1 .bt{font-size:24px;line-height: 80px;font-family: "EB Garamond", serif;}
	.concept2 #concept-block1-1 .bc{font-size: 14.2px;line-height: 0;font-feature-settings: "palt";letter-spacing: 0.1em;}
	.concept2 #concept-block1-1 h2 {font-size: 24px;margin-top: 100px;text-align: center;}
	.concept2 .bc br {display: block;content: "";margin: 0;}
	.concept2 #concept-block1-1 {width:100%;}
	.concept2 #concept-block1-1 .txt1 {margin-top: -30px;padding: 0 10px;}
	.concept2 .bc .sp-none{display: none;}

	/*concept2 concept-block1-2*/
	.concept2 #concept-block1-2 .v-title {margin-bottom: 150px; font-size: 24px; font-weight: 400; color: #242424;width: 120px; margin-left: -100px;margin-right: 20px;}
	.concept2 #concept-block1-2 .v-title2 {-ms-writing-mode: tb-rl; writing-mode: vertical-rl;width:130px;height: 320px;}
	.concept2 #concept-block1-2 .pic img {width: 215px; height: auto;}
	.concept2 #concept-block1-2 #concept-1-4 {display: flex; flex-direction: row-reverse; align-items: flex-end; margin-top: 80px; margin-bottom: 60px;}
	.concept2 #concept-block1-2 #concept-1-3 {display: flex; flex-direction: row-reverse; align-items: flex-end; margin-top: 80px; margin-bottom: 60px;}
	
}
	

}