@charset "utf-8";

/* Define
--------------------------------------*/
:root {
  --maincolor: #7fc7be;
  --secondcolor: #9dd4cd;
  --hovercolor: #3ba1bc;
  --subcolor: #1d92e7;
  --lighter: #d9e4ef;
  --marker: #fffe26;
}


/* Reset
--------------------------------------*/
html {
  color: #000;
  background: #FFF
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0
}

table {
  border-collapse: collapse;
  border-spacing: 0
}

fieldset,
img {
  border: 0
}

address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
  font-style: normal;
  font-weight: normal
}

ol,
ul {
  list-style: none
}

caption,
th {
  text-align: left
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal
}

q:before,
q:after {
  content: ''
}

abbr,
acronym {
  border: 0;
  font-variant: normal
}

sup {
  vertical-align: text-top
}

sub {
  vertical-align: text-bottom
}

input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  *font-size: 100%
}

legend {
  color: #000
}

#yui3-css-stamp.cssreset {
  display: none
}



/* ----------------------------------------------------------------------------
  COMMON
----------------------------------------------------------------------------*/

html {
  scroll-behavior: smooth;
  scroll-padding-top: 58px;
  position: relative;
  word-break: break-all;
}

body {
  font-family: 'Noto Sans JP', 'Avenir', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-size: 16px;
  position: relative;
}

body.active {
  overflow-y: hidden;
}

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

a {
  text-decoration: none;
  color: #000;
}

p {
  word-break: break-all;
}

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

th {
  display: table-cell;
  vertical-align: inherit;
  font-weight: bold;
  text-align: -internal-center;
}

td {
  display: table-cell;
  vertical-align: inherit;
}

strong {
  font-weight: bold;
}

.notoserif {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.notosans {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.antic {
  font-family: "Antic Didone", serif;
  font-weight: 400;
  font-style: normal;
}

/* @font-face {
  font-family: 'Original';
  src: url(../font/BloxhallSample.ttf);
}

@font-face {
  font-family: 'Original2';
  src: url(../font/Coves.otf);
} */

/* Font */
.light {
  font-weight: 300;
}

.medium {
  font-weight: 500;
}

.bold {
  font-weight: 700;
}

.exbold {
  font-weight: 900;
}

.inner {
  width: 80%;
  max-width: 1200px;
  margin: 0 auto;
}

.flex {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

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

.pc {
  display: block !important;
}

.sp {
  display: none !important;
}

.onlySp {
  display: none !important;
}

.exceptSp {
  display: block !important;
}

.none {
  display: none !important;
}

.fade_up {
  transform: translateY(30px);
  transition: all ease .4s;
  opacity: 0;
  -webkit-transform: translateY(30px);
  -webkit-transition: all ease .4s;
  perspective: 1000;
}

.fade_up.scrolled {
  opacity: 1;
  transform: translateY(0px);
  -webkit-transform: translateY(0px);
}

.fade_left {
  transform: translateX(-30px);
  opacity: 0;
  transition: all ease 0.4s;
}

.fade_left.scrolled {
  opacity: 1;
  transform: translateX(0px);
}

.centering {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hidden {
  display: none;
}

.video {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 60%;
}

.video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.gmap {
  height: 0;
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
  margin-bottom: 40px;
}

.gmap iframe {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

/* navigation */
#header #nav {
  align-items: center;
}

#header #nav li {
  text-align: center;
  border-bottom: 1px solid #fff;
  padding: 10px 0;
}

#header #nav li a {
  color: #fff;
  display: block;
  padding: 4px 8px;
  letter-spacing: .15em;
  box-sizing: border-box;
  transition: all ease .4s;
  -webkit-transition: all ease .4s;
  position: relative;
}

#header #nav li a:hover {
  opacity: .8;
}

#header #nav li small {
  display: block;
  font-size: 1rem;
}


#header #spNav {
  position: fixed;
  z-index: 1000;
  right: 14px;
  top: 24px;
  transition: all ease .4s;
  -webkit-transition: all ease .4s;
  cursor: pointer;
}

#header #spNav .toggle {
  display: block;
  position: relative;
  width: 1.75rem;
  height: 1.5rem;
}

#header #spNav .toggle i {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #939393;
  position: absolute;
  transition: all ease .4s;
  -webkit-transition: all ease .4s;
}

