@charset "UTF-8";

/* CSS Document */
#contents { text-align: center; background: #FFF; }

#lower-contents { padding-bottom: 0; }

.mincho { font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; }

.new2025oct p { font-size: 16px; }
.new2025oct a { text-decoration: none; }
.new2025oct .btn a { transition: transform 0.2s ease; }
.new2025oct .btn a:hover { transform: scale(1.04); }
.new2025oct .bg { background: url("../img/bg.jpg") top center; background-size: cover; background-repeat: no-repeat; margin: 0 auto; max-width: 1360px; }

.new2025oct #mv { background: #FFF; padding: 0 0 30px; }
.new2025oct .lead { position: relative; }
.new2025oct .lead p { font-size: 1.47vw; line-height: 3em; letter-spacing: 0.2em; }
.new2025oct h2 { margin: 5vw 0; position: relative; display: inline-block; }
.new2025oct h2 img { width: 17vw; }
.new2025oct .color img { width: 47vw; }
.new2025oct .date { padding: 0 2.2vw; margin: 4.4vw 0 3.5vw; display: inline-block; }
.new2025oct .date p { font-size: 1.47vw; letter-spacing: 0.2em; }
.new2025oct .box { padding: 0 10%; }
.new2025oct .item-box { width: 42.5%; float: left; }
.new2025oct .item-box .item img { width: 26.5vw; }
.new2025oct .item-box .item-box-inner { padding: 0 5.5vw; }
.new2025oct .item-box .item-box-inner h3 { color: #FFF; font-size: 20px; text-align: left; line-height: 1.8em; text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2); margin: 0 0 1vw; }
.new2025oct .item-box .item-box-inner .spec { color: #FFF; font-size: 15px; font-weight: 500; line-height: 2em; text-align: left; text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2); }
.new2025oct .item-box .item-box-inner .btn { margin: 2vw 0 0 -2vw; }
.new2025oct .item-box .item-box-inner .btn li { margin: 0 0 1vw; }
.new2025oct .item-box .item-box-inner .btn li:last-child { margin-bottom: 0; }
.new2025oct .item-box .item-box-inner .btn a { font-size: 16px; font-weight: 600; letter-spacing: 0.2em; padding: 8px 60px; border-radius: 60px; display: inline-block; position: relative; }
.new2025oct .item-box .item-box-inner .btn a::after { content: '→'; position: absolute; top: 8px; right: 20px; font-weight: 600; }
.new2025oct .box .sample { float: left; width: 57.5%; }

.slide-items {
  width: 100%;
  height: 100%; }
.slide-items img {
  width: 100%;
  object-fit: cover; }
.slide-dots {
  margin: 0;
  padding: 0;
  text-align: center; }
.slide-dots li {
  display: inline-block;
  margin: 0 10px; }
.slide-dots li button {
  position: relative;
  text-indent: -9999px; }
.slide-dots li button::before {
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  cursor: pointer;
  width: 10px;
  height: 10px;
  left: 0;
  margin: auto;
  position: absolute;
  border-radius: 10px;
  right: 0;
  top: -30px; }
button {
  background: none;
  border: none;
  outline: none;
  padding: 0 4px; }

.fd { position: relative; transform: translateY(4.4vw); opacity: 0; transition: opacity 1s linear, transform 1s cubic-bezier(0.19, 1, 0.22, 1) }
.fd.active { transform: translateY(0); opacity: 1 }
.zm { opacity: 0; transform: scale(1.5); transition: opacity 0.8s, transform 0.8s cubic-bezier(0.175, 0.885, 0.42, 1.12); }
.zm.active { opacity: 1; transform: scale(1) }
.block01 { padding: 30vw 0 0; }
.block01 .block-inner { background: url("../img/block01_bg01.png") top center;  background-size: contain; background-repeat: no-repeat; }
.block01 .lead { color: #FFF; }
.block01 .lead p { text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4); }
.block01 .date { color: #FFF; background: #ee8bb0; }
.block01 .btn a { color: #FFF; background: #ee8bb0; box-shadow: 2px 2px 0px 0px rgba(132, 202, 168, 1); }
.block01 .btn a::after {　color: #FFF; }
.block01 h2::before { content: ''; width: 15vw; height: 22vw; position: absolute; top: -11.5vw; left: -16vw; background: url(../img/block01_parts01.png) no-repeat; background-size: contain; z-index: 1; }
.block01 h2::after { content: ''; width: 16vw; height: 18vw; position: absolute; bottom: -1vw; right: -17.5vw; background: url(../img/block01_parts02.png) no-repeat; background-size: contain; }
.block01 .slide-dots li button::before { background: #f4d3df; } 
.block01 .slide-dots li.slick-active button::before { background: #ee8bb0; }

.block02 { padding: 21vw 0 0; position: relative; }
.block02 .block-inner { background-image: url("../img/block02_bg01.png"), url("../img/block02_bg02.png"); background-size: contain, contain; background-repeat: no-repeat, no-repeat; background-position: top center, bottom center; }
.block02 .lead { color: #FFF; }
.block02 .lead p { text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4); }
.block02 .date { color: #095283; background: #FFFDE5; }
.block02 .btn a { color: #FFF; background: #EA5539; box-shadow: 2px 2px 0px 0px rgba(250, 250, 250, 1); }
.block02 .btn a::after {　color: #FFF; }
.block02 .lead::after { content: ''; width: 12vw; height: 11.4vw; position: absolute; top: -12vw; left: 58vw; background: url(../img/block02_parts01.png) no-repeat; background-size: contain; }
.block02 h2::before { content: ''; width: 21vw; height: 17.3vw; position: absolute; top: 2vw; left: -22vw; background: url(../img/block02_parts02.png) no-repeat; background-size: contain; }
.block02 h2::after { content: ''; width: 14.7vw; height: 16.5vw; position: absolute; bottom: -1vw; right: -17vw; background: url(../img/block02_parts03.png) no-repeat;	background-size: contain; }
.block02 .slide-dots li button::before { background: #f2bfa9; } 
.block02 .slide-dots li.slick-active button::before { background: #EA5539; }

.block03  { padding: 30vw 0 0; }
.block03 .block-inner { background-image: url("../img/block03_bg01.png"), url("../img/block03_bg02.png"); background-size: contain, contain; background-repeat: no-repeat, no-repeat; background-position: top center, bottom center; }
.block03 .lead { color: #231815; }
.block03 .date { color: #D4AC32; background: #626100; }
.block03 .btn a { color: #D4AC32; background: #861311; box-shadow: 2px 2px 0px 0px rgba(98, 97, 0, 1); }
.block03 .btn a::after {　color: #D4AC32; }
.block03 .lead::after {content: ''; width: 16vw; height: 13.7vw; position: absolute; top: -14.5vw; left: 61vw; background: url(../img/block03_parts01.png) no-repeat; background-size: contain; }
.block03 h2::before { content: ''; width: 19vw; height: 18.7vw; position: absolute; top: 2vw; left: -20vw; background: url(../img/block03_parts02.png) no-repeat; background-size: contain; }
.block03 h2::after {content: ''; width: 16.4vw; height: 18.6vw; position: absolute; top: 1vw; right: -19vw; background: url(../img/block03_parts03.png) no-repeat; background-size: contain; }
.block03 .slide-dots li button::before { background: #e2cdc2; } 
.block03 .slide-dots li.slick-active button::before { background: #861311; }

.block04 { padding: 30vw 0 10vw; }
.block04 .block-inner { background-image: url("../img/block04_bg01.png"), url("../img/block04_bg02.png"); background-size: contain, contain; background-repeat: no-repeat, no-repeat; background-position: top center, bottom center; }
.block04 .lead { color: #002B60; }
.block04 .date { color: #5FC1C7; background: #002B60; }
.block04 .btn a { color: #002B60; background: #5FC1C7; box-shadow: 2px 2px 0px 0px rgba(0, 43, 97, 1); }
.block04 .btn a::after {　color: #002B60; }
.block04 .lead::after { content: ''; width: 18vw; height: 13.6vw; position: absolute; top: -14vw; left: 58.5vw; background: url(../img/block04_parts01.png) no-repeat; background-size: contain; }
.block04 h2::before { content: ''; width: 18.8vw; height: 20vw; position: absolute; top: -1vw; left: -17.5vw; background: url(../img/block04_parts02.png) no-repeat; background-size: contain; }
.block04 h2::after { content: ''; width: 14vw; height: 15.9vw; position: absolute; bottom: 1vw; right: -15.5vw; background: url(../img/block04_parts03.png) no-repeat; background-size: contain; }
.block04 .slide-dots li button::before { background: #d0cbd4; } 
.block04 .slide-dots li.slick-active button::before { background: #002B60; }



@media screen and (min-width: 1360px) {
	
	.wrap { background-image: url("../img/side03.jpg"), url("../img/side02.jpg"), url("../img/side01.jpg"), url("../img/block04_side.jpg"), url("../img/block03_side.jpg"), url("../img/block02_side.jpg"), url("../img/block01_side.jpg"); background-position: 0 7172px, 0 4390px, 0 2065px, 0 7250px, 0 4450px, 0 2150px, 0 0; background-repeat: repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x; background-size: auto, auto, auto, cover, cover, cover, cover; }	

	.new2025oct .lead p { font-size: 20px; }
	.new2025oct h2 { margin: 90px 0; }
	.new2025oct h2 img { width: 230px; }
	.new2025oct .color img { width: 640px; }
	.new2025oct .date { padding: 0 60px; margin: 60px 0 50px; }
	.new2025oct .date p { font-size: 20px; }
	.new2025oct .item-box .item img { width: 360px; }
	.new2025oct .item-box .item-box-inner { padding: 0 70px; }
	.new2025oct .item-box .item-box-inner h3 { margin: 0 0 15px; }
	.new2025oct .item-box .item-box-inner .btn { margin: 30px 0 0 -30px; }
	.new2025oct .item-box .item-box-inner .btn li { margin: 0 0 15px; }
	
    .fd .cvr { left: calc( (1360px - 100vw) * 0.5 ); top: 0; }
	.block01 { padding: 410px 0 0; }
	.block01 h2::before { width: 205px; height: 300px; position: absolute; top: -160px; left: -230px; }
	.block01 h2::after { width: 220px; height: 247px; position: absolute; bottom: -20px; right: -250px; }
	
	.block02 { padding: 260px 0 0; }
	.block02 .lead::after { width: 169px; height: 155px; position: absolute; top: -180px; left: 780px; }
	.block02 h2::before { width: 295px; height: 235px; position: absolute; top: 30px; left: -310px; }
	.block02 h2::after { width: 200px; height: 225px; position: absolute; bottom: -10px; right: -230px; }
	
	.block03  { padding: 370px 0 0; }
	.block03 .lead::after { width: 215px; height: 186px; position: absolute; top: -170px; left: 840px; }
	.block03 h2::before { width: 267px; height: 255px; position: absolute; top: 15px; left: -290px; }
	.block03 h2::after { width: 223px; height: 254px; position: absolute; top: 20px; right: -255px; }

	.block04  { padding: 390px 0 140px; }
	.block04 .lead::after { width: 250px; height: 185px; position: absolute; top: -175px; left: 805px; }
	.block04 h2::before { width: 256px; height: 277px; position: absolute; top: -20px; left: -237px; }
	.block04 h2::after { width: 192px; height: 216px; position: absolute; bottom: 20px; right: -210px; }	
}



@media screen and (max-width: 1024px) {
	
	.new2025oct .item-box .item-box-inner h3 { font-size: 16px; }
	.new2025oct .item-box .item-box-inner .spec { font-size: 13px; }
	.new2025oct .item-box .item-box-inner .btn a { font-size: 13px;  }
	.new2025oct .item-box .item-box-inner .btn a::after { content: '→'; position: absolute; top: 8px; right: 20px; }
}



@media screen and (max-width: 820px) {
	
	.new2025oct .item-box .item-box-inner { padding: 0 2vw; }
	.new2025oct .item-box .item-box-inner h3 { font-size: 15px; margin: 0 0 0.5vw; }
	.new2025oct .item-box .item-box-inner .spec { font-size: 12px; }
	.new2025oct .item-box .item-box-inner .btn { margin: 1vw 0 0 -2vw; }
	.new2025oct .item-box .item-box-inner .btn a { font-size: 12px; padding: 6px 60px; }
	.new2025oct .item-box .item-box-inner .btn a::after { content: '→'; position: absolute; top: 6px; right: 10px; }
	
	.slide-dots li button::before { top: -26px; }
}



@media screen and (max-width: 768px) {
	
	.new2025oct .btn a:hover { transform: scale(1.0); }	
	.new2025oct .bg { background-image: url("../img/bg_sp01.png"), url("../img/bg_sp02.png"), url("../img/bg.jpg"); background-repeat: no-repeat, no-repeat, no-repeat; background-size: contain, contain, cover; background-position: left 0, right 0, top center; }
	
	.new2025oct #mv { padding: 0 0 10px; }
	.new2025oct .lead { padding: 0 4.4vw; }
	.new2025oct .lead p { font-size: 17px; line-height: 2.6em; letter-spacing: 0.08em; }
	.new2025oct h2 { margin: 30px 0; width: 30%; }
	.new2025oct h2 img { width: 100%; }
	.new2025oct .color img { width: 80%; }
	.new2025oct .date { padding: 0 20px; margin: 30px 0 10px; }
	.new2025oct .date p { font-size: 15px; letter-spacing: 0.1em; }
	.new2025oct .box { padding: 0; }
	.new2025oct .item-box { width: 100%; }
	.new2025oct .item-box .item img { width: 60%; }
	.new2025oct .item-box .item-box-inner { padding: 0; }
	.new2025oct .item-box .item-box-inner h3 { font-size: 18px; text-align: center; line-height: 1.6em; margin: 0 0 10px; }
	.new2025oct .item-box .item-box-inner .spec { font-size: 14px; line-height: 1.6em; padding: 0 0 0 24%; }
	.new2025oct .item-box .item-box-inner .btn { margin: 20px 0 0 0; }
	.new2025oct .item-box .item-box-inner .btn li { margin: 0 0 10px; }
	.new2025oct .item-box .item-box-inner .btn a { font-size: 14px; }
	.new2025oct .item-box .item-box-inner .btn a::after { content: '→'; position: absolute; top: 7px; right: 20px; }
	.new2025oct .box .sample { width: calc(100% - 17.6vw); padding: 40px 8.8vw 0; }
	
	.slide-dots li button::before { width: 2vw; height: 2vw; top: -6vw; }
	button { background: none; border: none; outline: none; padding: 0 1vw; }	
	
	.block01 { padding: 80px 0 0; }
	.block01 .block-inner { background: url("../img/block01_bg01.png") 0 200px; background-size: contain; background-repeat: no-repeat; }
	.block01 h2::before { width: 25.5vw; height: 37.4vw; position: absolute; top: -19vw; left: -27vw; }
	.block01 h2::after { width: 27.2vw; height: 30.6vw; position: absolute; bottom: -3vw; right: -30vw; }	
	
	.block02 { padding: 140px 0 0; }
	.block02 .block-inner { background-position: 0 200px, bottom center; }
	.block02 .lead::after { width: 20.4vw; height: 19.4vw; position: absolute; top: -22vw; left: 58vw; }
	.block02 h2::before { width: 35.7vw; height: 29.4vw; position: absolute; top: 2vw; left: -32.5vw; }
	.block02 h2::after { width: 25vw; height: 28vw; position: absolute; bottom: -1vw; right: -28vw; }	
	
	.block03  { padding: 140px 0 0; }
	.block03 .block-inner { background-position: 0 180px, bottom center; }
	.block03 .lead::after { width: 27.2vw; height: 23.2vw; position: absolute; top: -24.5vw; left: 61vw; }
	.block03 h2::before { width: 32.3vw; height: 31.8vw; position: absolute; top: 2vw; left: -32vw; }
	.block03 h2::after { width: 27.8vw; height: 31.6vw; position: absolute; top: 1vw; right: -32vw; }
	
	.block04  { padding: 140px 0 100px; }
	.block04 .block-inner { background-position: 0 180px, bottom center; }
	.block04 .lead::after { width: 30.6vw; height: 23.1vw; position: absolute; top: -24vw; left: 58.5vw; }
	.block04 h2::before { width: 32vw; height: 34vw; position: absolute; top: -1vw; left: -30vw; }
	.block04 h2::after { width: 23.8vw; height: 27vw; position: absolute; bottom: 1vw; right: -26.3vw; }
	
    .sp-w { margin: 0 -4.4vw !important; width: calc(100% + 8.8vw) !important }
}



@media screen and (max-width: 375px) {
	
		.new2025oct .lead p { letter-spacing: 0; }	
}
