@charset "UTF-8";


:root {
  --color-black: #000000;
  --color-white: #ffffff;

  --color-primary: #004195;
  --color-pink: #ff328a;

  --color-bg-pink: #ffa1c2;

  --ja: "Noto Sans JP", sans-serif;
  --en: "Poppins", sans-serif;

  /* --header: 20rem;
  scroll-padding: var(--header); */

	[id] {
  scroll-margin-top: 120px;
}
}

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

/*================================================
 *  一般・共通設定
 ================================================*/
html {
  /* 1920>> 10px */
  font-size: clamp(1px, 0.5208vw, 8px);
}

body {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 2rem;
  background: var(--color-white);
  color: var(--color-black);
  line-height: 1.6;
}

main {
  overflow-x: clip;
}

a {
  text-decoration: none;
  transition: all .4s;
}

a:hover {
  opacity: .6;
}

img {
  max-width: 100%;
  display: block;
}

strong {
  font-weight: bold;
}

small {
  font-size: smaller;
}

ul,
ol,
dl {
  margin: 0;
}

ul li {
  list-style: none;
}

ol li {
  list-style: decimal;
}

li {
  margin-left: 0;
}

/* タイトル */


@media screen and (max-width:767px) {
  html {
    font-size: 1.6vw;
  }

  body {
    font-size: 2.4rem;
  }
}


/*================================================
 *  header / ヘッダー
 ================================================*/
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background: var(--color-white);
  padding: 4rem 0 0 0;
}


.nav_inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 136rem;
  margin: 0 auto 2rem;
}

.nav_left {
  width: 34rem;
}

.nav_right {
  display: flex;
  align-items: center;
  gap: 4rem;
}

.nav_right .jaMenu {
  padding-right: 4rem;
  border-right: 0.2rem solid var(--color-black);
  font-weight: 500;
}

.nav_right ul {
  display: flex;
  align-items: center;
  gap: 3rem;
}


.nav_btm {
  background: var(--color-primary);
  color: var(--color-white);

}