#header.show #spNav .toggle i {
  background-color: #fff;
}

#header #spNav .toggle i:nth-child(1) {
  top: 0;
}

#header #spNav .toggle i:nth-child(2) {
  top: 0;
  bottom: 0;
  margin: auto;
}

#header #spNav .toggle i:nth-child(3) {
  bottom: 0;
}

#header.show .toggle i:nth-child(1) {
  transform: translateY(10px) rotate(-45deg);
  -webkit-transform: translateY(10px) rotate(-45deg);
}

#header.show .toggle i:nth-child(2) {
  opacity: 0;
}

#header.show .toggle i:nth-child(3) {
  transform: translateY(-12px) rotate(45deg);
  -webkit-transform: translateY(-12px) rotate(45deg);
}

#header #spMenu {
  position: fixed;
  z-index: -100;
  display: block;
  transition: all ease .4s;
  -webkit-transition: all ease .4s;
  opacity: 0;
  visibility: hidden;
}

#header.show #spMenu {
  opacity: 1;
  visibility: visible;
  z-index: 900;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--secondcolor);
  display: flex;
  align-items: center;
  justify-content: center;
}

#header #spMenu ul {
  display: none;
}

#header.show #spMenu ul {
  display: block;
  width: 80%;
  box-sizing: border-box;
}

#header #spMenu a {
  display: block;
  color: #fff;
  font-size: 2.8rem;
  font-weight: 400;
  padding: .6% 0;
  letter-spacing: .07em;
  display: block;
  margin-bottom: .4%;
}

#header.show #spMenu ul#snsNavSp {
  align-items: flex-start;
  display: flex;
  justify-content: flex-start;
}

#snsNavSp li {
  width: 8%;
  padding-right: 20px;
}

.h__logo img {
  transition: all ease .4s;
  -webkit-transition: all ease .4s;
}

.h__logo img:hover {
  opacity: .7;
}


/* topBtn */
#topBtn.show {
  opacity: 1;
  transform: translateY(0px);
  -webkit-transform: translateY(0px);
}

#topBtn {
  opacity: 0;
  transform: translateY(20px);
  -webkit-transform: translateY(20px);
  position: fixed;
  z-index: 100;
  right: 1.5%;
  bottom: 20px;
  padding: 2px;
  transition: all ease .4s;
  -webkit-transition: all ease .4s;
}

#topBtn a {
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: url(../img/arrow1w.png) no-repeat, var(--maincolor);
  background-size: 10px;
  background-position: 53%;
  box-sizing: border-box;
  transform: rotate(-90deg);
  transition: all ease .4s;
  -webkit-transform: rotate(-90deg);
  -webkit-transition: all ease .4s;
  border: 1px solid #fff;
}

#topBtn a:hover {
  opacity: .7;
}

/* popup */
.lum-lightbox-image-wrapper img {
  width: 70% !important;
  max-height: 70vh !important;
  object-fit: contain;
  margin: 0 auto;
}

.lum-gallery-button {
  display: none !important;
}

/* slick */
.slick-dots li button:before {
  font-size: 40px !important;
}

.slick-dots {
  bottom: 25px !important;
}

.slick-dots li button:before {
  color: #fff !important;
}

.slick-dots li.slick-active button:before {
  color: #fff !important;
}

.slick-dotted.slick-slider {
  margin-bottom: 0 !important;
}


/* ----------------------------------------------------------------------------
  ORIGINAL
----------------------------------------------------------------------------*/

/* HEADER
--------------------------------------*/

#header {
  background: #fff;
  width: 100%;
  z-index: 1000;
  padding-bottom: 10px;
  transition: all ease .4s;
  -webkit-transition: all ease .4s;
}

.h__info {
  color: #fff;
  background: var(--maincolor);
  font-size: .8rem;
  letter-spacing: .05em;
  padding: 4px;
  box-sizing: border-box;
  text-align: center;
}

.h__ul {
  width: 56%;
  margin: 0 auto;

}

.h__box {
  width: 100%;
  margin: 0 auto;
  transition: all ease .4s;
  -webkit-transition: all ease .4s;
  align-items: center;
}

.h__box li {
  width: calc(100% / 6);
  text-align: center;
  box-sizing: border-box;
}

.h__box a {
  display: block;
  font-size: 1rem;
  letter-spacing: .1em;
  font-weight: 300;
  color: #000;
  padding: 12px 0;
  transition: all ease .4s;
}

