@charset "UTF-8";
/* CSS Document */ :root {
  --m-c: #333333;
  --p-c: #CE6767;
}
html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}
body {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  color: var(--m-c);
  font-weight: 400;
  font-size: 1.6rem;
  background-color: #F7F5EC;
  -webkit-text-size-adjust: 100%;
  padding-top: 28px;
  position: relative;
}
p {
  line-height: 1.9;
  letter-spacing: 0.05em;
}
img {
  max-width: 100%;
  height: auto;
  border-style: none;
  vertical-align: bottom;
}
.img100 {
  width: 100%;
}
a {
  text-decoration: none;
  color: var(--m-c);
}
ul {
  list-style-type: none;
}
address {
  font-style: normal;
}
h1, h2, h3, h4, h5 {
  letter-spacing: 0.05em;
  font-weight: 400;
}
.btn01 {
  font-family: 'Cinzel', serif;
  display: inline-flex;
  align-items: center;
  position: relative;
  height: 70px;
  padding-right: 40px;
}
.btn01:before {
  content: "";
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: var(--p-c);
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  z-index: -1;
  transition: 0.5s;
}
.btn01:after {
  content: "";
  width: 28px;
  height: 1px;
  background-color: var(--m-c);
  position: absolute;
  top: 50%;
  right: -9px;
  transition: 0.5s;
}
.btn01:hover:before {
  border: 10px solid #E88383;
  transform-origin: top;
  transform: scale(1.5) translateY(-50%);
}
.btn01:hover:after {
  right: -30px;
}
.head {
  border: 1px solid var(--m-c);
  border-width: 1px 0 1px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  padding-left: 15px;
}
.logo {
  display: inline-block;
  margin-right: 15px;
}
.head_title {
  font-size: 1.2rem;
  color: #707070;
}
.menu_wrap {
  display: flex;
  column-gap: 1.8em;
}
.menu {
  font-family: 'Cinzel', serif;
  a:hover {
    color: var(--p-c);
  }
}
.logo-wrap {
  display: flex;
  align-items: center;
}
.pc_nav {
  margin-right: calc(2.5% + 80px);
}
.side_bar {
  border: 1px solid var(--m-c);
  border-width: 0 0 0 1px;
  width: 80px;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9999;
}
/*メニュー*/
.mobile {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80%;
  width: 80px;
}
#panel-btn {
  position: relative;
  width: 70px;
  height: 70px;
  margin: 0;
  z-index: 9998;
}
#panel-btn-icon {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 40px;
  margin: 0 0 0 0;
  background: var(--m-c);
  transition: .2s;
  border-radius: 10px;
}
#panel-btn-icon:before, #panel-btn-icon:after {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 40px;
  background: var(--m-c);
  transition: .3s;
  border-radius: 10px;
}
#panel-btn-icon:before {
  margin-left: -8px;
}
#panel-btn-icon:after {
  margin-left: 8px;
  width: 2px;
}
#panel-btn .close {
  background: transparent;
}
#panel-btn .close:before, #panel-btn .close:after {
  margin-left: 0;
}
#panel-btn .close:before {
  transform: rotate(-45deg);
}
#panel-btn .close:after {
  transform: rotate(-135deg);
}
#panel {
  display: block;
  width: 300px;
  height: 100%;
  overflow: auto;
  background-color: var(--p-c);
  position: fixed;
  top: 0;
  right: -300px;
  padding: 70px 20px;
  transition: 0.6s;
  opacity: 0;
  z-index: 999;
  visibility: hidden;
}
#panel.block {
  right: 80px;
  opacity: 1;
  visibility: visible;
}
/* 戻った瞬間だけ、すべてのアニメーションを無効化する魔法のクラス */
.no-transition, .no-transition *, .no-transition *:before, .no-transition *:after {
  transition: none !important;
}
#panel ul li {
  margin-bottom: 40px;
}
#panel ul li a {
  font-size: 1.6rem;
  color: #fff;
  line-height: 1.3;
  display: block;
  padding-bottom: 5px;
  border-bottom: 1px solid #fff;
}
#panel ul li a:hover {
  color: var(--m-c);
  border-bottom-color: var(--m-c);
}
.menu_en {
  font-family: 'Cinzel', serif;
  font-size: 1.2rem;
}
.contact_btn {
  background-color: var(--p-c);
  height: 20%;
  min-height: 150px;
  width: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  writing-mode: vertical-rl;
  font-family: 'Cinzel', serif;
  color: #fff;
  letter-spacing: 0.08em;
  position: absolute;
  bottom: 0;
  border-top: 1px solid #333333;
  z-index: 1000;
  transition: 0.5s;
}
.contact_btn:hover {
  background-color: #505050;
}
.wrapper {
  width: calc(100% - 80px);
}
/*footer*/
footer {
  width: calc(100% - 80px);
  margin-top: 120px;
  position: relative;
}
.foot_contact {
  background-color: var(--p-c);
  height: clamp(200px, 19.5vw, 375px);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.3s;
}
.foot_contact:hover {
  background-color: #505050;
}
.foot_contact_title {
  text-align: right;
  color: #fff;
  font-size: clamp(1.6rem, 1vw, 1.8rem);
  margin-right: 5%;
}
.en_foot_contact {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: clamp(4rem, 3.125vw, 6rem);
  margin-bottom: min(1vw, 15px);
  letter-spacing: 0.1em;
  margin-right: -0.1em;
}
.foot_contact_right {
  display: flex;
  align-items: center;
}
.contact_right_text {
  color: #fff;
  margin-left: 3%;
  white-space: nowrap;
}
.foot_cont {
  display: flex;
}
.foot_menu_wrap {
  width: 50%;
  padding: 5%;
}
.foot_menu {
  line-height: 1.5;
  margin-bottom: 25px;
}
.foot_menu a:hover {
  color: var(--p-c);
  position: relative;
}
.foot_menu a:after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0%;
  height: 2px;
  background-color: var(--p-c);
  transition: all .2s linear;
}
.foot_menu a:hover:after {
  width: 100%;
}
.foot_right {
  width: 50%;
  padding: 5% 5% 5% 2.5%;
  border-left: 1px solid var(--m-c);
}
.foot_logo {
  margin-bottom: 30px;
  display: block;
}
.foot_ad {
  color: #707070;
  font-size: 1.4rem;
  line-height: 1.9;
  margin-bottom: 30px;
}
.foot_text {
  color: #707070;
  font-size: 1.2rem;
  max-width: 373px;
}
.copy {
  font-size: 1.2rem;
  position: absolute;
  right: 5%;
  bottom: 30px;
}
/*アニメーション動き*/
.blur {
  opacity: 0;
  filter: blur(5px);
  transition-duration: 2.2s;
}
.mv {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0);
}
/*//////////top///////////*/
.top01 {
  display: flex;
  position: relative;
  border-bottom: 1px solid var(--m-c);
  margin-bottom: 120px;
}
.top01_textbox {
  width: 50%;
  padding: 5%;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.top01_textbox section {
  opacity: 0;
  animation: blur01 2s ease 0.5s 1 normal forwards;
}
@keyframes blur01 {
  0% {
    filter: blur(5px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}
.top01:after {
  content: "";
  width: 1px;
  height: 100%;
  background-color: var(--m-c);
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}
.top_catch {
  font-weight: 900;
  font-size: 3.438vw;
  letter-spacing: 0;
  line-height: 1.5;
  margin-bottom: max(30px, 2.6vw);
}
.top01_text {
  max-width: 420px;
  margin-bottom: 50px;
}
.top01_right {
  width: 50%;
  padding: 5%;
}
.top01_pic {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.top_anime {
  opacity: 0;
  animation: blur01 2s ease 1s 1 normal forwards;
}
.top01_pic img {
  height: 110%;
  object-fit: cover;
}
.top02 {
  padding-bottom: 40px;
  border-bottom: 1px solid var(--m-c);
  margin-bottom: 120px;
}
.en_title {
  font-family: 'Cinzel', serif;
  font-size: 3rem;
  margin: 0 0 -10px 2.5%;
  padding: 10px;
  display: inline-block;
  border-left: 1px solid var(--m-c);
  border-right: 1px solid var(--m-c);
}
.top-works-wrap {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 40px;
  border-top: 1px solid var(--m-c);
}
.screenshot {
  width: 33.3333333%;
  border-bottom: 1px solid var(--m-c);
  border-right: 1px solid var(--m-c);
}
.screenshot a {
  padding: 10%;
  display: block;
}
.screenshot:nth-of-type(3n) {
  border-right: none;
}
.top-work-title {
  font-size: clamp(1.2rem, 2.096vw, 1.4rem);
  line-height: 1.3;
}
.top-work-pic {
  display: inline-block;
  margin-bottom: 10px;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  transition: 0.7s;
}
.top-work-pic img {
  transition: 0.7s;
}
.screenshot:hover .top-work-pic img {
  filter: grayscale(80%);
  transform: scale(1.05);
}
.btn_center {
  text-align: center;
}
.top03 {
  margin-bottom: 120px;
}
.top03_inner {
  display: flex;
  position: relative;
  border-bottom: 1px solid var(--m-c);
  border-top: 1px solid var(--m-c);
}
.top03_inner:after {
  content: "";
  width: 1px;
  height: 100%;
  background-color: var(--m-c);
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}
.top03_left {
  width: 50%;
  padding: 5%;
}
.top03_textbox {
  width: 50%;
  padding: 5%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.com_title {
  line-height: 1.5;
  font-size: clamp(2.4rem, 1.719vw, 3.3rem);
  margin-bottom: clamp(20px, 2.083vw, 40px);
  font-weight: 600;
}
.top03_text {
  margin-bottom: 50px;
  max-width: 600px;
}
.top03_textbox_in {
  max-width: 600px;
}
.top04 {
  display: flex;
  border-top: 1px solid var(--m-c);
  margin-bottom: 120px;
}
.top04_title {
  text-align: center;
}
.top04_entitle {
  font-size: clamp(2.4rem, 1.875vw, 3.6rem);
  font-family: 'Cinzel', serif;
  padding-left: 0.05em;
  margin-bottom: 5px;
  display: inline-block;
}
.price_box {
  width: 33%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--m-c);
  border-bottom: 1px solid var(--m-c);
  padding: 5%;
  transition: 0.5s;
}
.top04_jptext {
  margin-bottom: clamp(30px, 4vw, 75px);
  display: block;
  line-height: 1.9;
  letter-spacing: 0.05em;
  padding-left: 0.05em;
}
.top04_right {
  width: 67%;
}
.faq_box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--m-c);
  padding: 5%;
  transition: 0.5s;
}
.slide_ball {
  position: relative;
  display: block;
  width: 100px;
}
.slide_ball:before {
  content: "";
  width: 100px;
  height: 1px;
  background-color: var(--m-c);
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
}
.slide_ball:after {
  content: "";
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: var(--p-c);
  position: absolute;
  left: 0px;
  bottom: -12.5px;
  transition: 0.5s;
}
.price_box:hover .slide_ball:after {
  left: 75px;
}
.faq_box:hover .slide_ball:after {
  left: 75px;
}
.price_box:hover, .faq_box:hover {
  background-color: #AEADAD;
}
.title_center {
  text-align: center;
  margin-left: -2.5%;
}
.top05 {
  border-bottom: 1px solid var(--m-c);
}
.top05_in {
  border-top: 1px solid var(--m-c);
  border: 1px solid var(--m-c);
  border-width: 0 1px 0 1px;
  width: 90%;
  margin: 0 auto;
  position: relative;
  padding-bottom: 40px;
}
.top05_in:before {
  content: "";
  height: 1px;
  width: calc(100vw - 80px);
  background-color: var(--m-c);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.news_list_wrap {
  padding: 100px 0 40px;
}
.news_li {
  border: 1px solid var(--m-c);
  border-width: 1px 0;
  margin-bottom: 3%;
}
.news_li:last-of-type {
  margin-bottom: 0;
}
.topic_list {
  display: flex;
  align-items: center;
}
.top_eyecatch {
  width: 18%;
  padding-top: 12%;
  overflow: hidden;
  position: relative;
  z-index: 1;
  min-width: 210px;
  min-height: 140px;
}
.top_eyecatch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.7s;
  position: absolute;
  top: 0;
  left: 0;
}
.news_text {
  padding: 3%;
  width: 76%;
}
.list_date {
  font-size: 1.4rem;
}
.topic_title {
  line-height: 1.5;
  font-size: 1.8rem;
  font-weight: 500;
  margin-bottom: 10px;
}
.news_li:hover .top_eyecatch img {
  transform: scale(1.1);
  filter: brightness(0.8);
}
.cate_list {
  font-size: 1.4rem;
  margin-left: 10px;
  color: #707070;
}
/*/////////sub共通/////////*/
.sub_title {
  padding: 2.5%;
  line-height: 1.3;
  border-bottom: 1px solid var(--m-c);
}
.en_subtitle {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  display: block;
  font-size: clamp(2.2rem, 2.2vw, 3rem);
}
/*///////about//////*/
.about01 {
  display: flex;
  border-bottom: 1px solid var(--m-c);
}
.about01_left {
  width: 40%;
  padding: 2.3vw;
  border-right: 1px solid var(--m-c);
}
.about_pic {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.about_pic img {
  height: 115%;
  object-fit: cover;
}
.about01_right {
  width: 60%;
}
.about01_righttop {
  padding: 2.3vw;
  border-bottom: 1px solid var(--m-c);
}
.about01_rightpic {
  overflow: hidden;
  height: 24.219vw;
}
.about_rightpic img {
  height: 110%;
  object-fit: cover;
}
.about01_textbox {
  padding: 4vw;
}
.about01_text {
  max-width: 620px;
  padding-left: 1em;
}
.about02 {
  display: flex;
  border-bottom: 1px solid var(--m-c);
}
.about02_textbox {
  padding: 4vw;
  width: 60%;
  border-right: 1px solid var(--m-c);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.about02_right {
  width: 40%;
  padding: 2.3vw;
}
.about03 {
  display: flex;
  border-bottom: 1px solid var(--m-c);
  margin-bottom: 120px;
}
.about03_textbox {
  padding: 4vw;
  width: 60%;
}
.com_dl {
  line-height: 1.8;
  width: min(90%, 1200px);
  letter-spacing: 0.05em;
  margin: 0 auto;
  border: 1px solid var(--m-c);
  border-width: 0 1px 0 1px;
  padding: 70px 0;
}
.com_dt {
  float: left;
  padding: 20px 0 20px 20px;
  white-space: nowrap;
}
.com_dd {
  width: 100%;
  padding: 20px 10px 20px clamp(6em, 22%, 8em);
  border-bottom: 1px solid #707070;
}
.about04 {
  border-bottom: 1px solid var(--m-c);
}
.about04_in {
  border-top: 1px solid var(--m-c);
}
.staff_in {
  border-bottom: 1px solid var(--m-c);
  border-top: 1px solid var(--m-c);
}
.staff_box {
  width: min(90%, 600px);
  margin: 0 auto;
  border: 1px solid var(--m-c);
  border-width: 0 1px;
  padding: min(5%, 50px);
}
.staff_pic {
  text-align: center;
  margin-bottom: 20px;
}
.staff_pic img {
  border: 1px solid var(--m-c);
  border-radius: 50%;
  padding: 5px;
}
.prof_name {
  text-align: center;
  font-weight: 500;
  font-size: 1.8rem;
  margin-bottom: 10px;
  padding-left: 0.05em;
}
.prof_info {
  text-align: center;
  font-size: 1.2rem;
  display: block;
  margin-bottom: 20px;
  padding-left: 0.05em;
  letter-spacing: 0.05em;
}
.staff_wrap {
  margin-bottom: 120px;
}
/*///////works//////*/
.works01 {
  padding: 100px 0 100px;
  border-bottom: 1px solid var(--m-c);
}
/*////////////////////実績個別////////////////////////*/
.single-works_wrap {
  width: min(90%, 1400px);
  margin: max(10%, 80px) auto 0;
}
.single-works_title {
  font-size: clamp(2rem, 3.294vw, 4.5rem);
  margin-bottom: 30px;
  font-weight: 500;
}
.single-works_link {
  display: inline-block;
  margin-bottom: clamp(50px, 9.517vw, 130px);
  font-size: 1.4rem;
}
.single-works_link:before {
  content: url("../images/Icon open-external-link.svg");
  width: 14px;
  height: 14px;
  position: relative;
  top: 3px;
}
.single-works-contentwrap {
  max-width: 1000px;
  margin: 0 auto 12%;
}
.device_pic {
  margin-bottom: 10%;
}
.single-works-text {
  margin-bottom: 10%;
}
.device_title {
  width: 75px;
  margin: 0 0 35px auto;
  padding-bottom: 10px;
  border-bottom: 1px solid #4b4b4b;
}
.pc-pic-wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.pc-pic01 {
  width: 48%;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}
.screen_box:first-of-type {
  margin-bottom: 10%;
}
.sp-pic-wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 650px;
  margin: 0 auto;
}
/*///////service//////*/
.cl01 {
  text-align: center;
  padding: 8% 5% 8% calc(5% + 0.05em);
  line-height: 1.6;
  font-weight: 900;
  font-size: clamp(2.4rem, 1.719vw, 3.3rem);
  border-bottom: 1px solid var(--m-c);
}
.cl02 {
  padding: 5% 2.5%;
  border-bottom: 1px solid var(--m-c);
}
.cl02_pic {
  height: 46vw;
  overflow: hidden;
}
.cl_pic_wrap {
  width: 40%;
  padding: 2.3vw;
}
.boder_r {
  border-right: 1px solid var(--m-c);
}
.boder_l {
  border-left: 1px solid var(--m-c);
}
.boder_b {
  border-bottom: 1px solid var(--m-c);
}
.cl_textbox {
  padding: 4vw;
  width: 60%;
}
.cl03 {
  display: flex;
  border-bottom: 1px solid var(--m-c);
}
.btnfont {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 900;
}
.btn_cl {
  text-align: center;
  margin-top: 100px;
}
.price01 {
  padding: 8% 0;
  border-bottom: 1px solid var(--m-c);
  margin-bottom: max(10vw, 80px);
}
.price01_inner {
  width: 90%;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
}
.price01_title {
  font-size: max(2.45vw, 3rem);
  font-weight: 900;
  line-height: 1.4;
  margin-right: 6%;
  white-space: nowrap;
}
.price01_btn_wrap {
  display: flex;
  gap: 3%;
}
.price01_btn {
  display: inline-flex;
  align-items: center;
  width: clamp(180px, 12.5vw, 240px);
  height: 80px;
  padding: 0 8%;
  border-radius: 999px;
  background-color: var(--p-c);
  color: #fff;
  font-size: 1.8rem;
  font-weight: bold;
  letter-spacing: 0.08em;
  transition: 0.3s;
  position: relative;
}
.price01_btn span {
  position: absolute;
  top: 50%;
  right: 10%;
  transform: translateY(-50%);
}
.price01_btn:hover {
  background-color: #505050;
}
.red_font {
  color: var(--p-c);
  font-size: clamp(3rem, 2.708vw, 5.2rem);
}
/* price02：3カラム料金目安カード */
.price02_wrap {
  padding: 0 5% 8%;
  border: 1px solid var(--m-c);
  border-width: 1px 0;
  margin-bottom: max(10vw, 80px);
}
.price02_section_title {
  border-left: 1px solid var(--m-c);
  border-right: 1px solid var(--m-c);
  width: fit-content;
  padding: 5px 12px;
  line-height: 1.5;
  transform: translateY(-58%);
}
.price02_section_title .en_title {
  margin: 0;
  border: 0;
  padding: 0;
}
.price02_section_jp {
  display: block;
  font-size: 1.8rem;
  font-weight: 500;
}
.price02_cards {
  display: flex;
  gap: 2%;
  margin-bottom: 20px;
  padding-top: 3%;
}
.price02 {
  background-color: #FFF;
  display: flex;
  flex-direction: column;
  flex: 0 0 calc((100% - (2% * 2)) / 3);
}
.price02_head {
  display: flex;
  align-items: center;
  gap: 2%;
}
.price02_case_label {
  display: inline-block;
  padding: 5% 3%;
  background-color: var(--p-c);
  color: #fff;
  font-family: 'Cinzel', serif;
  font-size: max(1vw, 1.2rem);
  font-weight: 700;
  letter-spacing: 0.05em;
}
.price02_title {
  font-weight: 700;
  font-size: max(1.25vw, 1.6rem);
  line-height: 1.4;
  margin: 0;
}
.price02_inner {
  padding: 6% 5% 8%;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.price02_box {
  margin-bottom: max(8%, 30px);
  font-weight: 500;
}
.price02_box:has(.price02_function_list) {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.price02_box:has(.price02_function_list) .price02_function_list {
  flex: 1;
  align-content: flex-start;
}
.price02_box:last-of-type {
  margin-bottom: 0;
}
.price02_little_title {
  color: var(--p-c);
  font-weight: 500;
  border: 1px solid var(--p-c);
  border-width: 0 0 1px 1px;
  width: 150px;
  padding: 0 0 10px 10px;
  margin-bottom: max(2%, 15px);
}
.price02_function_list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-content: flex-start;
}
.price02_function_item {
  padding: 8px 5px;
  font-size: 1.2rem;
  border: 1px solid var(--m-c);
  background-color: #fff;
  color: var(--m-c);
}
.price02_box .price {
  font-weight: 900;
  font-size: clamp(1.8rem, 1.8vw, 2.2rem);
}
.price02_box .tax {
  font-size: 1.2rem;
  color: #707070;
}
.price02_note {}
.price02_contact_text {
  margin: max(5vw, 50px) 0 30px;
  font-size: 1.8rem;
  line-height: 1.7;
  text-align: center;
  font-weight: 500;
}
.price02_wrap .btn_center {
  margin-top: 20px;
}
/* 従来のpage_label / function は他ページで使用のため残す */
.page_label {
  background-color: var(--p-c);
  color: #fff;
  padding: 7px 9px;
  display: inline-block;
  margin: 0 1% 1% 0;
}
.function {
  border: 1px solid var(--m-c);
  height: 75px;
  padding: 0 12px;
  font-size: 1.2rem;
  margin: 0 1% 1% 0;
  display: flex;
  align-items: center;
}
.finction_ul {
  display: flex;
  flex-wrap: wrap;
}
.price {
  font-weight: 900;
  font-size: clamp(2rem, 2vw, 2.4rem);
}
.tax {
  font-size: 1.2rem;
  color: #707070;
}
.price03 {
  border: 1px solid var(--m-c);
  border-width: 1px 0;
}
.price03_section_title {
  border-left: 1px solid var(--m-c);
  border-right: 1px solid var(--m-c);
  width: fit-content;
  padding: 5px 12px;
  line-height: 1.5;
  transform: translateY(-58%);
  margin: 0 auto;
}
.price03_section_title .en_title {
  margin: 0;
  padding: 0;
  border: none;
}
.price03_section_jp {
  display: block;
  font-size: 1.8rem;
  font-weight: 500;
  text-align: center;
}
.price03_inner {
  padding: 5% 0;
}
.price_table_group {
  width: min(90%, 960px);
  margin: 0 auto 60px;
}
.price_table_heading {
  font-size: 1.8rem;
  font-weight: 500;
  margin-bottom: 15px;
}
.price_table_box {
  background-color: #fff;
}
.price_table {
  width: 100%;
  border-collapse: collapse;
}
.price_table td {
  padding: 3%;
  line-height: 1.5;
  border: 1px solid var(--m-c);
}
.price_table_item {
  width: 70%;
}
.price_table_price {
  min-width: 11em;
}
.flow_box_wrap {
  border: 1px solid var(--m-c);
  border-width: 1px 0 1px 0;
  margin-bottom: 3%;
}
.flow-wrap {
  padding: 100px 0;
}
.flow-box {
  width: 90%;
  margin: 0 auto;
  display: flex;
}
.flow_num {
  width: 5%;
  min-width: 60px;
  font-size: 3rem;
  font-family: 'Cinzel', serif;
  background-color: var(--p-c);
  color: #fff;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.flow_text_box {
  padding: 2%;
  width: 95%;
}
.flow-title {
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: max(1%, 10px);
  font-size: clamp(1.6rem, 1.464vw, 2rem);
}
/*////////////FAQ/////////////////*/
/*アコーディオン*/
/*ボックス全体*/
.accbox {
  margin: 0 auto;
  width: min(90%, 1200px);
  padding: 100px 0;
  border: 1px solid var(--m-c);
  border-width: 0 1px;
  position: relative;
}
.accbox:after {
  content: "";
  height: 1px;
  width: calc(100vw - 80px);
  background-color: var(--m-c);
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
/*ラベル*/
.accbox label {
  display: block;
  padding: 20px 60px 20px 100px;
  cursor: pointer;
  transition: all 0.5s;
  line-height: 1.7;
  position: relative;
  border: 1px solid var(--m-c);
  border-width: 1px 0;
}
.accbox label:before {
  content: "Q";
  font-family: 'Cinzel', serif;
  font-size: 2rem;
  font-weight: 700;
  position: absolute;
  color: #fff;
  left: 0;
  top: 0;
  width: 80px;
  height: 100%;
  background-color: var(--p-c);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.5s;
}
/*アイコンを表示*/
.accbox label:after {
  content: "＋";
  color: var(--p-c);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--p-c);
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
/*ラベルホバー時*/
.accbox label:hover {
  background-color: #fcf2d0;
}
/*チェックは隠す*/
.accbox input {
  display: none;
}
/*中身を非表示にしておく*/
.accbox .accshow {
  height: 0;
  padding: 0 0 0 100px;
  overflow: hidden;
  transition: 0.2s;
  visibility: hidden;
  margin-bottom: 2%;
}
.accbox .accshow:last-of-type {
  margin-bottom: 0;
}
/*クリックで中身表示*/
.cssacc:checked + label + .accshow {
  height: auto;
  padding: 2% 5% 2% 100px;
  visibility: visible;
}
/*アイコンを入れ替える*/
.cssacc:checked + label:after {
  content: 'ー';
}
/*//////////////お知らせ/////////////////*/
.archive_title {
  border-bottom: 1px solid var(--m-c);
  text-align: center;
  font-weight: 900;
  font-size: clamp(1.6rem, 1.757vw, 2.4rem);
  padding: max(3%, 20px);
  color: var(--p-c);
}
.news-list_wrap {
  border: 1px solid var(--m-c);
  border-width: 0 0 1px 1px;
  width: 85%;
  padding: 100px 0 100px;
}
.news-list01 {
  display: flex;
}
.cate_menubox {
  padding: 4% 2.5%;
  position: relative;
  width: 15%;
  border-bottom: 1px solid var(--m-c);
}
.catemenu_ul {
  position: sticky;
  top: 2.5%;
}
.catemenu_ul li {
  line-height: 1.5;
  font-weight: 900;
  margin-bottom: 25px;
  letter-spacing: 0.05em;
}
.catemenu_ul li a:hover {
  color: var(--p-c);
}
.news_wrap {
  width: min(95%, 1200px);
  margin: 0 auto 80px;
  border: 1px solid var(--m-c);
  border-width: 0 1px 1px 1px;
}
/*ページャー*/
.pagination {
  display: flex;
  justify-content: center;
  margin-top: 100px;
}
.nav-links {
  display: flex;
  align-items: center;
}
.pagination .page-numbers {
  margin: 0 10px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pagination .current {
  /*  padding: 10px 15px;*/
  background: var(--p-c);
  border-radius: 50%;
  color: #fff;
}
.pagination .prev, .pagination .next {
  background: transparent;
  box-shadow: none;
  color: var(--p-c);
  padding: 10px 0;
}
.pagination .dots {
  background: transparent;
  box-shadow: none;
}
.news {
  width: 85%;
  padding: 30px 0 100px;
  border: 1px solid var(--m-c);
  border-width: 0 0 1px 1px;
}
.news-cont_wrap {
  display: flex;
}
.news_head {
  border: 1px solid var(--m-c);
  border-width: 1px 0;
  padding: 3% 5%;
  line-height: 1.5;
}
.news_cate {
  color: #707070;
  margin-bottom: 5px;
  display: inline-block;
}
.news_title {
  font-weight: 500;
  font-size: clamp(2.4rem, 1.719vw, 3.3rem);
  margin-bottom: 5px;
}
.news_date {
  letter-spacing: 0.1em;
  color: #505050;
}
.news_eyecatch {
  padding: 3% 5%;
  border-bottom: 1px solid var(--m-c);
}
.post {
  padding: 5%;
}
.post ul, .post ol {
  line-height: 1.5;
  margin: 0 0 5% 1.5em;
  list-style-type: square;
  list-style-position: outside;
  li {
    margin-bottom: 1em;
  }
}
.post table {
  line-height: 1.5;
}
.post h2 {
  line-height: 1.5;
  font-size: clamp(1.80rem, 0.52vw + 1.40rem, 2.40rem);
  font-weight: 500;
  margin-bottom: min(5%, 30px);
  background: var(--p-c);
  color: #fff;
  padding: 10px 15px;
  display: inline-block;
}
.post h3 {
  line-height: 1.5;
  font-size: clamp(1.60rem, 0.35vw + 1.33rem, 2.00rem);
  font-weight: 500;
  margin-bottom: min(5%, 20px);
}
.post h4, .post h5, .post h6 {
  line-height: 1.5;
  font-weight: 500;
  margin-bottom: min(3%, 15px);
}
.post p {
  margin-bottom: min(5%, 20px);
  letter-spacing: 0;
}
.post figure {
  margin-bottom: 5%;
}
.control {
  display: flex;
  position: relative;
}
.control:after {
  content: "";
  width: 1px;
  height: 100%;
  background-color: var(--m-c);
  position: absolute;
  top: 0;
  left: calc(50% - 0.5px);
}
.cont_box {
  width: 50%;
}
.prev_box, .next_box {
  padding: 3%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.prev_box {
  padding-left: 70px;
}
.prev_box:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 5px;
  transform: translateY(-50%);
  background: url("../images/prev.svg") no-repeat;
  width: 40px;
  height: 40px;
  transition: 0.2s;
}
.prev_box:after {
  content: "PREV";
  font-size: 12px;
  font-weight: 900;
  position: absolute;
  left: 5px;
  top: calc(50% + 25px);
  width: 40px;
  text-align: center;
}
.next_box {
  padding-right: 70px;
}
.next_box:before {
  content: "";
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  background: url("../images/next.svg") no-repeat;
  width: 40px;
  height: 40px;
  transition: 0.2s;
}
.next_box:after {
  content: "NEXT";
  font-size: 12px;
  font-weight: 900;
  position: absolute;
  right: 5px;
  top: calc(50% + 25px);
  width: 40px;
  text-align: center;
}
.prev_box:hover.prev_box:before {
  left: -10px;
}
.next_box:hover.next_box:before {
  right: -10px;
}
.news_sum {
  width: 27%;
  padding-top: 18%;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.news_sum img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.7s;
  position: absolute;
  top: 0;
  left: 0;
}
/*//////////////contact/////////////////*/
.cont_title {
  font-size: 1.3rem;
  font-weight: 500;
  width: 70%;
  padding-left: 2%;
}
.contact_wrap {
  width: min(95%, 1100px);
  margin: 0 auto;
  border: 1px solid var(--m-c);
  border-top-width: 0;
}
.cantact01 {
  padding: 5%;
  text-align: center;
  border-bottom: 1px solid var(--m-c);
}
.contact_tel_box {
  display: flex;
  align-content: center;
}
.contact_tel {
  font-weight: 900;
  font-size: 3rem;
  letter-spacing: 0.08em;
  display: inline-block;
  margin-left: 10px;
}
.contact_time {
  font-size: 1.4rem;
  margin: 0 0 5% 45px;
}
.contact02 {
  padding: 5%;
  margin-bottom: 120px;
}
.line {
  font-weight: 900;
  vertical-align: middle;
  line-height: 33px;
  height: 33px;
}
.line img {
  margin-right: 10px;
}
.mail_title {
  margin-left: 5%;
}
#formWrap {
  padding: 5% 5% 8%;
  border-top: 1px solid var(--m-c);
}
.input_wrap {
  margin-bottom: 20px;
}
/*ラジオボタン*/
.radiobutton {
  margin-left: 2px;
  padding-top: 10px;
}
.radiobutton label {
  padding: 0 0 0 45px; /* ラベルの位置 */
  font-size: 16px;
  line-height: 30px; /* ボタンのサイズに合わせる */
  display: inline-block;
  cursor: pointer;
  position: relative;
  width: 194px;
}
.radiobutton label:before {
  content: '';
  width: 30px; /* ボタンの横幅 */
  height: 30px; /* ボタンの縦幅 */
  position: absolute;
  top: 0;
  left: 0;
  background-color: #fff;
  border: 2px solid #e5e5e5;
  border-radius: 50%;
}
.radiobutton input[type="radio"] {
  display: none;
}
.radiobutton input[type="radio"]:checked + label:after {
  content: '';
  width: 16px; /* マークの横幅 */
  height: 16px; /* マークの縦幅 */
  position: absolute;
  top: 7px;
  left: 7px;
  background-color: #606060;
  border-radius: 50%;
}
.radiobutton input {
  margin-right: 20px;
}
/* IE11 hide native button*/
select::-ms-expand {
  display: none;
}
.form_title_wrap {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
#formWrap h4 {
  font-weight: 500;
}
.form-item {
  margin-bottom: 15px;
}
.require {
  margin-left: 10px;
  padding-bottom: 2px;
}
.input {
  width: 100%;
  height: 56px;
  padding: 5px 16px;
  border: #707070 1px solid;
  font-size: 16px;
}
.name_wrap {
  margin-bottom: 50px;
}
#textbox {
  height: 180px;
  font-size: 16px;
}
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
  color: #b9b9b9;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #b9b9b9;
}
::placeholder { /* Others */
  color: #b9b9b9;
}
/* IE11 hide native button*/
select::-ms-expand {
  display: none;
}
.submit_btn {
  width: 182px;
  height: 55px;
  background-color: var(--p-c);
  font-size: 16px;
  font-weight: 400;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FFF;
  border: none;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 30px;
  padding: 2px 0 0 0.1em;
  letter-spacing: 0.1em;
}
.submit_btn:hover {
  opacity: 0.7;
}
.contact_box {
  display: flex;
}
.mail_info {
  font-size: 1.4rem;
  margin-bottom: 50px;
  line-height: 18px;
  height: 18px;
}
.coment {
  margin-bottom: 8%;
}
.coment h5 {
  margin-bottom: 15px;
}
.coment h5 mark {
  font-weight: 500;
  background: linear-gradient(transparent 60%, #E7F00B 20%);
  font-style: normal;
}
.coment p {
  font-size: 1.3rem;
  margin-bottom: 20px;
}
.tab_br {
  display: none;
}
.sp_con {
  display: none;
}
.thanks {
  min-height: 500px;
  padding-top: 10vw;
  width: 90%;
  max-width: 700px;
  margin: 0 auto;
}
.thanks_title {
  font-size: 1.8rem;
  text-align: center;
  margin-bottom: 20px;
}
.thanks_p {
  text-align: center;
  margin-bottom: 20px;
}
.thanks_p2 {
  margin-bottom: 30px;
}
/*/////////ジェネレーター////////////*/
.gene_wrap {
  width: min(95%, 1100px);
  margin: 0 auto;
  border: 1px solid var(--m-c);
  border-top-width: 0;
}
.gene01 {
  padding: 5%;
  text-align: center;
  border-bottom: 1px solid var(--m-c);
}
.gene01_title {
  font-family: 'Cinzel', serif;
  font-size: clamp(2.40rem, 6.67vw + -4.00rem, 4.00rem);
}
.gene_subtitle {
  font-size: clamp(1.60rem, 0.83vw + 0.80rem, 1.80rem);
  font-weight: 600;
  margin-bottom: 3%;
}
.gene01_text {
  max-width: 500px;
  text-align: left;
  margin: 0 auto;
}
#copyBtn {
  display: none;
  border: none;
  cursor: pointer;
  background: none;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.gene02 {
  padding: 5%;
  font-weight: 500;
  width: 100%;
}
.gene_input {
  width: min(70%, 185px);
  height: 80px;
  padding: 10px;
  font-size: clamp(2.00rem, 4.17vw + -2.00rem, 3.00rem);
  border-radius: 25px;
}
.gene_fontsize {
  margin-bottom: max(5%, 30px);
  h3 {
    margin-bottom: 10px;
    font-weight: 500;
  }
}
.gene_wide {
  margin-bottom: max(5%, 30px);
  display: flex;
}
.wide_minmax {
  width: 50%;
  h3 {
    font-weight: 500;
    margin-bottom: 10px;
  }
}
.submit_gene {
  width: 182px;
  height: 55px;
  background-color: var(--p-c);
  font-size: 16px;
  font-weight: 400;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FFF;
  border: none;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 30px;
  padding: 2px 0 0 0.1em;
  letter-spacing: 0.1em;
}
.submit_gene:hover {
  background-color: #707070;
}
#output {
  white-space: pre-wrap;
  word-wrap: break-word;
  color: #fff;
  font-size: clamp(1.60rem, 2.50vw + -0.80rem, 2.20rem);
}
.out_wrap {
  background: var(--p-c);
  width: 100%;
  border-radius: 25px;
  min-height: 120px;
  margin: 8% 0 10%;
  border: 2px solid var(--m-c);
  padding: 20px 60px 20px 20px;
  display: flex;
  align-items: center;
  position: relative;
}
canvas {
  margin-top: 20px;
  width: 100%;
  height: 100px;
  background-color: #fff;
  border: 2px solid var(--m-c);
}
.adv {
  margin-bottom: 10%;
  width: 100%;
}
ins.adsbygoogle {
  width: 100%;
}
.graph_wrap {
  margin-bottom: 10%;
  h3 {
    font-weight: 500;
    text-align: center;
    font-size: clamp(2.00rem, 0.89vw + 1.09rem, 2.80rem);
  }
}