@charset "utf-8";
/* CSS Document */
#cwbrand img {
  width: 100%;
  height: auto;
}
#cwbrand a:hover img {
  opacity: 0.7;
}
.img_sizeS {
  width: 30%;
}
#cwbrand .reheatL {
  font-size: clamp(1.74rem, 0.376rem + 2.97vw, 2.6rem);
  font-weight: bold;
  margin: 1% 0 0 1.5%;
}
#cwbrand .reheatL > span {
  vertical-align: super; /*テキストを上付きに*/
  font-size: 0.6em; /*テキストを小さく*/
}
#cwbrand .jump-btn {
  width: 100%;
  background-color: #037541;
  border: 2px solid #037541;
  padding: 15px 30px;
  margin: 1rem auto;
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
  text-decoration: none;
  display: block;
  position: relative;
  z-index: 10;
  flex-direction: row;
  box-sizing: border-box;
}
#cwbrand .jump-btn:hover {
  background-color: #fff;
  transform: translate(2px, 2px);
  color: #037541;
}
#cwbrand .jump-btn::after {
  position: absolute;
  right: 5%;
  font-family: 'icn_font' !important;
  content: "\e905";
  margin-left: 1rem;
}
#cwbrand h1 img {
opacity: 0;
  transform: scale(0.8) translateZ(0);
  /* アニメーション設定を、特定のクラスが付いた時だけ動くように分離 */
}
#cwbrand h1 img.is-visible {
  /* 1.6秒で等倍(1.0)になり、その後「無限に」極微増させ続ける */
  animation: kvZoomBottom 1.6s cubic-bezier(0.215, 0.61, 0.355, 1) forwards,
             kvKeepMoving 100s linear 1.6s infinite; /* 1.6秒後から開始 */
  
  will-change: transform, opacity;
  transform: translateZ(0); 
}

/* メインのアニメーション（8から10へ） */
@keyframes kvZoomBottom {
  0% {
    opacity: 0;
    transform: scale(0.8) translate3d(0, 0, 0); 
  }
  100% {
    opacity: 1;
    transform: scale(1.0) translate3d(0, 0, 0);
  }
}

