@charset "UTF-8";





/*======================================
  カラー変数
  ※ サイトごとに色コードを変更する
======================================*/
:root {
	--c_rd: #B10000;
	--c_bl: #0085FF;
	--c_ye: #FFFF00;
	--c_or: #F39800;
	--c_gr: #299888;
	--c_gr2: #28543C;
	--c_gy: #F5F5F5;
	--c_be: #F6F4EE;
	--c_pk: #FF1E64;
	--c_br: #856A42;
	--c_pl: #82488B;
	--c_wh: #fff;
	--c_bk: #000;
}

/*--------------------------------------
  カラーユーティリティクラス
--------------------------------------*/
.clr-rd  { color: var(--c_rd)  !important; }
.clr-bl  { color: var(--c_bl)  !important; }
.clr-ye  { color: var(--c_ye)  !important; }
.clr-or  { color: var(--c_or)  !important; }
.clr-gr  { color: var(--c_gr)  !important; }
.clr-gr2 { color: var(--c_gr2) !important; }
.clr-gy  { color: var(--c_gy)  !important; }
.clr-be  { color: var(--c_be)  !important; }
.clr-pk  { color: var(--c_pk)  !important; }
.clr-br  { color: var(--c_br)  !important; }
.clr-pl  { color: var(--c_pl)  !important; }
.clr-wh  { color: var(--c_wh)  !important; }
.clr-bk  { color: var(--c_bk)  !important; }

.bg-rd  { background-color: var(--c_rd)  !important; }
.bg-bl  { background-color: var(--c_bl)  !important; }
.bg-ye  { background-color: var(--c_ye)  !important; }
.bg-or  { background-color: var(--c_or)  !important; }
.bg-gr  { background-color: var(--c_gr)  !important; }
.bg-gr2 { background-color: var(--c_gr2) !important; }
.bg-gy  { background-color: var(--c_gy)  !important; }
.bg-be  { background-color: var(--c_be)  !important; }
.bg-pk  { background-color: var(--c_pk)  !important; }
.bg-br  { background-color: var(--c_br)  !important; }
.bg-pl  { background-color: var(--c_pl)  !important; }
.bg-wh  { background-color: var(--c_wh)  !important; }
.bg-bk  { background-color: var(--c_bk)  !important; }



/* font */
/* ============================================ */
/* font-size */
/* ============================================ */
/* top */
/* ============================================ */
.main {
  height: 50vw;
  position: relative;
}
.main-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.main-bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.main-logo {
  width: 16.875vw;
  position: absolute;
  bottom: 2.92vw;
  right: 3.75vw;
}
.main-logo img {
  width: 100%;
  max-width: none;
}
.main-ttl {
  width: 35.1vw;
  position: absolute;
  top: 6.98vw;
  left: 50%;
  translate: -50% 0;
}
.main-ttl img {
  width: 100%;
  max-width: none;
}
@media all and (max-width: 600px) {
  .main {
    height: 160vw;
  }
  .main-bg img {
    -o-object-position: center bottom;
       object-position: center bottom;
  }
  .main-logo {
    width: 43vw;
    bottom: auto;
    right: auto;
    top: 8.86vw;
    left: 50%;
    translate: -50% 0;
  }
  .main-ttl {
    width: 80vw;
    top: auto;
    bottom: 2.53vw;
  }
}

.pin-spacer {
  background: #0085FF !important;
}

.contents {

}
.contents-wrap {
  width: 100%;
  position: relative;
}

.fo-jost{
  font-family: "Jost", sans-serif;
  font-weight: 900;
  
}
.fo-dela{
font-family: "Dela Gothic One", sans-serif;
letter-spacing: .1em;
}



.fo-megadot{
    font-family: "ab-megadot9", sans-serif;
    font-weight: 400;
    font-style: normal;
}

/* ============================================
   ブレークポイント一覧（各メディアクエリで使用する値）
   1600px / 1367px / 1025px / 896px / 600px / 480px
   ※SCSSの変数・mixinを使わないため、数値は各ルールに
     個別に記述しています。変更時はこの一覧を目印にしてください。
   ※各セクションのメディアクエリは、同じ値のものを
     セクション末尾に1つのブロックへまとめています
     （大きいブレークポイント→小さいブレークポイントの順）。
   ============================================ */

:root {
  --c-blue: #0085FF;   /* concept collab, profile accent */
  --c-pink: #FF1E64;   /* cm, videos */
  --c-green: #91F300;  /* news */
  --c-orange: #FF9600; /* goods */
  --c-purple: #D500FF; /* gallery */
  --c-cyan: #00F0FF;   /* profile */
  --c-gray: #EAEAEA;   /* concept, news card, contact */
  --c-black: #000;
  --c-white: #fff;
}




/*****concept*****/
#concept{
  background: var(--c_bl) url(../images/top/bg_concept.png) no-repeat center -30rem ;
  background-size: 144rem 319.5rem;

}
.concepttitlewrap {
    position: relative;
}
.concepttitle{
    padding: 5rem 0 15rem;
}


.concepttitle h2{
    font-size:6.4rem;
}
.concepttitle h3{
    font-size:4rem;
}
.conceptimg01{
    position: absolute;
    left: 0;
    top: 0;
    max-height: 46rem;
}
.conceptimg02{
    position: absolute;
    right: 0;
    top: 0;
    max-height: 46rem;
}
.conceptlight01{
    position: absolute;
    left: -12rem;
    top: 0;
    max-height: 42rem;
}
.conceptlight02{
    position: absolute;
    right: -12rem;
    top: 0;
    max-height: 40rem;
}
.topconceptinfowrap{
    margin-bottom: 8rem;
}

.topconconceptinfobox{
    flex-basis: 45%;
    
   
}
.topconconceptinfobox h3{
    background:var(--c_pk);
    padding: 1rem;
     border-bottom: 4px solid #000;
     position: relative;
     line-height: 1;
}
.topconconceptinfobox h3 small{
    font-size: 70%;
    position: relative;
    top: -.3rem;
}
.topconconceptinfobox h3:after{
    position: absolute;
    right: 1rem;
    background: url(../images/top/dot3.svg) no-repeat center center;
    height:.7rem;
    width: 3rem;
    top: 0;
    bottom: 0;
    margin: auto;
    content: "";
    display: block;
}


