/*
 Theme Name:   fukushidx
 Version:      1.1.0
*/
@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&family=Zen+Kaku+Gothic+New:wght@400;700&display=swap');
/*	reset
--------------------------------- */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  background: transparent;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, small {
  display: block;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
img {
  max-width: 100% !important;
  height: auto;
  border: 0;
  vertical-align: bottom;
}
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
ol, ul {
  list-style: none;
}
input, select {
  vertical-align: middle;
}
/*	common
--------------------------------- */ :root {
  --cl-m: #90A74A;
  --cl-m2: #61CA4E;
  --color-black: #333;
}
html {
  font-size: 62.5%;
  height: 100%;
}
body {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  height: auto;
  font-family: "Roboto", "Zen Kaku Gothic New", sans-serif;
  color: #454545;
  font-size: 1.6rem;
  line-height: 1.7;
  background: #fff;
  letter-spacing: .04em;
  font-feature-settings: "palt";
  -webkit-text-size-adjust: 100%;
}
h1, h2, h3, h4, h5, h6, .page_category, .page_title, .page_stitle, strong {
  font-weight: 700;
  line-height: 1.4;
}
a img {
  border: none;
}
a {
  color: var(--color-black);
  text-decoration: none;
  outline: none;
}
a:visited {
  color: var(--color-black);
  text-decoration: none;
}
@media (hover: hover) and (pointer:fine) {
  a:hover, a:hover img {
    opacity: 0.7;
    transition: opacity .20s ease-in-out;
  }
}
body :focus:not(:fous-visible) {
  outline: none
}
body :focus-visible {
  outline: 2px solid #4d65cb
}
.hd-logo img {
  width: 120px;
  height: auto;
}
#wrapper {
  background: url("images/cmn_scbg.png") no-repeat left top;
  background-size: 100% auto;
}
#wrapper.home {
  background: url("images/top_mainbg.png") no-repeat left top;
  background-size: 100% auto;
}
#header {
  width: 100%;
  z-index: 999;
}
.hd-inner {
  width: 100%;
  gap: 0 5%;
}
.hd-logo img {
  width: 120px;
  height: auto;
}
.hd-logo {
  width: 30%;
}
#gnav ul, .hd-inner, .hd-logo {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#gnav {
  margin-right: 2%;
  padding: 1rem 3rem;
  background: #fff;
  border-radius: 100vmax;
  box-shadow: 0 -3px 10px 0 rgba(0, 0, 0, .09);
}
#gnav ul {
  width: 100%;
  gap: 3rem;
}
#gnav ul li {
  position: relative;
  display: flex;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.1em;
}
#gnav ul li a {
  display: block;
  padding: 10px 0;
  width: 100%;
  align-self: center;
}
#gnav ul li p {
  color: #ccc;
}
.menubtn {
  display: none;
}
@media screen and (max-width: 1200px) {
  .hd-logo {
    width: 100% !important;
  }
  .hd-inner {
    position: relative;
    padding: 0;
    z-index: 999;
  }
  .logo {
    width: 100px;
    line-height: 1.4;
  }
  #gnav {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    width: 45%;
    height: 100vh;
    margin-right: 0;
    padding: 0;
    background: linear-gradient(to bottom, #95FFF7, #DEFD8A);
    background: linear-gradient(to bottom, rgba(149, 255, 247, .9), rgba(222, 253, 138, .9));
    z-index: 990;
    border-radius: 0;
  }
  .gnav-inner {
    position: fixed;
    width: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 999;
  }
  #gnav ul {
    width: 45%;
    display: block;
    gap: 0;
    padding: 80px 5%;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }
  #gnav ul li {
    width: 100%;
    text-align: left;
    border-bottom: 1px solid #bcbcbc;
  }
  #gnav ul li a {
    padding: 2rem .5rem;
    color: #333;
  }
  .menubtn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 30px;
    gap: 1rem;
    cursor: pointer;
    z-index: 999;
  }
  .menubtn:hover {
    opacity: 1;
  }
  .menubtn .menubtn-inner {
    position: relative;
    width: 50px;
    height: 50px;
    padding: 0 10px;
  }
  .menubtn .hd-btn {
    display: block;
    position: absolute;
    top: 50%;
    left: 10px;
    width: 30px;
    height: 2px;
    background: #333;
    transition: .2s;
  }
  .menubtn .hd-btn:before, .menubtn .hd-btn:after {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 30px;
    height: 2px;
    margin-left: -10px;
    background: #333;
    transition: .3s;
  }
  .menubtn .hd-btn:before {
    margin-top: -9px;
  }
  .menubtn .hd-btn:after {
    margin-top: 8px;
  }
  .menubtn.open .hd-btn {
    background: transparent;
  }
  .menubtn.open .hd-btn:before, .menubtn.open .hd-btn:after {
    margin-top: -2px;
  }
  .menubtn.open .hd-btn:before {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
  }
  .menubtn.open .hd-btn:after {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
  }
  .menubtn .hd-menu-txt:before {
    content: 'MENU';
    font-size: 1.4rem;
    letter-spacing: 0.15em;
    transition: 0.4s;
  }
  .menubtn.open .hd-menu-txt:before {
    content: 'CLOSE';
  }
  .menubtn.open .hd-btn:before, .menubtn.open .hd-btn:after {}
}
@media screen and (min-width: 1201px) {
  #gnav {
    display: block !important;
  }
}
.contents-wrapper {
  width: min(92%, 980px);
  margin: 30px auto;
  box-shadow: 0 -3px 10px 0 rgba(0, 0, 0, .06);
  background: #fff;
  border-radius: 20px;
}
.contents-inner {
  padding: clamp(1.25rem, -7.321rem + 21.43vw, 8.75rem);
  /*padding: clamp(2.5rem, -1.667rem + 13.89vw, 8.75rem);*/
}
.inner {
  width: min(92%, 900px);
  margin: auto;
}
.home .inner {
  width: min(92%, 1000px);
}
.sctmg {
  margin-top: clamp(1.875rem, -0.208rem + 6.94vw, 5rem);
}
#footer {
  margin-top: auto;
}
.footer-container {
  padding: 15px 0;
  text-align: center;
  background: #5D5D5D;
}
.footer-container {
  font-size: 1.2rem;
  color: #fff;
}
.pagetitle-section {
  margin-bottom: 40px;
  text-align: center;
  font-size: clamp(2rem, 1.067rem + 3.11vw, 3.4rem);
}
.page-title {
  letter-spacing: .05em;
  color: var(--cl-m2);
}
.c-title {
  font-size: clamp(2rem, 1.6rem + 1.33vw, 2.4rem);
}

