@charset "UTF-8";
*{
	box-sizing: border-box;
}
html {
	font-size: 62.5%
}
body {
	line-height: 1.5;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	font-size: 1.5rem;
	color: #24242E;
	min-width: 780px;
}
img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
	-ms-interpolation-mode: bicubic;
}
a {
	text-decoration: none;
	color: #24242E;
}


.slide-in {
		position: fixed;
		top: 43%;
		left: 10%;
	}
	
	.slide-in_inner {
		display: inline-block;
		padding: 5px 15px 5px 5px;
		background-color:#ffffff;
		line-height: 1.4;
		font-family: 'Noto Serif JP', serif;
		font-size: 3.5rem;
	}
	.leftAnime {
	animation-name:slideTextX100;
	animation-duration:0.8s;
	animation-fill-mode:forwards;
    /*opacity: 0;*/
	}
	@keyframes slideTextX100 {
  from {
	transform: translateX(-100%);/*要素を右の枠外に移動*/
    opacity: 0;
  }

  to {
	transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}




	.parallax {
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;    
	}
	.bg_01 {
		background-image: url("../images/haikei2_2.png");
	}
	.bg_02 {
		background-image: url("../images/haikei0.png");
	}


.headerNav,
.colorList {
	display: -webkit-flex;
	display: flex;
}
.colorList {
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: center;
	align-items: center;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}
h1 {
	text-align: center;
	font-size: 2.4rem;
}
h1,
footer {
	background: -moz-linear-gradient(left, #ffebfd 0%, #bdcfff 100%);
	background: -webkit-linear-gradient(left, #ffebfd 0%, #bdcfff 100%);
	background: linear-gradient(to right, #ffebfd 0%, #bdcfff 100%);
}
h3 {
	line-height: 1;
	color: #d6accf;
	font-family: 'Libre Baskerville', serif;
	font-size: 5rem;
}
.subh3,
.caution{
	font-size: 1.5rem;
}
.catchCopy {
	line-height: 1.3;
	font-weight: bold;
	font-size: 1.8rem;
}
.policy .inner p {
	margin-top: 20px;
}
.policy h2 {
	margin-top: 36px;
	font-size: 1.8rem;
	font-weight: bold;
	color: #d769a6;
}
.table01 {
	width: 750px;
}
th {
	font-weight: bold;
}





/* ---------------
   PC layout
--------------- */

@media screen and (min-width: 641px) {
	
	.spOnly { display: none; }
	.pcOnly { display: block; }
	
	
	
	
	
	.bg_02 {
		padding: 15% 0 15% 11%;
	}
	.bg_02 img {
		width: 50%;
		position: relative;
		top: -50px;
		left: 30%;
	}
	.bg_03 {
		background-image: url("../images/haikei1.png");
	}
	
	
	
	/*=================== Header ===================== */
	
	
	header {
		padding: 25px 70px;
	}
	.headerNav li:nth-of-type(n+2) {
		margin-left: 30px;
	}
	
	/*==================================================
	   5-3-3 左から右に線が伸びる（下部）
	  ===================================*/
	  .headerNav li a{
		/*線の基点とするためrelativeを指定*/
	  position: relative;

	  }

	  .headerNav li.current a,
	  .headerNav li a:hover{
	  color: #FF8C00;
	  background: -webkit-linear-gradient(0deg, #f7d4f2, #b1c0ff, #ce7aff);
	  -webkit-background-clip: text;
	  -webkit-text-fill-color: transparent;
	  }

	  .headerNav li a::after {
		content: '';
		/*絶対配置で線の位置を決める*/
		position: absolute;
		bottom: -5px;
		left: -5px;
		/*線の形状*/
		width: 116%;
		height: 1px;
		background:#d1d1d1;
		/*アニメーションの指定*/
		transition: all .3s;
		transform: scale(0, 1);/*X方向0、Y方向1*/
		transform-origin: left top;/*左上基点*/
	  }

	  /*現在地とhoverの設定*/
	  .headerNav li.current a::after,
	  .headerNav li a:hover::after {
		transform: scale(1, 1);/*X方向にスケール拡大*/
	  }

	
	
	/*==================== Main ====================== */
	
	
	main .inner {
		width: 1000px;
		margin: 70px auto;
	}
	
	h1 {
		padding: 40px 0;
	}
	
	.column {
		width: 75%;
		margin: 0 auto;
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		-webkit-align-items: center;
		align-items: center;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
	}
	
	
	.kooza {
		text-align: center;
	}
	.cando .logo img {
		width: 28%;
	}
	.kooza .logo img {
		width: 20%;
	}
	.cando figure {
		width: 80%;
		display: inline-block;
	}
	.cando {
		padding: 8% 0 15% 40%;
	}
	.kooza {
		padding: 10% 0 32% 21%;
	}
	.cando .copy,
	.kooza .copy {
		font-family: 'Noto Serif JP', serif;
		text-shadow: 2px 0 0 #ffffff,
					 0 2px 0 #ffffff,
					 -2px 0 0 #ffffff,
					 0 -2px 0 #ffffff;
		font-size: 3.5rem;
	}
	.cando .copy {
		padding: 40px 0 40px 78px;
	}
	.cando .logo {
		padding: 0 0 0 202px;
	}
	.kooza .copy {
		padding: 15px 0;
	}
	
	
	/*====================Products====================== */
	
	
	.catchCopy {
		margin: 23px 0;
	}
	.product,
	.btn {
		margin-top: 30px;
	}
	

	.colorList {
		width: 100%;
	}
	.colorList li {
		width: 300px;
		text-align: center;
	}
	.colorList li:nth-of-type(n+3) {
		margin-top: 50px;
	}
	.colorList li img {
		width: 50%;
	}
	.colorList li figcaption {
	margin-top: 20px;
	}
	.howto {
		width: 70%;
		margin: 0 auto;
	}
	
	/*== グラデーション線から塗に変化する */

	.gradient4{
	  /*ボタンの形状*/
	  display: inline-block;
	  padding: 18px 60px;  
	  text-decoration: none;
	  border:1px solid #727272;
	  color: #d6accf;
	  outline: none;
	  /*アニメーションの指定*/ 
	  transition: all 0.4s ease-out;
	}

	/*hoverした際、グラデーションと影を付ける*/
	.gradient4:hover{
	  /*ボタンの形状*/
	  border-color:transparent;
	  color: #fff;
	  /*背景の色と形状*/
	  background: linear-gradient(270deg, #f7d4f2 0%, #b1c0ff 50%, #ce7aff 100%);
	  background-size: 200% auto;
	  background-position: right center;
	  /*ボックスの影*/   
	  box-shadow: 0 5px 10px rgba(255, 214, 229, 0.4);
	}
	
	
	
	/*=================== Company ==================== */
	
	
	th,
	td {
		padding: 10px 0;
	}
	td {
		padding-left: 10px;
	}
	
	
	/*==================== Footer ==================== */
	
	
	footer {
		padding: 40px 70px;
		font-size: 1.2rem;
	}
	
	.footerNav {
		display: -webkit-flex;
		display: flex;
	}
	.footerNav li:nth-of-type(n+2) {
		margin-left: 24px;
	}
	.footerNav li a:hover {
		text-decoration: underline;
	}
	
}






/* ---------------
   SP layout
--------------- */

@media screen and (max-width: 640px) {
	
	.spOnly { display: block; }
	.pcOnly { display: none; }
	body {
			min-width: 100%;
			font-size: 1.3rem;
		}
	
	main .inner,
	.table01,
	.colorList li {
		width: 100%;
	}
	
	.bg_01,
	.bg_02 {
		padding: 60% 0 70%;
	}
	.bg_03 {
		padding: 50% 0;
		background-image: url("../images/haikei1_SP.png");
	}


	/*=================== Header ===================== */
	
	
	header {
		padding: 4px 0 5px 3px;
	}
	.homeBtn {
		width: 38px;
	}
	
	/*==================== Main ====================== */
	
	
	main .inner {
		margin: 40px auto;
		padding: 0 10px;
	}
	
	h1 {
	padding: 30px 0 28px;
	}
	
	
	
	.cando,
	.kooza {
		text-align: center;
	}
	.cando .logo img,
	.kooza .logo img {
		width: 50%;
	}
	.cando figure {
		width: 90%;
		display: inline-block;
	}
	.kooza figure {
		width: 90%;
		display: inline-block;
		margin-top: 80px;
	}
	.cando .copy,
	.kooza .copy {
		padding: 20px 0;
		font-family: 'Noto Serif JP', serif;
		text-shadow: 2px 0 0 #ffffff,
					 0 2px 0 #ffffff,
					 -2px 0 0 #ffffff,
					 0 -2px 0 #ffffff;
		font-size: 2.3rem;
	}
	
	
	/*=================== Products =================== */
	
	
	.textRight {
		width: 80%;
		margin: 0 auto;
	}
	h3 {
		margin-top: 40px;
	}
	
	.catchCopy {
		margin: 18px 0;
		font-size: 1.4rem;
	}
	.product,
	.btn {
		margin-top: 24px;
	}

	.gradient4{
	  /*ボタンの形状*/
	  display: inline-block;
		width: 100%;
	  padding: 12px 0 10px;  
	  border:1px solid #727272;
	  color: #d6accf;
		text-align: center;
	}
	
	.colorList {
		width: 100%;
	}
	.colorList li {
		text-align: center;
	}
	.colorList li:nth-of-type(n+2) {
		margin-top: 25px;
	}
	.colorList li img {
		width: 40%;
	}
	.colorList li figcaption {
	margin-top: 10px;
	}	
	
	
	/*=================== Policy ==================== */
	
	
	.policy h2 {
		margin-top: 30px;
	}
	.policy .inner p {
		margin-top: 12px;
	}
	
	
	/*=================== Company ==================== */
	
	
	.table01 {
		display: block;
	}
	tr,
	th,
	td {
		display: block;
		float: left;
		width: 100%;
	}
	td {
		margin-top: 10px;
		text-align: center;
	}
	.table01 tr:nth-of-type(n+2) {
		margin-top: 20px;
	}
	
	
	/*==================== Footer ==================== */
	
	
	footer .footerNav {
		border-top: 1px solid #D6BDE8;
	}
	footer .footerNav li {
		width: 50%;
		padding: 9px 10px 8px;
		border-bottom: 1px solid #D6BDE8;
	}
	footer .footerNav li:nth-of-type(odd) {
		float: left;
		border-right: 1px solid #D6BDE8;
	}
	footer .footerNav li:nth-of-type(even) {
		float: right;
	}
	footer .footerNav li a {
		display: block;
	}
	
	footer .footerNav::after {
	display: block;
	clear: both;
	content: "";
}
	
}