.topconconceptinfobox ._mainbox{
  border: 4px solid #000;
  box-shadow: 5px 5px 0px 0px #000000;
}
.topcomceptinfocomment{
    margin: -2rem 0 0 2rem ;
     border: 4px solid #000;
     background: #fff;
     z-index: 1;
     position: relative;
     width: 100%;
     /* 背後に「白塗り+黒枠」のもう1枚のボックスを重ねる（box-shadowは常に要素自身の背景より下に描画される） */
     box-shadow:
       8px 8px 0 0 #fff,
       8px 8px 0 4px #000;
}
.topcomceptinfocomment ._btn{
    background: #E2E2E2;
    padding: .5rem .5rem .5rem 2rem;
    cursor: pointer;
}
.topcomceptinfocomment ._btn h3{
   font-size: 2rem;
}


.topcomceptinfocomment ._btn p{
   font-size: 1.2rem;
   display: flex;
   align-items: center;
}
.topcomceptinfocomment ._btn p:after{
   content: "";
   height: 2.3rem;
   width: 2.3rem;
   display: inline-block;
   background: url(../images/top/arrow_u01.svg) no-repeat top center;
   margin-left: 1rem;
   background-size: contain;
   
}
.topcomceptinfocomment._active ._btn p:after{
   transform: rotate(-180deg);
}

/* 開閉状態に応じてボタンの文字を切り替える（デフォルト=閉じた状態） */
.topcomceptinfocomment ._openLabel{
   display: inline;
}
.topcomceptinfocomment ._closeLabel{
   display: none;
}
.topcomceptinfocomment._active ._openLabel{
   display: none;
}
.topcomceptinfocomment._active ._closeLabel{
   display: inline;
}


.topcomceptinfocomment ._text {
   font-size: 1.8rem;
   text-align: left;
   padding: 2rem;
   line-height: 2;
   display: none;
}

.topcomceptinfocomment._active ._text{
    display: block;
}

/* .topconceptbox はカード(._cont)と画像(._img)を横並びにするだけの
   レイアウト用コンテナ。ギザギザ枠はカード側(._cont/._contInner)だけに付ける */


/* topconceptbox_border 自体に clip-path が掛かっているため、
   その内側で box-shadow を使ってもクリップされて見えない。
   そのため、クリップされていない別の箱(.topconceptbox_peek)を
   親(.topconceptbox_stack)の中で背面・左上にずらして重ねている */
.topconceptbox_stack{
    position: relative;
      margin-bottom: 8rem;
    
}
.topconceptbox_peek{
    position: absolute;
    top: -8px;
    left: -8px;
    width: 100%;
    height: 100%;
    background: #000;
    padding: 4px;
    z-index: 0;
    clip-path: polygon(
      0 8px, 4px 8px, 4px 4px, 8px 4px, 8px 0,
      calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 8px, 100% 8px,
      100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) 100%,
      8px 100%, 8px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 8px), 0 calc(100% - 8px)
    );


}
.topconceptbox_peek_inner{
    width: 100%;
    height: 100%;
    background: #fff;
    clip-path: polygon(
      0 8px, 4px 8px, 4px 4px, 8px 4px, 8px 0,
      calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 8px, 100% 8px,
      100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) 100%,
      8px 100%, 8px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 8px), 0 calc(100% - 8px)
    );
}

/* clip-pathは切った部分に線を描いてくれないため、
   黒い外側の箱(._cont)+白い内側の箱(._contInner)を
   同じギザギザ形で二重に重ね、その隙間(4px)を枠線に見せている */
.topconceptbox_border{
    position: relative;
    z-index: 1;
    background: #000;
    padding: 4px;
    flex: 1;
    clip-path: polygon(
      0 8px, 4px 8px, 4px 4px, 8px 4px, 8px 0,
      calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 8px, 100% 8px,
      100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) 100%,
      8px 100%, 8px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 8px), 0 calc(100% - 8px)
    );
}
.topconceptbox{
    background: #fff;
    padding: 8rem 4rem;
    position: relative;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    clip-path: polygon(
      0 8px, 4px 8px, 4px 4px, 8px 4px, 8px 0,
      calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 8px, 100% 8px,
      100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) 100%,
      8px 100%, 8px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 8px), 0 calc(100% - 8px)
    );
}
.topconceptbox ._cont {
    max-width:57rem ;
}


.topconceptbox ._cont h2{
  font-size: 3.5rem;

}
.topconceptbox ._cont h2:before{
  display: inline-block;
  content: "";
  height: 3rem;
  width: 3rem;
  background: url(../images/top/fuki01.svg) no-repeat top center;
  background-size: contain;
  margin-right: 1rem;
}
.topconceptbox ._cont h2:after{
  display: inline-block;
  content: "";
  height: 3rem;
  width: 3rem;
  background: url(../images/top/fuki01.svg) no-repeat top center;
  background-size: contain;
  margin-right: 2rem;
  transform: scaleX(-1);
}
.topconceptbox ._cont h3{
  font-size: 4.5rem;
  margin-bottom: 1rem;
}


.topconceptbox ._cont ._txt{
  font-size:1.6rem;
  text-align: left;
  line-height: 2;
}

/* ._img は他の箇所（._mainbox内）でも使われているクラス名のため、
   .topconceptbox の中だけに効くよう限定している */
.topconceptbox_stack ._img{
  position: relative;
  flex-shrink: 0;
  position: absolute;
  top:-2rem;
  z-index: 1;
  right:8rem;
}
.topconceptimg01 img{
  display: block;
  width: 100%;
  max-width: 30rem;
}



.topconceptimg02{
  margin: 12rem 0 0 -12rem
}
.topconceptimg02 img{
    max-height: 12rem;
}

/*webcm**/
.webcmtitle{
    position: relative;
}

.fukititle01{
    background:url(../images/top/fuki02.svg) no-repeat top center;
    background-size: contain;
    display: inline-block;
    width: 100%;
    max-width: 37rem;
    padding: 1.5rem 0 4rem;
    font-size: 3rem;
}
.title01{
    font-size: 9rem;
    line-height: 1;
    color: #000;
    /* 本体は黒字。右下に黄色い影のコピーを1枚重ね、
       さらにその黄色い影の周りだけ黒で縁取りしている */
    text-shadow:
      5px 5px 0 #FFFF00,
      4px 4px 0 #000, 4px 5px 0 #000, 4px 6px 0 #000,
      5px 4px 0 #000, 5px 6px 0 #000,
      6px 4px 0 #000, 6px 5px 0 #000, 6px 6px 0 #000;

     /* animation: blinkColor 0.5s infinite;*/
}

@keyframes blinkColor {
  0%, 100% {
    color: #000;
  }
  50% {
    color: #FFFF00;
    text-shadow:
      5px 5px 0 #000,
      4px 4px 0 #FFFF00, 4px 5px 0 #FFFF00, 4px 6px 0 #FFFF00,
      5px 4px 0 #FFFF00, 5px 6px 0 #FFFF00,
      6px 4px 0 #FFFF00, 6px 5px 0 #FFFF00, 6px 6px 0 #FFFF00;
  }
}

