@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1:wght@100..900&family=M+PLUS+Rounded+1c&family=Noto+Sans+JP:wght@100..900&display=swap');


/*-----------------------------------------
-------------------------------------------
-------------------------------------------
目次　※各々レスポンシブ対応あり
00 リセットCSS
01 共通部分の設定
02 ヘッダーの設定
00 ●●●
00 ●●●
00 ●●●
00 フッターの設定
-------------------------------------------
-------------------------------------------
-----------------------------------------*/


/*-------------------------------------------
00 リセットCSS
-------------------------------------------*/

.body * {
   margin: 0;
   padding: 0;
   font-family: 'Noto Sans JP', sans-serif;
   font-weight: 400;
   text-shadow: none;
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
}

.body ul,
.body li {
   list-style: none;
}

.body a {
   text-decoration: none;
   color: inherit;
}

/*-------------------------------------------
01 共通部分の設定
-------------------------------------------*/
div.body {
   color: #1D1D1F;
   line-height: 1;
   background-color: #fff9f5;
}

.body img {
   max-width: 100%;
   vertical-align: bottom;
}

.center {
   margin: auto;
   text-align: center;
}

.wrap01 {
   max-width: 1300px;
   margin: auto;
   padding: 80px 0;
}

.wrap02 {
   max-width: 1100px;
   margin: auto;
   padding: 80px 0;
}

@media screen and (max-width:768px) {
   .wrap01 {
      max-width: 100%;
      width: calc(100% - 30px);
   }

   .wrap02 {
      max-width: 100%;
      width: calc(100% - 30px);
   }
}

.flex {
   display: flex;
}

.body a {
   cursor: pointer;
   transition: all 0.3s ease 0s;
}

.pc {
   display: block;
}

.sp {
   display: none;
}



@media screen and (max-width:768px) {
   .flex {
      flex-direction: column;
   }

   .center {
      max-width: 500px;
   }
}

.pc {
   display: none;
}

.sp {
   display: block;
}

:root {
   --black01: #1D1D1F;
}

/*-------------------------------------------
02 ヘッダーの設定
-------------------------------------------*/