.h__box a:hover {
  opacity: .7;
}

.h__box a small {
  display: block;
  font-size: .6rem;
}

.h__logo {
  width: 30%;
  max-width: 320px;
  padding: 34px 0;
  padding-right: 60px;
  margin: 0 auto;
  box-sizing: border-box;
  transition: all ease .4s;
}



/* SLIDER
--------------------------------------*/
#slider {
  position: relative;
}

.slider__img {
  width: 100%;
  height: calc(100vh - 200px);
  object-fit: cover;
}

.slider__li {
  position: relative;
}

.slider__catch {
  display: none;
  width: 100%;
  text-align: center;
  font-size: 3rem;
  letter-spacing: .3em;
  text-shadow: 1px 1px 1px #000;
  font-weight: bold;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.slider__catch span {
  display: block;
  margin-top: 10px;
  font-size: 1.1rem;
  text-align: center;
  letter-spacing: .2em;
}


/* FOOTER
--------------------------------------*/

#footer {
  color: #fff;
  background: var(--maincolor);
  padding: 80px 0 10px;
}

.f__box {
  padding-bottom: 80px;
  border-bottom: 1px solid #fff;
}

.f__logo {
  width: 38%;
  margin-bottom: 20px;
}

.f__logo img {
  width: 100%;
}

.f__li {
  width: 100%;
  margin-bottom: 10px;
}

.f__ul a {
  color: #fff;
  display: block;
  font-size: .9rem;
  letter-spacing: .1em;
  font-weight: 300;
  padding: 3px 0;
}

.f__ul a span {
  display: block;
  font-size: .6rem;
}

.f__copyright {
  color: #fff;
  display: block;
  font-size: .8rem;
  letter-spacing: .16em;
  font-weight: lighter;
  padding: 20px 0;
  text-align: center;
}

.footer__fx1 {
  width: 52%;
}

.footer__fx2 {
  width: 20%;
  padding-left: 40px;
  box-sizing: border-box;
  border-left: 1px solid #fff;
}

/* COMMON
--------------------------------------*/

.cmn h1 {
  color: var(--maincolor);
  font-size: 1.7rem;
  font-weight: 500;
  letter-spacing: .06em;
  font-family: "Antic Didone", serif;
  font-weight: 400;
  font-style: normal;
}

.cmn h2 {
  color: #000;
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: .06em;
  position: relative;
  margin-top: 40px;
  margin-bottom: 40px;
  font-family: "Antic Didone", serif;
  font-weight: 400;
  font-style: normal;
}

.cmn h2::after {
  content: '';
  width: 6%;
  height: 1px;
  background: var(--maincolor);
  position: absolute;
  left: 0;
  bottom: -20px;
}

.cmn h3 {
  color: #3c998d;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: .05em;
  margin-top: 40px;
  margin-bottom: 14px;
  font-family: "Antic Didone", serif;
  font-weight: 400;
  font-style: normal;
}

.cmn p {
  color: #6c7169;
  font-size: .93rem;
  font-weight: 300;
  line-height: 280%;
  margin-bottom: 30px;
  letter-spacing: .04em;
  transition-delay: .3s;
}

.cmn img {
  display: block;
  width: 100%;
  margin-bottom: 30px;
}

.cmn__ttl__en {
  color: #242222;
  font-size: 2.4rem;
  font-weight: 300;
  letter-spacing: .08em;
  margin-bottom: 8px;
}

.cmn__ttl__en::first-letter {
  color: #2ab7a3;
}

.cmn__ttl__en.ver2 {
  text-align: center;
}

.cmn__ttl__en.ver3 {
  font-size: 2.1rem;
  border-left: 4px solid var(--maincolor);
  padding: 10px 0 10px 24px;
}

.cmn__ttl__en.ver3 span {
  font-size: .9rem;
  margin-left: 20px;
}

.cmn__ttl {
  color: #a0a0a0;
  font-size: .8rem;
  margin-bottom: 30px;
}

.cmn__ttl.ver2 {
  text-align: center;
}

.cmn__txt {
  color: #6c7169;
  font-size: .93rem;
  font-weight: 300;
  line-height: 280%;
  margin-bottom: 30px;
  letter-spacing: .04em;
  transition-delay: .3s;
}