.title02{
    font-size:4rem ;
}

.webcmimg01{
    position: absolute;
    left: 2rem;
    bottom: 0;
    max-height: 26rem;
}
.webcmimg02{
    position: absolute;
    right: 0rem;
    bottom: 0;
    max-height: 26rem;
}

.cm-movie {
  position: relative;
  border: 4px solid #000;
  /* 右下に白背景+黒ボーダーのカードを1枚重ねて覗かせる（.topcomceptinfocommentと同じ手法） */
  box-shadow:
    8px 8px 0 0 #fff,
    8px 8px 0 4px #000;
    aspect-ratio: 16 / 9;
    cursor: pointer;
    background: #999;
}
.cm-movie img {
  width: 100%;
}
.cm-movie iframe{
    width: 100%;
    height: 100%;;
    
}


/*
.cm-movie::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #999;
  mix-blend-mode: multiply;
  position: absolute;
  top: 0;
  left: 0;
}
.cm-movie::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  border-left: 48px solid #fff;
  border-right: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}
*/

/* クリックしたらオーバーレイ(再生ボタン)を外して動画を操作できるようにする */
.cm-movie._played{
  cursor: default;
}
.cm-movie._played::before,
.cm-movie._played::after{
  display: none;
}

.webcmcont {
    width: 100%;
    max-width: 70rem;
    margin: 0 auto;
    position: relative;
}

.fukititle02{
  background:url(../images/top/fuki03.svg) no-repeat top center;
    background-size: contain;
    display: block;

    padding: 1.5rem 0 4rem;
    font-size: 3rem;
    position: relative;
    margin-top: -2rem;
}
.fukititle02 span{
  color:#FF1720;
  font-style: normal;
  position: relative;
  line-height: 1;
  top: -0.5rem;
  /* 白の縁取り(8方向2px)+右下に影を1つ */
  text-shadow:
    -2px -2px 0 #fff, -2px 0 0 #fff, -2px 2px 0 #fff,
    0 -2px 0 #fff, 0 2px 0 #fff,
    2px -2px 0 #fff, 2px 0 0 #fff, 2px 2px 0 #fff,
    6px 6px 0 rgba(0, 0, 0, 1);

}
.fukititle02 span big{
    font-size: 160%;
}
.webcmcont ._cap{
    font-size: 1.4rem;
    text-align: right;
    margin:-2rem 5rem 0 0;
}
.webcmcont h3{
    font-size:5rem ;
}

.webcmcontlight01{
    position: absolute;
    left: -12rem;
    bottom: 0;
    max-height: 9rem;
}
.webcmcontlight02{
    position: absolute;
    right: -10rem;
    bottom: 0;
    max-height: 9rem;
}



/**try***/
#try{
    background: var(--c_pk) url(../images/top/bg_try.png) no-repeat center center;
    background-size: 155.3rem 132.5rem;
}
.fukititle01._h02{
  font-size:2.1rem ;
  line-height: 1.1;
}

.trytitle{
    position: relative;
}
.trytitleimg01{
    position: absolute;
    left: 2rem;
    bottom: 0;
    max-height: 27rem;
}
.trytitleimg02{
    position: absolute;
    right: 2rem;
    bottom: 0;
     max-height: 27rem;
}

/* trylist を横3つずつ均等配置 */
.trylsitwrap{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    margin-bottom: 5rem;
}
/* 4件目以降は#trymoreクリックまで非表示（JS側でtoggleする） */
.trylist:nth-child(n+7){
    display: none;
}


/* trylist の画像に .topconceptbox と同じギザギザ枠を付ける。
   外側(黒)のpaddingを非対称にして、右下だけ影のようにわずかに
   はみ出して見えるようにしている */
.trylist ._img{
    background: #000;
    padding: 4px 6px 6px 4px;
    clip-path: polygon(
      0 8px, 4px 8px, 4px 4px, 8px 4px, 8px 0,
      calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 8px, 100% 8px,
      100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) 100%,
      8px 100%, 8px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 8px), 0 calc(100% - 8px)
    );
    margin-bottom: 1rem;
}
.trylist ._img figure{
    display: block;
    margin: 0;
    clip-path: polygon(
      0 8px, 4px 8px, 4px 4px, 8px 4px, 8px 0,
      calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 8px, 100% 8px,
      100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) 100%,
      8px 100%, 8px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 8px), 0 calc(100% - 8px)
    );
}
.trylist ._img figure img{
    display: block;
    width: 100%;
    aspect-ratio:1/1;
    object-fit: cover;

}

.trylist ._num{
    background:url(../images/top/bg_num.svg) no-repeat center center;
    background-size: contain;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 4rem;
    width: 3rem;
    font-size: 2rem;
    margin-right: 1rem;
    flex-shrink: 0; 
}
.trylist ._title{
    color: #fff;
    text-align: left;
    font-size: 1.8rem;
}
.trylist ._title h3:after{
    background:url(../images/top/arrow02_wh.svg) no-repeat center center;
    background-size: contain;
    height: 1.6rem;
    width: 1rem;
    content: "";
    display: inline-block;
    margin-left: 1rem;
}


.trylist ._title p{
    color: #fff;
    text-align: left;
    font-size: 1.6rem;
}


/* .morebtn は外側(黒)+.morebtn_inner(黄色)の二重ギザギザ構造。
   外側のpaddingを非対称にして、右下が+5pxほど影のように見えるようにしている */
.morebtn{
    background: #000;
    max-width: 46rem;
    margin: 0 auto;
    padding: 5px 10px 10px 5px;
    cursor: pointer;
    clip-path: polygon(
      0 16px, 8px 16px, 8px 8px, 16px 8px, 16px 0,
      calc(100% - 16px) 0, calc(100% - 16px) 8px, calc(100% - 8px) 8px, calc(100% - 8px) 16px, 100% 16px,
      100% calc(100% - 16px), calc(100% - 8px) calc(100% - 16px), calc(100% - 8px) calc(100% - 8px), calc(100% - 16px) calc(100% - 8px), calc(100% - 16px) 100%,
      16px 100%, 16px calc(100% - 8px), 8px calc(100% - 8px), 8px calc(100% - 16px), 0 calc(100% - 16px)
    );
}
.morebtn_inner{
    background: var(--c_ye);
    padding: 1rem;
    font-size: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;

    clip-path: polygon(
      0 16px, 8px 16px, 8px 8px, 16px 8px, 16px 0,
      calc(100% - 16px) 0, calc(100% - 16px) 8px, calc(100% - 8px) 8px, calc(100% - 8px) 16px, 100% 16px,
      100% calc(100% - 16px), calc(100% - 8px) calc(100% - 16px), calc(100% - 8px) calc(100% - 8px), calc(100% - 16px) calc(100% - 8px), calc(100% - 16px) 100%,
      16px 100%, 16px calc(100% - 8px), 8px calc(100% - 8px), 8px calc(100% - 16px), 0 calc(100% - 16px)
    );
}