.headGrp {
   height: 750px;
   width: 100%;
   background-image: url(https://d3t0ae4e2cnggp.cloudfront.net/resource/20250922/title-background-img.png);
   background-size: cover;
   background-position: 0 -20px;
}

.headBox {
   width: 100%;
   max-width: 1100px;
   position: relative;
   margin: 0 auto;
}


.maincatch {
   background-color: #fff;
   color: #ff9100;
   /* height: 55px;
   width: 680px; */
   font-size: 40px;
   margin-top: 52px;
   text-align: center;
   line-height: 50px;
   font-family: 'M PLUS 1';
   font-weight: 600;
}

.ad {
   color: #fff;
   height: 40px;
   width: 160px;
   border: 3px solid #fff;
   margin-top: 52px;
   margin-left: 350px;
   margin-right: -200px;
   font-size: 25px;
   text-align: center;
   line-height: 35px;
}

.main-title {
   margin: 70px 0 0 0;
}

.square {
   height: 30px;
   width: 610px;
   background-color: #fdd35c;
   display: block;
}

.main-title p {
   color: #ff9100;
   font-size: 40px;
   margin-bottom: 30px;
   font-family: 'M PLUS 1';
   font-weight: 500;
   display: inline;
}

.main-title h1 {
   font-size: 70px;
   font-family: 'M PLUS 1';
   font-weight: 800;
   color: #404040;
}


.headPoint {
   display: flex;
   margin: 10px 0 0 0;
}

.hpointBox {
   width: 150px;
   height: 150px;
   background-color: #fff9f5;
   border-radius: 9px;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
   justify-content: center;
   margin: 20px 25px 0 0;
   text-align: center;
}

.headPoint img {
   margin-top: 10px;
   height: 80px;
}

.hpointBox p {
   margin-top: 8px;
   font-size: 18px;
   font-family: 'M PLUS 1';
   font-weight: 600;
   line-height: 1.2;
   text-align: center;
}


.file1 {
   position: absolute;
   top: 350px;
   left: 520px;
   z-index: 2;
}

.file2 {
   position: absolute;
   top: 260px;
   left: 670px;
   z-index: 1;
}

.file3 {
   position: absolute;
   top: 30px;
   left: 750px;
   z-index: 0;
}

.fileillust {
   position: absolute;
   top: 505px;
   left: 120px;
   z-index: 0;
}

.fileicon {
   position: absolute;
   top: 350px;
   left: 950px;
   z-index: 2;
   position: absolute;
}

@media screen and (max-width:768px) {
   .headGrp {
      width: 100%;
   }
}




/*-------------------------------------------
3つの特長
-------------------------------------------*/

.pointGrp {
   width: 100%;
   position: relative;
   margin-top: -100px;
   background-image: url('https://d3t0ae4e2cnggp.cloudfront.net/resource/20250922/background1.png');
   background-size: cover;
   z-index: 1;
   padding: 150px 0;
}



.pointBox {
   width: 1100px;
   height: 1100px;
   margin: 0 auto;
   text-align: center;
}

.pointBox h2 {
   font-family: 'M PLUS Rounded 1c', sans-serif;
   font-size: 50px;
   font-weight: 600;
   color: #ee7800;
}

.whiteBoxP {
   background-color: #fff;
   border-radius: 10px;
   margin-top: 80px;
   height: 250px;
   display: flex;
   align-items: center;
   position: relative;
}

.number {
   font-size: 90px;
   color: #ff9100;
   font-weight: 800;
   margin-left: 100px;
   margin-top: -10px;
   margin-right: 20px;
}

.point-text {
   font-family: 'M PLUS Rounded 1c', sans-serif;
   font-size: 40px;
   font-weight: 800;
   color: #805100;
   width: 350px;
   height: 90px;
   align-items: center;
}

.pointImg {
   text-align: right;
}

.point-ph1 {
   position: absolute;
   margin: -120px 0 0 80px;
}

.point-ph2 {
   position: absolute;
   margin: -120px 0 0 80px;
}

.number2 {
   font-size: 90px;
   color: #ff9100;
   font-weight: 800;
   margin-left: 550px;
   margin-right: 20px;
}

.point-text2 {
   font-family: 'M PLUS Rounded 1c', sans-serif;
   font-size: 40px;
   font-weight: 900;
   color: #805100;
   width: 300px;
   margin-top: 30px;
}

.point-ph3 {
   position: absolute;
   margin: -150px 0 0 90px;
}

.video {
   position: absolute;
   margin: -100px 0 0 400px;
}

.video:hover {
   transform: scale(1.1);
}

.pointImg p {
   position: absolute;
   top: -75px;
   left: 920px;
   width: 300px;
   transform: rotate(15deg);
   text-align: center;
   font-size: 25px;
   font-weight: 700;
}

@media screen and (max-width:768px) {
   .pointGrp {
      width: 100%;
   }

}


/* 動画を出現させるモーダルウィンドウ ここから*/
/* モーダルの背景を暗くするオーバーレイ */
.modal-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.7);
   z-index: 1000;
   /* 中央寄せのプロパティを確実に適用 */
   display: flex;
   justify-content: center;
   align-items: center;
   /* デフォルトは非表示 */
   opacity: 0;
   visibility: hidden;
   /* クリックできないようにする */
   transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* モーダルウィンドウ本体 */
.modal-content {
   background-color: #000000;
   padding: 0;
   border-radius: 8px;
   position: relative;
   max-width: 1000px;
   width: 80%;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
   /* 中央配置のためにtransformを使用 */
   transform: scale(0.9);
   /* 初期状態では少し小さくしておく */
   transition: transform 0.3s ease;
}