.c-subtitle {
  font-size: clamp(1.8rem, 1.533rem + 0.89vw, 2.2rem);
}
.c-mdtitle {
  font-weight: 700;
  font-size: clamp(1.6rem, 1.333rem + 0.89vw, 2rem);
}

.cont-snavi {
  margin-top: 4rem;
}
.cont-snavi ul {
  display: flex;
  gap: 20px 0;
  flex-wrap: wrap;
  border-left: 1px solid #ddd;
}
.cont-snavi ul li {
  border-right: 1px solid #ddd;
}
.cont-snavi ul li a {
  position: relative;
  padding: 1em 2em;
  font-weight: 700;
}
.cont-snavi li a:after {
  content: "";
  display: inline-block;
  margin-left: 2rem;
  width: 20px;
  height: 20px;
  background: url(images/anc_arrow.png) no-repeat center center #A8ED5D;
  background-size: 10px auto;
  border-radius: 100vw;
  vertical-align: middle;
}
.txt-bld {
  font-weight: 700;
}
.txt-c {
text-align: center;
}
.c-cont {
  display: flex;
}
.c-btn-sect {
  margin-top: 1.5em;
}
.c-btn-f {
  display: inline-block;
  padding: .8em 1.5em;
  color: #fff;
  background: var(--cl-m2);
  border-radius: 100vw
}
.c-btn-f:visited {
  color: #fff;
}
@media screen and (max-width: 768px) {
  .br-pc {
    display: none;
  }
}
/*    top
--------------------------------- */
.top-main {
  padding: clamp(3.125rem, 1.875rem + 4.17vw, 5rem) 0;
}
.top-main-txt {
  width: min(100%, 500px);
}
.top-main-txt .c-subtitle {
  margin-top: .5em;
  color: var(--cl-m2);
  font-weight: 700;
}
.top-main-txt .top-mng {
  margin: 1em 0 1em;
  font-weight: 700;
  font-size: clamp(2rem, 1.733rem + 0.89vw, 2.4rem);
}
.top-comingsoon {
  padding: 3em 0;
  text-align: center;
}
.top-comingsoon .c-title {
  margin-bottom: 1em;
  line-height: 1.4;
  font-weight: 700;
}
.top-concept {
  position: relative;
  /*  padding:150px 0;
 background: url("images/concept_line01.png") no-repeat left top, url("images/concept_line02.png") no-repeat left bottom;*/
}
.top-concept::before, .top-concept::after {
  content: "";
  display: block;
  width: 100%;
  height: 15vw;
}
.top-concept::before {
  background: url("images/concept_line01.png") no-repeat left top;
  background-size: cover;
}
.top-concept::after {
  background: url("images/concept_line02.png") no-repeat left bottom;
  background-size: cover;
}
.top-concept .c-cont {
  gap: 20px 10%;
  align-items: center;
}
.top-concept .c-txt {
  width: 55%;
}
.top-concept .c-img {
  width: 30%;
  text-align: center;
}
.top-concept .c-subtitle {
  color: var(--cl-m2);
}
.top-concept .c-title {
  margin: .6em 0 1em;
  color: #454545;
  font-size: clamp(2.4rem, 1.6rem + 2.67vw, 4rem);
}
.top-contbox .c-cont {
  padding: 4em 0 5em;
  align-items: flex-end;
}
.top-contbox{
      padding: 2em 0 3em;
}
.top-contbox .c-txt {
  width: 55%;
  margin: 0 0 -8% -10%;
  padding: 30px;
  background: #fff;
  border-radius: 10px;
}
.top-contbox .c-img {
  width: 55%;
  background: #fff;
  border-radius: 15px;
}
.top-contbox .c-img img {
  border-radius: 15px;
}
.top-contbox .c-mdtitle {
  margin: 1em 0;
  font-size: clamp(1.6rem, 1.467rem + 0.44vw, 1.8rem);
}
.top-links .c-title {
  color: #EA82AF;
}
.top-case .c-title {
  color: #EB8E3E;
}
.top-interview .c-title {
  color: #90A74A;
}
.top-links .c-btn-f {
  background: #EA82AF;
}
.top-contbox .c-title .comingsoon {
  display: inline-block;
  margin-left: 1em;
  color: #aaa;
  font-size: 1.8rem;
}
.top-links {
  background: url("images/top_cont_bg03.png") no-repeat right top, url("images/top_cont_bg04.png") no-repeat left bottom #FFF2FC;
}
.top-case {
  background:
    url("images/top_cont_bg01.png") no-repeat right top #FDF0C5;
}
.top-interview {
  background: url("images/top_cont_bg02.png") no-repeat left top #EFFCCE;
}
.top-btm-banner {
  margin: 6rem 0;
}
.top-btm-banner .c-title {
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .top-main-txt .top-title {
    width: 80%;
  }
  .home .c-cont {
    flex-direction: column;
  }
  .top-concept .c-txt {
    width: 100%;
  }
  .top-concept .c-img {
    width: 100%;
  }
  .top-concept .c-img img {
    width: 70%;
  }
  .top-contbox .c-txt {
    width: 100%;
    margin: -3% 0 0 0;
  }
  .top-contbox .c-img {
    width: 100%;
  }
}
/*    links
--------------------------------- */
.links-box {
  margin-top: 8rem;
}
.links-box .c-subtitle {
  margin-bottom: .6em;
  padding-bottom: .3em;
  color: var(--cl-m2);
  border-bottom: 1px solid #ddd;
}
.links-box ul {
  margin-top: 1em;
}
.links-box ul li {
  margin-top: 10px;
}
.links-box ul li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5px 20px;
  padding: .5em 1em;
  background: #F1F5F9;
  border-radius: 10px;
}
.links-box ul li a .arrow {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  padding: 10px;
  background: #fff;
  border-radius: 100vw;
}
.links-box ul li a .arrow::after {
  content: "";
  ;
  position: absolute;
  width: 15px;
  height: 15px;
  background: url("images/icn_external.png") no-repeat center;
  background-size: 15px 15px;
}
.links-box dl dt {
  font-weight: bold;
}
.links-box .c-mdtitle {
  margin-top: 2em;
  font-size: 1.6rem;
}
/*   concept
--------------------------------- */
.concept-intro .c-subtitle {
  margin-bottom: 1em;
  font-weight: 700;
  text-align: center;
}
.concept-container {
  padding: 30px 20px;
  background: #FFFDD3;
}
.concept-container .c-cont {
  gap: 20px 4%;
  flex-wrap: wrap;
}
.concept-lead .c-subtitle {
  text-align: center;
  margin-bottom: 1em;
  color: var(--cl-m2);
}
.concept-container .c-cont {
  margin-top: 6rem;
}
.concept-box {
  width: 48%;
  padding: 15px;
  background: #fff;
  border-radius: 15px;
}
.concept-box:last-child {
  width: 100%;
}
.concept-list {
  list-style: disc;
  padding-left: 1em;
}
.concept-box .c-subtitle {
  color: #D35600;
  margin-bottom: 1em;
  padding: .5em;
  border-bottom: 1px solid #D35600;
}
.concept-box .c-subtitle span {
  font-size: 1.6rem;
}
.concept-box .txt-bld {
  margin-top: 1em;
}
.concept-message {
  text-align: center;
}
.concept-message p {
  margin-bottom: 2em;
}
.concept-message .c-title {
  margin-bottom: 1em;
  color: var(--cl-m2);
}
@media screen and (max-width: 860px) {
  .concept-box {
    width: 100%;
  }
  .concept-message {
    text-align: left;
  }
}