.morebtn_inner:after{
    content:"";
    display: inline-block;
    background:url(../images/top/arrow_u02.svg) no-repeat center center;
    background-size: contain;
    width: 2rem;
    height: 1rem;
    margin-left: 2rem;
 }


 .trybtmimg01{
    margin-top: -3rem;
    max-height: 25rem;
 }


/**news***/
 #news{
      background: #91F300 url(../images/top/bg_news.png) no-repeat  center -5rem;
      background-size: 171.1rem 88rem;
       position: relative;
}
.newswrap{
    margin: 7rem 0;

}


.newslistwrap{
    flex-basis: 65%;

}
.newswrap ._img{
    flex-basis: 32%;
}
.newswrap ._img img{
    max-height:46rem ;
}


.newslist {
    text-align: left;
    padding: 1rem;
    background: #fff;
    width: 100%;
    border-bottom: 1px solid #ddd;
}
/* 6件目以降は#newsmoreクリックまで非表示（JS側でtoggleする） */
.newslist:nth-child(n+9){
    display: none;
}
/*
.newslist:nth-child(odd) {
    background: #000;
    color: #fff;
    margin-left: 4rem;
}*/

.newslist ._date{
    flex-basis: 15%;
    font-weight: 500;
    font-size: 1.6rem;
}
.newslist ._cont{
    flex-basis: 85%;
    font-weight: 500;
    font-size: 2rem;

}

/**making***/
#making{
    background:#D500FF  url(../images/top/bg_maling.png) no-repeat center center;
    background-size: 160rem 140.6rem;
}


.makingtitle{
    position: relative;
}
.makingtitleimg01{
    position: absolute;
    left: 2rem;
    bottom: 0;
    max-height: 28rem;
}
.makingtitleimg02{
    position: absolute;
    right: -3rem;
    bottom: 0;
    max-height: 32rem;
}

.makinglist{
    margin-bottom: 5rem;
    position: relative;
}


.makinglist li{
  flex-basis: 48%;
  margin: 0 1% 2rem;
  border:4px solid #000 ;
}


/* 6件目以降は#newsmoreクリックまで非表示（JS側でtoggleする） */
.makinglist li:nth-child(n+7){
    display: none;
}



/**goods****/
#goods{
    background:#FF9600  url(../images/top/bg_goods.png) no-repeat center center;
    background-size: 180rem 116.2rem;
}
.goodstitle{
    position: relative;
}
.goodstitleimg01{
    position: absolute;
    left: 2rem;
    bottom: 0;
    max-height: 32rem;
}

.goodslistwrap{
    align-items: stretch;
    margin-bottom: 5rem;
}
.goodslist{
    position: relative;
    flex-basis: 48%;
    margin: 0 1% 2rem;
}
/* topconceptbox と同じ二重ギザギザ構造。
   .goodslist_peek(クリップされていない箱)を左上にずらして重ね、
   .goodslist_border(黒)+.goodslist_inner(白)でカード本体のギザギザ枠を作る */
.goodslist_peek{
    position: absolute;
    top: -8px;
    left: -8px;
    width: 100%;
    height: 100%;
    background: #000;
    padding: 4px;
    z-index: 0;
    clip-path: polygon(
      0 8px, 4px 8px, 4px 4px, 8px 4px, 8px 0,
      calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 8px, 100% 8px,
      100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) 100%,
      8px 100%, 8px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 8px), 0 calc(100% - 8px)
    );
}
.goodslist_peek_inner{
    width: 100%;
    height: 100%;
    background: #fff;
    clip-path: polygon(
      0 8px, 4px 8px, 4px 4px, 8px 4px, 8px 0,
      calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 8px, 100% 8px,
      100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) 100%,
      8px 100%, 8px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 8px), 0 calc(100% - 8px)
    );
}
.goodslist_border{
    position: relative;
    z-index: 1;
    height: 100%;
    background: #000;
    padding: 4px;
    clip-path: polygon(
      0 8px, 4px 8px, 4px 4px, 8px 4px, 8px 0,
      calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 8px, 100% 8px,
      100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) 100%,
      8px 100%, 8px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 8px), 0 calc(100% - 8px)
    );
}
.goodslist_inner{
    height: 100%;
    background: #fff;
    clip-path: polygon(
      0 8px, 4px 8px, 4px 4px, 8px 4px, 8px 0,
      calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 8px, 100% 8px,
      100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) 100%,
      8px 100%, 8px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 8px), 0 calc(100% - 8px)
    );
}

.goodslist_inner h3{
    background:var(--c_ye);
    border-bottom: 4px solid #000;
    padding: 1rem;
}
.goodslist_inner ._cont{
    padding: 2rem;
}
.goodsbox{
    padding: .5rem;
}
.goodsname{
    line-height: 1.1;
    font-size: 1.6rem;
    margin-bottom: 2rem;
}
.goodstitle strong{
    font-size: 2rem;

}


.goodspresent{
    position: relative;
}
.goodspresent .tittle {
    margin-bottom: 3rem;
}

.goodspresent .tittle p{
    font-size: 2.2rem;
}
.title03{
    font-size:5rem ;
    line-height: 1.1;
}

._link .morebtn_inner{
    font-size:2.7rem ;
}
._link .morebtn_inner:after{
    transform: rotate(-90deg);
}

.goodspresent ._txt{
    font-size:1.6rem;
    text-align:left ;
    max-width: 46rem;
    margin: 0 auto;
    line-height: 2;
}

.goodspresentimg01{
    position: absolute;
    left: 3rem;
    bottom: -8rem;
    max-height: 35rem;
}
.goodspresentimg02{
    position: absolute;
    right: 3rem;
    bottom: -8rem;
    max-height: 35rem;
}
.goodspresentlight01{
      position: absolute;
left: -9rem;
  bottom: 16rem;
  max-height: 9rem;
}
.goodspresentlight02{
      position: absolute;
right: -9rem;
  bottom: 16rem;
    max-height: 9rem;
}