/* モーダル表示時のスタイル */
.modal-overlay.active {
   opacity: 1;
   visibility: visible;
}

/* モーダル表示時にモーダルコンテンツを拡大 */
.modal-overlay.active .modal-content {
   transform: scale(1);
}

/* 動画のコンテナ */
#modal-video-container {
   position: relative;
   width: 100%;
   /* 動画のアスペクト比を16:9に保つ */
   padding-top: 56.25%;
   /* 9 / 16 = 0.5625 */
}

/* 埋め込まれた動画をコンテナにフィットさせる */
#modal-video-container iframe,
#modal-video-container video {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

/* 閉じるボタン */
.modal-close {
   position: absolute;
   top: 15px;
   right: 15px;
   font-size: 35px;
   font-weight: bold;
   color: #888;
   cursor: pointer;
   line-height: 1;
   z-index: 1001;
   /* 他の要素の上に表示されるようにする */
}

/* 動画を出現させるモーダルウィンドウ ここまで*/




/*-------------------------------------------
おすすめの使い方
-------------------------------------------*/

.recommendGrp {
   width: 100%;
   background-image: url('https://d3t0ae4e2cnggp.cloudfront.net/resource/20250922/recommend-bgi.png');
   background-size: cover;
   margin-top: -150px;
   position: relative;
   z-index: 0;
   padding-bottom: 80px;
}

.recommendBox {
   width: 1100px;
   margin: 100px auto;
   text-align: center;
   position: relative;
}

.recommendBox h2 {
   font-family: 'M PLUS Rounded 1c', sans-serif;
   font-size: 50px;
   font-weight: 600;
   color: #ee7800;
   padding-top: 200px;
}

.recommend-catch {
   position: absolute;
   top: 150px;
   left: 830px;
   background-color: #f39800;
   transform: rotate(10deg);
   height: 200px;
   width: 200px;
   border-radius: 50%;
   justify-content: center;
   align-items: center;
   display: flex;
}

.recommend-catch p {
   font-family: 'M PLUS Rounded 1c', sans-serif;
   font-size: 28px;
   line-height: 1.3;
   font-weight: 700;
   color: #fff;
   text-align: center;
}


.comment-t {
   position: relative;
   margin-top: 50px;
}


.comment-t p {
   position: absolute;
   top: 18px;
   left: 325px;
   font-size: 25px;
   color: #707070;
   font-family: 'M PLUS Rounded 1c', sans-serif;
   font-weight: 600;
}

.comment-t img {
   filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.15));
}

.comment-i {
   margin: 10px 0 0 50px;
   position: relative;
}

.comment-i img {
   margin: 0 0 40px 0;
   filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.15));
}

.comment-i p {
   position: absolute;
   top: 16px;
   left: 330px;
   font-size: 25px;
   color: #707070;
   font-family: 'M PLUS Rounded 1c', sans-serif;
   font-weight: 600;
}

.takizawa-ph {
   position: absolute;
   top: 302px;
   left: 120px;

}

.imai-ph {
   position: absolute;
   top: 295px;
   left: 800px;
}

.interviewLink1 {
   text-align: center;
   align-items: center;
   margin-top: 20px;
}

.interviewLink1 a {
   display: inline-block;
   width: 1100px;
   height: 70px;
   background-color: #fdd35c;
   border-radius: 10px;
   box-shadow: 0 5px 0 rgba(153, 128, 56, 100);
   display: flex;
   justify-content: center;
   align-items: center;
}

.interviewLink1 a:hover {
   opacity: 0.6;
}

.interviewLink1 a:active {
   transform: translateY(5px);
   box-shadow: none;
}

.interviewLink1 p {
   color: #715300;
   font-size: 30px;
   font-weight: 700;
   font-family: 'M PLUS Rounded 1c', sans-serif;
   margin-left: 220px;
}

.interviewLink1 span {
   font-family: 'M PLUS Rounded 1c', sans-serif;
   font-size: 25px;
   font-weight: 700;
}

