@charset "utf-8";

.h_bar, 
#beltbnr {
	display: none;
}

.clearfix:after {
  content: "";
  display: block;
  clear: both;
} 
.clearfix:before {
  content: "";
  display: block;
  clear: both;
} 
.clearfix {
  display: block;
}

#specialty a:hover img {
  opacity: 1 !important;
}

/* font */
#specialty h2, 
#specialty h3, 
#specialty h4, 
#specialty p,
#specialty span,
#specialty ul,
#specialty li,
#specialty a {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-style: normal;
  color: #000000;
}


/*--SP--*/
@media only screen and (max-width: 767px) {
.sp {
  display: block;
}
.pc {
  display: none;
}

/* main-visual */
.main-visual {
  position: relative;
  text-align: center;
}
.main-visual-title {
  position: absolute;
  top: 89.48%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.main-visual-title img {
  width: 100%;
}

/* main-lead */
.main-lead {
  padding: 35px 0;
  text-align: center;
  margin-top: -75px;
}
.main-lead p {
  font-size: 12px;
  line-height: 1.6;
}
.main-lead img {
  width: 40%;
}
/* main-inner */
.main-inner {
  position: relative;
}

/* content-size */
.content-size {
  margin-bottom: 35px;
  text-align: center;
}
.content-size p {
  font-size: 10px;
  line-height: 1.6;
  color: #717171 !important;
}
.content-size p span {
  color: #717171 !important;
}
.content-size p span.boy-size {
  margin-right: 20px;
}

/* content-sticky */
.content-sticky {
  margin-top: -100px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 90;
}
.content-sticky p {
  padding-top: 100px;
}
.content-sticky.is-fixed p {
  position: fixed;
  top: 0;
  right: 0;
}
.content-sticky span {
  font-family: "din-2014", sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px;
  line-height: 20px;
  text-align: left;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  padding: 0px 10px 0px 10px;
  letter-spacing: 2px;
  width: 40px;
  height: 200px;
  margin-top: 25px;
}

/* content */
.content {
  width: 100%;
  margin: 0 auto;
}

/* credit */
.credit .accordion {
  margin: 15px 0;
  display: inline-block;
  position: relative;
  font-size: 13px;
  font-weight: 900 !important;
  line-height: 2;
}
.credit .accordion::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 50px;
  width: 14px;
  height: 14px;
  background-image: url( "/campaign/2025/shipsk_1105/sp/images/icon_plus.png");
  background-position: top left;
  background-size: 100% auto;
  background-repeat: no-repeat;
}
.credit .accordion.open::before {
  background-image: url( "/campaign/2025/shipsk_1105/sp/images/icon_minus.png");
}
.credit-inner {
  display: none;
}
.credit-inner h3 {
  font-size: 13px;
  font-weight: 900 !important;
  line-height: 2;
  margin-bottom: 15px;
}
.credit-inner ul:nth-child(n+2) {
  margin-top: 20px;
}
.credit-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 15px;
}
.credit-item:last-child {
  margin-bottom: 0;
}
.credit-btn {
  width: 45px;
  margin-right: 15px;
}
.credit-btn a {
  display: block;
  width: 100%;
  font-size: 13px;
  line-height: 2;
  text-align: center;
  text-decoration: none;
  border: 1px solid #000000;
  transition: all 0.3s ease 0s;
}
.credit-btn a:hover {
  color: #ffffff !important;
  background-color: #000000;
}
.credit-txt {
  font-size: 12px;
  line-height: 1.2;
}

/* content-box */
.model01, 
.model02, 
.model05, 
.model06, 
.model07,
.model08,
.other02{
  width: 100%;
  margin: 0 0 75px 0;
}
.model01 .credit, 
.model02 .credit, 
.model05 .credit, 
.model06 .credit, 
.model07 .credit,
.model08 .credit,
.other02 .credit{
  width: calc(100% - 80px);
  margin: 0 auto;
  text-align: left;
}

.model03, 
.model04,
.other01,
.other03{
  width: calc(100% - 80px);
  margin: 0 auto 75px;
}
.model03 .credit, 
.model04 .credit,
.other01 .credit,
.other03 .credit{
  width: 100%;
  margin: 0 auto;
  text-align: left;
}

