@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Abel&family=Noto+Sans+JP&family=Ropa+Sans&display=swap');


html {
   font-size: 62.5%;
}

body {
   color: #333;
   font-family: "游ゴシック体", "YuGothic", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
   font-size: 1.6rem;
   letter-spacing: 0.1em;
}

a {
   text-decoration: none;
   color: #00ab95;
}

a::hover {
   opacity: .7;
}

img {
   max-width: 100%;
}

li {
   list-style: none;
}

*,
*::before,
*::after {
   box-sizing: border-box;
}

.only_sp {
   display: none;
}

.only_sp480 {
   display: none;
}

.only_sp375 {
   display: none;
}

.only_sp320 {
   display: none;
}

.wrapper {
   width: 100%;
   max-width: 120rem;
   margin: 0 auto;
   padding: 0;
   text-align: center;
}

.h2 {
   margin-bottom: 4rem;
}

.h2-l {
   font-family: 'Noto Sans JP', sans-serif;
   font-size: 6.6rem;
   font-weight: lighter;
   /* color: #00ab95; */
   color: #ddd;
   display: block;
   letter-spacing: .15em;
}

.h2-m {
   font-size: 3.6rem;
   font-weight: lighter;
   /* color: #00ab95; */
   color: #333;
}

.text {
   line-height: 3rem;
   line-height: 2.8;
   margin-bottom: 5rem;
}

.strong {
   /* color: #00ab95; */
   color: #333;
   font-weight: bold;
   background: rgb(255 255 0 / 35%);
}

/*------
メインv
.site-title
z-index: 3;

ハンバーガー
.hamburger
z-index: 5;

ナビ
#navi
z-index: 4;

アプローチ　カプセル画像
main::after
z-index: -1;

商品名
.item-name
z-index: 1;

DHA袋画像
#flawless-dha::before
z-index: 2;
-------*/



/*------
ヘッダー
-------*/
#header {
   width: 100%;
   min-height: 100vh;
   position: relative;
}

/*------
FVズームアウト
-------*/

@-webkit-keyframes zoomUp {
   0% {
      -webkit-transform: scale(1);
      transform: scale(1);
   }

   100% {
      -webkit-transform: scale(1.15);
      transform: scale(1.15);
   }
}

@keyframes zoomUp {

   /* 1.15倍させる指定 */
   0% {
      -webkit-transform: scale(1);
      transform: scale(1);
   }

   100% {
      -webkit-transform: scale(1.15);
      transform: scale(1.15);
   }
}

.swiper-slide {
   overflow: hidden;
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
}

.swiper-slide-active .slide-img,
.swiper-slide-duplicate-active .slide-img,
.swiper-slide-prev .slide-img {
   /* 12秒かけて拡大させる */
   -webkit-animation: zoomUp 12s linear 0s;
   animation: zoomUp 12s linear 0s;
   -webkit-animation-fill-mode: both;
   animation-fill-mode: both;
}

.slide-img {
   background-size: cover;
   background-position: center center;
   /* 背景画像は中央を軸に表示させる */
   height: 100vh;
   /* この高さで表示させる */
}


/*------
メインv
-------*/
#header .site-title {
   padding: 5rem 0 0 12rem;
   line-height: 1;
   position: absolute;
   top: 0;
   z-index: 3;
}

#header .site-title a {
   display: block;
}


/*------
ハンバーガーメニュー
-------*/
.hamburger {
   width: 4rem;
   height: 2.8rem;
   position: fixed;
   top: 5rem;
   right: 12rem;
   z-index: 5;
   cursor: pointer;
   /*transition:.1s ease-in-out;*/
}

.hamburger:hover {
   opacity: .7;
}

/*------
ハンバーガーメニュー　閉じている時
-------*/
.hamburger span {
   width: 4rem;
   height: .2rem;
   background: #00ab95;
   position: absolute;
   left: 0;
   right: 12rem;
   transition: .2s ease-in-out;
}

.hamburger span:nth-child(1) {
   top: 0;
}

.hamburger span:nth-child(2) {
   top: 1.9rem;
}

