@charset "utf-8";

/*--フォント--*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');

#specialty h1, #specialty h2, #specialty h3, #specialty h4, #specialty h5, #specialty p, #specialty ul, #specialty li, #specialty a {
  font-family: 'Noto Sans JP', sans-serif;
}

.p22tw, .TextTyping span {
  font-family: "p22-typewriter", sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

.h_bar, 
#beltbnr {
	display: none;
}

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


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

/* MAIN */
main {
  width: 100%;
  margin: 0 auto;
}

/* KV */
.kv {
  width: 100%;
  margin: 0 auto 30px;
}

/* LEAD */
.lead {
  width: 100%;
  margin: 0 auto 50px;
  padding: 0 20px;
}
.lead p {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2;
  text-align: justify;
}
.lead p br {
  display: none;
}

/* MENU */
.menu {
  width: 100%;
  margin: 0 auto 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
}
.menu > div {
  text-align: center;
}
.menu a {
  text-decoration: none !important;
}
.menu .item {
  font-family: Helvetica, sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
.menu .item .jp {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.2;
}
/*矢印アイコン*/
.arrow-down {
  display: inline-block;
  vertical-align: middle;
  color: #000000;
  line-height: 1;
  width: 9px;
  height: 9px;
  border: 1px solid currentColor;
  border-left: 0;
  border-bottom: 0;
  box-sizing: border-box;
  transform: translateY(-25%) rotate(135deg);
}

/* DENIM */
#denim .item01 {
  margin: 0 auto 90px;
}
#denim .item01 .imgWrap, 
#denim .item01 .txtWrap {
  width: 100%;
  text-align: center;
}
#denim .item01 .imgSub {
  margin: 0 auto 30px;
}
#denim .item01 h2 {
  background: linear-gradient(transparent 55% , #8baadb 45%);
  margin-bottom: 25px;
  padding: 0 5px 5px;
  display: inline-block;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
}
#denim .item01 .lead {
  width: 100%;
  margin: 0 auto 30px;
  padding: 0 20px;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2;
  text-align: justify;
}
#denim .item01 .note {
  width: 100%;
  margin: 0 auto 30px;
  padding: 0 20px;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 2;
  text-align: justify;
}
#denim .item01 .creditWrap .title {
  margin: 0 0 10px;
  padding: 0;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  text-align: left;
}

/* STYLE 01 */
#denim .styleB01, 
#denim .styleG01 {
  width: 100%;
  margin: 0 0 90px;
  position: relative;
}
#denim .styleB01 h3, 
#denim .styleG01 h3 {
  width: 18.8%;
  position: absolute;
  top: -40px;
  left: 20px;
}
#denim .styleB01 h3 .rotate, 
#denim .styleG01 h3 .rotate {
  position: absolute;
}

/* STYLE 02 */
#denim .styleB02, 
#denim .styleG02 {
  width: 100%;
  margin: 0 0 90px;
  position: relative;
}
#denim .styleB02 h3,
#denim .styleG02 h3 {
  width: 18.8%;
  position: absolute;
  top: -40px;
  right: 20px;
}
#denim .styleB02 h3 .rotate, 
#denim .styleG02 h3 .rotate {
  position: absolute;
}
#denim .styleB02 .imgWrap, 
#denim .styleG02 .imgWrap {
  padding: 0 40px 30px;
}

/* BORDER PATTERN */
#border .item02 {
  margin: 0 auto 90px;
}
#border .item02 .imgWrap, 
#border .item02 .txtWrap {
  width: 100%;
  text-align: center;
}
#border .item02 .imgSub {
  margin: 0 auto 30px;
}
#border .item02 h2 {
  background: linear-gradient(transparent 55% , #83e6a8 45%);
  margin-bottom: 25px;
  padding: 0 5px 5px;
  display: inline-block;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
}
#border .item02 .lead {
  width: 100%;
  margin: 0 auto 30px;
  padding: 0 20px;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2;
  text-align: justify;
}
#border .item02 .creditWrap .title {
  margin: 0 0 10px;
  padding: 0;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  text-align: left;
}

/* STYLE 01 */
#border .styleB01, 
#border .styleG01 {
  width: 100%;
  margin: 0 0 90px;
  position: relative;
}
#border .styleB01 h3, 
#border .styleG01 h3 {
  width: 18.8%;
  position: absolute;
  top: -40px;
  right: 20px;
}
#border .styleB01 h3 .rotate, 
#border .styleG01 h3 .rotate {
  position: absolute;
}
#border .styleB01 .imgWrap, 
#border .styleG01 .imgWrap {
  padding: 0 40px 30px;
}