/*column***/
#column{
    background:#FF33B7 url(../images/top/bg_column.png) no-repeat center center;
    background-size: 146.4rem 110.5rem;
}
.columntitleimg01{
    position: absolute;
    left: 2rem;
    bottom: 0;
     max-height: 30rem;
}
.columntitleimg02{
    position: absolute;
    right: -3rem;
    bottom: 0;
    max-height: 30rem;
}

.avakowrap{}

/* .morebtnと同じ「黒外側+白内側」の二重ギザギザ構造 */
.avakobox{
    position: relative;
    flex-basis: 70%;
    background: #000;
    padding: 4px 9px 9px 4px;
    clip-path: polygon(
      0 16px, 8px 16px, 8px 8px, 16px 8px, 16px 0,
      calc(100% - 16px) 0, calc(100% - 16px) 8px, calc(100% - 8px) 8px, calc(100% - 8px) 16px, 100% 16px,
      100% calc(100% - 16px), calc(100% - 8px) calc(100% - 16px), calc(100% - 8px) calc(100% - 8px), calc(100% - 16px) calc(100% - 8px), calc(100% - 16px) 100%,
      16px 100%, 16px calc(100% - 8px), 8px calc(100% - 8px), 8px calc(100% - 16px), 0 calc(100% - 16px)
    );
}
.avakobox_inner{
    background: #fff;
    padding: 3rem 5rem;
    text-align: left;
    clip-path: polygon(
      0 16px, 8px 16px, 8px 8px, 16px 8px, 16px 0,
      calc(100% - 16px) 0, calc(100% - 16px) 8px, calc(100% - 8px) 8px, calc(100% - 8px) 16px, 100% 16px,
      100% calc(100% - 16px), calc(100% - 8px) calc(100% - 16px), calc(100% - 8px) calc(100% - 8px), calc(100% - 16px) calc(100% - 8px), calc(100% - 16px) 100%,
      16px 100%, 16px calc(100% - 8px), 8px calc(100% - 8px), 8px calc(100% - 16px), 0 calc(100% - 16px)
    );
}

.avakobox_inner ._title{
  font-size: 4rem;
  margin-bottom: 1rem;;
}
.avakobox_inner ._title small{
  font-size: 2rem;
}
.avakobox_inner ._txt{
    font-size: 1.8rem;
    line-height: 2;
}

.avakowrap ._img{
    position: relative;
}
.avakowrap ._img:after{
    height: 6rem;
    width: 6rem;
    display: block;
    content: "";
    background: url(../images/top/avako_fuki.svg) no-repeat center center;
    background-size: contain;
    position: absolute;
    left: 104%;
    top: 50%;
    bottom: 50%;
    margin: auto;
}
.avakowrap ._img img{
    max-height:37rem ;
}



/*instagram***/
.instagrambox ul{
    display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3rem;
  margin-bottom: 4rem;
}
.instagrambox li{
    border: 4px solid #000;
    background:#000;
}

/***find**/
#find{
    background:#EAEAEA ;
}
.findtitle{
  position: relative;

}
.findtitle:before,
.findtitle:after{
    height:1.2rem;
    width: 100%;
    display: block;
    content: "";
    background: url(../images/top/line01.svg) no-repeat top center;
    background-size: cover;
    
}
.findtitle h3{
    font-size:4rem;
    line-height: 1.2;
}

.findtitle h3 span::before {
  display: inline-block;
  content: "";
  height: 3rem;
  width: 3rem;
  background: url(../images/top/fuki01.svg) no-repeat top center;
    background-size: auto;
  background-size: contain;
  margin-right: 1rem;
}
.findtitle h3 span:after {
display: inline-block;
  content: "";
  height: 3rem;
  width: 3rem;
  background: url(../images/top/fuki01.svg) no-repeat top center;
    background-size: auto;
  background-size: contain;
  margin-right: 2rem;
  transform: scaleX(-1);
}
.findtitle h3 big{
    color:#003968 ;
    font-size: 7rem;
}
.findtitle ._date{
    color:#003968;
    font-weight: 600;
}
.findtitle ._txt{
    font-weight: 600;
    margin-bottom: 4rem;
    font-size: 2rem;
}
.findtitleimg01{
    position: absolute;
    left: 2rem;
    bottom: 1.2rem;
    max-height: 31rem;
}
.findtitleimg02{
    position: absolute;
    right: -0rem;
    bottom: 1.2rem;
    max-height: 31rem;
}

.findphoto{
    margin-bottom: 3rem;
}
.findphoto ul{
    margin-bottom: 1rem;
}


.findphoto li{
    flex-basis: 48%;
}

/* .findanswrap_imgは.findbtn(clip-path適用)の兄弟要素にして、
   クリップされずに左側へはみ出せるようにしている */
.findbtnwrap{
    position: relative;
}
.findanswrap_img{
    position: absolute;
    left: 10rem;
    bottom: 1rem;
    height: 16rem;
    z-index: 2;
}

/* .findbtnと.findbtn_innerの二重ギザギザ構造。.morebtnと同じ考え方で
   外側(黒)のpaddingを非対称にして右下が+5pxほど影のように見えるようにしている */
.findbtn{
    position: relative;
    z-index: 1;
    background:#000;
    padding: 5px 10px 10px 5px;
    cursor: pointer;
    clip-path: polygon(
      0 16px, 8px 16px, 8px 8px, 16px 8px, 16px 0,
      calc(100% - 16px) 0, calc(100% - 16px) 8px, calc(100% - 8px) 8px, calc(100% - 8px) 16px, 100% 16px,
      100% calc(100% - 16px), calc(100% - 8px) calc(100% - 16px), calc(100% - 8px) calc(100% - 8px), calc(100% - 16px) calc(100% - 8px), calc(100% - 16px) 100%,
      16px 100%, 16px calc(100% - 8px), 8px calc(100% - 8px), 8px calc(100% - 16px), 0 calc(100% - 16px)
    );
}
.findbtn_inner{
    background:var(--c_ye);
    position: relative;
    padding: 2rem 3rem 2rem 32rem;
    clip-path: polygon(
      0 16px, 8px 16px, 8px 8px, 16px 8px, 16px 0,
      calc(100% - 16px) 0, calc(100% - 16px) 8px, calc(100% - 8px) 8px, calc(100% - 8px) 16px, 100% 16px,
      100% calc(100% - 16px), calc(100% - 8px) calc(100% - 16px), calc(100% - 8px) calc(100% - 8px), calc(100% - 16px) calc(100% - 8px), calc(100% - 16px) 100%,
      16px 100%, 16px calc(100% - 8px), 8px calc(100% - 8px), 8px calc(100% - 16px), 0 calc(100% - 16px)
    );
}
.findbtn_inner h3{
    font-size: 3rem;
    text-align: left;
}

