@charset "utf-8";
/* CSS Document */

html { scroll-behavior: smooth;}

.sp_br {
  display: none;
}

header {
  transform: translateY(-152px);
  opacity: 0;
}

header.isActive {
  transform: translateY(0px);
  transition: all 0.7s;
  opacity: 1;
}

/* Loading
========================== */
#splash {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  background:#fff;
  text-align:center;
  overflow: hidden;
}

#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash_logo img {
  width: 73px;
  height: 549px;
}

/* main
========================== */
section p {
  font: normal 600 17px YuMincho,Yu Mincho,serif;
  color: #4D4D4D;
  letter-spacing: 3.4px;
  text-align: center;
}

.product-sec img {
  max-width: 100%;
  width: 100%;
}

/* 下層ページビジュアル
---------------------------*/
.page_visual {
	background: url(../img/page_visual.png)no-repeat center center;
	background-size: cover;
}

/* 動画（TOP埋め込み）
========================== */

.video-box {
  position: relative;
  width: 100%;
	overflow: hidden;
  margin-bottom: -5px;
}

video {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  -o-object-fit: cover;
  object-fit: cover;
}

h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

/* ナビゲーション
========================== */
.pankuzu {
  position: absolute;
  left: 0;
  right: 0;
  top: 10px;
  margin: auto;
  padding: 0;
}

.pankuzu ul li a:hover {
  text-decoration: none;
}

.nav-box {
  position: relative;
  background: #F8F6EE;
  padding: 115px 0;
}

.page-nav-list {
  display: flex;
  max-width: 1310px;
  width: 100%;
  margin: 160px auto 350px;
}

.page-nav-list li {
  position: relative;
  max-width: 356px;
  width: 100%;
  height: 257px;
  background-color: #fff;
  background-image: url("../img/contents-img01.png");
  background-position: top center;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  box-shadow: 0px 0px 10px #00000029;
  margin: auto 40px 30px;
}

.page-nav-list li:nth-child(2) {
  background-image: url("../img/contents-img02.png");
}

.page-nav-list li:nth-child(3) {
  background-image: url("../img/contents-img03.png");
}

.page-nav-list li a {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
}

.page-nav-list li a:hover {
  background-color: rgba(0, 0, 0, 0.5);
  transition-duration: 0.5s;
}

.page-nav-list li a:hover::after {
  content: "色線";
  position: absolute;
  font: normal 600 18px YuMincho,Yu Mincho,serif;
  transition-duration: 0.5s;
  color: #eee;
  left: 0;
  right: 0;
  line-height: 1.5;
  margin: auto;
  text-align: center;
  bottom: 38px;
  letter-spacing: 3.4px;
}

.page-nav-list li p {
  font: normal 600 18px YuMincho,Yu Mincho,serif;
  color: #4D4D4D;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.5;
  margin-bottom: 10px;
}

.page-nav-list li:hover p {
  color: #fff;
  transition-duration: 0.5s;
}

.page-nav-list li p::after {
  content: "＞";
  color: #E73828;
  transform: rotateZ(90deg) scale(0.7, 1.7);
}

.page-nav-list li:hover p::after {
  content: "＞";
  color: #eee;
  transform: rotateZ(90deg) scale(0.7, 1.7);
}

.page-nav-list li:nth-of-type(2) a:hover::after {
  content: "藍色";
}

.page-nav-list li:nth-of-type(3) a:hover::after {
  content: "伝統色";
}

/* 動画（youtube埋め込み）
========================== */
.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  margin: 150px auto 0;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.movie-box {
  margin: 80px auto 50px;
  max-width: 1000px;
  width: 100%;
}
.movie-inner {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  margin: 0 auto ;
}
.movie-inner .movie-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  background: url("../img/thumb.jpg") no-repeat;
  background-size: cover;
}
.movie-inner .movie-thumb:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  background: url("../img/thumb_play.png") center center no-repeat;
  background-size: 90px 90px;
  transition: 0.5s;
}
.movie-inner .movie-thumb:hover:after {
  transform: scale(1.1);
  background: url("../img/thumb_play.png") center center no-repeat;
  background-size: 90px 90px;
}
.movie-inner iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/*Product01
========================== */
.product-sec {
  position: relative;
  background: #F8F6EE;
  padding-bottom: 375px;
}

.product-sec.last {
  padding-bottom: 200px;
}

.product-img {
  width: 100%;
  height: auto;
}

.product-img.cross {
  padding-top: 20px;
}

.product-title {
  position: absolute;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font: normal 600 60px YuMincho,Yu Mincho,serif;
  letter-spacing: 12px;
  color: #4D4D4D;
  text-shadow: 0px 0px 10px #fff;
  top: -138px;
  left: 6%;
  line-height: 1.2;
}

