@charset "UTF-8";

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

/*-----------------------------------------
-------------------------------------------
-------------------------------------------
目次　※各々レスポンシブ対応あり
00 リセットCSS
01 共通部分の設定
02 ヘッダーの設定
03 まえがき
04 インタビュー記事共通
05 インタビュー記事　開発のきっかけ
06 インタビュー記事　販促方法
07 インタビュー記事　お客様とともに
08 新商品情報
-------------------------------------------
-------------------------------------------
-----------------------------------------*/


/*-------------------------------------------
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;
   align-items: center;
}

.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 {
   background-image: url(https://d3t0ae4e2cnggp.cloudfront.net/resource/20250922/interview/top-background.png);
   height: 600px;
   width: 100%;
   background-size: cover;
   margin: 0 auto;
   background-position: 0 -20px;
   background-color: #fff0d9;
}

.headGrp-box {
   height: 600px;
   width: 1500px;
   position: relative;
   margin: 0 auto;
   display: block;
}

.catch {
   padding: 70px 0 0 150px;
   font-family: 'M PLUS 1';
}

.catch1 {
   background-color: #fff;
   color: #404040;
   font-weight: 600;
   font-size: 28px;
   height: 50px;
   width: 500px;
   text-align: center;
   line-height: 50px;
   font-family: 'M PLUS 1', sans-serif;
}

.catch2 {
   color: #fff;
   font-weight: 500;
   font-size: 25px;
   margin: 15px 0 5px;
   font-family: 'M PLUS 1', sans-serif;
}

.productname {
   color: #fff;
   font-weight: 800;
   font-size: 55px;
   font-family: 'M PLUS 1', sans-serif;
}

.title {
   text-align: center;
   margin: 80px auto 0 auto;

}

.title h1 {
   font-family: 'M PLUS 1';
   font-size: 90px;
   color: #ff9100;
   font-weight: 900;
}

.interviewLine {
   background-color: #ff9100;
   width: 430px;
   height: 4px;
   margin: 30px auto -35px auto;
}

.subtitle {
   font-family: 'M PLUS 1';
   font-size: 40px;
   color: #ff9100;
   font-weight: 600;
   margin: 10px auto;
   background-color: #fff0d9;
   width: 340px;
}

.company {
   font-family: 'Noto Sans JP';
   font-size: 20px;
   line-height: 1.4;
   text-align: center;
}

.name p {
   font-size: 30px;
   text-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff;
}

.imai {
   position: absolute;
   top: 223px;
   left: 120px;
   display: flex;
   padding: 0 100px 0 0;
}

.imai p {
   position: absolute;
   top: 300px;
   left: 270px;
}

.imai span {
   font-size: 20px;
   text-shadow: 0 0 15px #fff, 0 0 15px #fff, 0 0 15px #fff;
}


.takizawa {
   position: absolute;
   top: 256px;
   left: 1060px;
}

.takizawa p {
   position: absolute;
   top: 298px;
   left: -70px;
}

.colorfulfile {
   position: absolute;
   top: 18px;
   left: 900px;

}


/*-------------------------------------------
まえがき
-------------------------------------------*/

.opening {
   width: 1500px;
   margin: 100px auto 0 auto;
   position: relative;
}