.findbtn_inner p{
    position: absolute;
    right: 2rem;
    top: 0;
    bottom: 0;
    margin: auto;
    font-size: 1.2rem;
    display: flex;
  align-items: center;
}
.findbtn_inner p:after {
  content: "";
  height: 2.3rem;
  width: 2.3rem;
  display: inline-block;
  background: url(../images/top/arrow_u01.svg) no-repeat top center;
  background-size: contain;
  margin-left: 1rem;
}
.findanswrap._active .findbtn_inner p:after{
  transform: rotate(-180deg);
}

/* 開閉状態に応じてボタンの文字を切り替える（デフォルト=閉じた状態） */
.findanswrap ._openLabel{
  display: inline;
}
.findanswrap ._closeLabel{
  display: none;
}
.findanswrap._active ._openLabel{
  display: none;
}
.findanswrap._active ._closeLabel{
  display: inline;
}

.findanscase{
  display: none;
}
.findanswrap._active .findanscase{
  display: block;
}

.answerboxwrap{
  background :#EAEAEA;
  padding: 5rem 5rem 0;
}
.answerbox{
    margin-bottom: -2rem;
}


.answerbox:nth-child(even){
    flex-direction: row-reverse;
}

.answerbox ._img {
    position: relative;
}
.answerbox ._img img{
    max-height: 10rem;
    border: 2px solid #000;
    border-radius: 99px;
}
.answerbox ._img p{
    font-size: 1.2rem;  
}
.answerbox ._cont{
    background:#003968 ;
    color: #fff;
    font-size: 1.8rem;
    border-radius: 99px;
    padding: 1.5rem 8rem;
    margin:-2rem 0 0 -3rem;
}
.answerbox:nth-child(even) ._cont{
    margin:-2rem -3rem 0 0 ;
}
.ansnextwrap ._cont{
      position: relative;
    flex-basis: 67%;
   
}


/* .avakoboxと同じ「黒外側+白内側」の二重ギザギザ構造 */
.ansnextwrap ._comment{

    background: #000;
     padding: 4px 9px 9px 4px;

    clip-path: polygon(
      0 16px, 8px 16px, 8px 8px, 16px 8px, 16px 0,
      calc(100% - 16px) 0, calc(100% - 16px) 8px, calc(100% - 8px) 8px, calc(100% - 8px) 16px, 100% 16px,
      100% calc(100% - 16px), calc(100% - 8px) calc(100% - 16px), calc(100% - 8px) calc(100% - 8px), calc(100% - 16px) calc(100% - 8px), calc(100% - 16px) 100%,
      16px 100%, 16px calc(100% - 8px), 8px calc(100% - 8px), 8px calc(100% - 16px), 0 calc(100% - 16px)
    );
}
.ansnextwrap ._comment_inner{
    background: #fff;
    padding: 5rem;
    text-align: left;
    font-size: 2rem;
    clip-path: polygon(
      0 16px, 8px 16px, 8px 8px, 16px 8px, 16px 0,
      calc(100% - 16px) 0, calc(100% - 16px) 8px, calc(100% - 8px) 8px, calc(100% - 8px) 16px, 100% 16px,
      100% calc(100% - 16px), calc(100% - 8px) calc(100% - 16px), calc(100% - 8px) calc(100% - 8px), calc(100% - 16px) calc(100% - 8px), calc(100% - 16px) 100%,
      16px 100%, 16px calc(100% - 8px), 8px calc(100% - 8px), 8px calc(100% - 16px), 0 calc(100% - 16px)
    );
}
.ansnextwrap ._cont:after{
    display: block;
    content: "";
    height: 2rem;
    width: 2.5rem;
    background: url(../images/top/find/fuki01.png) no-repeat center center;
    background-size: contain;
    position: absolute;
    right: -1.6rem;
    bottom: 4rem;
    z-index: 1;

}


.ansnextwrap ._img{
    flex-basis: 30%;
    position: relative;
}
.ansnextwrap ._img p{
    font-size: 1.6rem;
    position: absolute;
    left: -3rem;
    bottom: 2rem;
}


._moving01{
animation: yureru-s 2s infinite;
}

@keyframes yureru-s {
    0% {
        transform: translate(10px, 0px);
    }
    5% {
        transform: translate(-10px, 0px);
    }
    10% {
        transform: translate(10px, 0px);
    }
    15% {
        transform: translate(-10px, 0px);
    }
    20% {
        transform: translate(10px, 0px);
    }
    25% {
        transform: translate(-10px, 0px);
    }
    30% {
        transform: translate(0px, 0px);
    }
}


._rolling{
    animation: rolling 2s linear;
}

@keyframes rolling {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}







/*********************************/
/* タブレット用のスタイル記述 */
/*********************************/
@media screen and (max-width: 1350px) {
	html {
		font-size: .7407407vw;
	}
    .mainbody{
      /*  max-width: 95%;*/
    }
}






/*======================================
  スマートフォン用
  ※ ブレークポイント・font-size はサイトごとに変更
======================================*/
@media screen and (max-width: 620px) {

	html {
		font-size: 2.7777777vw; /* 360px基準 ※サイトごとに変更 */
	}

	body {
		font-size: 1.4rem;
		line-height: 1.5;
	}



	.slick-slider {
		touch-action: pan-y;
	}

	.mainbody,
	.mainbody2,
	.mainbody3 {
		margin: 0 2rem;
		width: auto;
	}

	.contents {
		padding: 4rem 0; /* ※サイトごとに変更 */
	}



	/* 表示切り替え */
	.onlypc   { display: none; }
	.onlysp   { display: block; }
	.spblock  { display: block; }
	.spcenter { text-align: center; }

	.onlysp._inlineblock {
		display: inline-block;
	}





















/*****concept*****/
#concept{
background: var(--c_bl) url(../images/top/bg_concept.png) no-repeat center -24rem;
    background-size: 56rem 242.5rem;

}

.concepttitle{
    padding: 2rem 0 19rem;
    margin-bottom: 2rem;
}


.concepttitle h2{
    font-size:3.3rem;
}
.concepttitle ._plus img{
    max-height: 2rem;
}
.concepttitle h3{
    font-size:2rem;
}
.conceptimg01{
    position: absolute;
    left: 5rem;
    top: auto;
    bottom: 0;
    max-height: 18rem;
}
.conceptimg02{
    position: absolute;
    right: 5rem;
    top: auto;
    bottom: 0;
    max-height: 18rem;
}
.conceptlight01{
    position: absolute;
    left: -3rem;
    top: 6rem;
    max-height: 20rem;
}
.conceptlight02{
    position: absolute;
    right: -4rem;
    top: 7rem;
    max-height: 20rem;
}
.topconceptinfowrap{
    margin-bottom: 4rem;
    display: block;
}

