@charset "UTF-8";
/* CSS Document */
/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}
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, caption, tfoot, thead,
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%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
	text-decoration: none;
}

/* change colours to suit your needs */
ins {
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

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


input, select {
    vertical-align:middle;
}

@charset "UTF-8";
/* CSS Document */ :root {
  --m-c: #333333;
  --p-c: #CE6767;
}
html {
  font-size: 62.5%;
}
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;
  height: 80px;
  padding-left: 15px;
}
.logo {
  display: inline-block;
  margin-right: 15px;
}
.head_title {
  font-size: 1.2rem;
  color: #707070;
}
.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% 5%;
  text-align: center;
}
.price01_title {
  font-size: clamp(2.4rem, 1.719vw, 3.3rem);
  font-weight: 900;
  margin-bottom: 10px;
  line-height: 1.6;
  padding-left: 0.05em;
}
.red_font {
  color: var(--p-c);
  font-size: clamp(3rem, 2.708vw, 5.2rem);
}
.price02 {
  display: flex;
  margin-bottom: 3%;
}
.price02_left {
  width: 25%;
  border: 1px solid var(--m-c);
  border-left-width: 0;
}
.price02_left_num {
  padding: 8%;
  text-align: center;
  color: var(--p-c);
  font-family: 'Cinzel', serif;
  border-bottom: 1px solid var(--m-c);
  height: 30%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.case {
  display: block;
  font-size: clamp(1.6rem, 1.563vw, 3rem);
  margin-bottom: 2%;
}
.number {
  font-size: clamp(4rem, 4.427vw, 8.5rem);
}
.price02_pic {
  padding: 5%;
  height: 70%;
  width: 100%;
  overflow: hidden;
}
.price02_pic img {
  height: 100%;
  object-fit: cover;
}
.price02_right {
  width: 75%;
  border: 1px solid var(--m-c);
  border-width: 1px 0 1px 0;
  padding: 3%;
}
.price02_title {
  font-weight: 500;
  font-size: clamp(2rem, 2vw, 2.4rem);
  line-height: 1.6;
  margin-bottom: max(5%, 20px);
}
.price02_little_title {
  color: var(--p-c);
  font-weight: 500;
  border: 1px solid var(--p-c);
  border-width: 0 0 1px 1px;
  width: 200px;
  padding: 0 0 10px 10px;
  margin-bottom: max(2%, 15px);
}
.page_label {
  background-color: var(--p-c);
  color: #fff;
  padding: 7px 9px;
  display: inline-block;
  margin: 0 1% 1% 0;
}
.price02_box {
  margin-bottom: max(4%, 20px);
}
.price02_box:last-of-type {
  margin-bottom: 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 {
  text-align: center;
  padding-top: 50px;
}
.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);
	}
}
@charset "UTF-8";
/* CSS Document */
@media (max-width: 959px) {
  .tab_br {
    display: block;
  }
  .side_bar {
    width: 60px;
  }
  .mobile {
    width: 60px;
  }
  .contact_btn {
    width: 60px;
  }
  .wrapper {
    width: calc(100% - 60px);
  }
  /*  tab-footer*/
  footer {
    width: calc(100% - 60px);
  }
  .en_foot_contact {
    font-size: 2.4rem;
  }
  .foot_contact_right img {
    width: 60px;
  }
  .contact_right_text {
    font-size: 1.4rem;
  }
  .foot_menu {
    font-size: 1.4rem;
    margin-bottom: 20px;
  }
  .top01_text {
    margin-bottom: 30px;
  }
  .top_catch {
    font-size: 5vw;
    line-height: 1.3;
    margin-bottom: 20px;
  }
  .en_title {
    font-size: 2.4rem;
    margin-bottom: -5px;
    padding: 8px;
  }
  .com_title {
    font-size: 2rem;
  }
  .top03_text {
    margin-bottom: 30px;
  }
  .top04_entitle {
    font-size: 2rem;
  }
  .top04_jptext {
    font-size: 1.4rem;
  }
  .slide_ball:after {
    width: 20px;
    height: 20px;
    bottom: -10px;
  }
  .price_box:hover .slide_ball:after {
    left: 80px;
  }
  .faq_box:hover .slide_ball:after {
    left: 80px;
  }
  .top05_in:before {
    width: calc(100vw - 60px);
  }
  .news_list_wrap {
    padding-top: 60px;
  }
  .topic_title {
    font-size: 1.4rem;
  }
  .price02 {
    display: block;
  }
  .price02_left {
    width: 100%;
    border-width: 1px 0 0 0;
    display: flex;
    align-items: center;
  }
  .price02_left_num {
    border-bottom: none;
    height: 100%;
    width: 20%;
  }
  .price02_pic {
    height: 40vw;
    width: 80%;
    border-left: 1px solid var(--m-c);
  }
  .price02_right {
    width: 100%;
    padding: 5%;
  }
  /*  tab-faq*/
  /*ラベル*/
  .accbox:after {
    width: calc(100vw - 60px);
  }
  .accbox label {
    padding: 20px 60px 20px 80px;
  }
  .accbox label:before {
    font-size: 1.6rem;
    width: 60px;
  }
  /*中身を非表示にしておく*/
  .accbox .accshow {
    padding: 0 0 0 80px;
  }
  /*クリックで中身表示*/
  .cssacc:checked + label + .accshow {
    padding: 2% 5% 2% 80px;
  }
  .news-list01 {
    flex-direction: column;
  }
  .news-list_wrap {
    border-width: 0 1px 1px 1px;
    width: 90%;
    padding: 50px 0 50px;
    margin: 0 auto;
  }
  .cate_menubox {
    padding: 4% 5%;
    width: 100%;
  }
  .catemenu_ul {
    position: static;
    top: auto;
  }
  .news-cont_wrap {
    flex-direction: column-reverse;
  }
  .news {
    width: 100%;
    border-width: 0 0 1px 0;
  }
}
@charset "UTF-8";
/* CSS Document */
@media (max-width: 667px) {
  body {
    font-size: 1.4rem;
  }
  .logo {
    width: 50px;
    margin-right: 0;
  }
  .head {
    height: 50px;
    padding-left: 2.5%;
    width: 100%;
    position: absolute;
    top: 28px;
    left: 0;
  }
  .head_title {
    position: absolute;
    top: -28px;
    left: 2.5%;
    line-height: 28px;
    height: 28px;
    font-size: 1.1rem;
  }
  .side_bar {
    border: none;
    width: 100px;
    height: 50px;
    position: sticky;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: row-reverse;
    margin: 0 0 0 auto;
    z-index: 9999;
  }
  .mobile {
    width: 50px;
    height: 50px;
    border: 1px solid var(--m-c);
    border-width: 1px 0 1px 0;
    background-color: #F7F5EC;
    z-index: 9998;
  }
  #panel-btn {
    width: 50px;
    height: 50px;
  }
  #panel-btn-icon {
    height: 30px;
  }
  #panel-btn-icon:before, #panel-btn-icon:after {
    height: 30px;
  }
  #panel {
    width: 100%;
    height: 100%;
    right: -100%;
    padding: 70px 20px;
  }
  #panel.block {
    right: 0;
    opacity: 1;
  }
  /* 戻った瞬間だけ、すべてのアニメーションを無効化する魔法のクラス */