.interviewLink1 i {
   margin-left: 190px;
}

@media screen and (max-width:768px) {
   .recommendGrp {
      width: 100%;
   }

}

/*-------------------------------------------
お客様の声
-------------------------------------------*/

.voiceGrp {
   width: 100%;
   background-image: url('https://d3t0ae4e2cnggp.cloudfront.net/resource/20250922/voice-bgi.png');
   background-size: cover;
   margin-top: -100px;
   position: relative;
   z-index: 0;
   padding: 50px 0;
}

.voiceBox {
   width: 1000px;
   height: 1100px;
   text-align: center;
   margin: 0 auto;
   position: relative;
}

.voiceBox h2 {
   font-family: 'M PLUS Rounded 1c', sans-serif;
   font-size: 50px;
   font-weight: 600;
   color: #ee7800;
   padding-top: 200px;
   margin-bottom: 50px;
}

.customervoice-l {
   align-items: center;
   display: flex;
}

.voice-catch {
   position: absolute;
   top: 200px;
   left: 730px;
}

.voice-catch p {
   font-family: 'M PLUS Rounded 1c';
   font-size: 20px;
   font-weight: 550;
   color: #fff;
   position: absolute;
   top: 10px;
   left: 40px;
}

.whiteBoxC {
   background-color: #fff;
   width: 800px;
   height: 100px;
   margin-bottom: 35px;
   display: flex;
   align-items: center;
   border-radius: 8px;
   box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
}

.customervoice p {
   font-size: 17px;
   text-align: left;
   line-height: 1.3;
   margin-left: 50px;
}

.customervoice span {
   color: #ff9100;
   font-size: 21px;
   font-weight: 700;
}

.customervoice img {
   width: 120px;
   height: 120px;
   margin: -10px 40px 0 40px;
}


@media screen and (max-width:768px) {
   .voiceGrp {
      width: 100%;
   }

}


/*-------------------------------------------
シリーズ紹介
-------------------------------------------*/

.seriesGrp {
   width: 100%;
   background-size: cover;
   margin-top: -80px;
}

.seriesBox {
   width: 1100px;
   height: 100%;
   text-align: center;
   margin: 0 auto;
   position: relative;
}

.seriesBox h2 {
   font-family: 'M PLUS Rounded 1c', sans-serif;
   font-size: 50px;
   font-weight: 600;
   color: #ee7800;
   padding-top: 200px;
   margin-bottom: 50px;
}

.series-catch {
   position: absolute;
   top: 150px;
   left: 800px;
   background-color: #f39800;
   width: 150px;
   height: 150px;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 50%;
}

.series-catch p {
   font-family: 'M PLUS Rounded 1c', sans-serif;
   color: #fff;
   line-height: 1;
   font-weight: 700;
   font-size: 20px;
   text-align: center;
}

.series-catch span {
   font-family: 'M PLUS Rounded 1c', sans-serif;
   font-weight: 700;
   font-size: 70px;
}

.products {
   margin: 50px auto;
}

.product {
   width: 475px;
   height: 475px;
   background-color: #fff;
   border-radius: 10px;
   margin: 40px auto;
   position: relative;
   box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.15);
}

.product:hover {
   transform: scale(1.05);
}

.product-name {
   height: 70px;
   border-radius: 10px 10px 0 0;
   background-color: #ffedab;
   text-align: center;
   line-height: 70px;
}

.product-name p {
   font-family: 'M PLUS Rounded 1c', sans-serif;
   color: #ee7800;
   font-size: 30px;
   font-weight: 800;
   text-align: center;
}

.product-text {
   font-size: 20px;
   font-weight: 500;
   margin: 30px 0;
   text-align: center;
   position: relative;
   display: inline-block;
   isolation: isolate;
}

.product-text::after {
   content: '';
   position: absolute;
   left: 0;
   bottom: -3px;
   width: 100%;
   height: 5px;
   background-color: #ffedab;
   z-index: -1;
}