.topconconceptinfobox{
    max-width: 90%;
    margin:0 auto 3rem;
    
   
}


.topconconceptinfobox h3:after{
    width: 2rem;
    background-size: contain;
}



.topcomceptinfocomment{
    margin: -2rem 0 0 2rem ;
     border: 4px solid #000;
     background: #fff;
     z-index: 1;
     position: relative;
     width: 100%;
     /* 背後に「白塗り+黒枠」のもう1枚のボックスを重ねる（box-shadowは常に要素自身の背景より下に描画される） */
     box-shadow:
       6px 6px 0 0 #fff,
       6px 6px 0 4px #000;
}
.topcomceptinfocomment ._btn{
    padding: .5rem .5rem .5rem 1rem;
}
.topcomceptinfocomment ._btn h3{
   font-size: 1.6rem;
}



.topcomceptinfocomment ._btn p:after{
   height: 2rem;
   width: 2em; 
}




.topcomceptinfocomment ._text {
   font-size: 1.4rem;
}



.topconceptbox_stack{

      margin-bottom: 4rem;
    
}



.topconceptbox{
    padding:2rem 2rem 34rem 2rem;
    gap: 2rem;

}
.topconceptbox ._cont {
   
}


.topconceptbox ._cont h2{
  font-size: 1.5rem;

}
.topconceptbox ._cont h2:before{
  height: 1.6rem;
  width: 1.6rem;
  margin-right: 1rem;
}
.topconceptbox ._cont h2:after{
  height: 1.6rem;
  width: 1.6rem;
  margin-right: 1rem;

}
.topconceptbox ._cont h3{
  font-size: 2rem;
  margin-bottom: 1rem;
}


.topconceptbox ._cont ._txt{
  font-size:1.4rem;
}

/* ._img は他の箇所（._mainbox内）でも使われているクラス名のため、
   .topconceptbox の中だけに効くよう限定している */
.topconceptbox_stack ._img{
  top:38rem;
  right:8rem;
}
.topconceptimg01 img{
  display: block;
  width: 100%;
  max-width: 17rem;
}



.topconceptimg02{
  margin: 7rem 0 0 -7rem
}
.topconceptimg02 img{
    max-height: 8rem;
}







/*webcm**/


.fukititle01{
    padding: 1.5rem 0 4rem;
    font-size: 2.5rem;
}
.title01{
    font-size: 3.5rem;
    /* 本体は黒字。右下に黄色い影のコピーを1枚重ね、
       さらにその黄色い影の周りだけ黒で縁取りしている（フォントサイズが小さくなった分オフセットも縮小） */
    text-shadow:
      2px 2px 0 #FFFF00,
      1px 1px 0 #000, 1px 2px 0 #000, 1px 3px 0 #000,
      2px 1px 0 #000, 2px 3px 0 #000,
      3px 1px 0 #000, 3px 2px 0 #000, 3px 3px 0 #000;

     /* animation: blinkColor 0.5s infinite;*/
}

.webcmtitle{
    padding-bottom: 0rem;
}

.title02{
    font-size:2rem ;
}

.webcmimg01{
    left: 0rem;
    bottom: 0;
    max-height: 8rem;
}
.webcmimg02{
    right: -1.5rem;
    bottom: 0;
    max-height: 8rem;
}

.cm-movie {
  position: relative;
  /* 右下に白背景+黒ボーダーのカードを1枚重ねて覗かせる（.topcomceptinfocommentと同じ手法） */
  box-shadow:
    6px 6px 0 0 #fff,
    6px 6px 0 4px #000;
}



.cm-movie::after {
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 24px solid #fff;
}


.fukititle02{
    padding: 1rem 0 4rem;
    font-size: 1.5rem;
    margin-top: -1rem;
}
.fukititle02 span{
  top: -0.2rem;
  /* 白の縁取り(8方向2px)+右下に影を1つ */
  text-shadow:
    -2px -2px 0 #fff, -2px 0 0 #fff, -2px 2px 0 #fff,
    0 -2px 0 #fff, 0 2px 0 #fff,
    2px -2px 0 #fff, 2px 0 0 #fff, 2px 2px 0 #fff,
    4px 4px 0 rgba(0, 0, 0, 1);

}
.fukititle02 span big{
    font-size: 160%;
}
.webcmcont ._cap{
    font-size: 1.2rem;
    text-align: right;
    margin:-3rem 2rem 0 0;
}
.webcmcont h3{
    font-size:2.2rem ;
}

.webcmcontlight01{
    position: absolute;
    left: -4rem;
    bottom: 0;
    max-height: 4rem;
}
.webcmcontlight02{
    position: absolute;
    right: -4rem;
    bottom: 0;
    max-height: 4rem;
}






/**try***/
#try{
background: var(--c_pk) url(../images/top/bg_try.png) no-repeat center 1rem;
    background-size: 120% auto;
}
.fukititle01._h02{
  font-size:1.6rem ;
}


.trytitleimg01{
    position: absolute;
    left:0rem;
    bottom: 0;
    max-height: 7rem;
}
.trytitleimg02{
    position: absolute;
    right: 0rem;
    bottom: 0;
     max-height: 7rem;
}

.trylsitwrap{
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem .5rem;
    margin-bottom: 3rem;
}


.trylist ._num{
    height: 3rem;
    width: 2rem;
    font-size: 1.5rem;
    margin-right: .5rem;
}
.trylist ._title{
    font-size: 1.2rem;
}
.trylist ._title h3:after{
    height: 1.2rem;
    width: .5rem;
    margin-left: .5rem;
}


.trylist ._title p{
    color: #fff;
    text-align: left;
    font-size: 1rem;
}



.morebtn_inner{
    padding: 1rem;
    font-size: 2rem;

}

.morebtn_inner:after{
    margin-left: 1rem;
 }


 .trybtmimg01{
    margin-top: -3rem;
    max-height: 12rem;
 }








/**news***/
 #news{
background: #90F200 url(../images/top/bg_news.png) no-repeat center 17rem;
    background-size: 200% auto;
   
}
.newswrap{
    margin:0 0 3rem;
    display: block;

}


.newslistwrap{
    margin-top: -7rem;
    position: relative;

}
.newswrap ._img img{
    max-height: 18rem;
}