.product-title.kinpaku {
    left: 25%;
}

.product-title.tomeikan {
    right: 6%;
}

.product-title img {
  max-width: 102px;
  width: 100%;
  max-height: 102px;
  height: 100%;
}

.txt-c {
  color: #F8F6EE;
}

.title-br {
  padding-top: 145px;
}

.title-br2 {
  padding-top: 74px;
}

.contents-box {
  max-width: 1230px;
  width: 100%;
  margin: auto;
  padding: 80px 0;
  background: #fff;
  box-shadow: 0px 0px 10px #00000029;
  transform: translateY(-40px);
}

.product-list01 {
  max-width: 1000px;
  width: 100%;
  margin: 80px auto 0;
  display: flex;
  justify-content: space-between;
}

.product-list01 li {
  display: flex;
  align-items: center;
  color: #666;
  font: normal 600 17px YuMincho,Yu Mincho,serif;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  line-height: 1.2;
}

.product-list01 li span {
  color: #999;
}

.product-list01 li p {
  margin-bottom: 15px;
  padding: 0 45px;
  background: url("../img/season-icon01.png") bottom 15px right no-repeat;
  text-align: left;
}

.product-list01 li:nth-of-type(1) {
  margin-top: 20px;
}

.product-list01 li:nth-of-type(2) {
  margin-top: 200px;
}
.product-list01 li:nth-of-type(2) p {
  background: url("../img/season-icon02.png") bottom 15px right no-repeat;
}

.product-list01 li:nth-of-type(3) p {
  background: url("../img/season-icon03.png") bottom 15px right no-repeat;
}

.product-list01 li:nth-of-type(4) {
  margin-top: 290px;
}
.product-list01 li:nth-of-type(4) p {
  background: url("../img/season-icon04.png") bottom 15px right no-repeat;
}

.arrow-link-box {
  border-bottom: 1px solid #E73828;
  max-width: 340px;
  width: 100%;
  height: 10px;
  position: relative;
}

.arrow-link-box:hover {
  opacity: 0.8;
  transform: translateX(5px);
  transition-duration: 0.3s;
}

.stickarrow {
  position: absolute;
  width: 100%;
  height: 44px;
  top: -30px;
  left: 0;
  z-index: 10;
}

.arrow-link {
  text-align: right;
  padding-right: 40px;
  padding-bottom: 10px;
}