.series-hard {
   margin: -37px 20px 0 0;
}

.series-3pocket {
   margin-top: -50px;
}

.series-clip {
   margin: -29px 0 0 -40px;
}

.detail {
   width: 200px;
   height: 45px;
   background-color: #f39800;
   border-radius: 25px;
   position: absolute;
   top: 410px;
   left: 250px;
}

.detail p {
   font-size: 25px;
   font-weight: 600;
   font-family: 'M PLUS Rounded 1c', sans-serif;
   line-height: 45px;
   color: #fff;
   text-align: center;
}

.product-new {
   width: 1025px;
   height: 300px;
   background-color: #fff;
   border-radius: 10px;
   margin: 40px auto;
   border: 3px solid #f39800;
}

.product-name-new {
   background-color: #f39800;
   border-radius: 5px 5px 0 0;
   color: #fff !important;
}

.product-newBox {}

.product-new-text {
   font-size: 20px;
   font-weight: 500;
   text-align: center;
   position: relative;
   margin-top: 70px;
   line-height: 1.5;
}

.product-new-text span {
   color: #ee7800;
   font-size: 20px;
   font-weight: 700;
   line-height: 1.3;
}

.product-new img {
   margin: 11px 30px 0 30px;
}

@media screen and (max-width:768px) {
   .seriesGrp {
      width: 100%;
   }

}



/*-------------------------------------------
フッターの設定
-------------------------------------------*/



.footerGrp {
   background-image: url('https://d3t0ae4e2cnggp.cloudfront.net/resource/20250922/footer-bgi.png');
   background-size: cover;
   width: 100%;
   padding: 200px 0;
   text-align: center;
}

.footerBox {
   width: 700px;
   height: 120px;
   margin: 0 auto;
   background-color: #fdd35c;
   border-radius: 10px;
   box-shadow: 0 5px 0 rgba(153, 128, 56, 100);
   display: flex;
   justify-content: center;
   align-items: center;
}

.footerBox:hover {
   opacity: 0.5;
}

.footerBox:active {
   transform: translateY(5px);
   box-shadow: none;
}

.interviewLink2 p {
   font-family: 'M PLUS Rounded 1c', sans-serif;
   font-size: 28px;
   font-weight: 500;
   line-height: 1.3;
   color: #715300;
   text-align: center;
}

.interviewLink2 span {
   font-family: 'M PLUS Rounded 1c', sans-serif;
   font-size: 40px;
   font-weight: 800;
}

.interviewLink2 i {
   margin-left: 20px;
}

@media screen and (max-width:768px) {
   .footerGrp {
      width: 100%;
   }

}


/* EC-CUBE対策 */

main.l-container {
   width: 100%;
}

.c-main {
   padding-bottom: 0;
   padding-left: 0;
   padding-right: 0;
}

#contentInner {
   width: auto;
   padding-bottom: 0;
}

#wide_main_contents {
   width: 100%;
}

.c-breadcrumb {
   width: 1200px;
   margin: auto;
}

h2 {
   background: none;
}

#fil {
   margin: 0 auto;
}

@media (max-width: 1230px) {
   main.l-container {
      width: 123rem;
   }
}

@media (max-width: 768px) {
   .pc {
      display: none !important;
   }

   .sp {
      display: block;
   }

   .l-container {
      width: 120rem;
   }

   #contentInner {
      width: 1200px;
      padding-bottom: 0;
   }

   #wide_main_contents {
      width: 1200px
   }
}


/*-------------------------------------------
フッターの設定
-------------------------------------------*/



/*安田　　修正*/
p.maincatch {
   display: inline;
   background-color: #fff;
   padding: 0.1em;
   -webkit-box-decoration-break: clone;
   box-decoration-break: clone;
   text-align: left;
}

.body {
   overflow: hidden;
   padding-bottom: 40px;
}

.pc {
   display: block !important;
}