/*------
ハンバーガーが開いている時　回転
-------*/
.hamburger.active span:nth-child(1) {
   transform: rotate(-45deg);
}

.hamburger.active span:nth-child(2) {
   top: 0;
   transform: rotate(45deg);
}


/*------
ナビ
-------*/
#navi {
   width: 100%;
   height: 100vh;
   background-color: #fff;
   color: #00ab95;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 4;
   opacity: 0;
   text-align: center;
   visibility: hidden;
}

/*------
ナビがactiveになった時
-------*/
#navi.active {
   opacity: .9;
   visibility: visible;
}

#navi .menu {
   margin: 18rem 0 4rem 0;
}

#navi .menu li {
   margin-bottom: 3rem;
}

#navi .menu a {
   /* color: #00ab95; */
   color: #333;
}

#navi .menu a:hover {
   border-bottom: solid 1px #00ab95;
   padding-bottom: 0.5rem;
}

/*------
コンテンツの装飾
-------*/
main {
   position: relative;
}

main::before {
   content: "";
   width: 30%;
   /* aspect-ratio: 1 / 1.74; */
   height: 10%;
   position: absolute;
   top: 185rem;
   left: 0;
   background-image: url(../img/img-approch1.png);
   background-size: cover;
   background-repeat: no-repeat;
}

main::after {
   content: "";
   width: 39%;
   padding-top: 31%;
   position: absolute;
   top: 280rem;
   right: 0;
   background-image: url(../img/img-approch2.png);
   background-size: contain;
   background-position: right center;
   background-repeat: no-repeat;
   z-index: -1;
}

/*------
私たちの使命
-------*/
#mission.wrapper {
   margin-top: 18rem;
   text-align: left;
   max-width: unset;
   display: flex;
   position: relative;
}

#mission.wrapper .img {
   width: 50%;
}

#mission.wrapper .img img {
   width: 100%;
   aspect-ratio: 1 / 1.08;
   object-fit: cover;
}

#mission.wrapper .explain {
   width: 50%;
   margin: 11rem 0 0 7rem;
}

#mission.wrapper .explain .text {
   margin-bottom: 0;
}

/*#mission.wrapper::after {　//自転車の画像
   position: absolute;
   content: "";
   width: 22%;
   aspect-ratio: 1 / 1.258;
   background-image: url(../img/img-misshon2.jpg);
   background-size: contain;
   background-repeat: no-repeat;
   bottom: -30rem;
   right: 0;
}*/

/*------
私たちのこだわり
-------*/
#approach {
   margin-top: 18rem;
   position: relative;
}

#approach::after {
   content: "";
   position: absolute;
   width: 12%;
   /* aspect-ratio: 1 / 1.903; */
   width: 15%;
   height: 11%;
   bottom: 110rem;
   right: 0;
   opacity: .6;
   background-image: url(../img/img-approch4.png);
   background-size: cover;
   background-repeat: no-repeat;
}

#approach.wrapper .h2-l {
   color: #ddd;
}

#approach.wrapper .h2-m {
   color: #333;
}

#approach .h3 {
   color: #333;
   font-size: 3rem;
   font-weight: lighter;
}

#approach .h3:nth-of-type(1),
#approach .h3:nth-of-type(4) {
   position: relative;
   background-size: cover;
   background-repeat: no-repeat;
   margin-bottom: 5rem;
   /* aspect-ratio: 1 / 0.292; */
   padding-top: 29%;
}

#approach .h3:nth-of-type(1) span,
#approach .h3:nth-of-type(4) span {
   width: 100%;
   height: 100%;
   position: absolute;
   display: flex;
   justify-content: center;
   align-items: center;
   top: 0;
   left: 0;
}

#approach .h3:nth-of-type(1) {
   background-image: url(../img/img-approch-hbk1.jpg);
   margin-bottom: 5rem;
   position: relative;
}

#approach .h3:nth-of-type(4) {
   background-image: url(../img/img-approch-hbk2.jpg);
}