.nav_menu {
  /* width: 120rem; */
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav_menu li {
  position: relative;
}

.nav_menu a,
.nav_menu span {
  display: block;
  padding: 1.5rem 5rem;
  background: transparent;
  transition: all .4s;
  cursor: pointer;
}

.nav_menu a:hover,
.nav_menu span:hover {
  background: #001e7c;
  opacity: 1;
}



.drp-nav {
  position: absolute;
  top: 100%;
  width: 100%;
  left: 0;
  background: #1D5595;
  opacity: 0;
  pointer-events: none;
  transition: all .4s;
}

.nav_menu li:hover .drp-nav {
  opacity: 1;
  pointer-events: auto;
}

.drp-nav a {
  display: block;
  padding: 2rem 0;
  text-align: center;
  font-size: 1.8rem;
}

.drp-nav a:hover {
  background: var(--color-pink);
  color: var(--color-black);
}



@media screen and (max-width:767px) {
  header {}

  .nav_inner {
    width: 92%;
    margin: 0 auto 2rem;
  }

  .nav_left {
    width: 30rem;
    position: relative;
    z-index: 300;
  }

  .nav_right ul {
    display: none;
  }

  .nav_right {
    padding-right: 10rem;
    font-size: 3rem;
    position: relative;
    z-index: 300;
  }

  .nav_right .jaMenu {
    padding: 0;
    border: none;
  }

  .hamburger {
    position: absolute;
    right: 1rem;
    top: 2rem;
    width: 10rem;
    height: 10rem;
    cursor: pointer;
    z-index: 300;
    transition: all .1s ease-out;
  }

  /* line open */
  .hamburger__line {
    position: absolute;
    left: 50%;
    width: 70%;
    height: 0.15rem;
    background-color: var(--color-black);
    transition: all .4s ease-out;
    transform: translateX(-50%);
  }

  .hamburger__line--1 {
    top: 38%;
  }

  .hamburger__line--2 {
    top: 50%;
  }

  .hamburger__line--3 {
    top: 62%;
  }

  /* line close */
  .open_nav .hamburger__line--1 {
    transform: translateX(-50%) rotate(35deg);
    top: 50%;
  }

  .open_nav .hamburger__line--2 {
    width: 0;
    left: 50%;
  }

  .open_nav .hamburger__line--3 {
    transform: translateX(-50%) rotate(-35deg);
    top: 50%;
  }

  /* ハンバーガーメニュー内 */
  nav.global__nav {
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background: rgb(255 255 255 / 90%);
    transition: all .3s ease-out;
    z-index: 200;
    overflow-y: scroll;
    padding: 12rem 0 10rem 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  /* 表示 */
  .open_nav .global__nav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }


  .nav_menu {
    display: block;
    font-size: 3rem;
    color: var(--color-primary);
    font-weight: 500;
  }

  .nav_menu li .drp-nav {
    position: static;
    color: var(--color-black);
    opacity: 1;
    pointer-events: auto;
    background: transparent;
  }

  .drp-nav a {
    display: block;
    padding: 1rem 2rem 1rem 8rem;
    text-align: left;
    font-size: 2.6rem;
    font-weight: 500;
  }
}

/*================================================
 *  section btn
 ================================================*/
section {
  position: relative;
  padding-bottom: 10rem;
}

.section {
  padding-top: 10rem;
}

.ico {
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  display: inline-block;
}


.i_tel {
  background-image: url(../images/icon_tel.webp);
  width: 2.6rem;
  height: 3.4rem;
}

.i_mail {
  background-image: url(../images/icon_mail.webp);
  width: 3.77rem;
  height: 2.8rem;
}

.i_insta {
  background-image: url(../images/insta.png);
  width: 3.77rem;
  height: 3.8rem;
}

.hd {
  margin-bottom: 6rem;
  position: relative;
  padding-bottom: 2rem;
}

.hd::before {
  position: absolute;
  content: "";
  width: 25rem;
  height: 0.2rem;
  background: var(--color-black);
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}

.hd span {
  display: block;
  text-align: center;
}

.hd .en {
  font-family: var(--en);
  font-size: 8rem;
  color: #006837;
  font-weight: 600;
  line-height: 1;
}

.hd .ja {
  font-size: 4rem;
  font-weight: 600;
}

.hd.wt .en {
  color: var(--color-white);
}


.btn {
  display: block;
  background: var(--color-primary);
  color: var(--color-white);
  text-align: center;
  width: 130rem;
  margin: 0 auto;
  font-size: 3.5rem;
  border-radius: 0.8rem;
  position: relative;
  padding: 3rem 0;
}

.btn::before {
  position: absolute;
  content: "";
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  display: inline-block;
  background-image: url(../images/btn_arrow.webp);
  width: 2.6rem;
  height: 2.6rem;
  bottom: 2rem;
  right: 2rem;
}

.btn:hover {
  opacity: 1;
  background: rgb(255 255 255 / 20%);
  /* color: var(--color-primary); */
}


.subBtn {
  padding: 1rem 2rem;
  display: block;
  width: fit-content;
  border-radius: 10rem;
  font-size: 1.6rem;
  background: var(--color-black);
  color: var(--color-white);
  min-width: 28rem;
  text-align: center;
}


@media screen and (max-width:767px) {
  .hd {
    margin-bottom: 4rem;
  }

  .hd .en {
    font-size: 6rem;
  }

  .hd .ja {
    font-size: 3rem;
  }

  .btn {
    width: 92%;
    font-size: 2.6rem;
    padding: 2rem 0;
  }

  .subBtn {
    font-size: 2.2rem;
  }

}

/*================================================
 * mainVisual
 ================================================*/
#mainVisual {
  margin-top: 17rem;
  padding: 0;
}

#mainVisual video {
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
  object-fit: cover;
  aspect-ratio: 16/9;
}

@media screen and (max-width:767px) {
  #mainVisual {
    margin-top: 12rem;
  }
}


/*================================================
* topNews
================================================*/
#topNews {
  background: #c6e776;
}

#topNews .hd::before {
  content: none;
}

.topNews_inner {
  width: 58%;
  margin: 0 auto;
}

.topNews_inner .newsList {
  /* width: 98rem; */
  background: var(--color-white);
  border-radius: 5rem;
  padding: 4rem;
  margin-bottom: 4rem;
}

.newsList li:not(:first-child) {
  border-top: 1px solid;
}

.newsList a {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 4rem;
  padding: 4rem 0;
  position: relative;
}