/* STYLE 02 */
#border .styleB02, 
#border .styleG02 {
  width: 100%;
  margin: 0 0 90px;
  position: relative;
}
#border .styleB02 h3,
#border .styleG02 h3 {
  width: 18.8%;
  position: absolute;
  top: -40px;
  left: 20px;
}
#border .styleB02 h3 .rotate, 
#border .styleG02 h3 .rotate {
  position: absolute;
}

/* CREDIT共通 */
.creditWrap {
  width: 100%;
  background-color: #f6ebde;
  margin: 0 auto;
  padding: 30px 20px;
}
.creditWrap .credit {
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.creditWrap .credit:last-of-type {
  margin-bottom: 0;
}
.creditWrap .credit .name {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 1.4rem !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  text-align: left !important;
  overflow-wrap: normal;
}
.creditWrap .credit .name a {
  text-decoration: none !important;
}
.creditWrap .credit .btn {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 1.4rem !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  text-align: right !important;
}
.creditWrap .credit .btn a {
  text-decoration: underline !important;
}
#denim .styleB01 .creditWrap .title, 
#denim .styleB02 .creditWrap .title, 
#denim .styleG01 .creditWrap .title, 
#denim .styleG02 .creditWrap .title, 
#border .styleB01 .creditWrap .title, 
#border .styleB02 .creditWrap .title, 
#border .styleG01 .creditWrap .title, 
#border .styleG02 .creditWrap .title {
  margin: 0 0 5px;
  padding: 0;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  text-align: left;
}

/* LINK */
.relatedLink {
  margin: 60px auto 120px;
  text-align: center;
}
.relatedLink a {
  padding: 2% 6%;
  font-size: 1.4rem;
  font-weight: 400;
  color: #ffffff;
  text-decoration: none;
  border: 1px solid #022e51;
  background-color: #022e51;
  transition: background 1s;
}
.relatedLink a:hover {
  background-color: #ffffff;
  color: #022e51;
}

}


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

/* MAIN */
main {
  width: 900px;
  margin: 0 auto;
}

/* KV */
.kv {
  width: 100%;
  margin: 0 auto 30px;
}

/* LEAD */
.lead {
  width: 100%;
  margin: 0 auto 50px;
  padding: 0 20px;
}
.lead p {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2;
  text-align: center;
}

/* MENU */
.menu {
  width: 100%;
  margin: 0 auto 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
}
.menu > div {
  text-align: center;
}
.menu a {
  text-decoration: none !important;
}
.menu .item {
  font-family: Helvetica, sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
}
.menu .item .jp {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.2;
}
/*矢印アイコン*/
.arrow-down {
  display: inline-block;
  vertical-align: middle;
  color: #000000;
  line-height: 1;
  width: 9px;
  height: 9px;
  margin-top: 5px;
  border: 1px solid currentColor;
  border-left: 0;
  border-bottom: 0;
  box-sizing: border-box;
  transform: translateY(-25%) rotate(135deg);
}

/* DENIM */
#denim .item01 {
  margin: 0 auto 90px;
}
#denim .item01 .imgMain {
  width: 600px;
  margin: 0 auto 90px;
}
#denim .item01 .flex {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
}
#denim .item01 .imgWrap, 
#denim .item01 .txtWrap {
  width: 50%;
  text-align: center;
}
#denim .item01 .imgSub {
  margin: 0 auto 30px;
}
#denim .item01 h2 {
  background: linear-gradient(transparent 55% , #8baadb 45%);
  margin-bottom: 25px;
  padding: 0 5px 5px;
  display: inline-block;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
}
#denim .item01 .lead {
  width: 100%;
  margin: 0 auto 30px;
  padding: 0 20px;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2;
  text-align: justify;
}
#denim .item01 .note {
  width: 100%;
  margin: 0 auto 30px;
  padding: 0 20px;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 2;
  text-align: justify;
}
#denim .item01 .creditWrap .title {
  margin: 0 0 10px;
  padding: 0;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  text-align: left;
}

/* STYLE */
#denim .style {
  width: 800px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 20px;
}
#denim .style section {
  width: calc(50% - 20px);
}

/* STYLE 01 */
#denim .styleB01, 
#denim .styleG01 {
  width: 100%;
  margin: 0 0 90px;
  position: relative;
}
#denim .styleB01 h3, 
#denim .styleG01 h3 {
  width: 18.8%;
  position: absolute;
  top: -40px;
  left: 20px;
}
#denim .styleB01 h3 .rotate, 
#denim .styleG01 h3 .rotate {
  position: absolute;
}