#approach .h3:nth-of-type(1)::before {
   content: "";
   position: absolute;
   width: 18.3%;
   /* aspect-ratio: 1 / 1.523; */
   padding-top: 28.23%;
   top: 6rem;
   left: -6rem;
   opacity: .6;
   background-image: url(../img/img-approch3.png);
   background-size: cover;
   background-repeat: no-repeat;
}

#approach .h3:nth-of-type(2),
#approach .h3:nth-of-type(3) {
   margin: 18rem auto 9rem auto;
}

#approach .h3:nth-of-type(2) {
   margin: 18rem auto 7rem auto;
}

#approach .text:nth-of-type(9),
#approach .text:nth-of-type(11) {
   margin-bottom: 16rem;
}

/*------
取扱商品
-------*/
#items {
   background-color: rgba(155, 198, 192, 0.1);
   padding-bottom: 18rem;
}

#items .h2 {
   margin: 0 auto 2rem auto;
   padding-top: 12rem;
}

#flawless-epa {
   position: relative;
   width: 100%;
}

.item-name {
   position: absolute;
   top: 50%;
   left: 0;
   transform: translateY(-50%);
   width: calc(380/1200 * 100%);
   /*親要素との比率*/
   /* aspect-ratio: 1 / 1; */
   height: calc(380/450 * 100%);
   /*親要素との比率*/
   z-index: 1;
   background-color: #fff;
}

.item-name1 {
   /* color: #00ab95; */
   color: #333;
   font-size: 1.8rem;
   width: 100%;
   height: 100%;
   position: absolute;
   display: flex;
   justify-content: center;
   align-items: center;
   top: 0;
   left: 0;
}

#item-newsicon2 {
   position: absolute;
   top: 2rem;
   right: 2rem;
   width: 22%;
   /* aspect-ratio: 1 / 1; */
   height: 22%;
   border: solid 2px #00ab95;
   border-radius: 10rem;
   display: flex;
   justify-content: center;
   align-items: center;
   line-height: 1.2;
   font-size: 1.6rem;
   color: #00ab95;
}


/*------
ECサイト
-------*/
#ecsite {
   background-color: #00ab95;
   padding-bottom: 14rem;
}

#ecsite .h2 {
   padding-top: 8rem;
   margin-bottom: 10rem;
}

#ecsite .h2-m {
   color: #fff;
}

#shops {
   max-width: 84rem;
   display: flex;
   justify-content: space-around;
   margin: 0 auto;
}

#shops a {
   display: block;
   width: 31%;
   padding-top: 2%;
   padding-bottom: 2%;
   font-size: 1.8rem;
   color: #00ab95;
   background-color: #fff;
   border-radius: 10rem;
   backface-visibility: hidden;
   border: #00ab95 solid 2px;
}

#shops a:hover {
   color: #fff;
   background-color: #00ab95;
   box-sizing: border-box;
   border: #fff solid 2px;
   transition: .2s ease-in-out;
}

#ecsite .comment {
   max-width: 105rem;
   margin: 0 auto;
   text-align: right;
   color: #fff;
   font-size: 1.4rem;
   margin-top: 1rem;
}

/*------
会社概要とお問い合わせ
-------*/
#other {
   display: flex;
   justify-content: space-between;
   padding-top: 10rem;
}

#other h3 {
   /* color: #00ab95; */
   color: #333;
   font-size: 1.4rem;
   margin-bottom: 4rem;
}

#company {
   font-size: 1.4rem;
   text-align: left;
   width: 49.5%;
   padding-right: 5%;
   border-right: 1px solid #ddd;
}

#detail-list {
   display: flex;
   flex-wrap: wrap;
}

#detail-list,
#detail-list dl {
   width: 100%;
}

#detail-list dt {
   width: 30%;
   margin-bottom: 2rem;
}

#detail-list dd {
   width: 70%;
   margin-bottom: 2rem;
}


#formWrap {
   width: 50%;
   padding-left: 3%;
   line-height: 120%;
   font-size: 1.4rem;
   text-align: left;
}

#formWrap .formTable {
   width: 100%;
   margin: 0 auto;
   border-collapse: collapse;
}

#formWrap .formTable th {
   font-weight: normal;
   text-align: left;
   margin-bottom: 2rem;
}