/* 終了時の「カクつき」を防ぐための無限微動 */
@keyframes kvKeepMoving {
  0% {
    transform: scale(1.0) translate3d(0, 0, 0);
  }
  100% {
    /* 100秒かけて 1.001 になる（肉眼では止まっているように見えます） */
    transform: scale(1.001) translate3d(0, 0, 0);
  }
}
/*===============================================

●pc.css 画面の横幅が737px以上

===============================================*/
@media screen and (min-width:737px) {
  #cwbrand.pc-none {
    display: none;
  }
  #cwbrand {
    width: calc(100vw - 0.7%);
    margin: 0 calc(50% - 50vw);
    padding: 0;
    background-image: /* ノイズSVG */ url("data:image/svg+xml,%3Csvg viewBox='0 0 2000 2000' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.4' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.3'/%3E%3C/svg%3E");
    background-color: #017641;
    color: #000;
  }
  #cwbrand main {
    max-width: 1200px;
    background-color: #fcfcfc;
    margin: 0 auto;
    padding-bottom: 3rem;
    box-sizing: border-box;
  }
  #cwbrand h1, #cwbrand h2, #cwbrand h3, #cwbrand p {
    margin: 0;
    padding: 0;
    list-style: none;
    display: block;
  }
  #cwbrand ul, #cwbrand li, #cwbrand dl, #cwbrand dt, #cwbrand dd {
    /*margin: 0;*/
    list-style: none;
    padding: 0;
  }
  #cwbrand img {
    display: block;
  }
  #cwbrand .conL {
    float: left;
    overflow: hidden;
    width: 19%;
    margin: 0 2%;
  }
  #cwbrand .conL02 {
    float: left;
    overflow: hidden;
    width: 19%;
    margin: 2%;
  }
  #cwbrand .conLP {
    float: left;
    oveflow: hidden;
    width: 50%;
    margin: 0;
  }
  #cwbrand .conR {
    float: right;
    overflow: hidden;
    width: auto;
    margin: 0;
  }
  #cwbrand .kv_area {
    max-width: 1200px;
    margin: 0 auto;
  }
  #cwbrand .h2_tit {
    max-width: 1100px;
    font-size: 2.2em;
    font-weight: 700;
    border-bottom: solid 2px #ebebeb;
    margin: 2% auto;
    padding: 1%;
  }
  #cwbrand .board_tit {
    font-size: 2.2em;
    text-align: center;
    color: #9C6B4C;
    margin: 0;
    padding: 2rem 0;
  }
  #cwbrand .look_tit {
    font-size: 2.2em;
    text-align: center;
    color: #9C6B4C;
    margin: 0;
    padding: 2rem 0;
  }
  #cwbrand .line {
    max-width: 1100px;
    border-top: solid 2px #ebebeb;
    margin: 0 auto;
  }
  #cwbrand section {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0;
  }
  #cwbrand .cw_logo {
    width: 27%;
    margin: 2% 1.5%;
    padding: 0;
    color: #757575;
  }
  #cwbrand .catch {
    width: 56%;
    margin: 3% 1.5%;
    padding: 0;
  }
  #cwbrand .leadLL {
    font-size: 3.9em;
    font-weight: bold;
    letter-spacing: 0.08em;
    margin: 0;
    padding: 0;
  }
  #cwbrand .leadL {
    font-size: 1.26em;
    font-weight: bold;
    letter-spacing: 0.09em;
    line-height: 2.1em;
    margin: 2% 1.5%;
    padding: 0;
  }
  #cwbrand .leadLC {
    font-size: 1.26em;
    font-weight: bold;
    letter-spacing: 0.09em;
    line-height: 2.1em;
    margin: 2% 1.5%;
    margin-left: 18%;
    padding: 0;
    text-align: left;
  }
  #cwbrand .leadS {
    font-size: 0.9em;
    margin: 0 0 1.5% 1.5%;
    padding: 0;
  }
  #cwbrand .leadM {
    font-size: 1.7em;
    font-weight: bold;
    letter-spacing: 0.1em;
    margin: 0 1.5% 0 1.5%;
    padding: 0;
  }
  #cwbrand .leadMM {
    font-size: 1.0em;
    font-weight: bold;
    margin: 0 1.5%;
    padding: 0;
  }
  #cwbrand .leadM > span {
    font-size: 70%;
  }
  #cwbrand .lead {
    font-size: 0.95em;
    font-weight: bold;
    letter-spacing: 0.09em;
    line-height: 1.8em;
    margin: 2.5% 1.5%;
    padding: 0;
  }
  #cwbrand .lead > span {
    font-size: 70%;
  }
  #cwbrand .leadR {
    font-size: 0.7em;
    text-align: right;
  }
  #cwbrand .italic {
    font-style: italic;
  }
  #cwbrand .italicL {
    font-size: 2.4em;
    font-weight: bold;
    letter-spacing: 0.09em;
    margin: 1% 0 0 1.5%;
    padding: 0;
    font-style: italic;
  }
  #cwbrand .italicL > span {
    font-style: normal;
  }
  /*board*/
  #cwbrand .board-wrap {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    padding: 0;
    justify-content: center;
  }
  #cwbrand .board-wrap div {
    width: calc(100%/4 - 60px);
    margin-right: 40px;
    padding: 0; /*←画像の左右余白*/
    box-sizing: border-box;
  }
  #cwbrand .board-wrap div:nth-of-type(4n) {
    margin-right: 0;
  }
  #cwbrand .board-tit {
    color: #9C6B4C;
    font-size: 1.2rem;
    border: solid #9C6B4C;
    border-width: 4px 0 0;
    padding: .8rem 0;
  }
  #cwbrand .board-nam {
    color: #9C6B4C;
    font-size: 3.5rem;
    font-weight: bold;
    text-align: center;
    font-family: Arial, Helvetica, "sans-serif"
  }
  #cwbrand .board-txt {
    color: #9C6B4C;
    font-size: 1.0rem;
    text-align: left;
    font-weight: 500;
  }
  /*LOOK*/
  #cwbrand .look-wrap {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    padding: 0;
  }
  #cwbrand .look-wrap div {
    width: calc(100%/6); /*←画像を横に並べる数*/
    padding: 0; /*←画像の左右余白*/
    box-sizing: border-box;
  }
  #cwbrand .look-wrap div img {
    max-width: 100%; /*画像のはみだしを防ぐ*/
    height: auto; /*画像の縦横比を維持 */
    /*border: solid 1px #fff; ←画像を1pxのグレーの枠線で囲む指定の場合*/
  }
  /*bnr*/
  #cwbrand .bnr_bg {
    background-color: #eee;
    padding: 0.5rem 3rem 3rem;
    margin: 0;
  }
  #cwbrand .bnr_tit {
    font-size: 2.2em;
    text-align: center;
    color: #000;
    margin: 0;
    padding: 2rem 0;
  }
  #cwbrand .bnr-wrap div {
    width: calc(100%/3 - 10px);
    margin-right: 10px;
    padding: 0;
  }
  #cwbrand .bnr-wrap div:nth-of-type(3n) {
    margin-right: 0;
  }
  #cwbrand .bnr-wrap div img {
    max-width: 100%;
    height: auto;
  }
  #cwbrand .bnr_txt {
    font-size: 1.2em;
    text-align: left;
    color: #000;
    font-weight: 500;
    margin: 0;
    padding: 0.2rem 0.5rem;
  }
  #cwbrand h3 {
    padding: 0.2rem 0.5rem;
  }
  #cwbrand .bnr_txtS {
    font-size: 0.9rem;
    color: #666;
    padding: 0 0.5rem;
  }
  #cwbrand .bnr-wrap {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    padding: 0;
    margin: 0;
    justify-content: space-between;
  }
  #cwbrand .bnr-wrap a {
    color: #000;
    text-decoration: none;
  }
  #cwbrand .bnr-wrap a:hover {
    color: #0171a6;
    text-decoration: none;
    transition: all 0.3s;
  }
  #cwbrand .bnr-wrap {
    justify-content: center;
  }
  #cwbrand h1 {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
  }
  #cwbrand .h3_tit {
    max-width: 1100px;
    font-size: 1.7em;
    font-weight: 700;
    margin: 2% auto;
  }
  #cwbrand .youtube {
    position: relative;
    width: 93%;
    margin: 1rem auto 1rem;
    padding-bottom: 56.25%;
    padding-top: 0px;
    height: 0;
    overflow: hidden;
    margin-top: 0px;
  }
  #cwbrand .youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