.cmn__txt.ver2 {
  width: 80%;
  color: #fff;
  line-height: 170%;
  font-size: .9rem;
}

.cmn__btn {
  text-align: center;
}

.cmn__btn a {
  position: relative;
  color: #242222;
  font-size: 1.2rem;
  letter-spacing: .05em;
}

.cmn__btn a img {
  display: inline-block;
  width: 40px;
  position: absolute;
  right: -60px;
  top: 0;
  bottom: 0;
  margin: auto;
}

.cmn__btn.ver2 {
  margin-top: 60px;
  text-align: right;
  margin-right: 60px;
}

.cmn__btn.ver2 a {
  position: relative;
  color: #6c7169;
  font-size: 1rem;
  letter-spacing: .05em;
}

.cmn__btn.ver3 a {
  position: relative;
  color: #fff;
  font-size: 1rem;
  letter-spacing: .05em;
  background: #6ecebb;
  border-radius: 60px;
  display: inline-block;
  padding: 18px 70px;
  transition: all ease .4s;
}

.cmn__btn.ver3 a:hover {
  opacity: .8;
}

.cmn__dl {
  color: #272924;
  border-bottom: 1px solid #eae6e2;
}

.cmn__dt {
  width: 30%;
  padding: 15px 0;
  padding-left: 50px;
  box-sizing: border-box;
  font-size: .96rem;
  font-weight: 300;
  line-height: 1.8;
  letter-spacing: .04em;
}

.cmn__dd {
  width: 70%;
  padding: 15px 0;
  box-sizing: border-box;
  font-size: .96rem;
  font-weight: 300;
  line-height: 1.8;
  letter-spacing: .05em;
}

.cmn__dd a {
  text-decoration: underline;
}

.cmn_plus {
  display: inline-block;
  vertical-align: middle;
  color: #333;
  line-height: 1;
  width: .75em;
  height: 0.05em;
  background: currentColor;
  border-radius: 0.1em;
  position: relative;
}

.cmn_plus::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
  transform: rotate(90deg);
  transition: all ease .4s;
}

.open .cmn_plus::before {
  transform: rotate(180deg);
}

.cmn__acArea {
  opacity: 0;
  visibility: hidden;
  height: 0;
  padding: 0 40px;
  transition: all ease .4s;
}

.cmn__acArea.open {
  opacity: 1;
  visibility: visible;
  height: auto;
  overflow: hidden;
  padding: 100px 40px;
}




/* about
--------------------------------------*/

#about {
  padding: 120px 0 140px;
}

.about__catch {
  font-size: 1.8rem;
  color: #242222;
  text-align: center;
  line-height: 170%;
  letter-spacing: .1em;
  margin-bottom: 40px;
}

.about__txt {
  color: #000;
  margin: 0 auto 60px;
  font-size: .9rem;
  font-weight: 300;
  letter-spacing: .1em;
  text-align: center;
  line-height: 220%;
}


/* products
--------------------------------------*/

#products {
  background: #f5fffd;
}

.products__fx1 {
  width: 50%;
}

.products__fx1 img {
  width: 100%;
  max-height: 94vh;
  object-fit: cover;
}

.products__fx2 {
  width: 50%;
  position: relative;
  box-sizing: border-box;
}

.products__fx2__box {
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* topics
--------------------------------------*/

#topics {
  background: linear-gradient(180deg, #b6f3e8 0%, #b6f3e8 80%, #fff 80%, #fff 100%);
  padding: 120px 0;
}

.topics__box {
  position: relative;
  width: 90%;
  margin: 0 auto;
  padding: 80px 40px 40px;
  box-sizing: border-box;
  background-color: #fff;
}

.topics__article {
  margin-bottom: 30px;
}

.topics__article::after {
  content: '';
  width: 31%;
}

.topics__single {
  width: 31%;
  margin-bottom: 20px;
}

.topics__single:nth-child(3n+2) {
  transition-delay: .3s;
}

.topics__single:nth-child(3n) {
  transition-delay: .6s;
}

.topics__single a {
  transition: all ease .4s;
}

.topics__single a:hover {
  opacity: .8;
}

.topics__img {
  position: relative;
}

.topics__img img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 3 / 2;
}

.topics__cat {
  color: var(--maincolor);
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: .1em;
  position: absolute;
  right: 0;
  bottom: -16px;
  text-shadow: 1px 1px 5px #fff;
}