.sp {
   display: none !important;
}

@media screen and (max-width:768px) {
   .sp {
      display: block !important;
   }

   .pc {
      display: none !important;
   }
}

@media (max-width: 768px) {
   section.headGrp {
      background-position: -10vw -22vw;
      height: fit-content;
   }

   div.flex {
      padding: 5px;
   }

   p.maincatch {
      font-size: 5.25vw;
      margin-top: 1em;
      text-align: center;
   }

   p.ad {
      margin: 10px auto auto 0px;
   }

   div.main-title {
      text-align: center;
      margin: 8vw 2vw;
   }

   .main-title p {
      font-size: 7vw;
      text-align: center;
   }

   .main-title h1 {
      background: none;
      font-size: 8vw;
      text-align: center;
   }

   div.headPoint {
      flex-wrap: wrap;
      padding: 0 10px;
   }

   div.hpointBox {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 45%;
      margin: 0 auto;
   }

   div.hpointBox:last-of-type {
      margin-top: 5%;
   }

   div.head-ph {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      position: relative;
      z-index: 99;
      margin-top: 20px;
   }

   div.head-ph img {
      width: 100%;
   }

   img.file1 {
      position: static;
      margin: 35px -45px 0 auto;
   }

   img.file2 {
      position: static;
      margin: 10px auto;
      ;
   }

   img.file3 {
      position: static;
      margin: 25px auto 0 -50px;
   }

   img.fileillust {
      position: static;
      grid-column: 1/4;
      margin: auto;
      max-width: 250px;
   }

   img.fileicon {
      position: absolute;
      top: 10px;
      left: calc(50% + 135px);
      transform: translateX(-50%);
      max-width: 130px;
   }

   section.pointGrp {
      margin-top: -50px;
      padding-top: 100px;
      padding-bottom: 30px;
      background-image: url(https://d3t0ae4e2cnggp.cloudfront.net/resource/20250922/background1.png);
      background-size: cover;
      background-position: 0 0;
   }

   div.pointBox {
      width: calc(100% - 20px);
      height: fit-content;
      margin: auto;
   }

   .pointBox h2 {
      width: 100%;
   }

   div.whiteBoxP {
      margin-top: 40px;
      justify-content: center;
      height: fit-content;
      position: static;
      padding: 15px 10px;
   }

   .number {
      margin: auto;
   }

   .point-text {
      width: 100%;
      height: auto;
      text-align: center;
      margin-bottom: 10px;
   }

   .pointImg {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-around;
   }

   .pointImg img {
      width: 45%;
      max-width: 150px;
      margin: auto 0 auto auto;
   }

   .point-ph1 {
      position: static;
   }

   .video {
      width: 45%;
      max-width: 100px;
      position: static;
      margin: auto auto auto 20px;
   }

   .pointImg p {
      width: 100%;
      margin-top: 10px;
      position: static;
      transform: rotate(0);
      text-align: center;
   }

   .pointImg p br {
      display: none;
   }

   i.fa-solid {
      font-size: 100px;
   }


   img.point-ph2 {
      position: static;
      margin: auto;
   }

   p.number2 {
      margin: auto;
   }

   p.point-text2 {
      display: block;
      text-align: center;
      width: 100%;
      margin-top: 0;
   }

   img.point-ph3 {
      position: static;
      margin: auto;
      max-width: 275px;
      width: 100%;
   }





   .recommendGrp {
      margin-top: 60px;
      padding-bottom: 0;
      margin-bottom: 0px;
   }

   .recommendBox {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 15px;
      width: calc(100% - 20px);
      height: fit-content;
      margin: auto;
   }

   .recommendBox h2 {
      grid-column: 1/3;
      padding-top: 0;
      width: 100%;
      font-size: 8vw;
   }

   .recommend-catch {
      grid-column: 1/3;
      position: static;
      margin: 10px auto;
      transform: rotate(0deg);
   }

   div.comment-t,
   div.comment-i {
      margin: 10px 0 0;
      grid-column: 1/3;
   }

   div.comment-t img,
   div.comment-i img {
      display: none;
   }

   .comment-t p,
   .comment-i p {
      position: static;
      display: block;
      width: 100%;
      font-size: 5vw;
      text-align: center;
   }

   .takizawa-ph,
   .imai-ph {
      position: static;
   }

   .recommendBox img {
      margin: auto auto 0;
   }

   .takizawa-ph {
      grid-column: 1/2;
   }

   .imai-ph {
      grid-column: 2/3;
   }

   .interviewLink1 {
      grid-column: 1/3;
   }

   .interviewLink1 a {
      width: 100%;
      height: fit-content;
      padding: 15px 20px;
   }

   .interviewLink1 p {
      font-size: 5vw;
      margin: auto;
   }

   .interviewLink1 span {
      font-size: 5vw;
      color: #715300;
   }

   .interviewLink1 i {
      display: none;
   }



   .voiceGrp {
      background-position: 0 -10vw;
      margin-top: 0;
   }

   .voiceBox {
      width: 100%;
      height: fit-content;
      padding-top: 100px;
   }

   .voiceBox h2 {
      font-size: 8vw;
      padding-top: 0;
      margin-bottom: 20px;
   }

   .voice-catch {
      position: relative;
      top: inherit;
      left: inherit;
   }

   .voice-catch img {
      margin: auto;
      max-width: 280px;
      width: 100%;
   }

   .voice-catch p {
      top: 4px;
      left: 50%;
      transform: translateX(-50%);
      max-width: 260px;
      width: 100%;
      text-align: center;
   }

   div.customervoice {
      margin-top: 0px;
   }

   .customervoice-l div.flex {
      align-items: center;
   }

   .customervoice-r div.flex {
      flex-direction: column-reverse;
      align-items: center;

   }

   .whiteBoxC {
      width: calc(100% - 20px);
      margin: auto;
      padding: 15px;
      height: fit-content;
   }

   .customervoice img {
      margin: 10px auto 0;
   }

   .customervoice p,
   .customervoice span {
      font-size: 16px;
      line-height: 1.35;
      margin: 0;
   }

   .customervoice p br {
      display: none;
   }


   .seriesBox {
      width: calc(100% - 20px);
      height: fit-content;
      margin: auto;
      padding-top: 100px;
   }

   .seriesBox h2 {
      font-size: 8vw;
      margin-bottom: 0px;
      padding-top: 0;
   }

   a.product {
      width: 100%;
      max-width: 375px;
      height: fit-content;
      padding-bottom: 20px;
      margin-top: 0;
      margin-bottom: 20px;
   }

   .product-name {
      height: fit-content;
   }

   .product-name p {
      display: block;
      padding: 0.75em;
      font-size: 6vw;
   }

   .detail {
      position: static;
      margin: 10px auto;
      width: calc(100% - 40px);
      height: fit-content;
   }

   .detail p {
      display: block;
      width: 100%;
   }


   .product-new {
      width: 100%;
      height: fit-content;
   }

   .product-newBox div.flex {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 15px;
      padding: 20px 20px 0;
   }

   .product-new img:first-of-type {
      grid-column: 1/2;
      grid-row: 2/3;
      margin: auto;
   }

   .product-new-text {
      grid-column: 1/3;
      grid-row: 1/2;
      margin: 0;
   }

   .product-new-text br {
      display: none;
   }

   .product-new img:last-of-type {
      grid-column: 2/3;
      grid-row: 2/3;
      margin: auto;
   }


   .footerGrp {
      padding: 0;
   }

   .footerBox {
      width: calc(100% - 20px);
      margin: auto;
      padding: 20px;
   }

   .interviewLink2 span,
   .interviewLink2 p {
      font-size: 5vw;
      font-weight: 700;
   }

   .interviewLink2 i {
      display: none;
   }
}