.newsList a::before {
  position: absolute;
  content: "";
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  display: inline-block;
  background-image: url(../images/arrow.webp);
  width: 5.4rem;
  height: 5.4rem;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

.newsList a img {
  width: 16.5rem;
  aspect-ratio: 164/134;
  overflow: hidden;
  object-fit: cover;
  border-radius: 2rem;
}

.newsList a .cnt {
  width: calc(100% - 20.5rem);
}

.newsList .ttl {
  font-size: 2.3rem;
}

.newsList .dateCat {
  font-size: 1.6rem;
  margin-top: 2rem;
}


.topNews_inner .subBtn {
  background: #4d4d4d;
  margin-left: auto;
}

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

  .topNews_inner {
    width: 92%;
  }

  .topNews_inner .newsList {
    /* width: 98rem; */
    background: var(--color-white);
    border-radius: 5rem;
    padding: 4rem;
    margin-bottom: 4rem;
  }

  .newsList li:not(:first-child) {
    border-top: 1px solid;
  }

  .newsList a {
    flex-wrap: wrap;
    gap: 2rem;
  }

  .newsList a::before {

    width: 4rem;
    height: 4rem;
    top: auto;
    bottom: 6rem;
    transform: translateY(0%);
  }

  .newsList a img {
    width: 100%;
    aspect-ratio: 164/134;
    overflow: hidden;
    object-fit: cover;
    border-radius: 2rem;
  }

  .newsList a .cnt {
    width: calc(100% - 7rem);
  }




  .topNews_inner .subBtn {
    background: #4d4d4d;
    margin-left: auto;
  }
}


/*================================================
* service
================================================*/
#topSvc {
  background: var(--color-bg-pink);
}

#topSvc h3 span {
  text-align: center;
  font-family: var(--en);
  color: var(--color-white);
  font-size: 21rem;
  font-weight: 700;
  display: block;
  line-height: 1;
}

#topSvc h3 {
  text-align: center;
  font-size: 5.5rem;
  font-weight: 500;
  margin-bottom: 16rem;
}

.svcList {
  display: grid;
  gap: 14rem;
  grid-template-columns: repeat(3, 1fr);


  width: 135rem;
  margin: 0 auto 20rem;
}

.svcList li {
  text-align: center;
  line-height: 1.4;
  position: relative;
}

.svcList li .svc_ill {
  position: absolute;
  top: 56%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 47rem;
  pointer-events: none;
}

.svcList li .svc_ill img {
  animation: 20s linear infinite rotation;
  pointer-events: none;
}

.svcList li:nth-child(2) .svc_ill img {
  animation: 20s linear infinite rotation2;
}

.svcList li .num {
  font-family: var(--en);
  color: var(--color-primary);
  font-size: 8rem;
  font-weight: 600;
}

.svcList li .num a{
	text-decoration: none;
}

.svcList li h4 {
  font-size: 3.5rem;
}

.svcList li h4 a {
  display: block;
  width: fit-content;
  margin: 0 auto;
  text-decoration: none;
  font-family: var(--en);
}

.svcList li a {
  display: block;
  width: fit-content;
  margin: 0 auto;
  text-decoration: underline;
  font-family: var(--en);
}

#topSvc .en_txt {
  font-size: 13.7rem;
  font-family: var(--en);
  color: var(--color-white);
  font-weight: 500;
  margin: 2rem 0 0;
  white-space: nowrap;
  line-height: 1.1;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

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

  #topSvc h3 span {
    font-size: 9rem;
  }

  #topSvc h3 {
    font-size: 3.5rem;
    font-weight: 500;
    margin-bottom: 16rem;
  }

  .svcList {
    gap: 30rem;
    grid-template-columns: repeat(1, 1fr);
    width: 92%;
    margin: 0 auto 20rem;
  }


  .svcList li h4 {
    font-size: 3.5rem;
  }


  .svcList li a {
    font-size: 2.4rem;
  }
	
.svcList li .svc_ill {
  width: 40rem;
}


  #topSvc .en_txt {
    font-size: 4.3rem;
  }
}

/*================================================
* factory
================================================*/
#factory {
  background: #c6e776;
}

#factory .sp_scrol.js-scrollable.scroll-hint {
  overflow: hidden !important;
}

.factory_map {
  width: 175rem;
  margin: 0 auto;
  position: relative;
}

.factory_map a {
  position: absolute;
  display: block;
  height: 16rem;
  color: transparent;
  font-size: 1px;
}

.factory_map .area01 {
  width: 28.3rem;
  top: 16.5rem;
  left: 84rem;
}

