@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');
@import url("https://use.typekit.net/xiz2ysc.css");

#beltbnr {
   display: none;
}
.h_bar{
   display: none;
}
/*/▲帯バナー削除用CSS▲//*/
#mainArea {
    letter-spacing: 0;
    line-height: 2;
    overflow: hidden;
    margin: 0 auto;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.2rem;
}
#mainArea div {
    font-family: 'Noto Sans JP', sans-serif;
}
#mainArea p {
    font-family: 'Noto Sans JP', sans-serif;
}
.bnr_ {
    width: 900px;
    margin: 0 auto;
    display: block;
}
section {
    width: 860px;
    margin: 7em auto 10em;	
	position: relative;	
}
.f-f {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 2.1rem;
    font-size: 1.25rem;
    letter-spacing: 0.5px;		
}
.under_ {
    margin: 0 auto 4% auto;
	clear: both;
}
.back-b {

}
.top_img {
  position: relative;
  overflow: hidden;
}
.top_img::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(/campaign/2025/shipsw_1226/sp/images/caption_pc.jpg);     
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 2s ease;
  z-index: 0;
}
.top_img.bg-show::before {
  opacity: 1;
}
.top_img > * {
  position: relative;
  z-index: 1;
}
.fade-lead {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.6s ease, transform 1.4s ease;
}
.fade-lead.active {
  opacity: 1;
  transform: translateY(0);
}

.lead {
    width: 100%;
    margin: 0 auto -2em;
    padding: 4% 0;
    position: relative;
}
.lead p {
	padding: 1em 0 1em 0;
    font-family: "Noto Serif JP", serif !important;
	font-size: 1.35rem;
	font-weight: 400;	
    font-style: normal;    
	line-height: 1.9;
    letter-spacing: 1px;
    text-align: center;
}

/*///*/
#page_nav {
	width: 100%;
    margin: 0 auto 0 auto;
	padding: 2.5% 0 7% 0;	
    z-index: 1;	
}
#page_nav ul {
	width: 28%;
	margin: 0 auto;
	clear: both;
	display: flex;
	justify-content: space-around;
}
#page_nav ul li {
	padding: 2em 0 2em 0;
}
#page_nav ul li a:hover {
    color: #2a3e81;
    transition: .3s;    
}
#page_nav ul li a {
    font-family: "scotch-deck", sans-serif;
    font-weight: 300;
    font-style: normal;
    text-align: center;
    text-decoration: none;	
	font-size: 1.7rem;
	line-height: 1.9;
    color: #161616;
    text-decoration: underline;
    text-underline-offset: 8px;
    text-decoration-thickness: 0.5px;
}

.main {
    width: 650px;
    margin: 0 auto;
    position: relative;
}
.main img {
    width: 80%;
    margin: 0 auto;
    display: block;
}
.main h2 {
    font-size: 2.5rem;	
    font-family: "scotch-deck", sans-serif;
    font-weight: 300;
    font-style: normal;	
	line-height: 1.5;
    margin: 1% 0 2% 0;
    color: #161616;
    text-align: center;
    letter-spacing: 0.5px;
}
.main .main_creditArea {
    width: 65%;
    margin: 3% auto 0 auto;
}
h3 {
    font-size: 1.7rem;	
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-style: normal;	
	letter-spacing: 1px;
	line-height: 1.5;
    margin: 1% 0 2% 0;
    color: #0f0f0f;
}
h4 {
    font-size: 2.5rem;	
    font-family: "scotch-deck", sans-serif;
    font-weight: 300;
    font-style: normal;	
	letter-spacing: 1px;
	line-height: 1.2;
    margin: 1% 0 2% 0;
    color: #161616;
    text-align: left;
    margin-left: 23%;
}