.arrow-link::after {
  content: "";
  position: absolute;
  right: 3px;
  top: 31px;
  width: 20px;
  height: 20px;
  border-right: 1px solid #E73828;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/*Product02
========================== */
.product-list02 {
  display: flex;
  justify-content: space-between;
  max-width: 800px;
  width: 100%;
  margin: 80px auto 40px;
  flex-wrap: wrap;
}

.product-list02-1, .product-list02-2 {
  max-width: 630px;
  width: calc(100% + 100px);
  display: flex;
  margin-right: -100px;
  justify-content: center;
}

.product-list02-2 {
  margin-top: 30px;
}

.product-list02-1 li:nth-child(2) {
  transform: translateX(-100px);
  padding-top: 100px;
}

.product-list02-2 li:nth-child(2) {
  transform: translateX(-30px);
  padding-top: 75px;
}

/*Product03
========================== */
.product-list03 {
  max-width: 780px;
  width: 100%;
  margin: 80px auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.product-list03 li {
  display: flex;
  align-items: center;
  font: normal 600 17px YuMincho,Yu Mincho,serif
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}

.product-list03 li p {
  margin-bottom: 15px;
  padding: 0 45px;
  text-align: center;
  line-height: 1.0;
  font-size: 20px;
}

.product-list03 li p span {
  font: normal 600 12px YuMincho,Yu Mincho,serif;
}

.product-list03 li:nth-of-type(1) p {
  color: #386975;
}

.product-list03 li:nth-of-type(2) p {
  color: #C26D72;
  margin-top: 30px;
}

.product-list03 li:nth-of-type(3) p {
  color: #767977;
  margin-top: 100px;
}

/*Movie
========================== */
.movie-sec {
  background: #D1D0C6;
  padding: 160px 0;
}

.movie-sec h2 {
  text-align: center;
}

section p.movie-lead-txt {
  color: #4D4D4D;
  letter-spacing: 4.6px;
  font-size: 23px;
  margin: 70px auto 50px;
}

.detail-btn {
  max-width: 356px;
  width: 100%;
  border: 1px solid #999;
  margin: auto;
  background: #dfded7;
}

.detail-btn a {
  color: #4D4D4D;
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
}

.detail-btn a::after {
  content: "";
  position: absolute;
  right: 15px;
  top: 9px;
  width: 10px;
  height: 10px;
  border-top: 1px solid #999;
  border-right: 1px solid #999;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.detail-btn:hover {
  background: #999;
}

.detail-btn a:hover {
  color: #dfded7;
}

.detail-btn a:hover::after {
  border-top: 1px solid #dfded7;
  border-right: 1px solid #dfded7;
}

/*
========================== */
.page_backBtn {
  text-align: center;
  border-top: 1px solid #e4e4e4;
  padding: 45px 0 15px;
  margin: 45px auto 45px;
  width: 75%;
}

.page_backBtn p {
  color: #fff;
  background: #999;
  padding: 4px 65px;
  display: inline-block;
}

/* fadeUp
========================== */
.fadein_outer .fadein {
  opacity: -1;
  transform: translate(0, 50px);
  transition: all 900ms;
}

.fadein_outer .fadein.scrollin {
  opacity: 1;
  transform: translate(0, 0);
}

.fadein_outer.delay .fadein:nth-child(2) {
  -moz-transition-delay: 300ms;
  -webkit-transition-delay: 300ms;
  -o-transition-delay: 300ms;
  -ms-transition-delay: 300ms;
}
.fadein_outer.delay .fadein:nth-child(3) {
  -moz-transition-delay: 600ms;
  -webkit-transition-delay: 600ms;
  -o-transition-delay: 600ms;
  -ms-transition-delay: 600ms;
}
.fadein_outer.delay .fadein:nth-child(4) {
  -moz-transition-delay: 900ms;
  -webkit-transition-delay: 900ms;
  -o-transition-delay: 900ms;
  -ms-transition-delay: 900ms;
}

.product-list02.fadein_outer.delay .fadein:nth-child(1) {
  -moz-transition-delay: 300ms;
  -webkit-transition-delay: 300ms;
  -o-transition-delay: 300ms;
  -ms-transition-delay: 300ms;
}

.product-list02-1.fadein_outer.delay .fadein:nth-child(1) {
  -moz-transition-delay: 600ms;
  -webkit-transition-delay: 600ms;
  -o-transition-delay: 600ms;
  -ms-transition-delay: 600ms;
}
.product-list02-2.fadein_outer.delay .fadein:nth-child(1) {
  -moz-transition-delay: 900ms;
  -webkit-transition-delay: 900ms;
  -o-transition-delay: 900ms;
  -ms-transition-delay: 900ms;
}
.product-list02-2.fadein_outer.delay .fadein:nth-child(2) {
  -moz-transition-delay: 1200ms;
  -webkit-transition-delay: 1200ms;
  -o-transition-delay: 1200ms;
  -ms-transition-delay: 1200ms;
}

.fadein_outer .product-list02-1 li.fadein:nth-child(2) {
  opacity: -1;
  transform: translateX(-100px) translateY(50px);
}

.fadein_outer .product-list02-1 li.fadein.scrollin:nth-child(2) {
  opacity: 1.0;
  transform: translateX(-100px);
}

.fadein_outer .product-list02-2 li.fadein:nth-child(2) {
  opacity: -1;
  transform: translateX(0px) translateY(50px);
}

.fadein_outer .product-list02-2 li.fadein.scrollin:nth-child(2) {
  opacity: 1.0;
  transform: translateX(0px);
}

.product-list03.fadein_outer.delay .fadein:nth-child(1) {
  -moz-transition-delay: 300ms;
  -webkit-transition-delay: 300ms;
  -o-transition-delay: 300ms;
  -ms-transition-delay: 300ms;
}

.product-list03.fadein_outer.delay .fadein:nth-child(2) {
  -moz-transition-delay: 700ms;
  -webkit-transition-delay: 700ms;
  -o-transition-delay: 700ms;
  -ms-transition-delay: 700ms;
}

.product-list03.fadein_outer.delay .fadein:nth-child(3) {
  -moz-transition-delay: 1100ms;
  -webkit-transition-delay: 1100ms;
  -o-transition-delay: 1100ms;
  -ms-transition-delay: 1100ms;
}

/* 固有のスマホ対応記述
========================== */
@media screen and ( max-width: 1280px ){
body {
  width: 1280px;
}
}
/* 767pxより小さい場合 */
@media screen and ( max-width: 767px ){
  main {
    position: relative;
  }
  
  body {
    width: 100%;
  }
  
.sp_br {
  display: block;
}

	.youtube {
    position: relative;
    width: 90%;
    padding-top: 56.25%;
    margin: 0px auto;
}
  
.movie-inner {
  padding-top: 0;
  width: 90%;
  }
  
  .movie-inner.show {
/*    position: relative;
    width: 100%;
    padding-top: 0;*/
        position: relative;
    width: 90%;
    padding-top: 56.25%;
    margin: 0 auto;
}
  .movie-inner .movie-thumb {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    margin: auto;
}

section p {
  width: 85%;
  margin: auto;
  font-size: 12px;
}
  
.nav-box {
  padding: 65px 0;
}

.page-nav-list {
  margin: 65px auto 150px;
  flex-wrap: wrap;
  justify-content: center;
}
  
.product-sec {
  padding-bottom: 150px;
}
  
.product-sec.last {
  padding-bottom: 80px;
}
  
.product-title img {
  max-width: 58px;
  max-height: 58px;
}
  
.product-img.cross {
  padding: 10px 7px 0 7px;
}

.product-img img {
  width: 100%;
}

.product-title {
  font-size: 30px;
  top: -76px;
  line-height: 1.2;
}
  
.title-br {
  padding-top: 85px;
}
  
.txt-c {
  color: #4D4D4D
}

.contents-box {
  min-width: 305px;
  width: 85%;
  padding: 50px 0;
}
  
.arrow-link-box {
  width: 60%;
  margin-top: 50px;
}
  
.arrow-link {
  padding-right: 20px;
  padding-bottom: 5px;
}
  
.arrow-link::after {
  right: 3px;
  top: 21px;
  }
.stickarrow {
  height: 22px;
  top: -20px;
}

/*Product01
========================== */
.product-list01 {
  justify-content: center;
  flex-wrap: wrap;
}

.product-list01 li:nth-of-type(odd) {
  padding-right: 130px;
}
  
.product-list01 li:nth-of-type(even) {
  padding-left: 130px;
}
  
.product-list01 li:nth-of-type(1), .product-list01 li:nth-of-type(2), .product-list01 li:nth-of-type(3), .product-list01 li:nth-of-type(4) {
  margin-top: -30px;
}
  
/*Product02
========================== */
.product-title.kinpaku {
  left: 5%;
}
  
.product-list02 {
  justify-content: center;
}
  
.product-list02-1, .product-list02-2 {
  max-width: 630px;
  width: 90%;
  display: flex;
  margin: 50px auto 0;
  justify-content: center;
}
  
.product-list02-2 {
  margin: 30px auto 0;
}
  
.fadein_outer .product-list02-1 li.fadein:nth-child(2) {
  opacity: -1;
  transform: translateX(0) translateY(0);
}

.fadein_outer .product-list02-1 li.fadein.scrollin:nth-child(2) {
  opacity: 1.0;
  transform: translateX(0) translateY(-50px);;
}

.fadein_outer .product-list02-2 li.fadein:nth-child(2) {
  opacity: -1;
  transform: translateX(0) translateY(0);
}

.fadein_outer .product-list02-2 li.fadein.scrollin:nth-child(2) {
  opacity: 1.0;
  transform: translateX(0) translateY(-50px);
}
  
/*Product01
========================== */
.product-list03 {
  justify-content: center;  
}
  
.product-list03 li:nth-of-type(1) {
  padding-right: 150px;
}
  
.product-list03 li:nth-of-type(3) {
  padding-left: 150px;
}  

.product-list03 li:nth-of-type(2) p, .product-list03 li:nth-of-type(3) p {
  margin-top: -20px;
}

.movie-sec {
  padding: 80px 0;
}
  
section p.movie-lead-txt {
  font-size: 14px;
  width: 90%;
}
  
.detail-btn {
  width: 80%;
}
  
.detail-btn a {
  padding: 10px 0;
}
  
h1 img, #splash_logo img {
  height: calc(100vh / 3) ;
}
  
.detail-btn a::after {
  top: 15px;
}
  
.spimg img {
  width: 60%;
}
  
.spmove {
  margin-top: -40px;
  padding-left: 60px;
}
  
.spmove2 {
  margin-top: 60px;
}
  
.product-list03 li p {
  display: block;
}
  
.product-list03 li:nth-of-type(1) p {
  height: 62px;
}
  
.product-list03 li:nth-of-type(2) p {
  height: 95px;
}

.product-list03 li:nth-of-type(3) p {
  height: 95px;
}
  
}

/* 767pxより小さい場合 */
@media screen and ( max-width: 700px ){
.cp_offcm01 .cp_menu {
  height: 100vh;
}

/* 767pxより小さい場合 */
@media screen and ( max-width: 450px ){
header .logo_area a.sp_lang p {
  width: 65%;
}
}
@media print {


}