.factory_map .area02 {
  width: 59.3rem;
  top: 30rem;
  left: 116rem;
}

.factory_map .area02-1 {
  width: 20.3rem;
  height: 45rem;
  top: 14rem;
  left: 147rem;
}

.factory_map .area03 {
  width: 38rem;
  height: 12rem;
  top: 2rem;
  left: 113rem;
}

.factory_map .area04 {
  width: 25rem;
  top: 41rem;
  left: 76rem;
}

.factory_map .area05 {
  width: 12rem;
  height: 54rem;
  top: 19rem;
  left: 55rem;
  transform: rotate(29deg);
}

.factory_map .area06 {
  width: 48rem;
  top: 55rem;
  left: 58rem;
}


.factory_map .area07 {
  width: 10rem;
  height: 33rem;
  top: 43rem;
  left: 32rem;
  transform: rotate(29deg);
}

.factory_map .area08 {
  width: 23rem;
  top: 16rem;
  left: 123rem;
}


.factory_map .area09 {
  height: 30rem;
  width: 19rem;
  top: 43rem;
  left: 109rem;
  transform: rotate(29deg);
}

#accordion {
  margin-top: 6rem;
}

#accordion .label {
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 4rem;
  text-align: center;
  padding: 9rem 0 12rem;
  cursor: pointer;
  z-index: 1;
  position: relative;
}

#accordion .label::before {
  position: absolute;
  content: "";
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  display: inline-block;
  background-image: url(../images/acc_arrow.webp);
  width: 19.3rem;
  height: 11.2rem;
  top: -4rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}

#accordion .label::after {
  position: absolute;
  content: "";
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  display: inline-block;
  background-image: url(../images/acc_arrow02.webp);
  width: 4.3rem;
  height: 2.15rem;
  bottom: 3rem;
  left: 50%;
  transform: translateX(-50%);

}



#accordion .detail {
  display: none;
  background: #0071bc;

}

.areaCnt {
  background: #0071bc;
  color: var(--color-white);
  text-align: center;
  padding-bottom: 10rem;
}

.areaCnt:nth-child(2n) {
  background: var(--color-primary);
}

.areaCnt h3 {
  background: var(--color-pink);
  color: var(--color-white);
  font-size: 4rem;
  width: 68rem;
  margin: 0 auto;
  padding: 3rem 0;
  text-align: center;
  border-radius: 0 0 0.5rem 0.5rem;
}

.areaCnt .lead {
  margin: 3rem 0;
  font-size: 2.5rem;
}


.areaCnt ul {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  justify-content: center;
  gap: 5rem;
  margin: 0 auto;
}

.areaCnt ul li {
  width: 50rem;
}

.areaCnt ul.clm2 {
  width: 106rem;
}

.areaCnt ul li p {
  margin-top: 2rem;
}

#accordion .subBtn {
  margin: 10rem auto 0;
}

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

  .sp_scroll {
    overflow-x: scroll;
    overflow-y: hidden;
  }

  #factory .sp_scrol.js-scrollable.scroll-hint {
    overflow: scroll !important;
  }

  #accordion {
    margin-top: 6rem;
  }

  #accordion .label {
    font-size: 3rem;
    padding: 8rem 0 10rem;
  }

  #accordion .label::after {
    bottom: 2rem;
  }

  .areaCnt h3 {
    font-size: 3rem;
    width: 92%;
    padding: 2rem 0;
  }

  .areaCnt .lead {
    margin: 3rem auto;
    width: 92%;
  }

  .areaCnt ul {
    gap: 3rem;
    margin: 0 auto;
  }

  .areaCnt ul li {
    width: 50rem;
  }

  .areaCnt ul.clm2 {
    width: 100%;
  }

  .areaCnt ul li p {
    font-size: 2.6rem;
  }
}

/*================================================
* company
================================================*/
#company {
  background: #c6e776;
}


.co_inner {
  display: flex;
  align-items: end;
  justify-content: center;
  flex-direction: row-reverse;
  gap: 4rem;
  margin-top: -17rem;
}

.co_img {
  width: 66rem;
  position: relative;
  z-index: 1;
}

.co_img01 {
  width: 46rem;
  margin: 0 auto;
}

.co_img02 {
  position: absolute;
  width: 66rem;
  left: 0;
  bottom: -10rem;
  z-index: -1;
}

.co_img02 img {
  animation: 20s linear infinite rotation;
}

.co_txt {
  width: 74rem;
}