.style01 {
  width: calc(100% - 80px);
  margin: 0 auto 75px;
}
.style01 .credit {
  width: calc(100% - 80px);
  /* margin: 0 auto; */
  text-align: left;
}
.style01 .content-inner:nth-child(n+2) {
  margin-top: 75px;
}

.style02 {
  width: calc(100% - 80px);
  margin: 0 auto 75px;
}
.style02 .content-image {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}
.style02 .neck-style {
  width: 50%;
  position: relative;
}
.style02 .neck-style p {
  position: absolute;
  left: 10px;
  bottom: 5px;
  font-size: 13px;
  font-weight: 900 !important;
  line-height: 1.4;
  color: #ffffff !important;
}
.style02 .credit {
  width: 100%;
  margin: 0 auto;
  text-align: left;
}

.style03 {
  width: 100%;
  margin: 0 0 75px 0;
}
.style03 .content-image {
  position: relative;
  width: 100%;
  margin-bottom: 20px;
  padding-top: 120%;
}
.style03 .other-style01 {
  position: absolute;
  width: 54.37%;
  top: 0;
  left: 25%;
}
.style03 .other-style02 {
  position: absolute;
  width: 29.92%;
  top: 35%;
  right: 0;
}
.style03 .other-style03 {
  position: absolute;
  width: 53.44%;
  bottom: 0;
  left: 40px;
}
.style03 .other-style01 p {
  position: absolute;
  left: 10px;
  bottom: 5px;
  font-size: 13px;
  font-weight: 900 !important;
  line-height: 1.4;
  color: #000000 !important;
}
.style03 .other-style02 p {
  position: absolute;
  left: 10px;
  bottom: 5px;
  font-size: 13px;
  font-weight: 900 !important;
  line-height: 1.4;
  color: #ffffff !important;
}
.style03 .other-style03 p {
  position: absolute;
  left: 10px;
  bottom: 5px;
  font-size: 13px;
  font-weight: 900 !important;
  line-height: 1.4;
  color: #000000 !important;
}
.style03 .credit {
  width: calc(100% - 80px);
  margin: 0 auto;
  text-align: left;
}

}