.newslist {
    padding: .5rem;
}

/*
.newslist:nth-child(odd) {
    margin-left: 1rem;
}
*/
.newslist ._date{
    flex-basis: 20%;
    font-size: 1rem;
}
.newslist ._cont{
    flex-basis: 80%;
    font-size: 1.2rem;

}

/**making***/
#making{
background: #D500FF url(../images/top/bg_maling.png) no-repeat center 10rem;
    background-size: 127% auto;
}


.makingtitle{
   
}
.makingtitleimg01{
    left: 0rem;
    max-height: 9rem;
}
.makingtitleimg02{
    right: -1.6rem;
    max-height: 9rem;
}

.makinglist{
   margin: 0 -1rem 2rem;
}




/**goods****/
#goods{
background: #FF9600 url(../images/top/bg_goods.png) no-repeat center 10rem;
    background-size: 159% auto;
}
.goodstitle{
    
}
.goodstitleimg01{
    left: 0rem;
    bottom: 0;
    max-height: 10rem;
}

.goodslistwrap{
    margin-bottom: 1rem;
    display: block;
}
.goodslist{
    margin: 0 0% 2rem;
}
.goodslist_inner h3{
    padding: .5rem;
}
.goodslist_inner ._cont{
    padding: 2rem;
}
.goodsbox{
    padding: .5rem;
    flex-basis: 50%;
}
.goodsbox img{
    max-height: 12rem;
}

.goodsname{
    font-size: 1.2rem;
    margin-bottom: 2rem;
}
.goodstitle strong{
    font-size: 2rem;
}


.goodspresent{
   margin-bottom: 11rem;
}
.goodspresent .tittle {
    margin-bottom: 3rem;
}

.goodspresent .tittle p{
    font-size: 1.4rem;
}
.title03{
    font-size:2rem ;
}

._link .morebtn_inner{
    font-size:1.8rem ;
}


.goodspresent ._txt{
    font-size:1.2rem;
}

.goodspresentimg01{
    left: 6em;
    bottom: -15rem;
    max-height: 14rem;
}
.goodspresentimg02{
    right: 7rem;
    bottom: -15rem;
    max-height: 14rem;
}
.goodspresentlight01{
      position: absolute;
left: 0rem;
  bottom: -10rem;
  max-height: 5rem;
}
.goodspresentlight02{
      position: absolute;
right: 0rem;
  bottom: -10rem;
    max-height: 5rem;
}




/*column***/
#column{
   background: #FF33B7 url(../images/top/bg_column.png) no-repeat center 8rem;
    background-size: 106% auto;
}
.columntitleimg01{
    left: 2rem;
    bottom: 0;
     max-height: 9rem;
}
.columntitleimg02{
    right: -0rem;
    bottom: 0;
    max-height:9rem;
}

.avakowrap{
    display: block;
    margin-bottom: 3rem;
}
.avakobox{
  margin-bottom: 1rem;
}

.avakobox_inner{
    padding:2rem;
}

.avakobox_inner ._title{
  font-size: 2rem;
  margin-bottom: 1rem;
}
.avakobox_inner ._title small{
  font-size: 1rem;
}
.avakobox_inner ._txt{
    font-size: 1.3rem;
}

.avakowrap ._img{
    
}
.avakowrap ._img:after{
    height: 3rem;
    width: 3rem;
    left: 70%;
    top: 00%;
    bottom: auto;
    margin: auto;
}
.avakowrap ._img img{
    max-height:18rem ;
}



/*instagram***/
.instagrambox ul{
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}








/***find**/
#find{
 
}
.findtitle{
  

}

.findtitle h3{
    font-size:2rem;
    
}

.findtitle h3 span::before {
  height: 1.6rem;
  width: 1.6rem;
  margin-right: 1rem;
}
.findtitle h3 span:after {
  height: 1.6rem;
  width: 1.6rem;
  margin-right: 1%;
}
.findtitle h3 big{
    font-size: 4rem;
}
.findtitle ._date{
}
.findtitle ._txt{
    margin-bottom: 4rem;
    font-size: 1.4rem;
}
.findtitleimg01{
    left: 0rem;
    max-height:11rem;
}
.findtitleimg02{
    right: -0rem;
    max-height: 11rem;
}

.findphoto{
    margin-bottom: 3rem;
}
.findphoto li{
    flex-basis: 48%;
}


.findbtnwrap{
    position: relative;
}
.findanswrap_img{
    position: absolute;
    left: 2rem;
    bottom: 1rem;
    height: 4rem;
    z-index: 2;

    display: none;
}
.findbtn{
    padding: 5px 10px 10px 5px;

}
.findbtn_inner{
    padding: 1rem 2rem 1rem 2rem;

}
.findbtn_inner h3{
    font-size: 1.5rem;
    display: block;
}

.findbtn_inner p{
    right: 1rem;
    font-size: 1rem;

}
.findbtn_inner p:after {
  height:2rem;
  width: 2rem;
  margin-left: .5rem;
}

.findanscase {
  padding: 5rem 2rem;
  margin-top: -2rem;
}


.answerboxwrap{
  padding: 4rem 2rem 0;
}
.answerbox{
    margin-bottom: 3rem;
}


.answerbox:nth-child(even){
    flex-direction: row-reverse;
}

.answerbox ._img {
    position: relative;
    flex-shrink: 0;
}
.answerbox ._img img{
    max-height: 5rem;
   
}
.answerbox ._img p{
    font-size: 1rem;  
}
.answerbox ._cont{
    font-size: 1.4rem;
    border-radius: 10px;
    padding: 1rem 2rem;
    margin:-4rem 0 0 -1rem;
    flex-basis: 100%;
    text-align: left;
}
.answerbox:nth-child(even) ._cont{
    margin:-4rem -1rem 0 0 ;
}

.ansnextwrap {
    display: block;
}
.ansnextwrap ._cont{
    
   
}


/* .avakoboxと同じ「黒外側+白内側」の二重ギザギザ構造 */
.ansnextwrap ._comment{
     margin-bottom: 1rem;


}
.ansnextwrap ._comment_inner{
    padding: 2rem;
    font-size: 1.4rem;

}
.ansnextwrap ._cont:after{
display: block;
    height: 2rem;
    width: 2.5rem;
    right: 2.4rem;
    bottom: -1.4rem;
    transform: rotate(90deg);

}


.ansnextwrap ._img{
  max-width: 45%;
margin: 0 auto;

}
.ansnextwrap ._img p{
    font-size: 1.2rem;
    position: absolute;
    left: -3rem;
    bottom: 2rem;
}
















}