.openingbox {
   background-color: #fff;
   border-radius: 15px;
   width: 1200px;
   height: 250px;
   margin: 100px auto 0 165px;
   display: flex;
   align-items: center;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.opening img {
   position: absolute;
   top: -90px;
   left: 90px;
}

.opening p {
   font-size: 17px;
   line-height: 1.8;
   margin-left: 280px;
}


/*-------------------------------------------
インタビュー記事共通
-------------------------------------------*/

.contentsWrap {
   background-color: #fff;
   box-shadow: 5px 5px 3px rgba(0, 0, 0, 0.2);
   margin: 100px auto 0 auto;
   width: 1100px;
}

.wrapTitle {
   display: flex;
}

.contents-text {
   width: 950px;
   margin: 70px auto;
   padding-top: 70px;
}

.square {
   width: 18px;
   height: 36px;
   background-color: #ff9100;
   margin-top: 3px;
}

.mainGrp h2 {
   font-size: 38px;
   font-weight: 800;
   margin-left: 20px;
}

.question {
   font-size: 18px;
   font-weight: 800;
   margin-top: 100px;
   text-align: justify;
}

.answer {
   font-size: 18px;
   line-height: 2.5;
   margin-top: 50px;
   text-align: justify;
}

.t {
   font-weight: 800;
   color: #0000bd !important;
}

.i {
   font-weight: 800;
   color: #00a000 !important;
}

.textlink {
   color: #0000ee !important;
   border-bottom: 2px solid #0000ee;
   display: inline-block;
   line-height: 1;
}


.textlink:hover {
   opacity: 0.5;
}

.textlink:active {
   color: #ff0000 !important;
   border-bottom: 2px solid #ff0000;
}

.textlink:visited {
   color: #551a8b !important;
   border-bottom: 2px solid #551a8b;
}


/*-------------------------------------------
インタビュー記事　開発のきっかけ
-------------------------------------------*/

.trigger {
   height: 1600px;
}

.ph1 {
   width: 600px;
   margin-left: auto;
}

.design {
   margin: 50px 0 0 100px;
}


/*-------------------------------------------
インタビュー記事　販促方法
-------------------------------------------*/

.promotion {
   height: 1150px;
}

.station-ph {
   margin-top: 50px;
}

.ph2 {
   width: 550px;
   margin-left: auto;
}

.ph3 {
   width: 600px;
}

.imai-ph {
   margin: 50px 0 0 auto;

}


/*-------------------------------------------
インタビュー記事　お客様とともに
-------------------------------------------*/

.customer {
   height: 2000px;
}

.customer img {
   display: block;
   margin: 40px auto 0 auto;
}

.question-en {
   font-size: 18px;
   font-weight: 800;
   text-align: justify;
   margin: 5px 0 0 44px;
}


/*-------------------------------------------
新商品情報
-------------------------------------------*/

.information {
   text-align: center;
   position: relative;
   width: 1100px;
   height: 250px;
   margin: 200px auto 0 auto;
}

.information img {
   position: absolute;
   margin: -40px 0 0 240px;
}

.underline {
   width: 470px;
   height: 20px;
   background-color: #ffdeb2;
   position: absolute;
   top: 38px;
   left: 315px;
   z-index: 0;
}

.information h3 {
   color: #ff9100;
   font-size: 50px;
   font-weight: 800;
   z-index: 1;
   position: relative;
}

.information p {
   margin-top: 50px;
   font-size: 25px;
   font-weight: 600;
   line-height: 1.4;
   text-align: center;
}



/* 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
   }
}

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

/*TOPに戻る*/
section.footGrp {
   padding: 0 15px;
}

div.backBtn {
   width: 100%;
   max-width: 500px;
   margin: auto;
   padding: 40px 0 100px;
}

div.backBtn a {
   display: block;
   width: 100%;
   padding: 20px 20px 20px 40px;
   font-size: 16px;
   text-align: center;
   color: #353535;
   background: #ebebeb;
   border: 1px solid #8f8f8f;
   border-radius: 5px;
   position: relative;
}

div.backBtn a::after {
   content: "";
   display: block;
   width: 10px;
   height: 10px;
   border-bottom: 1px solid #353535;
   border-left: 1px solid #353535;
   position: absolute;
   top: 50%;
   left: 30px;
   transform: translate(0, -50%) rotate(45deg);
}

@media screen and (max-width:500px) {
   div.backBtn a {
      font-size: 4vw;
   }
}



/*安田　修正*/

.body {
   overflow: hidden;
}

@media screen and (max-width:768px) {

   .headGrp,
   .headGrp-box,
   .opening,
   .openingbox,
   .trigger,
   .contents-text,
   .ph1,
   .ph2,
   .ph3,
   .promotion,
   .customer {
      width: 100%;
      height: fit-content;
   }


   .opening,
   .opening img,
   .colorfulfile {
      position: static;
   }

   .headGrp {
      background-position: -30vw -40vw;
   }

   .catch {
      padding: 30px 10px;
   }

   .catch1,
   .catch2,
   .productname {
      text-align: center;
   }

   .catch1 {
      width: 100%;
      height: fit-content;
      font-size: 5vw;
   }

   .productname {
      font-size: 7.5vw;
   }

   .title {
      margin: 0 auto;
   }

   .title h1 {
      background: none;
      text-shadow: none;
      font-size: 16vw;
   }

   .interviewLine {
      width: 95%;
   }

   .subtitle {
      font-size: 7vw;
      text-align: center;
   }

   .company {
      font-size: 4vw;
   }

   .imai,
   .takizawa {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0;
      margin: auto 0 0;
      position: relative;
      top: inherit;
      left: inherit;
   }

   .imai p,
   .takizawa p {
      font-size: 4vw;
      position: absolute;
      top: inherit;
      bottom: 10px;
      left: 20px;
   }

   .imai p span,
   .imai p,
   .takizawa p {
      text-shadow: 0 0 10px #fff,
         0 0 10px #fff,
         0 0 10px #fff,
         0 0 10px #fff,
         0 0 10px #fff,
         0 0 10px #fff,
         0 0 10px #fff,
         0 0 10px #fff,
         0 0 10px #fff,
         0 0 10px #fff,
         0 0 10px #fff,
         0 0 10px #fff;
   }

   div.name {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 15px;
   }

   .colorfulfile {
      transform: rotate(-20deg);
      max-width: 300px !important;
      margin: auto;
   }

   .opening {
      margin-top: 30px;
   }

   .openingbox {
      flex-direction: column;
      max-width: calc(100% - 30px);
      margin: auto;
      padding: 25px;
   }

   .opening img {
      width: 75%;
   }

   .opening p {
      font-size: 15px;
      margin: 20px auto 0;
   }

   section.mainGrp {
      padding: 0 15px;
   }

   .contentsWrap {
      margin-top: 30px;
      padding: 25px;
   }

   .contents-text {
      padding-top: 0;
      margin: 0 auto 20px;
   }

   .mainGrp h2 {
      color: #1D1D1F;
      text-shadow: none;
      font-size: 5.5vw;
      margin-left: 3vw;
   }

   .square {
      width: 3vw;
      height: 5.5vw;
      margin-top: 3vw;
   }

   .question {
      margin-top: 6vw;
      margin-bottom: 3vw;
   }

   .contents-text .flex>img {
      width: 100%;
      max-width: 300px;
      margin: auto;
   }

   .answer {
      font-size: 16px;
      line-height: 2;
      margin-top: 3vw;
   }

   img.design {
      width: 100%;
      max-width: 300px;
      margin: auto;
   }

   .customer img {
      margin: 20px auto 40px;
   }

   .information {
      width: calc(100% - 30px);
      height: fit-content;
      margin: 80px auto 40px;
   }

   .information h3 {
      background: none;
      display: inline;
      padding: 0 6px;
      line-height: 1.35;
      background: linear-gradient(transparent 70%, #ffdeb2 0%);
      font-size: 8vw;
      text-shadow: none;
   }

   .information img {
      margin: 0;
      right: 0;
      top: -35px;
   }

   .underline {
      display: none;
   }

   .information p {
      margin: 20px auto 0;
      padding-bottom: 30px;
      font-size: 5vw;
   }

   .information p br {
      display: none;
   }

   .question-en {
      margin-left: 0;
   }
}