#formWrap .formTable th,
#formWrap .formTable td {
   width: auto;
   display: block;
}

#formWrap .formTable th {
   margin-top: .5rem;
   border-bottom: 0;
}

#formWrap .formTable th span {
   color: red;
}

#formWrap .formTable td {
   border-bottom: 1px solid #ccc;
   margin-bottom: 3rem;
}

#formWrap .formTable tr:nth-of-type(5) td,
#formWrap .formTable tr:nth-of-type(6) td {
   border-bottom: none;
}

#formWrap .formTable input[type="text"],
#formWrap .formTable textarea {
   padding: .5rem;
   width: 100%;
   display: block;
}

#formWrap .formTable textarea {
   border: 1px solid #dddddd;
}

#formWrap .formTable+p input[type="submit"],
#formWrap .formTable+p input[type="reset"] {
   width: 20%;
   padding-top: 2%;
   padding-bottom: 2%;
   font-size: 1.4rem;
   border-radius: 10rem;
   color: #fff;
   background-color: #00ab95;
   border: solid 2px #00ab95;
}

#formWrap .formTable+p input[type="reset"] {
   color: #00ab95;
   background-color: #ffffff;
}

#formWrap .formTable+p {
   text-align: right;
}

#formWrap .sent-msg p:nth-of-type(1) {
   margin: 4rem auto 1rem;
}