.topics__meta {
  padding: 20px 0;
}

.topics__date {
  color: #7a7a7a;
  font-size: .95rem;
  letter-spacing: .1em;
  padding-bottom: 10px;
}

.topics__ttl {
  color: #6c7169;
  font-size: .9rem;
  font-weight: 300;
  letter-spacing: .07em;
  line-height: 200%;
}

.topics__boxTtl {
  position: absolute;
  top: -26px;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
}

.topics__boxTtl .cmnTtlEn::first-letter {
  color: initial;
}

/* instagram
--------------------------------------*/

#instagram {
  padding: 60px 0 120px;
}

.instagram__box {
  width: 80%;
  margin: 80px auto 40px;
}

.instagram__box img {
  width: 31%;
  margin-bottom: 3.5%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}


/* contact
--------------------------------------*/

#contact {
  background: #f4f4f4;
  padding: 170px 0;
}

.contact__btn {
  display: block;
  text-align: center;
}

.contact__btn a {
  display: inline-block;
  text-align: center;
  margin: 0 auto;
  width: 50px;
  height: 50px;
}


/* pageTop
--------------------------------------*/

.pageTop {
  position: relative;
}

.pageTop img {
  width: 100%;
  max-width: initial;
  height: auto;
  display: block;
}

.pageTop__ttl {
  color: #000;
  position: absolute;
  left: 8%;
  bottom: -24px;
  font-size: 3rem;
  letter-spacing: .08em;
  z-index: 2;
}

.bread ul {
  width: 84%;
  padding: 40px 0;
  margin: 0 auto;
  overflow: hidden;
}

.bread li {
  float: left;
  color: #a0a0a0;
  font-size: .9rem;
  letter-spacing: .1em;
}

.bread li a {
  color: #a0a0a0;
  font-size: .9rem;
  letter-spacing: .1em;
  padding-right: 4px;
}

.bread li a::after {
  content: '/';
  display: inline-block;
  margin-left: 4px;
}

.bread.ver2 {
  background: #f5fcfb;
}


/* concept
--------------------------------------*/

#concept {
  padding: 170px 0;
}

.concept__box {
  width: 90%;
  margin: 0 auto;
}

.concept__fx1 {
  width: 38%;
}

.concept__fx2 {
  width: 54%;
}



/* company
--------------------------------------*/

#company {
  padding: 170px 0;
  background: #f5fffd;
}

.company__box {
  width: 70%;
  padding: 120px 60px;
  padding-left: 14%;
  box-sizing: border-box;
  margin-left: auto;
  background: #fff;
  position: relative;
}

.company__ttl {
  font-size: 2.8rem;
  letter-spacing: .07em;
  position: absolute;
  top: 30%;
  left: 1%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
}

.company__ttl::first-letter {
  color: var(--maincolor);
}


/* profile
--------------------------------------*/

#profile {
  padding: 140px 0 200px;
  position: relative;
}

.profile__name {
  font-size: 2.2rem;
  text-align: center;
  letter-spacing: .1em;
  line-height: 200%;
  margin-bottom: 40px;
}

.profile__name::first-letter {
  color: var(--maincolor);
}

.profile__desc {
  width: 60%;
  margin: 0 auto;
  color: #6c7169;
  font-size: .93rem;
  font-weight: 300;
  line-height: 200%;
  letter-spacing: .04em;
}

.profile__img {
  position: absolute;
  left: 0;
  right: 0;
  top: -100px;
  margin: auto;
  width: 200px;
}


/* productslist
--------------------------------------*/

#productslist {
  padding: 10px 0 80px;
}

.productslist__box {
  width: 76%;
  margin: 0 auto 120px;
  border-top: 1px solid #F4F4F4;
}

.productslist__single {
  padding: 30px 0;
  border-bottom: 1px solid #F4F4F4;
}

.productslist__ttl {
  position: relative;
  display: inline-block;
  width: 100%;
  font-size: 2rem;
  letter-spacing: .1em;
  line-height: 180%;
  padding-left: 60px;
  box-sizing: border-box;
  cursor: pointer;
  transition: all ease .4s;
}

.productslist__single:nth-child(1) .productslist__ttl {
  background: url(../img/icon1.png) no-repeat;
  background-size: 40px;
  background-position: center left;
}