.co_txt h3 {
  font-size: 3.2rem;
  margin-bottom: 1em;
}

.co_txt p {
  margin-top: 1em;
}

.co_txt p.ar span {
  font-size: 4rem;
}

.co_outline {
  width: 130rem;
  margin: 26rem auto 0;
  padding: 8rem 7rem 8rem 7rem;
  font-size: 2.2rem;
  background: var(--color-white);
  border-radius: 5rem;
}

.co_outline dl {
  display: flex;
  align-items: stretch;
  justify-content: start;
  flex-wrap: wrap;
}

.co_outline dl dt {
  width: 20rem;
  padding: 2rem 0 1rem;
  border-bottom: 1px solid rgb(0 0 0 / 50%);
}

.co_outline dl dd {
  width: calc(100% - 20rem);
  padding: 2rem 0 1rem;
  border-bottom: 1px solid rgb(0 0 0 / 50%);
}

.co_outline dl dt:last-of-type,
.co_outline dl dd:last-of-type {
  border-bottom: none;
}


.company_btm {
  position: relative;
  width: 133rem;
  margin: 10rem auto 0;
}

.company_btm h2 {
  font-size: 21rem;
  font-family: var(--en);
  color: var(--color-white);
  font-weight: 600;
  white-space: nowrap;
  line-height: 1;
}

.company_btm h3 {
  font-size: 5.5rem;
  font-weight: 600;
}

.company_btm .subBtn {
  margin-left: auto;
  position: relative;
  z-index: 2;
  margin-top: -7rem;
}

@media screen and (max-width:767px) {
  .co_inner {
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 0;
  }

  .co_txt {
    width: 92%;
  }

  .co_img {
    width: 59rem;
    position: relative;
    z-index: 1;
  }

  .co_img02 {
    width: 59rem;
    bottom: -8rem;
  }

  .co_img01 {
    width: 41rem;
  }

  .co_outline {
    width: 92%;
    margin: 17rem auto 0;
    padding: 8rem 4rem 8rem 4rem;
  }

  .co_outline dl dt {
    width: 100%;
    padding: 2rem 0 0;
    border-bottom: none;
  }

  .co_outline dl dd {
    width: 100%;
    padding: 0rem 0 1rem;
  }

  .company_btm {
    position: relative;
    width: 92%;
    margin: 10rem auto 0;
  }

  .company_btm h2 {
    font-size: 13rem;
  }

  .company_btm h3 {
    font-size: 3.5rem;

  }

  .company_btm .subBtn {
    margin-left: 0;
    margin-top: 2rem;
  }
}

/*================================================
* topRecruit
================================================*/

#topRecruit {
  background: var(--color-bg-pink);
}

.topRecruit_inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
}

.topRecruit_txt {
  width: 86rem;
}

.topRecruit_txt h3 {
  font-size: 5rem;
  font-weight: 600;
}

.topRecruit_txt p {
  font-size: 3rem;
  margin: 2rem 0;
  font-weight: 500;
}

.topRecruit_img {
  width: 59rem;
}




.photo {
  width: 115rem;
  margin: 12.5rem auto 0;
}

@media screen and (max-width:767px) {
  .topRecruit_inner {
    flex-wrap: wrap;
    width: 92%;
    margin: 0 auto;
    gap: 1rem;
  }

  .topRecruit_txt {
    width: 100%;
  }

  .topRecruit_txt h3 {
    font-size: 3.6rem;
    font-feature-settings: "palt";
    font-weight: 600;
  }

  .topRecruit_txt p {
    font-size: 2.6rem;
    margin: 3rem 0;
  }

  .topRecruit_img {
    width: 100%;
  }

  .photo {
    width: 92%;
    margin: 6rem auto 0;
  }
}

/*================================================
* access
================================================*/
#access {
  background: var(--color-primary);
}

#access .hd .ja {
  color: var(--color-white);
}

#access .hd::before {
  background: var(--color-white);
}

.acc_inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5rem;
}

.acc_map {
  width: 59rem;
  z-index: 1;
  position: relative;
}

.acc_map::before {
  position: absolute;
  content: "";
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  display: inline-block;
  background-image: url(../images/co_img02.webp);
  width: 53.6rem;
  height: 54rem;
  top: -19rem;
  left: -28rem;
  opacity: .2;
  z-index: -1;
  animation: 20s linear infinite rotation2;
}