/*--PC--*/
@media only screen and (min-width: 768px) {
.sp {
  display: none;
}
.pc {
  display: block;
}

/* main-visual */
.main-visual {
  position: relative;
  text-align: left;
}
.main-visual-title {
  position: absolute;
  top: 87.48%;
  left: 30%;
  transform: translate(-50%, -50%);
}
.main-visual-title img {
  width: 36.45%;
}

/* main-lead */
.main-lead {
  padding: 70px 0 40px;
  text-align: center;
}
.main-lead p {
  font-size: 16px;
  line-height: 2;
}
.main-lead img {
  width: 15%;
}
/* main-inner */
.main-inner {
  position: relative;
}

/* content-size */
.content-size {
  margin-bottom: 70px;
  text-align: center;
}
.content-size p {
  font-size: 12px;
  line-height: 2;
  color: #717171 !important;
}
.content-size p span {
  color: #717171 !important;
}
.content-size p span.boy-size {
  margin-right: 20px;
}
.content-size p span.girl-size {
  margin-right: 30px;
}

/* content-sticky */
.content-sticky {
  margin-top: -10px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 90;
}
.content-sticky p {
  padding-top: 100px;
}
.content-sticky.is-fixed p {
  position: fixed;
  top: 0;
  right: 0;
}
.content-sticky span {
  font-family: "din-2014", sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px;
  line-height: 20px;
  text-align: left;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  padding: 0 35px 0 35px;
  letter-spacing: 2px;
  width: 90px;
  height: 260px;
}

/* content */
.content {
  width: 1120px;
  margin: 0 auto;
}

/* credit */
.credit-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 15px;
}
.credit-item:last-child {
  margin-bottom: 0;
}
.credit-btn {
  width: 50px;
  margin-right: 25px;
}
.credit-btn a {
  display: block;
  width: 100%;
  font-size: 14px;
  line-height: 2;
  text-align: center;
  text-decoration: none;
  border: 1px solid #000000;
  transition: all 0.3s ease 0s;
}
.credit-btn a:hover {
  color: #ffffff !important;
  background-color: #000000;
}
.credit-txt {
  font-size: 14px;
  line-height: 1.2;
}
.credit-inner h3 {
  font-size: 14px;
  font-weight: 900 !important;
  line-height: 2;
  margin-bottom: 15px;
}
/* content-box */
.model01 {
  width: 904px;
  margin: 0 0 150px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.model01 .content-image {
  width: 60%;
}
.model01 .credit {
  width: 40%;
}
.model01 .credit-inner {
  margin-left: 50px;
  text-align: left;
  margin-bottom: 40px;
}
 .model01 .credit-inner ul:last-child {
        margin-top: 40px;
    }
.model02 {
  width: 100%;
  margin: 0 auto 150px;
  position: relative;
  cursor: pointer;
}
.model02 .credit {
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.model02:hover .credit {
  opacity: 1;
}
.model02 .credit-inner {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin: 40px;
}
.model02 .credit-inner h3 {
  font-size: 14px;
  font-weight: 900 !important;
  line-height: 2;
  margin-bottom: 15px;
}
.model02 .credit-inner ul {
  width: 34%;
  text-align: left;
}
.model02 .credit-inner h3, 
.model02 .credit-inner p, 
.model02 .credit-inner a, 
.model02 .credit-inner ul, 
.model02 .credit-inner li {
  color: #ffffff !important;
}
.model02 .credit-btn a {
  display: block;
  width: 100%;
  font-size: 14px;
  line-height: 2;
  text-align: center;
  text-decoration: none;
  border: 1px solid #ffffff;
  transition: all 0.3s ease 0s;
}
.model02 .credit-btn a:hover {
  color: #000000 !important;
  background-color: #ffffff;
}

.model03 {
  width: 900px;
  margin: 0 auto 150px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.model03 .content-image {
  width: 47%;
}
.model03 .credit {
  width: 53%;
}
.model03 .credit-inner {
  margin-left: 50px;
  text-align: left;
  margin-bottom: 50px;
}

.model04 {
  width: 900px;
  margin: 0 auto 150px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.model04 .content-image {
  width: 47%;
  order: 2;
}
.model04 .credit {
  width: 53%;
  order: 1;
}
.model04 .credit-inner {
  margin-left: 50px;
  text-align: left;
  margin-bottom: 50px;
}

.model05 {
  width: 900px;
  margin: 0 auto 150px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.model05 .content-image {
  width: 60%;
}
.model05 .credit {
  width: 40%;
}
.model05 .credit-inner {
  margin-left: 50px;
  text-align: left;
  margin-bottom: 50px;
}

.model06 {
  width: 100%;
  margin: 0 auto 150px;
  position: relative;
  cursor: pointer;
}
.model06 .credit {
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.model06:hover .credit {
  opacity: 1;
}
.model06 .credit-inner {
  margin: 120px 40px 0 40px;
}
.model06 .credit-inner h3 {
  font-size: 14px;
  font-weight: 900 !important;
  line-height: 2;
  margin-bottom: 15px;
}
.model06 .credit-inner ul {
  text-align: left;
}
.model06 .credit-inner ul:last-child {
  margin-top: 40px;
}
.model06 .credit-inner h3, 
.model06 .credit-inner p, 
.model06 .credit-inner a, 
.model06 .credit-inner ul, 
.model06 .credit-inner li {
  color: #ffffff !important;
}
.model06 .credit-btn a {
  display: block;
  width: 100%;
  font-size: 14px;
  line-height: 2;
  text-align: center;
  text-decoration: none;
  border: 1px solid #ffffff;
  transition: all 0.3s ease 0s;
}
.model06 .credit-btn a:hover {
  color: #000000 !important;
  background-color: #ffffff;
}

.model07 {
  width: 900px;
  margin: 0 auto 150px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.model07 .content-image {
  width: 60%;
}
.model07 .credit {
  width: 40%;
}
.model07 .credit-inner {
  margin-left: 50px;
  text-align: left;
}
.model07 .credit-inner h3 {
  font-size: 14px;
  font-weight: 900 !important;
  line-height: 2;
  margin-bottom: 15px;
}
.model07 .credit-inner ul:last-child {
  margin-top: 40px;
}
.model08 {
  width: 900px;
  margin: 0 auto 150px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.model08 .content-image {
  width: 60%;
  order: 2;
}
.model08 .credit {
  width: 40%;
}
.model08 .credit-inner {
  margin-right: 50px;
  text-align: left;
  margin-bottom: 50px;
}

.style01 {
  width: 900px;
  margin: 0 auto 100px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 78px;
}
.style01 .content-inner {
  width: 50%;
}
.style01 .content-image {
  margin-bottom: 25px;
}
.style01 .credit-inner {
  /* margin-left: 50px; */
  text-align: left;
}

.style02 {
  width: 900px;
  margin: 0 auto 150px;
}
.style02 .content-image {
  margin-bottom: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 60px;
}
.style02 .neck-style {
  width: 33%;
  position: relative;
}
.style02 .neck-style p {
  position: absolute;
  left: 10px;
  bottom: 5px;
  font-size: 14px;
  font-weight: 900 !important;
  line-height: 1.4;
  color: #ffffff !important;
}
.style02 .credit-inner {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  text-align: left;
}
.style02 .credit-inner ul {
  width: 50%;
}
.style02 .credit-inner ul:last-child {
  margin-top: 40px;
}
.style02 .credit-inner h3 {
  font-size: 14px;
  font-weight: 900 !important;
  line-height: 2;
  margin-bottom: 15px;
}

.style03 {
  width: 900px;
  margin: 0 auto 150px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.style03 .content-image {
  width: 60%;
  order: 2;
}
.style03 .other-style01 {
  position: relative;
  width: 59.37%;
  margin: 0 0 0 120px;
}
.style03 .other-style02 {
  position: relative;
  width: 34.92%;
  margin: 30px 0 0 350px;
}
.style03 .other-style03 {
  position: relative;
  width: 58.44%;
  margin: -200px 0 0 0;
}
.style03 .other-style01 p {
  position: absolute;
  left: 10px;
  bottom: 5px;
  font-size: 14px;
  font-weight: 900 !important;
  line-height: 1.4;
  color: #000000 !important;
}
.style03 .other-style02 p {
  position: absolute;
  left: 10px;
  bottom: 5px;
  font-size: 14px;
  font-weight: 900 !important;
  line-height: 1.4;
  color: #ffffff !important;
}
.style03 .other-style03 p {
  position: absolute;
  left: 10px;
  bottom: 5px;
  font-size: 14px;
  font-weight: 900 !important;
  line-height: 1.4;
  color: #000000 !important;
}
.style03 .credit {
  width: 40%;
  order: 1;
}
.style03 .credit-inner {
  text-align: left;
}
.style03 .credit-inner h3 {
  font-size: 14px;
  font-weight: 900 !important;
  line-height: 2;
  margin-bottom: 15px;
}
.style03 .credit-inner ul:nth-child(n+2) {
  margin-top: 40px;
}
	
.other01 {
  width: 900px;
  margin: 0 0px 80px 250px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.other01 .content-image {
  width: 47%;
}
.other01 .credit {
  width: 53%;
}
.other01 .credit-inner {
  margin-left: 50px;
  text-align: left;
}
.other02 {
  width: 100%;
  margin: 0 0px 80px 150px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.other02 .content-image {
  width: 47%;
}
.other02 .credit {
  width: 53%;
}
.other02 .credit-inner {
  margin-left: 50px;
  text-align: left;
}
.other03 {
  width: 900px;
  margin: 0px 0px 150px 135px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.other03 .content-image {
  width: 47%;
  order: 2;
}
.other03 .credit {
  width: 53%;
  padding-left: 135px;
}
.other03 .credit-inner {
  margin-right: 0;
  text-align: left;
}
}
  

/*--SP/PC共通--*/
/* フェードイン */
.fadeIn {
  opacity: 0;
  transform: translateY(50px);
}
.fadeIn.active {
  opacity: 1;
  transform: translateY(0);
  transition: all, transform 1s cubic-bezier(0.6, 0.2, 0.1, 1) 0s, opacity 1s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;
}