.productslist__single:nth-child(2) .productslist__ttl {
  background: url(../img/icon2.png) no-repeat;
  background-size: 40px;
  background-position: center left;
}

.productslist__single:nth-child(2) .cmn__ttl__en.ver3 {
  border-left: 4px solid #b8bd2d;
}

.productslist__single:nth-child(2) .cmn__ttl__en::first-letter {
  color: #b8bd2d;
}

.productslist__single:nth-child(2) .productslist__info2__sub {
  color: #b8bd2d;
}

.productslist__single:nth-child(3) .productslist__ttl {
  background: url(../img/icon3.png) no-repeat;
  background-size: 40px;
  background-position: center left;
}

.productslist__single:nth-child(3) .cmn__ttl__en.ver3 {
  border-left: 4px solid #e3d611;
}

.productslist__single:nth-child(3) .cmn__ttl__en::first-letter {
  color: #e3d611;
}

.productslist__single:nth-child(3) .productslist__info2__sub {
  color: #e3d611;
}

.productslist__single:nth-child(4) .productslist__ttl {
  background: url(../img/icon4.png) no-repeat;
  background-size: 40px;
  background-position: center left;
}

.productslist__single:nth-child(4) .cmn__ttl__en.ver3 {
  border-left: 4px solid #f6b654;
}

.productslist__single:nth-child(4) .cmn__ttl__en::first-letter {
  color: #f6b654;
}

.productslist__single:nth-child(4) .productslist__info2__sub {
  color: #f6b654;
}

.productslist__single:nth-child(5) .productslist__ttl {
  background: url(../img/icon5.png) no-repeat;
  background-size: 40px;
  background-position: center left;
}

.productslist__single:nth-child(5) .cmn__ttl__en.ver3 {
  border-left: 4px solid #cba57a;
}

.productslist__single:nth-child(5) .cmn__ttl__en::first-letter {
  color: #cba57a;
}

.productslist__single:nth-child(5) .productslist__info2__sub {
  color: #cba57a;
}

.productslist__single:nth-child(6) .productslist__ttl {
  background: url(../img/icon6.png) no-repeat;
  background-size: 40px;
  background-position: center left;
}

.productslist__ttl:hover {
  opacity: .8;
}

.productslist__ttl small {
  font-size: .8rem;
  margin-left: 20px;
  letter-spacing: .1em;
  color: #6c7169;
}

.productslist__icon {
  position: absolute;
  right: 20px;
  top: 0;
  bottom: 0;
  margin: auto;
  transition: all ease .4s;
}

.productslist__ttl:hover .productslist__icon {
  opacity: .8;
}


/* topics (page & single)
--------------------------------------*/

#topics.ver2 {
  background: #fff;
  padding: 60px 0 180px;
}

#topics.ver2 .topics__box {
  padding: 20px 40px 40px;
}

#topics.ver3 {
  background: #f5fcfb;
  padding: 60px 0 180px;
}

#topics.ver3 .topics__box {
  max-width: 1000px;
  width: 80%;
  margin: 0 auto;
  padding: 82px 30px 98px;
  box-sizing: border-box;
}

.topics__article.ver2 {
  width: 80%;
  max-width: 800px;
  margin: 0 auto;
}

.topics__contents__top {
  padding-bottom: 8px;
  border-bottom: 1px solid #ccc;
  margin-bottom: 50px;
}

.topics__contents__meta {
  overflow: hidden;
  padding: 10px 8px;
}

.topics__contents__cat {
  float: left;

  color: #fff;
  background: var(--maincolor);
  padding: 2px 10px;
  border-radius: 4px;
  text-align: center;
}

.topics__contents__date {
  margin-right: 14px;
  float: left;
  letter-spacing: .1em;
  color: #808080;
  padding-top: 3px;
  font-size: .95rem;
}



/* contact (page)
--------------------------------------*/

#contact.ver2 {
  background: #fff;
  padding: 60px 0;
}

.contact__ttl {
  font-size: 1.8rem;
  color: #242222;
  text-align: center;
  line-height: 170%;
  letter-spacing: .1em;
  margin-bottom: 40px;
}

.contact__box {
  border-bottom: 1px solid #f4f4f4;
  padding: 40px 0;
}

.contact__box:last-child {
  border-bottom: none;
}

.contact__flow__ul {
  margin: 80px 0;
}