/*===============================================

●sp.css 画面の横幅が736pxまで

===============================================*/
@media screen and (max-width:736px) {
  #cwbrand .sp-none {
    display: none;
  }
  #cwbrand {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
    margin-top: -10px;
    padding: 0;
    background-image: /* ノイズSVG */ url("data:image/svg+xml,%3Csvg viewBox='0 0 2000 2000' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.4' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.3'/%3E%3C/svg%3E");
    background-color: #017641;
    color: #000;
  }
  #cwbrand main {
    max-width: 100%;
    background-color: #fcfcfc;
    margin: 0 10px;
    padding: 10px;
    box-sizing: border-box;
  }
  #cwbrand h1, #cwbrand h2, #cwbrand h3, #cwbrand p {
    margin: 0;
    padding: 0;
    list-style: none;
    display: block;
  }
  #cwbrand ul, #cwbrand li, #cwbrand dl, #cwbrand dt, #cwbrand dd {
    /*margin: 0;*/
    list-style: none;
    padding: 0;
  }
  #cwbrand img {
    display: block;
  }
  #cwbrand .conL {
    width: 29%;
    margin: 4% 2%;
  }
  #cwbrand .conL02 {
    width: 29%;
    margin: 2%;
  }
  #cwbrand .kv_area {
    max-width: 1200px;
    margin: 0 auto;
  }
  #cwbrand .h2_tit {
    max-width: 1100px;
    font-size: 1.4em;
    font-weight: 700;
    border-bottom: solid 2px #ebebeb;
    margin: 10% auto 6%;
    padding: 1% 0;
  }
  #cwbrand .board_tit {
    font-size: 1.6rem;
    text-align: center;
    color: #9C6B4C;
    margin: 0;
    padding: 2rem 0;
  }
  #cwbrand .look_tit {
    font-size: 1.5em;
    text-align: center;
    color: #9C6B4C;
    margin: 0;
    padding: 2rem 0;
  }
  #cwbrand .line {
    max-width: 100%;
    border-bottom: solid 2px #ebebeb;
    margin: 0 auto;
    padding-top: 3%;
  }
  #cwbrand section {
    width: 100%;
    margin: 0 auto;
  }
  #cwbrand .cw_logo {
    width: 60%;
    margin: 5% 0%;
    padding: 0;
  }
  #cwbrand .catch {
    width: 95%;
    margin: 9% auto;
    padding: 0;
  }
  #cwbrand .leadLL {
    font-size: 2.7em;
    font-weight: bold;
    letter-spacing: 0.08em;
    margin: 0;
    padding: 0;
  }
  #cwbrand .leadL {
    font-size: 0.9em;
    font-weight: bold;
    /*letter-spacing: 0.09em;*/
    line-height: 2.1em;
    margin: 5% 1.5%;
    padding: 0;
  }
  #cwbrand .leadLC {
    font-size: 0.95em;
    font-weight: bold;
    letter-spacing: 0.09em;
    line-height: 2.1em;
    margin: 2% 1.5%;
    padding: 0;
    text-align: right;
  }
  #cwbrand .leadS {
    font-size: 0.7em;
    margin: 0.2% 0 1% 0;
    padding: 0;
  }
  #cwbrand .leadM {
    font-size: 1.3em;
    font-weight: bold;
    letter-spacing: 0.1em;
    margin: 0;
    padding: 0;
  }
  #cwbrand .leadMM {
    font-size: 0.9em;
    font-weight: bold;
    margin: 0;
    padding: 0;
  }
  #cwbrand .leadM > span {
    font-size: 70%;
  }
  #cwbrand .lead {
    font-size: 0.7em;
    font-weight: bold;
    /*letter-spacing: 0.09em;*/
    line-height: 1.8em;
    margin: 2.5% 0%;
    padding: 0;
  }
  #cwbrand .lead > span {
    font-size: 70%;
  }
  #cwbrand .leadR {
    font-size: 0.6em;
    text-align: right;
  }
  #cwbrand .italic {
    font-style: italic;
  }
  #cwbrand .italicL {
    font-size: 1.8em;
    font-weight: bold;
    letter-spacing: 0.09em;
    margin: 1% 0 0 1.5%;
    padding: 0;
    font-style: italic;
  }
  #cwbrand .italicL > span {
    font-style: normal;
  }
  /*board*/
  #cwbrand .board-wrap {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    padding: 0;
    justify-content: center;
  }
  #cwbrand .board-wrap div {
    width: calc(100%/1 - 0);
    margin-right: 0px;
    padding: 0; /*←画像の左右余白*/
    box-sizing: border-box;
  }
  #cwbrand .board-wrap div:nth-of-type(4n) {
    margin-right: 0;
  }
  #cwbrand .board-tit {
    color: #9C6B4C;
    font-size: 1.1rem;
    border: solid #9C6B4C;
    border-width: 3px 0 0;
    padding: .8rem 0;
  }
  #cwbrand .board-nam {
    color: #9C6B4C;
    font-size: 3.0rem;
    font-weight: bold;
    text-align: center;
    font-family: Arial, Helvetica, "sans-serif"
  }
  #cwbrand .board-txt {
    color: #9C6B4C;
    font-size: .9rem;
    text-align: left;
    font-weight: 500;
  }
  /*LOOK*/
  #cwbrand .look-wrap {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    padding: 0;
  }
  #cwbrand .look-wrap div {
    width: calc(100%/2); /*←画像を横に並べる数*/
    padding: 0; /*←画像の左右余白*/
    box-sizing: border-box;
  }
  #cwbrand .look-wrap div img {
    max-width: 100%; /*画像のはみだしを防ぐ*/
    height: auto; /*画像の縦横比を維持 */
    /*border: solid 1px #fff; ←画像を1pxのグレーの枠線で囲む指定の場合*/
  }
  /*bnr*/
  #cwbrand .bnr_bg {
    background-color: #eee;
    margin: 0 calc(50% - 50vw);
    padding: 0 1rem 2.5rem;
  }
  #cwbrand .bnr_tit {
    font-size: 1.6em;
    text-align: center;
    color: #000;
    margin: 0;
    padding: 2rem 0 0;
  }
  #cwbrand .bnr-wrap div {
    width: calc(100%/1 - 0px);
    margin-right: 0px;
    padding: 0;
  }
  #cwbrand .bnr-wrap div img {
    max-width: 100%;
    height: auto;
    margin-top: 1.5rem;
  }
  #cwbrand .bnr_txt {
    font-size: 1.2em;
    text-align: left;
    color: #000;
    font-weight: 500;
    margin: 0;
    padding: 0.2rem 0.5rem;
  }
  #cwbrand h3 {
    padding: 0.2rem 0em;
  }
  #cwbrand .bnr_txtS {
    font-size: 0.9rem;
    color: #666;
    padding: 0;
  }
  #cwbrand .bnr-wrap {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    padding: 0;
    margin: 0;
    justify-content: space-between;
  }
  #cwbrand .bnr-wrap a {
    color: #000;
    text-decoration: none;
  }
  #cwbrand .bnr-wrap a:hover {
    color: #0171a6;
    text-decoration: none;
    transition: all 0.3s;
  }
  #cwbrand .h3_tit {
    font-size: 1.3em;
    font-weight: 700;
  }
  .ly-pc-fs14 {
    font-size: 0.8rem;
  }
  #cwbrand .jump-btn {
    padding: 8px 20px;
    font-size: 0.9rem;
  }
  #cwbrand .youtube {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0px;
    margin-bottom: .5rem;
    height: 0;
    overflow: hidden;
    margin-top: 0px;
  }
  #cwbrand .youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  #cwbrand h1 {
    margin: 0 -10px;
  }
}