.acc_map iframe {
  display: block;
  width: 100%;
  height: 38rem;
}

.acc_txt {
  width: 65rem;
  color: var(--color-white);
  line-height: 2;
}


@media screen and (max-width:767px) {
  .acc_inner {
    flex-wrap: wrap;
    width: 92%;
    margin: 0 auto;
  }

  .acc_map {
    width: 100%;
  }



  .acc_txt {
    width: 92%;
    color: var(--color-white);
    line-height: 2;
  }
}



/*================================================
 *  footer
 ================================================*/
footer {
  padding: 10rem 0 0;
  background: #666;
  color: var(--color-white);
}

footer h2 {
  text-align: center;
  font-size: 2.5rem;
}

.ft_contact {
  margin: 4rem 0;
}

.ft_contact a {
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46rem;
  margin: 0 auto;
  font-family: var(--en);
  border-radius: 20rem;
  color: var(--color-black);
  padding: 1rem 0;
  font-size: 5rem;
  font-weight: 600;
  gap: 1.8rem;
}

.ft_contact a i {
  width: 4.8rem;
  height: 3.5rem;
}

.ft_co {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
}

.ft_co div {
  font-weight: 700;
  font-size: 3.2rem;
}

.ft_menu {
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding: 3rem 0 5rem;
  line-height: 1;
}

.ft_menu li:not(:last-child) {
  padding-right: 2rem;
  border-right: 1px solid var(--color-white);
}


.ft_copy {
  text-align: center;
  background: var(--color-white);
  padding: 2rem 0;
  font-size: 1.6rem;
  color: var(--color-black);
}

@media screen and (max-width:767px) {
  .ft_co {
    flex-wrap: wrap;
    gap: 3rem;
    width: 92%;
    margin: 0 auto;
  }

  .ft_menu {
    flex-wrap: wrap;
    line-height: 1.2;
    width: 92%;
    margin: 0 auto;
  }

  .ft_menu a {
    padding: 1rem;
  }

  .ft_menu li:not(:last-child) {
    border-right: none;
    padding: 0;
  }
}

/*================================================
* 
================================================*/
@keyframes rotation {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotation2 {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(-360deg);
  }
}


@keyframes rotation3 {
  0% {
    transform: rotate(0) translate(-50%, -50%);
  }

  100% {
    transform: rotate(360deg) translate(-50%, -50%);
  }
}

@keyframes rotation4 {
  0% {
    transform: rotate(0) translate(-50%, -50%);
  }

  100% {
    transform: rotate(-360deg) translate(-50%, -50%);
  }
}

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

/*================================================
* subVisual
================================================*/
#subVisual {
  background: var(--color-primary);
  padding: 30rem 0 5rem;
}

#subVisual .hd .en,
#subVisual .hd .ja {
  color: var(--color-white);
}

#subVisual .hd::before {
  content: none;
}

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

/*================================================
* news
================================================*/
.news_inner,
.newsDetail_inner {
  width: 75%;
  margin: 0 auto 10rem;
}

.news_inner .subBtn,
.newsDetail_inner .subBtn {
  margin: 10rem auto 0;
}

.newsDetail_inner {
  width: 75%;
  margin: 0 auto 10rem;
}

.newsDetail_meta .ttl {
  font-size: 3rem;
  padding: 2rem;
  margin-bottom: 3rem;
  border-bottom: 1px solid var(--color-primary);
}

.newsDetail_meta .dateCat {
  text-align: right;
}


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

  .news_inner,
  .newsDetail_inner {
    width: 92%;
    margin: 0 auto 10rem;
  }
}

/*================================================
* 
================================================*/
/* Instagramフィード全体 */
#sb_instagram {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* 写真一覧 */
#sb_instagram #sbi_images {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 0 !important;
}

/* 各投稿 */
#sb_instagram #sbi_images .sbi_item {
  width: 100% !important;
  aspect-ratio: 1 / 1;
  padding: 0 !important;
  overflow: hidden;
}

/* 写真 */
#sb_instagram .sbi_photo {
  width: 100% !important;
  height: 100% !important;
  transition: transform 0.4s ease;
}

/* ホバー時 */
@media (hover: hover) {
  #sb_instagram .sbi_item:hover .sbi_photo {
    transform: scale(1.04);
  }
}

/* スマホ */
@media screen and (max-width: 767px) {
  #sb_instagram #sbi_images {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
}