/*------
フッター
-------*/
#footer {
   font-size: 1.1rem;
   text-align: center;
   margin-top: 12rem;
   margin-bottom: 4rem;
}




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

   /* 1200pxまでの幅の場合に適用される */
   .wrapper {
      max-width: 840px;
   }

   /*   #mission.wrapper::after { //自転車の画像
       width: 28%;
       top: calc(100% + 0rem);
   }*/

}

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

   /* 768pxまでの幅の場合に適用される */

   .strong {
      background: unset;
   }

   .only_pc {
      display: none;
   }

   .only_sp {
      display: block;
   }

   main::before,
   main::after {
      display: none;
   }

   #header .site-title {
      padding-left: 2rem;
   }

   .hamburger {
      right: 2rem;
   }

   #navi .menu a {
      color: #00ab95;
   }

   .strong {
      color: #00ab95;
   }

   .h2-l {
      color: #00ab95;
      font-size: 5.1rem;
      letter-spacing: .05em;
   }

   .h2-m {
      font-size: 2.7rem;
      color: #00ab95;
   }

   #mission.wrapper {
      text-align: center;
      flex-direction: column;
      padding: 0 6.6%;
   }

   #mission.wrapper .img {
      width: 100%;
      margin: 0 auto 13%;
   }

   #mission.wrapper .explain {
      width: 100%;
      margin: 0 auto;
   }

   #approach p {
      padding: 0 6.6%;
   }

   #approach .h3 {
      color: #00ab95;
   }

   #approach .h3:nth-of-type(1) {
      /* aspect-ratio: 2 / 1; */
      padding-top: 46%;
      /*350/750*/
   }

   #approach .h3:nth-of-type(2),
   #approach .h3:nth-of-type(3) {
      margin: 7rem auto;
   }

   #approach .h3:nth-of-type(4) {
      background-image: url(../img/img-approch-hbk2_sp.jpg);
      /* aspect-ratio: 2 / 1; */
      padding-top: 46%;
      /*350/750*/
   }

   #approach #image-2,
   #approach #image-3 {
      max-width: 70%;
      margin: 6rem auto 3rem;
   }

   #approach #image-3 {
      max-width: 75%;
   }

   #approach::after {
      width: 26%;
      /*196/750*/
      padding-top: 49.73%;
      /*373/196*(196/750 *100)*/
      bottom: 149rem;
      background-size: contain;
   }

   #items .h2,
   #ecsite .h2 {
      margin: 0 auto 4rem;
      padding-top: 6rem;
   }

   #flawless-epa {
      margin-right: auto;
      margin-left: auto;
      width: 93%;
   }

   .item-name {
      width: 100%;
      top: calc(100% + 0rem);
      padding: 10% 0;
      transform: unset;
      position: absolute;
      /* aspect-ratio: unset; */
      height: auto;
   }

   .item-name1 {
      margin-top: 1rem;
      font-size: 3rem;
      color: #00ab95;
   }

   .item-name2 {
      margin-top: -30px;
      font-size: 1.6rem;
      display: block;
   }

   #flawless-dha::before {
      width: 28%;
      top: 20rem;
      left: 1%;
      width: 24vw;
      height: calc(24vw * 1.564);
   }

   #item-newsicon2 {
      display: none;
   }

   #shops {
      width: 100%;
      display: flex;
      flex-direction: column;
   }

   #shops a {
      width: 80%;
      padding-top: 5%;
      padding-bottom: 5%;
      font-size: 1.8rem;
      margin: 0 auto 4rem auto;
   }

   #shops a:last-child {
      margin: 0 auto;
   }

   #ecsite .comment {
      text-align: center;
   }

   #other {
      flex-direction: column;
   }

   #other h3 {
      color: #00ab95;
   }

   #company {
      width: 100%;
      padding-right: 6.6%;
      padding-left: 6.6%;
   }

   #company {
      border: none;
      border-bottom: 1px solid #ddd;
      margin-bottom: 6rem;
   }

   #detail-list {
      flex-direction: column;
   }

   #detail-list dt {
      width: 100%;
      padding: 0.2rem 0 0 1rem;
      border-left: 0.3rem #00ab95 solid;
   }

   #detail-list dd {
      width: 100%;
      margin-top: 1rem;
      margin-bottom: 3rem;
   }


   #formWrap {
      width: 100%;
      padding-right: 6.6%;
      padding-left: 6.6%;
   }

   #formWrap .formTable+p {
      display: flex;
      flex-direction: column;
   }

   #formWrap .formTable+p input[type="submit"],
   #formWrap .formTable+p input[type="reset"] {
      width: 85%;
      padding-top: 6%;
      padding-bottom: 6%;
      margin: 2rem auto 0;
      font-size: 1.6rem;
   }
}


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

   /* 480pxまでの幅の場合に適用される */
   input,
   select,
   textarea {
      font-size: 16px;
   }

   .only_sp480 {
      display: block;
   }

   .swiper-container {
      display: none;
   }

   #header {
      background-image: url('../img/mainvisual1_sp.jpg');
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
   }

   #mission.wrapper {
      margin-top: 8rem;
   }

   /*   #mission.wrapper::after {　//自転車の画像
      width: 38%;
   }*/
   #approach {
      margin-top: 8rem;
   }

   #approach::after {
      bottom: 137rem;
      right: 3rem;
   }

   #approach .h3 {
      font-size: 2.25rem;
   }

   #approach .h3:nth-of-type(1) {
      background-position: 75% center;
   }

   #approach .h3:nth-of-type(1)::before {
      width: 30%;
      top: calc(100% - 3rem);
      left: 0;
   }

   #approach .h3:nth-of-type(2),
   #approach .h3:nth-of-type(3) {
      margin: 3rem auto;
   }

   #approach .text:nth-of-type(3),
   #approach .text:nth-of-type(5) {
      margin-bottom: 0;
   }

   #approach .text:nth-of-type(9),
   #approach .text:nth-of-type(11) {
      margin-bottom: 8rem;
   }

   #items {
      padding-bottom: 6rem;
   }

   .item-name1 {
      font-size: 2rem;
   }

   #flawless-dha::before {
      top: 13rem;
   }

   #flawless-epa {
      margin-bottom: 4rem;
   }

   #ecsite {
      padding-bottom: 6rem;
   }

   #other {
      padding-top: 6rem;
   }
}

@media screen and (max-width: 375px) {
   .only_sp375 {
      display: block;
   }

   #approach::after {
      bottom: 149rem;
   }
}

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

   /* 320pxまでの幅の場合に適用される */
   .only_sp320 {
      display: block;
   }

   #header .site-title img {
      max-width: 80%;
   }

   #items {
      padding-bottom: 15rem;
   }

   #flawless-dha::before {
      width: 20%;
   }
}