.texture {
    width: 1200px;
    margin: 9% auto;
    position: relative;
}
.texture .texture_img {
    width: 620px;
    display: inline-flex;
    vertical-align: middle;
    margin: 0 0 0 4%;
    position: relative;
}
.tweed .texture .item_Text {
    width: 370px;
    vertical-align: middle;
    display: inline-block;
    margin: 0 0 0 -2%;
	padding: 2% 3% 1% 3%;
    background-image: url(/campaign/2025/shipsw_1226/sp/images/sozai_bk_1.jpg);     
    background-repeat: no-repeat; 
    border: 0.5px solid #161616; 
    z-index: 10;
    position: relative;
    opacity: 0.9;  
}
.double_cloth .texture .item_Text {
    width: 370px;
    vertical-align: middle;
    display: inline-block;
    margin: 0 0 0 -2%;
	padding: 2% 3% 1% 3%;
    background-image: url(/campaign/2025/shipsw_1226/sp/images/sozai_bk_2.jpg);     
    background-repeat: no-repeat; 
    border: 0.5px solid #161616; 
    z-index: 10;
    position: relative;
    opacity: 0.95;  
}
.double_cloth .texture .item_Text h3,
.double_cloth .texture .item_Text .comment_ {
    color: #fff !important;
}

.lineup {
    width: 100%;
    margin: 0 auto;
    background-color: #f6f5ee;
}
.lineup .lineup_wrap {
    width: 750px;
    margin: 0 auto;
    padding: 4% 0 6% 0;
}
.lineup .lineup_wrap_2 {
    width: 750px;
    margin: 0 auto;
    padding: 1% 0 6% 0;
}
.lineup_ttl {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.lineup_ttl.show {
  opacity: 1;
  transform: translateX(0);
}
.lineup_img {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 1.0s ease, transform 1.0s ease;
}

.lineup_img.show {
  opacity: 1;
  transform: translateX(0);
}

.lineup_img {
    width: 100%;
    display: block;
}
.lineup_link {
  display: block;
  width: 60%;
  margin: 0 auto;
}

.lineup .item_Text {
    width: 53%;
    margin: 0 auto;
}
.lineup_credit {
    text-align: center;
}
.lineup_credit p {
    font-size: 1.5rem;	
    font-family: "scotch-deck", sans-serif !important;
    font-weight: 300;
    font-style: normal;	
    letter-spacing: 0.5px; 
}
.lineup_credit .color_1 {
    color: #c6c6c6; 
    margin: 0 0.5%;   
}
.lineup_credit .color_2 {
    color: #000000; 
    margin: 0 0.5%;     
}
.lineup_credit .color_3 {
    color: #3c4589; 
    margin: 0 0.5%;    
}
.lineup_credit .color_4 {
    color: #dcdbd8; 
    margin: 0 0.5%;    
}


.coordinate {
    width: 830px;
    margin: 0 auto 9% auto;
    clear: both;
}
.coordinate .sub_ttl {
    font-size: 2.5rem;	
    font-family: "scotch-deck", sans-serif !important;
    font-weight: 300;
    font-style: normal;	
    margin-top: -1.5%; 
    line-height: 1.2;       
}
.coordinate .sub_ttl b {
    font-size: 5rem;	
    font-family: "scotch-deck", sans-serif !important;
    font-weight: 300;
    font-style: normal;	
    margin-left: -3px;    
}

.coordinate .coord_ttl {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.7rem;
  letter-spacing: 3px;
  writing-mode: vertical-rl;
  position: relative;
  margin-top: 2%;
  padding-right: 6px; 
}
.coord_ttl::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 0;
  background: #000;
  transition: height 0.6s ease;
}
.ttl-anim {
  opacity: 0;
  clip-path: inset(0 0 0 100%); 
  transition:
    opacity 0.6s ease,
    clip-path 0.8s ease;
}

.ttl-anim.show-line::after {
  height: 100%;
}
.ttl-anim.show-text {
  opacity: 1;
  clip-path: inset(0 0 0 0);
}

.coordinate .ld_ttl {
    float: left;
    margin-top: 1%;
}
.coordinate .ld_img {
    width: 410px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 0 -5%;
    position: relative;
    z-index: -1;
}
.coordinate .ld_img_2 {
    width: 410px;
    display: inline-block;
    vertical-align: middle;
    margin: -5% 0 0 -5%;
    position: relative;
    z-index: -1;
}
.coordinate .item_Text {
    width: 370px;
    vertical-align: middle;
    display: inline-block;
    margin: 0 0 0 2%;
	padding: 0;
}


/*///*/
.comment_ {
	font-size: 1.3rem;
	font-weight: 400;	
	line-height: 2.0;
    margin: 1.3em auto 2em auto;
}