.no-transition, 
.no-transition *, 
.no-transition *:before, 
.no-transition *:after {
    transition: none !important;
}
  #panel ul li {
    margin-bottom: 20px;
  }
  #panel ul li a {
    font-size: 1.4rem;
  }
  .contact_btn {
    height: 50px;
    min-height: 0;
    width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    writing-mode: horizontal-tb;
    position: static;
    border: 1px solid var(--m-c);
  }
  .pc_con {
    display: none;
  }
  .sp_con {
    display: block;
  }
  .wrapper {
    width: 100%;
  }
  /*sp-footer*/
  footer {
    width: 100%;
    margin-top: 100px;
  }
  .foot_contact {
    display: block;
    height: auto;
    padding: 8% 5%;
  }
  .foot_contact_title {
    text-align: center;
    margin-right: 0;
    margin-bottom: 20px;
  }
  .foot_contact_right {
    display: block;
    text-align: center;
  }
  .contact_right_text {
    margin-left: 0;
    margin-top: 10px;
  }
  .foot_cont {
    display: block;
  }
  .foot_menu_wrap {
    width: 100%;
    border-bottom: 1px solid var(--m-c);
  }
  .foot_menu {
    margin-bottom: 15px;
  }
  .foot_right {
    width: 100%;
    padding: 8% 5% 100px;
    border-left: none;
  }
  .foot_logo {
    margin-bottom: 15px;
  }
  .foot_ad {
    margin-bottom: 20px;
  }
  /* ////////////// sp-top/////////////*/
  .top01 {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    width: 95%;
    border: 1px solid var(--m-c);
    border-width: 0 1px 0 1px;
    margin: 0 auto 80px;
  }
  .top01:after {
    content: "";
    width: 100vw;
    height: 1px;
    background-color: var(--m-c);
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
  }
  .top01_textbox {
    width: 100%;
    padding: 2.5vw 2.5vw 50px;
  }
  .top01_textbox section {
    animation-delay: 1s;
  }
  .top01_right {
    width: 100%;
    padding: 2.5vw 2.5vw 0;
  }
  .top01_pic {
    height: 60vw;
  }
  .top_anime{
    animation-delay: 0.5s;
  }
  .top01_pic img {
    height: 120%;
  }
  .top_catch {
    font-size: 10vw;
  }
  .btn01 {
    height: 57px;
    padding-right: 30px;
  }
  .btn01:before {
    width: 57px;
    height: 57px;
  }
  .btn01:hover:before {
    border: 4px solid #E88383;
    transform: scale(1.1) translateY(-50%);
  }
  .btn01:hover:after {
    right: -20px;
  }
  .en_title {
    font-size: 1.8rem;
  }
  .screenshot {
    width: 50%;
  }
  .screenshot:nth-of-type(3n) {
    border-right: 1px solid var(--m-c);
  }
  .screenshot:nth-of-type(2n) {
    border-right: none;
  }
  .screenshot a {
    padding: 10%;
    display: block;
  }
  .top02 {
    margin-bottom: 80px;
  }
  .top03 {
    margin-bottom: 80px;
  }
  .top03_inner {
    display: block;
  }
  .top03_inner:after {
    display: none;
  }
  .top03_left {
    width: 95%;
    padding: 2.5vw 2.5vw 50px;
    margin: 0 auto;
    border-right: 1px solid var(--m-c);
    border-left: 1px solid var(--m-c);
  }
  .top03_textbox {
    width: 95%;
    padding: 2.5vw 2.5vw 50px;
    margin: 0 auto;
    border-right: 1px solid var(--m-c);
    border-left: 1px solid var(--m-c);
  }
  .com_title {
    font-size: 1.8rem;
    margin-bottom: 15px;
  }
  .top04 {
    display: block;
    margin-bottom: 80px;
  }
  .price_box {
    width: 100%;
    border-right: 0;
    padding: 30px 0;
  }
  .top04_right {
    width: 100%;
    display: flex;
  }
  .faq_box {
    width: 50%;
    padding: 50px 0;
  }
  .faq_box:first-of-type {
    border-right: 1px solid var(--m-c);
  }
  .top05_in {
    width: 95%;
  }
  .top05_in:before {
    width: 100vw;
  }
  .news_list_wrap {
    padding-top: 40px;
  }
  .news_text {
    width: 61%;
    padding: 2% 3%;
  }
  .top_eyecatch {
    width: 39%;
    padding-top: 26%;
    min-width: 0;
    min-height: 0;
  }
  .topic_title {
    font-size: 1.2rem;
    margin-bottom: 5px;
  }
  .list_date {
    font-size: 1.2rem;
  }
  .cate_list {
    font-size: 1.2rem;
  }
  /* ////////////// sp-about/////////////*/
  .en_subtitle {
    font-size: 1.8rem;
  }
  .about01 {
    flex-direction: column-reverse;
  }
  .about01_right {
    width: 95%;
    border: 1px solid var(--m-c);
    border-width: 0 1px 0 1px;
    margin: 0 auto;
  }
  .about01_left {
    width: 95%;
    border: 1px solid var(--m-c);
    border-width: 1px 1px 0 1px;
    margin: 0 auto;
  }
  .about_pic {
    height: 60vw;
  }
  .about_pic img {
    height: 130%;
  }
  .about01_rightpic {
    height: 41.3vw;
  }
  .about01_rightpic img {
    height: 120%;
  }
  .about02 {
    display: block;
    width: 95%;
    border: 1px solid var(--m-c);
    border-width: 0 1px 0 1px;
    margin: 0 auto;
  }
  .about02_textbox {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--m-c);
  }
  .about02_right {
    width: 100%;
  }
  .about03 {
    flex-direction: column-reverse;
    margin-bottom: 80px;
  }
  .about03_textbox {
    width: 95%;
    border: 1px solid var(--m-c);
    border-width: 1px 1px 0 1px;
    margin: 0 auto;
  }
  .about_pic03 {
    height: 41.3vw;
  }
  .com_dl {
    width: 95%;
    padding: 50px 0;
  }
  .com_dt {
    padding: 20px 0 20px 10px;
  }
  .staff_wrap {
    margin-bottom: 80px;
  }
  .staff_box {
    width: 95%;
    padding: 8% 5%;
  }
  .staff_pic {
    width: min(60%,150px);
    margin: 0 auto 20px;
  }
  .prof_name {
    font-size: 1.6rem;
  }
  .prof_info {
    margin-bottom: 10px;
  }
  /* ////////////// sp-works/////////////*/
  .works01 {
    padding: 50px 0;
  }
  /* ////////////// sp-service/////////////*/
  .cl01 {
    font-size: min(5vw, 2.4rem);
  }
  .cl02_pic {
    height: 50vw;
  }
  .cl03 {
    flex-direction: column;
    width: 95%;
    margin: 0 auto;
    border-left: 1px solid var(--m-c);
    border-right: 1px solid var(--m-c);
  }
  .cl03:last-of-type {
    border-bottom: none;
  }
  .cl_textbox {
    width: 100%;
    border-bottom: 1px solid var(--m-c);
  }
  .cl_pic_wrap {
    width: 100%;
    border-left: none;
  }
  .boder_r, .boder_l {
    border: none;
  }
  .sp_cl03 {
    flex-direction: column-reverse;
  }
  .btn_cl {
    margin-top: 50px;
  }
  .cl03_wrap {
    border-bottom: 1px solid var(--m-c);
  }
  /*  ////////sp-price/////////*/
  .price01_title {
    font-size: min(6vw, 2.4rem);
  }
  .price02_left_num {
    padding: 2%;
  }
  .case {
    font-size: 1.4rem;
  }
  .price02_title {
    font-size: 1.6rem;
  }
  .function {
    height: 60px;
  }
  .price02_pic {
    padding: 2%;
  }
  .flow_num {
    font-size: 1.8rem;
    min-width: 30px;
  }
  .flow-box {
    width: 95%;
  }
  .flow_text_box {
    padding: 4% 2% 4% 4%;
  }
  .flow-wrap {
    padding-bottom: 50px;
  }
  /*/////////sp-faq/////////////*/
  /*ラベル*/
  .accbox {
    width: 95%;
    padding: 50px 0;
  }
  .accbox:after {
    width: 100vw;
  }
  .accbox label {
    padding: 15px 35px 15px 55px;
  }
  .accbox label:before {
    font-size: 1.6rem;
    width: 40px;
  }
  /*中身を非表示にしておく*/
  .accbox .accshow {
    padding: 0 0 0 55px;
  }
  /*クリックで中身表示*/
  .cssacc:checked + label + .accshow {
    padding: 2% 5% 2% 55px;
  }
  /*アイコンを表示*/
  .accbox label:after {
    width: 20px;
    height: 20px;
  }
  /*/////////sp-contact/////////////*/
  .cantact01 {
    text-align: left;
  }
  .contact02 {
    margin-bottom: 30px;
  }
  #formWrap {
    padding: 8% 5% 10%;
  }
  #formWrap h4 {
    font-weight: 500;
  }
  .radiobutton {
    padding-top: 0px;
  }
  .radiobutton label {
    padding: 0 20px 0 35px; /* ラベルの位置 */
    font-size: 14px;
    width: auto;
  }
  .name_wrap {
    margin-bottom: 30px;
  }
  /*/////////sp-newslist/////////////*/
  .catemenu_ul li {
    margin-bottom: 15px;
  }