/* STYLE 02 */
#denim .styleB02, 
#denim .styleG02 {
  width: 100%;
  margin: 0 0 90px;
  position: relative;
}
#denim .styleB02 h3,
#denim .styleG02 h3 {
  width: 18.8%;
  position: absolute;
  top: -40px;
  right: 20px;
}
#denim .styleB02 h3 .rotate, 
#denim .styleG02 h3 .rotate {
  position: absolute;
}

/* BORDER PATTERN */
#border .item02 {
  margin: 0 auto 90px;
}
#border .item02 .imgMain {
  width: 600px;
  margin: 0 auto 90px;
}
#border .item02 .flex {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
}
#border .item02 .imgWrap, 
#border .item02 .txtWrap {
  width: 50%;
  text-align: center;
}
#border .item02 .imgSub {
  margin: 0 auto 30px;
}
#border .item02 h2 {
  background: linear-gradient(transparent 55% , #83e6a8 45%);
  margin-bottom: 25px;
  padding: 0 5px 5px;
  display: inline-block;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
}
#border .item02 .lead {
  width: 100%;
  margin: 0 auto 30px;
  padding: 0 20px;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2;
  text-align: justify;
}
#border .item02 .creditWrap .title {
  margin: 0 0 10px;
  padding: 0;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  text-align: left;
}

/* STYLE */
#border .style {
  width: 800px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 20px;
}
#border .style section {
  width: calc(50% - 20px);
}

/* STYLE 01 */
#border .styleB01, 
#border .styleG01 {
  width: 100%;
  margin: 0 0 90px;
  position: relative;
}
#border .styleB01 h3, 
#border .styleG01 h3 {
  width: 18.8%;
  position: absolute;
  top: -40px;
  left: 20px;
}
#border .styleB01 h3 .rotate, 
#border .styleG01 h3 .rotate {
  position: absolute;
}

/* STYLE 02 */
#border .styleB02, 
#border .styleG02 {
  width: 100%;
  margin: 0 0 90px;
  position: relative;
}
#border .styleB02 h3,
#border .styleG02 h3 {
  width: 18.8%;
  position: absolute;
  top: -40px;
  right: 20px;
}
#border .styleB02 h3 .rotate, 
#border .styleG02 h3 .rotate {
  position: absolute;
}

/* CREDIT共通 */
.creditWrap {
  width: 100%;
  background-color: #f6ebde;
  margin: 0 auto;
  padding: 30px 20px;
}
.creditWrap .credit {
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.creditWrap .credit:last-of-type {
  margin-bottom: 0;
}
.creditWrap .credit .name {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 1.4rem !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  text-align: left !important;
  overflow-wrap: normal;
}
.creditWrap .credit .name a {
  text-decoration: none !important;
}
.creditWrap .credit .btn {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 1.4rem !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  text-align: right !important;
}
.creditWrap .credit .btn a {
  text-decoration: underline !important;
}
#denim .styleB01 .creditWrap .title, 
#denim .styleB02 .creditWrap .title, 
#denim .styleG01 .creditWrap .title, 
#denim .styleG02 .creditWrap .title, 
#border .styleB01 .creditWrap .title, 
#border .styleB02 .creditWrap .title, 
#border .styleG01 .creditWrap .title, 
#border .styleG02 .creditWrap .title {
  margin: 0 0 5px;
  padding: 0;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  text-align: left;
}

/* LINK */
.relatedLink {
  margin: 60px auto 120px;
  text-align: center;
}
.relatedLink a {
  padding: 2% 6%;
  font-size: 1.4rem;
  font-weight: 400;
  color: #ffffff;
  text-decoration: none;
  border: 1px solid #022e51;
  background-color: #022e51;
  transition: background 1s;
}
.relatedLink a:hover {
  background-color: #ffffff;
  color: #022e51;
}

}


/*--SP/PC共通アニメーション--*/
/* タイピング */
.TextTyping span {
  display: none;
}
.TextTyping::after {
  /*content: "|";*/
  animation: typinganime .8s ease infinite;
}
@keyframes typinganime{
  0% {opacity: 0;}
  100% {opacity: 1;}
}

/* 回転アイコン */
.rotate {
  animation: rotate 10s linear infinite;
}
@keyframes rotate {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(-360deg);}
}

/* フェードイン */
.fadeIn {
  opacity: 0;
  transform: translate(-10px, 0);
  transition: 2s;
}
.fadeIn.active {
  opacity: 1;
  transform: translate(0, 0);
}