/*///*/
.creditArea {
	padding: 0;
	width: 100%;
    margin-top: 6%;
}
.creditArea p.txt {
    width: 80%;
    padding: 0;
	height: 45px;
}
.creditArea .btn {
	width: 100%;
    margin: 0 auto;
}
.creditArea p.f-f {
    text-align: center;
    margin-bottom: 3%;
}
.creditArea p.f-t {
    text-align: left;
    margin-bottom: 0;
}
.main_creditArea {
	padding: 0;
}
.main_creditArea table {
	width: 100%;
}
.main_creditArea table tr {
	padding-bottom: 5%;
}
.main_creditArea table td.txt {
    width: 80%;
    padding: 0;
	height: 42px;
}
.main_creditArea table td.btn {
	width: 20%;
}



/*////*/
.button_bl {
    font-family: "scotch-deck", sans-serif;
    font-size: 1.3rem;
    font-weight: 400;
    width: 70px;
    height: 30px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f6f5ee;
    border: solid 1px #161616;	
    text-decoration: none;
	color: #161616;
	letter-spacing: 1px;
}
.button_bl:hover {
    background: #161616;
    border: solid 1px #161616;
    color: #fff !important;
    transition: .3s;
}

/*////*/
.button_long {
    margin: 4% auto;
	display: block;
    width: 100%;	
}
.button_long a {
   padding: 0.5% 3%;
   font-family: "scotch-deck", sans-serif;
   font-size: 1.4rem;
   font-weight: 400;
   border-radius: 30px;
   border: 1px solid #161616;
   background-color: #f6f5ee;
   color: #161616;
   text-decoration: none;
   transition: background 1s;
   display: block;
   text-align: center;
   line-height: 2.3;	
   letter-spacing: 1px;
}
.button_long a:hover {
   background-color: #161616;
   border: 1px solid #161616;   
   color: #fff;
}

.related-link {
    margin: 90px auto;
	display: block;
    width: 40%;	
}
.related-link a {
   padding: 1% 3%;
   font-family: 'Noto Sans JP', sans-serif;
   font-size: 1.4rem;
   font-weight: 400;
   border-radius: 30px;
   border: 1px solid #161616;
   background-color: #161616;
   color: #fff;
   text-decoration: none;
   transition: background 1s;
	display: block;
    text-align: center;
    line-height: 2.3;	
}
.related-link a:hover {
   background: none;
   border: 1px solid #161616;   
   color: #161616;
}



/*////*/
.fade {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.5s ease, transform 1.2s ease;
}
.fade.active {
  opacity: 1;
  transform: translateY(0px);
}
.scrollin {
    opacity: 1 !important;
    transform: translate(0, 0) !important;
}

.anchor {
  display: block;
  position: relative;
  top: -80px;   
  visibility: hidden; 
}

.double_cloth {
    margin-top: 7%;
	position: relative;
}

.accessories {
    margin-top: 7%;
	position: relative;
}
.accessories .main .comment_ {
    width: 85%;
    text-align: center;
}
.acce_wrap {
    width: 900px;
    margin: 3% auto 5% auto;
    clear: both;
}
.acce_wrap .acce_img_0 {
    width: 430px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 0 0;
    position: relative;
    z-index: -1;
}
.acce_wrap .acce_img {
    width: 480px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 0 0;
    position: relative;
    z-index: -1;
}
.acce_wrap .item_Text {
    width: 370px;
    vertical-align: middle;
    display: inline-block;
    margin: 0 0 0 4%;
	padding: 0;
}
.acce_wrap .acce_img_2 {
    width: 480px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 0 5%;
    position: relative;
    z-index: -1;
}
.acce_wrap .item_Text_2 {
    width: 370px;
    vertical-align: middle;
    display: inline-block;
    margin: 0 0 0 0;
	padding: 0;
}

.column {
    margin-top: 7%;
	position: relative;
    border: 0.5px solid #161616;
    width: 910px;
    margin: 9% auto 0 auto;
    padding: 3% 0 0 0;
}
.column_wrap {
    margin: 5% auto;
    clear: both;
    padding: 0 5%;
}
.column .column_img {
    width: 410px;
    display: inline-block;
    vertical-align: middle;
    margin: 0;
}
.column .item_Text {
    width: 360px;
    vertical-align: middle;
    display: inline-block;
    margin: 0 0 0 5%;
	padding: 0;
}