.contact__flow__li {
  width: calc(100%/6 - 30px);
  box-sizing: border-box;
  position: relative;
  font-size: 1rem;
  font-weight: 200;
  text-align: center;
  letter-spacing: .1em;
  color: #848484;
}

.contact__flow__li::after {
  content: '';
  display: inline-block;
  position: absolute;
  width: 20px;
  height: 20px;
  background: url(../img/arrow1.png) no-repeat;
  background-size: contain;
  background-position: center;
  right: -26px;
  top: 60px;
}

.contact__flow__li:last-child::after {
  display: none;
}

.contact__flow__li:nth-child(6n+2) {
  transition-delay: .3s;
}

.contact__flow__li:nth-child(6n+3) {
  transition-delay: .6s;
}

.contact__flow__li:nth-child(6n+4) {
  transition-delay: .9s;
}

.contact__flow__li:nth-child(6n+5) {
  transition-delay: 1.2s;
}

.contact__flow__li:nth-child(6n) {
  transition-delay: 1.5s;
}

.contact__flow__li img {
  display: block;
  margin-bottom: 20px;
}

.contact__box__padding {
  padding: 60px 0;
}

.contact__sub {
  font-size: 2.2rem;
  text-align: center;
  margin-bottom: 40px;
  letter-spacing: .16em;
}

.contact__sub::first-letter {
  color: var(--maincolor);
}

.contact__line__btn {
  width: 16%;
  max-width: 220px;
  margin: 0 auto;
}

.contact__tel {
  text-align: center;
}

.contact__tel a {
  font-size: 1.3rem;
  font-weight: 200;
  letter-spacing: .2em;
  color: #7f7f7f;
  text-decoration: underline;
  transition: all ease .4s;
}

.contact__tel a:hover {
  opacity: .8;
}

.contact__txt {
  color: #000;
  margin: 0 auto 10px;
  font-size: .9rem;
  font-weight: 300;
  letter-spacing: .1em;
  text-align: center;
  line-height: 220%;
}

.contact__form {
  padding: 4% 0 8%;
}

.contact__form__inner {
  width: 70%;
  margin: 0 auto;
  padding: 1% 0 4%;
}

.contact__form__inner p {
  padding-top: 1%;
  padding-bottom: 1%;
  color: #000;
  font-size: .9rem;
  font-weight: 300;
  letter-spacing: .1em;
  line-height: 220%;
}

.wpcf7-text {
  width: 100%;
  padding: 12px 20px;
  border: 1px solid #aaaaaa;
  margin-top: 1%;
  box-sizing: border-box;
  margin-bottom: 2px;
  border-radius: 4px;
  box-sizing: border-box;
}

.wpcf7-textarea {
  width: 100%;
  border: none;
  border: 1px solid #aaaaaa;
  margin-top: 1%;
  padding: 12px 20px;
  border-radius: 4px;
  box-sizing: border-box;
}

.wpcf7-submit {
  display: block;
  width: 50%;
  padding: 20px;
  margin: 40px auto 10px;
  border: none;
  letter-spacing: .1em;
  color: #fff;
  background: #000;
  cursor: pointer;
  transition: .4s;
  box-sizing: border-box;
}

.wpcf7-submit:hover {
  background: var(--maincolor);
}

.wpcf7-form p {
  letter-spacing: 2px;
}

.productslist__info1 {
  width: 74%;
  margin: 0 auto 120px;
}

.productslist__info1__img {
  width: 100%;
  display: block;
  margin-bottom: 30px;
}

.productslist__info1__img img {
  display: block;
  width: 100%;
}

.productslist__info2 {
  margin-bottom: 120px;
}

.productslist__info2__box {
  width: 96%;
  margin: 60px auto 60px;
}

.productslist__info2__single {
  margin-bottom: 40px;
}

.productslist__info2__sub {
  color: var(--maincolor);
  font-size: 1.7rem;
  font-weight: 300;
  line-height: 200%;
  letter-spacing: .1em;
  margin-bottom: 8px;
}

.noarticle {
	    text-align: center;
    display: block;
    width: 100%;
    margin-bottom: 20px;
    margin-top: 20px;
}

/* recapcha */
.grecaptcha-badge {
  visibility: hidden;
}

.page-contact .grecaptcha-badge {
  visibility: visible;
  bottom: 80px !important;
}