/*  ページャー*/
.pagination {
  margin-top:  50px;
}
.pagination .page-numbers {
  margin: 0 3px;
  width: 35px;
  height: 35px;
}
  .news_title {
    font-size: min(5.3vw, 2.4rem);
  }
  .control {
    display: block;
  }
  .control:after {
    display: none;
  }
  .cont_box {
    width: 100%;
  }
  .prev_box {
    border-right: none;
    padding-left: 50px;
    border-bottom: 1px solid var(--m-c);
  }
  .prev_box:before {
    width: 20px;
    height: 20px;
    background-size: 20px 20px;
  }
  .prev_box:after {
    left: 5px;
    top: calc(50% + 15px);
    width: auto;
  }
  .next_box {
    padding-right: 50px;
  }
  .next_box:before {
    width: 20px;
    height: 20px;
    background-size: 20px 20px;
  }
  .next_box:after {
    top: calc(50% + 15px);
    width: auto;
  }
  .prev_box:hover.prev_box:before {
    left: -5px;
  }
  .next_box:hover.next_box:before {
    right: -5px;
  }
  .news_sum {
    width: 50%;
    padding-top: 33.33333%;
  }
  .cont_title {
    width: 50%;
    line-height: 1.5;
  }
  .news_wrap {
    margin-bottom: 50px;
  }
  .gene_input {
	height: 60px;
	border-radius: 15px;
}
}