@charset "utf-8";
/* CSS Document */

/* これはいらないかも */
html,body { height:100%; }
*{ font-family: "Noto Sans JP", "游ゴシック体", YuGothic, "YuGothic M", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, "ヒラギノ角ゴ Pro W3", sans-serif; }
*, *:before, *:after {
box-sizing: border-box;  /* paddingやborderに依存しないwidth,height指定 */
}
html { font-size: 62.5%; -webkit-text-size-adjust: 100%; } /* スマホで勝手に文字が大きくなるのを制御　-webkit-text-size-adjust:100% */
body {
color: #383030;
background: #fff;
line-height: 1.65em;
letter-spacing: 0.05em;
font-size: 1.5rem; /* 15px */
font-weight: 500;
}
@media screen and (max-width: 767px) {
  body { font-size: 1.4rem; /* 14px */ }
}

/* 	ふわっと切り替え */
a {
text-decoration: none;
color: #383030;
transition: 0.5s;
}
a:hover {
text-decoration: none;
color:#383030;
opacity: 0.7;
}

dt, dd {
line-height: 1.7em;
}
ul, ol, ul li, ol li {
list-style: none;
}
img { vertical-align: top } /* 画像の下の余白を消す */

/* Pタグで改行するとlightheightが効かないのを防ぐ */
br { line-height: 1; }
h1 { margin: 0px; }

.br-pc { display: block !important; }
.br-sp { display: none !important; }
.notel { pointer-events: none; } /* 電話無効 */
@media screen and (max-width: 833px) {
  .br-pc { display: none !important; }
  .br-sp { display: block !important; }
  .notel { pointer-events: auto; } /* 電話有効 */
}

/*************************************************/
/*    head
/*************************************************/

header {
display: flex;
justify-content: space-between;
margin: 0px auto;
padding: 0px;
width: 100%;
height: 50px;
}
.head_left {
width: 20%;
}
.logo {
margin-top: 5px;
margin-left: 20px;
width: 85px;
}
.logo a:hover {
opacity: 1;
}
.logo img {
width: 100%;
height: auto;
}
/* sp */
.head_right {
display: flex;
justify-content: flex-end;
position: relative;
margin-right: 3%;
width: 80%;
}
.h_tel {
position: absolute;
top: 15px;
right: 65px;
width: 26px;
}
.h_tel img {
width: 100%;
height: auto;
}
/* メニューボタン */
.menubutton {
position: absolute;
top: 19px;
right: 15px;
width: 28px;
z-index: 100;
cursor: pointer;
}
.h_mail {
width: 100%;
}
.h_mail img {
width: 100%;
height: auto;
}
.menubutton.open .h_mail {
display: none;
}
.menubutton i {
display: none;
position: absolute;
top: 15px;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
width: 30px;
height: 2px;
background: #383030;
border-radius: 4px;
transition-property: top, opacity, transform;
transition-duration: 0.5s;
z-index: 110;
}
.menubutton.open i {
display: block;
}
.menubutton.open i:last-child {
transform: translate(-50%, -50%) rotate(-45deg);
}
/* メニュー */
.sp_menu {
position: fixed;
top: 0;
right: -100%;
width: 100%;
height: 100vh;
background: #e4e6fb;
transition: all .5s;
z-index: 90;
}
.sp_menu.open {
right: 0;
}
.sp_menu ul {
margin: 50px 0 0 0;
padding: 0;
list-style: none;
}
.sp_menu li {
margin: 0px auto 30px;
padding: 25px 0 30px;
width: 80%;
font-size: 2.0rem;
text-align: center;
background: #fff;
border-radius: 13px;
}
.sp_menu li.read_txt {
margin-bottom: 25px;
padding: 0px;
font-size: 1.9rem;
line-height: 180%;
background: none;
}
.sp_menu ul a.cell,
.sp_menu ul a.buy {
display: block;
margin: 15px auto 0px;
padding: 15px 0px;
width: 80%;
font-size: 2.0rem;
text-align: center;
color: #fff;
background:linear-gradient(#54b729, #108c00);
border-radius: 50px;
}
.sp_menu ul a.buy {
background:linear-gradient(#ffb432, #ff7800);
}
@media screen and (min-width: 834px) {
  header {
  height: 88px;
  }
  .head_left {
  display: flex;
  align-items: flex-end;
  }
  .logo {
  margin-left: 20px;
  width: 118px;
  }
  .head_right {
  align-items: flex-end;
  margin-right: 20px;
  }
  .h_tel_pc {
  margin-bottom: 9px;
  width: 220px;
  }
  .h_tel_pc img {
  width: 100%;
  height: auto;
  }
  .h_contact {
  display: flex;
  margin: 0px 0px 4px 15px;
   }
  a.h_cell_pc,
  a.h_buy_pc {
  position: relative;
  display: block;
  margin: 0px;
  padding: 0px;
  width: 190px;
  height: 58px;
  line-height: 58px;
  font-size: 1.4rem;
  text-align: center;
  color: #fff;
  border-radius: 50px;
  z-index: 0;
  }
  a.h_cell_pc:before,
  a.h_buy_pc:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  left: 0;
  transition: 0.5s;
  background: linear-gradient(#78d73f, #108c00);
  border-radius: 50px;
  }
  a.h_buy_pc:before {
  background: linear-gradient(#ffac2d, #ff7800);
  }
  a.h_cell_pc:after,
  a.h_buy_pc:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -2;
  left: 0;
  background: linear-gradient(to right, #50cc7f 0%, #f5d100 100%);
  border-radius: 50px;
  }
  a.h_buy_pc:after {
  background: linear-gradient(to right, #ff9000 0%, #f9d423 100%);
  }
  a.h_cell_pc:hover,
  a.h_buy_pc:hover {
  opacity: 1;
  }
  a.h_cell_pc:hover:before,
  a.h_buy_pc:hover:before {
  opacity: 0;
  }
  span.conta_ttl_b {
  font-size: 1.8rem;
  }
}

@media (min-width: 1200px) {
  .logo {
  margin-left: 75px;
  width: 129px;
  }
  .head_right {
  margin-right: 75px;
  }
  .h_tel_pc {
  margin-right: 7px;
  width: 240px;
  }
  a.h_cell_pc,
  a.h_buy_pc {
  width: 215px;
  font-size: 1.6rem;
  }
  span.conta_ttl_b {
  font-size: 2.0rem;
  }
}

/*************************************************/
/*    visual
/*************************************************/

h1.h1 {
margin: 15px 0px 0px 0px;
font-size: 3.5rem;
font-weight: 700;
line-height: 120%;
color: #120e44;
text-shadow: 0px 0px 5px rgba(255, 255, 255, 1), 0px 0px 5px rgba(255, 255, 255, 1), 0px 0px 5px rgba(255, 255, 255, 1);
letter-spacing: -1px;
}
.visual {
position: relative;
width: 100%;
aspect-ratio: 1 / 1.4;
overflow: hidden;
}
.visual_line {
position: absolute;
top: -1.5%;
left: 0px;
width: 100%;
z-index: 0;
}
.visual_line img {
margin-left: -12%;
width: 150%;
height: auto;
}
.visual_img01 {
position: absolute;
top: 2.0%;
right: 50%;
width: 95%;
margin-right: -37%;
transform: translate(50%,0%); /* positionに対して要素を中央に配置させる */
}
.visual_img02 {
position: absolute;
top: 0%;
left: 0%;
width: 59%;
margin-top: 43%;
margin-left: 22%;
transform: translate(-50%, 50%);
}
.visual_cont {
position: absolute;
top: 15px;
left: 20px;
z-index: 30;
}
.visual_eng,
.visual_eng span.top {
font-family: "Outfit", sans-serif;
font-optical-sizing: auto;
margin: 0px 0px 15px;
font-size: 3.0rem;
font-weight: 600;
color: #332f60;
line-height: 90%;
text-shadow: 0px 0px 7px rgba(255, 255, 255, 0.8);
letter-spacing: 0;
}
.visual_eng span.top {
color: #5c5eb8;
}
.visual_txt {
display: inline;
font-size: 2.2rem;
font-weight: 600;
line-height: 150%;
text-shadow: 0px 0px 5px rgba(255, 255, 255, 1), 0px 0px 5px rgba(255, 255, 255, 1);
background: linear-gradient(transparent 75%, #ffe244 75%);
}

@media screen and (min-width: 425px) and (max-width: 649px) {
  .visual_eng,
  .visual_eng span.top {
  font-size: 3.5rem;
  }
}
@media screen and (min-width: 650px) and (max-width: 833px) {
  h1.h1 {
  font-size: 4.5rem;
  }
  .visual_cont {
  top: 45px;
  left: 40px;
  }
  .visual_eng,
  .visual_eng span.top {
  font-size: 5.5rem;
  }
  .visual_txt {
  font-size: 3.2rem;
  }
}
@media screen and (min-width: 450px) and (max-width: 833px) {
  .visual {
  aspect-ratio: 1 / 1.05;
  }
  .visual_line img {
  margin-left: -3%;
  width: 112%;
  }
  .visual_img01 {
  width: 70%;
  margin-right: -21%;
  }
  .visual_img02 {
  width: 40%;
  margin-top: 37%;
  }
}
@media screen and (min-width: 834px) {
  h1.h1 {
  margin: 25px 0px 0px 0px;
  font-size: 5.5rem;
  }
  .visual {
  aspect-ratio: 2 / 2;
  }
  .visual_line {
  margin-top: 7%;
  }
  .visual_line img {
  margin-left: -22%;
  width: 170%;
  }
  .visual_img01 {
  top: 9%;
  width: 90%;
  margin-right: -52%;
  }
  .visual_img02 {
  width: 41%;
  margin-top: 35%;
  margin-left: 36%;
  }
  .visual_cont {
  top: 20px;
  left: 40px;
  }
  .visual_eng,
  .visual_eng span.top {
  margin: 0px 0px 30px;
  font-size: 7.0rem;
  }
  .visual_txt {
  font-size: 4.2rem;
  }
}
@media screen and (min-width: 1024px) {
  h1.h1 {
  margin: 25px 0px 0px 0px;
  font-size: 7.0rem;
  }
  .visual_line img {
  margin-left: -12%;
  width: 160%;
  }
  .visual_img01 {
  top: 9%;
  width: 85%;
  margin-right: -55.5%;
  }
  .visual_img02 {
  width: 38%;
  margin-top: 32%;
  margin-left: 43%
  }
  .visual_cont {
  left: 70px;
  }
  .visual_eng,
  .visual_eng span.top {
  font-size: 8.0rem;
  }
  .visual_txt {
  background: linear-gradient(transparent 80%, #ffe244 80%);
  }
}
@media screen and (min-width: 1200px) {
  .visual {
  aspect-ratio: 2 / 1.85;
  }
  .visual_line {
  margin-top: 100px;
  }
  .visual_line img {
  margin-left: -15%;
  width: 140%;
  }
  .visual_img01 {
  top: 132px;
  right: 50%;
  width: 73%;
  margin-right: -36.2%;
  }
  .visual_img02 {
  width: 34%;
  margin-top: 28%;
  margin-left: 33%;
  }
  .visual_cont {
  left: 100px;
  }
  .visual_eng,
  .visual_eng span.top {
  font-size: 8.5rem;
  }
}
@media screen and (min-width: 1366px) {
  h1.h1 {
  font-size: 7.5rem;
  }
  .visual {
  aspect-ratio: 2 / 1.55;
  }
  .visual_line {
  margin-top: 120px;
  }
  .visual_line img {
  margin-left: -7%;
  width: 114%;
  }
  .visual_img01 {
  top: 140px;
  width: 58%;
  margin-right: -25.2%;
  }
  .visual_img02 {
  width: 28%;
  margin-top: 26%;
  margin-left: 32%;
  }
  .visual_eng,
  .visual_eng span.top {
  font-size: 10rem;
  }
}
@media screen and (min-width: 1440px) {
  .visual_eng,
  .visual_eng span.top {
  font-weight: 500;
  }
}
@media screen and (min-width: 1536px) {
  h1.h1 {
  margin: 30px 0px 0px 0px;
  font-size: 8.0rem;
  line-height: 125%;
  }
  .visual_line img {
  margin-left: -10%;
  width: 116%;
  }
  .visual_img01 {
  top: 11%;
  width: 59%;
  margin-right: -24.2%;
  }
  .visual_img02 {
  width: 28%;
  margin-top: 24.5%;
  margin-left: 29.5%;
  }
  .visual_cont {
  top: 25px;
  left: 190px;
  }
  .visual_eng,
  .visual_eng span.top {
  margin: 0px 0px 35px;
  font-size: 10.7rem;
  }
  .visual_txt {
  font-size: 4.0rem;
  line-height: 165%;
  }
}


/*************************************************/
/*    H2
/*************************************************/

h2.h2_title {
padding: 10px 0px 0px;
font-size: 2.5rem;
font-weight: 600;
text-align: center;
line-height: 130%;
}
h2.h2_title.t_high {
padding: 40px 0px 0px;
}
span.title_read {
display: block;
padding-bottom: 10px;
font-family: "Poppins", serif;
font-size: 2.9rem;
font-weight: 600;
color: #4e57c6;
line-height: 100%;
letter-spacing: 0.1em;
}
.title_sub {
padding: 5px 0px 0px;
font-size: 2.0rem;
font-weight: 600;
text-align: center;
}
@media screen and (min-width: 768px) {
  h2.h2_title {
  font-size: 3.0rem;
  }
  span.title_read {
  padding-bottom: 15px;
  font-size: 3.9rem;
  }
  .title_sub {
  padding: 20px 0px 0px;
  font-size: 2.8rem;
  }
}
@media screen and (min-width: 1200px) {
  h2.h2_title {
  font-size: 4.0rem;
  font-weight: 500;
  }
  h2.h2_title.first {
  margin-top: -80px;
  }
  h2.h2_title.t_high {
  padding: 80px 0px 0px;
  }
  span.title_read {
  font-size: 4.2rem;
  font-weight: 500;
  }
  .title_sub {
  padding: 20px 0px 0px;
  font-size: 3.2rem;
  }
}
@media screen and (min-width: 1366px) {
  h2.h2_title.t_high {
  padding: 100px 0px 0px;
  }
  span.title_read {
  font-size: 4.5rem;
  }
}
@media screen and (min-width: 1536px) {
  h2.h2_title.first {
  margin-top: -100px;
  }
  span.title_read {
  padding-bottom: 18px;
  font-size: 4.5rem;
  }
  .title_sub {
  font-size: 3.2rem;
  }
}
/*************************************************/
/*    txt
/*************************************************/

.txt01,
.txt02 {
margin: 20px auto 30px;
width: 85%;
font-size: 1.5rem;
line-height: 155%;
}
.txt02 {
padding: 10px;
font-size: 1.4rem;
color: #152e54;
border: 1px dashed #152e54;
border-radius: 10px;
}
@media screen and (min-width: 768px) {
  .txt01,
  .txt02 {
  margin: 25px auto 30px;
  width: 75%;
  font-size: 1.6rem;
  text-align: center;
  line-height: 200%;
  }
}
@media screen and (min-width: 1200px) {
  .txt01,
  .txt02 {
  margin: 35px auto 100px;
  font-size: 1.7rem;
  line-height: 220%;
  }
  .txt02 {
  margin-top: 45px;
  padding: 20px 5px;
  width: 680px;
  font-size: 1.6rem;
  }
}

/*************************************************/
/*    purpose
/*************************************************/

.cont_syasen,
.cont_purple {
margin: 0px auto;
padding: 20px 0px 1px;
width: 100%;
background-image: url("../images/syasen.png");
}
.cont_purple {
padding: 30px 0px 1px;
background: #f7f8ff;
}
dl.purp_cont h3.h3_purpose {
font-size: 1.9rem;
text-align: center;
color: #fff;
font-weight: 600;
}
ul.purp_area {
margin: 30px auto;
width: 90%;
}
ul.purp_area li {
position: relative;
margin: 0px auto;
width: 100%;
max-width: 600px;
margin-bottom: 40px;
background: #fff;
border-radius: 15px;
filter: drop-shadow(0px 0px 5px rgba(65, 123, 147, 0.35));
overflow: hidden;
}
ul.purp_area li:before {
content: "01";
position: absolute;
left: -26px;
top: -2px;
background: #578ae2;
width: 90px;
height: 55px;
transform: rotate(39deg);
}
ul.purp_area li:after,
ul.purp_area li.num02:after,
ul.purp_area li.num03:after,
ul.purp_area li.num04:after {
content: "01";
position: absolute;
top: 6%;
left: 18px;
font-size: 2.3rem;
color: #fff;
}
ul.purp_area li.num02:after { content: "02"; }
ul.purp_area li.num03:after { content: "03"; }
ul.purp_area li.num04:after { content: "04"; }
dl.purp_cont {
width: 100%;
}
dl.purp_cont dt {
padding: 15px 0px 15px 25px;
background: #5961d0;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
dl.purp_cont dd {
position: relative;
padding: 25px 15px 200px;
}
dl.purp_cont dd p {
font-size: 1.6rem;
text-align: center;
}
dl.purp_cont dd:after {
content: "";
position: absolute;
bottom: -55px;
left: 50%;
width: 220px;
height: 157px;
background-image: url(../images/purpose_illust01.svg);
background-size: 100% 100%;
background-repeat: no-repeat;
transform: translate(-50%,-50%); /* positionに対して要素を中央に配置させる */
}
dl.purp_cont dd.ill02:after { background-image: url(../images/purpose_illust02.svg); }
dl.purp_cont dd.ill03:after { background-image: url(../images/purpose_illust03.svg); }
dl.purp_cont dd.ill04:after { background-image: url(../images/purpose_illust04.svg); }

@media screen and (min-width: 834px) {
  .cont_syasen,
  .cont_purple {
  padding: 60px 0px 1px;
  }
  ul.purp_area {
  margin: 45px auto 30px;
  }
  ul.purp_area li {
  margin-bottom: 60px;
  }
  dl.purp_cont h3.h3_purpose {
  font-size: 2.3rem;
  }
  ul.purp_area li:before {
  left: -14px;
  top: -2px;
  width: 130px;
  height: 60px;
  }
  ul.purp_area li:after,
  ul.purp_area li.num02:after,
  ul.purp_area li.num03:after,
  ul.purp_area li.num04:after {
  top: 6%;
  left: 40px;
  font-size: 3.0rem;
  letter-spacing: 0.1em;
  }
  dl.purp_cont dt {
  padding: 19px 0px 19px 0px;
  }
  dl.purp_cont dd p {
  font-size: 1.9rem;
  line-height: 160%;
  }
}
@media screen and (min-width: 1200px) {
  .cont_syasen,
  .cont_purple {
  padding: 80px 0px 1px;
  }
  ul.purp_area {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 75px auto 30px;
  max-width: 1200px;
  }
  ul.purp_area li {
  margin: 0px 80px 85px 0px;
  width: 46.2%;
  border-radius: 20px;
  filter: drop-shadow(0px 0px 7px rgba(212, 224, 237, 1));
  }
  ul.purp_area li:nth-child(even) {
  margin: 0px 0px 85px 0px;
  }
  ul.purp_area li:before {
  left: -19px;
  top: -4px;
  transform: rotate(42deg);
  }
  dl.purp_cont dt {
  padding: 22px 0px 22px 0px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  }
  dl.purp_cont h3.h3_purpose {
  font-size: 2.6rem;
  font-weight: 500;
  }
  dl.purp_cont dd {
  padding: 33px 15px 270px;
  }
  dl.purp_cont dd p {
  font-size: 2.0rem;
  }
  dl.purp_cont dd:after {
  width: 271px;
  height: 194px;
  }
}

/*************************************************/
/*    merit
/*************************************************/

h3.h3_merit {
padding: 16% 0px 0px;
text-align: center;
font-size: 2.0rem;
font-weight: 600;
line-height: 120%;
color: #fff;
letter-spacing: 0.1em;
text-shadow: 0px 0px 5px #2f6e00, 0px 0px 5px #2f6e00;
}
.merit_wrp {
margin-bottom: 30px;
}
.merit_cont {
margin: 30px auto 0px;
width: 300px;
aspect-ratio: 1 / 0.984;
background-position: center center;
background-image: url(../images/merit_circle_green.svg);
background-size: cover;
background-repeat: no-repeat;
}
.merit_cont.m_blue { background-image: url(../images/merit_circle_blue.svg); }
.merit_cont.m_orange { background-image: url(../images/merit_circle_orange.svg); }
.merit_txt {
position: relative;
margin: 0px;
padding: 75px 0px 0px;
text-align: center;
font-size: 1.6rem;
font-weight: 600;
line-height: 135%;
color: #fff;
text-shadow: 0px 0px 5px #2f6e00, 0px 0px 5px #2f6e00;
}
.merit_cont.m_blue h3.h3_merit,
.merit_cont.m_blue .merit_txt {
text-shadow: 0px 0px 5px #002aa3, 0px 0px 5px #002aa3;
}
.merit_cont.m_orange h3.h3_merit,
.merit_cont.m_orange .merit_txt {
text-shadow: 0px 0px 5px #b14300, 0px 0px 5px #b14300;
}
.merit_txt:before {
content: "";
position: absolute;
top: 37px;
left: 50%;
width: 120px;
height: 64px;
background-image: url(../images/merit_icon_green.svg);
background-size: 100% 100%;
background-repeat: no-repeat;
transform: translate(-50%,-50%); /* positionに対して要素を中央に配置させる */
}
.merit_cont.m_blue .merit_txt:before { background-image: url(../images/merit_icon_blue.svg); }
.merit_cont.m_orange .merit_txt:before { background-image: url(../images/merit_icon_orange.svg); }

@media screen and (min-width: 1024px) {
  h3.h3_merit {
  padding: 19% 0px 0px;
  font-size: 2.2rem;
  }
  .merit_wrp {
  display: flex;
  margin: 30px auto 50px;
  padding: 0px 20px;
  max-width: 1265px;
  }
  .merit_cont {
  width: 32%;
  max-width: 357px;
  }
  .merit_txt {
  font-size: 1.8rem;
  }
  .merit_txt:before {
  top: 45px;
  width: 150px;
  height: 80px;
  }
}
@media screen and (min-width: 1200px) {
  .merit_wrp {
  margin: 30px auto 130px;
  }
  .merit_txt {
  padding: 95px 0px 0px;
  line-height: 140%;
  }
  .merit_txt:before {
  top: 47px;
  }
}

/*************************************************/
/*    top contact
/*************************************************/

.t_contact_bg {
margin: 0px;
padding-bottom: 40px;
width: 100%;
background: #1a264e;
}
.cona_ttl_area {
margin: 0px auto;
padding-top: 40px;
text-align: center;
}
.cona_ttl_area span.white_waku {
display: inline-block;
padding: 10px 25px;
background: #fff;
border-radius: 100px;
}
h3.h3_contact {
font-size: 1.9rem;
font-weight: 700;
text-align: center;
color: #1a264e;
}
h4.h4_contact,
h4.h4_contact.buy {
padding: 25px 0px 0px 125px;
font-size: 2.3rem;
font-weight: 700;
color: #229006;
}
h4.h4_contact.buy {
color: #fa8200;
}
.conta_txt {
padding: 20px 20px 30px;
font-size: 1.8rem;
color: #fff;
text-align: center;
line-height: 150%;
}
.conta_txt02,
.conta_txt02.right {
padding: 7px 15px 0px 125px;
font-size: 1.4rem;
line-height: 130%;
}
.bn_conta_cell,
.bn_conta_buy {
position: relative;
margin: 15px auto 45px;
padding-bottom: 25px;
width: 85%;
background: #fff;
border-radius: 15px;
transition-duration: 1s;
pointer-events: none; /* hover時に親要素を変更する parent */
}
.bn_conta_cell:hover,
.bn_conta_buy:hover {
background:linear-gradient(to right, #dff9d8 5%, #fff 50%);
background-color: #fff;
transition-duration: 1s;
}
.bn_conta_buy:hover { background:linear-gradient(to right, #fceeca 5%, #fff 50%); background-color: #fff; }
.bn_conta_buy { margin-bottom: 0px; }
.bn_conta_cell:before,
.bn_conta_buy:before {
content: "";
position: absolute;
bottom: 10px;
left: -15px;
width: 130px;
height: 183px;
background-image: url(../images/contact_illust_cell.svg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
.bn_conta_buy:before {
height: 181px;
background-image: url(../images/contact_illust_buy.svg);
}
a.bncell,
a.bnbuy {
display: block;
margin: 7px 20px 0px 125px;
padding: 10px;
font-size: 1.7rem;
font-weight: 600;
color: #fff;
text-align: center;
background:linear-gradient(#54b729, #108c00);
border-radius: 100px;
transition-duration: 2s;
pointer-events: auto; /* hover時に親要素を変更する child */
}
a.bnbuy {
background:linear-gradient(#ff9200, #ff7800);
}
a.bncell:hover,
a.bnbuy:hover {
opacity: 1;
background:linear-gradient(#78d73f, #108c00);
transition: 1s;
}
a.bnbuy:hover {
background:linear-gradient(#ffb432, #ff7800);
}
/* tel */
h3.h3_conttel {
padding: 3px 0px 0px 0px;
font-size: 1.9rem;
font-weight: 700;
text-align: center;
}
h4.h4_bn_teltime {
width: 100%;
margin: 13px 0px 5px;
font-size: 1.3rem;
font-weight: 500;
color: #fff;
text-align: center;
background: #767ede;
border-radius: 50px;
}
span.contread {
font-family: "Poppins", serif;
display: block;
padding-top: 15px;
font-size: 1.6rem;
font-weight: 600;
color: #4e57c6;
text-align: center;
}
.bn_conta_tel {
position: relative;
margin: 35px auto 15px;
padding-bottom: 15px;
width: 85%;
max-width: 1000px;
background: #fff;
border-radius: 15px;
transition-duration: 1s;
pointer-events: none; /* hover時に親要素を変更する parent */
}
.bn_telon {
margin: 13px auto 0px;
padding: 15px 10px 0px;
width: 80%;
border-top: 1px solid #777b89;
}
.bn_telon a {
display: block;
text-align: center;
}
.bn_telon img {
width: 100%;
max-width: 287px;
height: auto;
}
.bn_tel_txt {
font-size: 1.6rem;
font-weight: 700;
text-align: center;
}

@media screen and (max-width: 833px) {
  h4.h4_contact.buy {
  padding: 25px 125px 0px 20px;
  }
  .conta_txt02.right {
  padding: 7px 107px 0px 20px;
  }
  .bn_conta_buy:before {
  left: inherit;
  right: -15px;
  transform: scaleX(-1);
  }
  a.bnbuy {
  margin: 7px 125px 0px 20px;
  }
}
@media screen and (min-width: 834px) {
  .t_contact_bg {
  padding-bottom: 50px;
  }
  .cona_ttl_area {
  padding-top: 60px;
  }
  h3.h3_contact {
  font-size: 2.3rem;
  }
  .cona_ttl_area span.white_waku {
  padding: 12px 40px;
  }
  .conta_txt {
  padding: 20px 20px 30px;
  font-size: 2.8rem;
  }
  .conta_txt02 {
  font-size: 1.5rem;
  }
  .bn_conta_cell,
  .bn_conta_buy {
  margin: 15px 0px 45px;
  width: 46%;
  max-width: 530px;
  }
  .conta_banner {
  display: flex;
  justify-content: space-between;
  width: 85%;
  max-width: 1150px;
  margin: 0px auto;
  filter: drop-shadow(0px 0px 7px rgba(6, 21, 71, 1));
  }
  a.bncell,
  a.bnbuy {
  position: relative;
  display: block;
  margin-top: 13px;
  padding: 0px;
  height: 58px;
  font-size: 1.8rem;
  line-height: 58px;
  z-index: 0;
  }
  a.bncell:before,
  a.bnbuy:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  left: 0;
  transition: 0.5s;
  background: linear-gradient(#78d73f, #108c00);
  border-radius: 50px;
  }
  a.bnbuy:before {
  background: linear-gradient(#ffac2d, #ff7800);
  }
  a.bncell:after,
  a.bnbuy:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -2;
  left: 0;
  background: linear-gradient(to right, #50cc7f 0%, #f5d100 100%);
  border-radius: 50px;
  }
  a.bnbuy:after {
  background: linear-gradient(to right, #ff9000 0%, #f9d423 100%);
  }
  a.bncell:hover,
  a.bnbuy:hover {
  opacity: 1;
  }
  a.bncell:hover:before,
  a.bnbuy:hover:before {
  opacity: 0;
  }
  .bn_conta_tel {
  margin-top: 0px;
  }
}
@media screen and (min-width: 1200px) {
  .t_contact_bg.btmver {
  padding-bottom: 80px;
  }
  .cona_ttl_area {
  padding-top: 80px;
  }
  h4.h4_contact,
  h4.h4_contact.buy {
  padding: 32px 0px 0px 195px;
  font-size: 3.0rem;
  }
  .conta_txt {
  padding: 30px 20px 55px;
  font-size: 3.3rem;
  }
  .conta_txt02,
  .conta_txt02.right {
  padding: 16px 15px 0px 195px;
  font-size: 1.9rem;
  line-height: 150%;
  }
  .bn_conta_cell,
  .bn_conta_buy {
  padding-bottom: 30px;
  }
  .bn_conta_cell:before,
  .bn_conta_buy:before {
  width: 185px;
  height: 259px;
  mix-blend-mode: multiply; /* 乗算 */
  }
  .bn_conta_buy:before {
  height: 261px;
  }
  a.bncell,
  a.bnbuy {
  margin: 15px 20px 0px 195px;
  max-width: 260px;
  font-size: 2.2rem;
  }
  /* telありbanner */
  h3.h3_conttel {
  padding: 15px 0px 0px 0px;
  font-size: 2.4rem;
  }
  .conta_banner.ctasec {
  margin: -30px auto -30px;
  max-width: 1000px;
  }
  .conta_banner.ctasec .bn_conta_cell,
  .conta_banner.ctasec .bn_conta_buy {
  padding-bottom: 30px;
  width: 50%;
  max-width: 480px;
  }
  .conta_banner.ctasec h4.h4_contact,
  .conta_banner.ctasec h4.h4_contact.buy {
  padding: 32px 0px 0px 202px;
  font-size: 2.4rem;
  }
  .conta_banner.ctasec .conta_txt02,
  .conta_banner.ctasec .conta_txt02.right {
  font-size: 1.6rem;
  }
  .conta_banner.ctasec .bn_conta_cell:before,
  .conta_banner.ctasec .bn_conta_buy:before {
  bottom: 15%;
  left: 30px;
  width: 145px;
  height: 145px;
  background-image: url(../images/contact_illust_cell_small.svg);
  }
  .conta_banner.ctasec .bn_conta_buy:before {
  background-image: url(../images/contact_illust_buy_small.svg);
  }
  .conta_banner.ctasec .conta_txt02,
  .conta_banner.ctasec .conta_txt02.right {
  padding: 10px 15px 0px 202px;
  }
  .conta_banner.ctasec a.bncell,
  .conta_banner.ctasec a.bnbuy {
  margin: 10px 20px 0px 195px;
  max-width: 225px;
  height: 45px;
  font-size: 1.8rem;
  line-height: 45px;
  }
  .bn_conta_tel {
  display: flex;
  margin-top: 25px;
  padding: 30px 0px;
  height: 170px;
  }
  .bn_tel_left,
  .bn_tel_right {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 50%;
  border-right: 1px solid #777b89;
  }
  .bn_tel_right {
  border: none;
  }
  .bn_telon {
  margin: 0px;
  padding: 0px;
  width: 290px;
  border: none;
  }
  span.contread {
  padding-top: 0px;
  font-size: 1.8rem;
  }
  h4.h4_bn_teltime {
  margin: 16px 0px 5px;
  padding: 4px;
  line-height: 100%;
  }
}
@media screen and (min-width: 1366px) {
  h4.h4_contact,
  h4.h4_contact.buy {
  padding: 35px 0px 0px 225px;
  }
  .conta_txt02,
  .conta_txt02.right {
  padding: 18px 15px 0px 225px;
  }
  .bn_conta_cell,
  .bn_conta_buy {
  padding-bottom: 40px;
  }
  .bn_conta_cell:before,
  .bn_conta_buy:before {
  left: 22px;
  bottom: 30px;
  }
  a.bncell,
  a.bnbuy {
  margin: 18px 20px 0px 225px;
  font-weight: 500;
  }
}

/*************************************************/
/*    service
/*************************************************/

h3.h3_futai {
position: relative;
margin: 0px auto;
width: 100%;
font-size: 1.8rem;
font-weight: 700;
text-align: center;
color: #33354f;
}
h3.h3_futai:after {
content: "";
position: absolute;
bottom: -17px;
left: 50%;
width: 100%;
border: 1px dashed #595c83;
transform: translate(-50%,-50%); /* positionに対して要素を中央に配置させる */
}
ul.service {
margin-top: 25px;
}
ul.service li {
margin: 0px auto 20px;
padding: 20px 15px 30px;
width: 85%;
background: #fff;
border-radius: 13px;
border: 3px solid #9398de;
}
dl.serve dt {
margin: 0px 0px 8px;
text-align: center;
}
dl.serve dt img {
width: 30px;
height: auto;
}
dl.serve dd {
position: relative;
padding-bottom: 50px;
font-size: 1.8rem;
color: #1a115b;
font-weight: 600;
text-align: center;
line-height: 120%;
}
dl.serve dd.first {
padding-bottom: 60px;
}
dl.serve dd:after {
content: "";
position: absolute;
bottom: -50px;
left: 50%;
width: 80px;
height: 70px;
background-size: 100% 100%;
background-repeat: no-repeat;
transform: translate(-50%,-50%); /* positionに対して要素を中央に配置させる */
}
dl.serve dd.s_one:after { background-image: url(../images/service_icon01.svg); }
dl.serve dd.s_two:after { background-image: url(../images/service_icon02.svg); }
dl.serve dd.s_three:after { background-image: url(../images/service_icon03.svg); }
dl.serve dd.s_four:after { background-image: url(../images/service_icon04.svg); }

.service_futai {
margin: 0px auto 30px;
padding: 15px 25px;
width: 85%;
max-width: 755px;
background: #fff;
border: 3px solid #9398de;
border-radius: 10px;
}
.futai {
margin: 30px 0px 0px;
font-size: 1.5rem;
color: #33354f;
}
@media screen and (min-width: 834px) {
  h3.h3_futai {
  font-size: 2.2rem;
  letter-spacing: 0.1em;
  }
  h3.h3_futai:after {
  bottom: -30px;
  }
  ul.service {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 60px auto 20px;
  width: 80%;
  }
  ul.service li {
  width: 42%;
  margin: 0px 17px 35px;
  }
  .service_futai {
  margin: 0px auto 60px;
  padding: 30px 45px 35px;
  }
  .futai {
  margin: 60px 0px 0px;
  font-size: 1.7rem;
  text-align: center;
  }
}
@media screen and (min-width: 1200px) {
  h3.h3_futai {
  font-size: 2.3rem;
  }
  h3.h3_futai:after {
  bottom: -35px;
  }
  ul.service {
  flex-wrap: nowrap;
  margin: 60px auto 25px;
  width: 90%;
  max-width: 930px;
  }
  ul.service li {
  margin: 0px 10px 35px;
  padding: 25px 0px 35px;
  background: none;
  border: none;
  }
  dl.serve dt {
  position: relative;
  margin: 0px 0px 70px;
  }
  dl.serve dt:before {
  content: "";
  position: absolute;
  bottom: -50px;
  left: 50%;
  border-radius: 20px;
  width: 15px;
  height: 15px;
  background: #acb0e4;
  transform: translate(-50%,-50%); /* positionに対して要素を中央に配置させる */
  }
  dl.serve dt:after {
  content: "";
  position: absolute;
  bottom: -36px;
  left: 62%;
  width: 84%;
  height: 2px;
  background: #b0b3dd;
  }
  dl.serve dt.lineno:after {
  content: none;
  }
  dl.serve dt img {
  width: 50px;
  }
  dl.serve dd,
  dl.serve dd.first {
  padding-bottom: 70px;
  font-size: 2.0rem;
  }
  dl.serve dd:after {
  bottom: -70px;
  width: 95px;
  height: 83px;
  }
  .service_futai {
  margin: 0px auto 115px;
  padding: 30px 65px 40px;
  max-width: 760px;
  border-radius: 12px;
  }
  .futai {
  margin: 70px 0px 0px;
  }
}
@media screen and (min-width: 1366px) {
  ul.service li {
  margin: 0px 0px 35px;
  }
  dl.serve dt:before {
  width: 16px;
  height: 16px;
  }
  dl.serve dt:after {
  width: 75%;
  }
  dl.serve dd,
  dl.serve dd.first {
  padding-bottom: 85px;
  font-size: 2.1rem;
  }
  dl.serve dd:after {
  width: 101px;
  height: 88px;
  }
  .service_futai {
  padding: 35px 65px 50px;
  }
  .futai {
  margin: 75px 0px 0px;
  }
}

/*************************************************/
/*    object
/*************************************************/

h3.h3_object {
padding: 9px 0px 0px;
font-size: 1.7rem;
font-weight: 700;
line-height: 130%;
}
h3.h3_object02 {
margin: -10px 20px 0px;
font-size: 1.4rem;
font-weight: 600;
}
ul.object_wrp {
margin: 20px auto;
}
ul.object_wrp li.wrp {
position: relative;
margin: 0px auto 40px;
width: 85%;
color: #1d140d;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 5px;
filter: drop-shadow(0px 0px 3px #d9d9d9);
}
.obje_new {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: -15px;
left: -15px;
width: 50px;
height: 50px;
font-size: 1.5rem;
font-weight: 600;
text-align: center;
color: #fff;
background: #ee3a3a;
border-radius: 200px;
letter-spacing: 0;
z-index: 10;
filter: drop-shadow(0px 0px 3px rgba(189, 153, 153, 0.7));
}
.obje_head {
display: flex;
border-bottom: 1px solid #e4e1e1;
}
.obje_cate_img {
margin: 15px 0px 15px 20px;
width: 100px;
}
.obje_cate_img img {
width: 100%;
height: auto;
}
.obje_hright {
padding: 19px 15px;
}
.obje_area {
display: flex;
align-items: center;
margin: 0px 0px 12px;
}
.area_ttl {
padding: 5px 7px;
font-size: 1.3rem;
line-height: 100%;
background: #f7f7f7;
border: 1px solid #c5c5c5;
border-radius: 5px;
}
.a_name {
padding: 0px 0px 0px 8px;
font-size: 1.4rem;
line-height: 100%;
}
.obje_cost {
padding: 0px 0px 0px 2px;
}
.obje_cost .ob_syosai {
padding: 2px 0px 0px 0px;
font-size: 1.4rem;
line-height: 150%;
}
.obje_cost .hp_cost_ttl {
margin-bottom: 5px;
font-size: 1.2rem;
line-height: 100%;
}
.obje_cost .hp_cost {
font-size: 2.4rem;
}
.obje_cost .hp_cost span.en {
font-size: 1.8rem;
}
.obje_cate {
padding: 3px 0px 3px 20px;
font-size: 1.3rem;
color: #676767;
}
.obje_ttl_bg {
padding: 11px 20px 15px;
width: 100%;
background: #e4eaf9;
}
.obje_i_cont {
display: flex;
}
.obje_i_cell,
.obje_i_buy,
.obje_i_company {
margin: 0px 5px 0px 0px;
padding: 3px 8px 4px;
font-size: 1.2rem;
color: #fff;
line-height: 100%;
background: #359a15;
border-radius: 3px;
}
.obje_i_buy { background: #f18f10; }
.obje_i_company { background: #b281b8; }

dl.obje_list {
display: flex;
flex-wrap: wrap;
margin: 13px 20px;
}
dl.obje_list dt {
padding: 0px 0px 2px;
width: 33%;
font-size: 1.4rem;
white-space: nowrap;
}
dl.obje_list dd {
padding: 0px 0px 2px;
width: 67%;
font-size: 1.4rem;
}
ul.obje_list02 {
margin: 5px 15px 13px 20px;
}
ul.obje_list02 li {
padding-bottom: 6px;
font-size: 1.4rem;
text-indent: -1em;
padding-left: 1em;
line-height: 120%;
}
/* contact */
.obje_else_cont {
display: flex;
align-items: center;
flex-wrap: wrap;
padding: 15px 20px 20px;
width: 100%;
color: #434f5f;
background: url(../images/obje_tensen.png) left top repeat-x;
}
.obje_else_txt {
width: 62%;
font-size: 1.3rem;
font-weight: 600;
line-height: 150%;
}
.obje_no {
width: 38%;
font-size: 1.7rem;
font-weight: 600;
text-align: right;
}
.obje_no span.nosty {
font-size: 1.4rem;
}
a.obje_contact {
position: relative;
display: block;
margin: 12px auto 0px;
padding: 10px 0px;
width: 100%;
font-size: 1.6rem;
text-align: center;
color: #2b344b;
background: #f7f8ff;
border: 1px solid #676f83;
border-radius: 100px;
transition-duration: 1s;
z-index: 1;
}
a.obje_contact.cell:hover,
a.obje_contact.buy:hover {
color: #fff;
background: linear-gradient(to left, #50cc7f, #108c00);
border: 1px solid #108c00;
border-radius: 100px;
transition-duration: 1s;
opacity: 1;
}
a.obje_contact.buy:hover {
background: linear-gradient(to left, #ffb432, #ff7800);
border: 1px solid #ff7800;

}
@media screen and (min-width: 834px) {
  ul.object_wrp {
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  margin: 60px auto;
  }
  ul.object_wrp li.wrp {
  width: 45%;
  }
  .obje_else_cont {
  padding: 15px 25px 30px;
  }
}
@media screen and (min-width: 1200px) {
  ul.object_wrp li.wrp {
  margin: 0px 15px 40px;
  width: 30.5%;
  }
}
@media screen and (min-width: 1480px) {
  ul.object_wrp {
  margin: 80px auto;
  width: 1480px;
  }
  ul.object_wrp li.wrp {
  margin: 0px 20px 40px;
  width: 22%;
  }
}

/*************************************************/
/*    flow
/*************************************************/

h3.h3_flow {
position: relative;
margin: 0px auto;
padding: 0px 0px 0px 45px;
font-size: 2.0rem;
color: #fff;
font-weight: 700;
}
h3.h3_flow:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin-left: -65px;
width: 38px;
height: 38px;
background-size: 100% 100%;
background-image: url(../images/flow_icon_buy.svg);
background-repeat: no-repeat;
transform: translate(-50%,-50%); /* positionに対して要素を中央に配置させる */
}
h3.h3_flow.cell_img:before {
background-image: url(../images/flow_icon_cell.svg);
}
.flow_wrp {
margin: 30px auto;
width: 90%;
}
.flow_cont {
width: 100%;
}
.flow_ttl {
margin: 0px auto 20px;
padding: 13px 0px;
text-align: center;
background: #4e57c6;
border-radius: 8px;
}
.flow_block {
width: 100%;
background: #fff;
border-radius: 10px;
filter: drop-shadow(0px 0px 7px rgba(235, 235, 235, 1));
}
ul.flowlist {
margin: 0px auto 30px;
padding: 60px 0px 20px;
width: 100%;
}
ul.flowlist li {
position: relative;
margin: 0px auto 13px;
width: 90%;
}
ul.flowlist li:before {
content: "";
position: absolute;
top: -27px;
left: 94px;
width: 2px;
height: 140%;
background: #809c7a;
}
ul.flowlist li:last-child:before {
height: 119%;
}
ul.flowlist.flora li:before {
background: #c5a076;
}
ul.flowlist li:first-child:after,
ul.flowlist li:last-child:after {
content: "";
position: absolute;
left: 90px;
width: 10px;
height: 10px;
background: #337922;
border-radius: 20px;
}
ul.flowlist li:first-child:after {
top: -45px;
}
ul.flowlist li:last-child:after {
bottom: 1px;
background: #337922;
}
ul.flowlist.flora li:first-child:after,
ul.flowlist.flora li:last-child:after {
background: #d77409;
}
.flow_waku {
display: flex;
margin: 0px auto;
}
.flow_num {
position: relative;
margin: 0px 0px 30px 10px;
width: 130px;
}
.flow_num:before {
content: "";
position: absolute;
top: -14px;
left: 55px;
width: 58px;
height: 58px;
background: #e2f4de;
border-radius: 50px;
z-index: 10;
}
.flow_num.icon_ora:before {
background: #fdf0e1;
}
.flow_num:after {
content: "";
position: absolute;
top: -7px;
left: 63px;
width: 43px;
height: 43px;
mask-size: 100% 100%;
mask-image: url(../images/flow_icon01.svg);
mask-repeat: no-repeat;
background-color: #337922;
z-index: 20;
}
.flow_num.fnum02:after { mask-image: url(../images/flow_icon02.svg); }
.flow_num.fnum03:after { mask-image: url(../images/flow_icon03.svg); }
.flow_num.fnum04:after { mask-image: url(../images/flow_icon04.svg); }
.flow_num.fnum05:after { mask-image: url(../images/flow_icon05.svg); }
.flow_num.fnum06:after { mask-image: url(../images/flow_icon06.svg); }
.flow_num.fnum07:after { mask-image: url(../images/flow_icon07.svg); }
.flow_num.fnum08:after { mask-image: url(../images/flow_icon08.svg); }
.flow_num.icon_ora:after {
background-color: #fa8200;
}
.flow_num svg {
width: 38px;
height: 38px;
fill: #a9b6a6;
}
.flow_num svg.f_num_ora {
fill: #c5b098;
}
.flow_txt {
margin-top: 2px;
font-size: 1.6rem;
}
.flow_txt_s {
display: block;
font-size: 1.3rem;
line-height: 140%;
margin-top: 2px;
}
@media screen and (min-width: 834px) {
  .flow_wrp {
  display: flex;
  justify-content: center;
  margin: 30px auto;
  width: 89%;
  max-width: 1226px;
  }
  .flow_cont {
  margin: 0px 20px;
  width: 47%;
  max-width: 565px;
  }
}
@media screen and (min-width: 1226px) {
  h3.h3_flow {
  padding: 0px 0px 0px 65px;
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  }
  h3.h3_flow:before {
  margin-left: -90px;
  width: 56px;
  height: 56px;
  }
  .flow_wrp {
  justify-content: space-between;
  margin: 80px auto;
  }
  .flow_cont {
  margin: 0px;
  }
  .flow_block {
  filter: drop-shadow(0px 0px 5px rgba(235, 235, 235, 1));
  }
  .flow_ttl {
  margin: 0px auto 30px;
  padding: 22px 0px;
  }
  ul.flowlist {
  padding: 110px 0px 40px;
  }
  ul.flowlist li {
  margin: 0px auto 45px;
  width: 80%;
  }
  ul.flowlist li:before {
  top: -51px;
  left: 118px;
  height: 165%;
  }
  .flow_num {
  width: 170px;
  }
  .flow_num:before {
  top: -23px;
  left: 69px;
  width: 80px;
  height: 80px;
  }
  .flow_num:after {
  top: -11px;
  left: 81px;
  width: 58px;
  height: 58px;
  }
  .flow_txt {
  font-size: 1.8rem;
  }
  .flow_txt_s {
  font-size: 1.6rem;
  }
  ul.flowlist li:first-child:after, ul.flowlist li:last-child:after {
  left: 114px;
  width: 11px;
  height: 11px;
  }
  ul.flowlist li:first-child:after {
  top: -66px;
  }
  .flow_num svg {
  width: 40px;
  height: 40px;
  }
  ul.flowlist li:last-child:before {
  height: 175%;
  }
  ul.flowlist li:last-child:after {
  bottom: -22px;
  }
}

/*************************************************/
/*    contact
/*************************************************/

.h1_contact {
margin: 0px;
font-size: 2.3rem;
font-weight: 600;
line-height: 100%;
color: #fff;
text-align: center;
text-shadow: 0px 0px 7px #108c00;
letter-spacing: 0.1em;
}
.h1_contact.buy { text-shadow: 0px 0px 7px #ff7a02; }
.visual_contact {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 100%;
height: 140px;
margin: 10px 0px 0px;
background: url("../images/contact_bg_cell.webp") center bottom / cover no-repeat;
}
.visual_contact.buy { background: url("../images/contact_bg_buy.webp") center center / cover no-repeat; }
/* webp非対応 */
.no-webp .visual_contact { background-image: url("../images/contact_bg_cell.jpg"); }
.no-webp .visual_contact.buy { background-image: url("../images/contact_bg_buy.jpg"); }
.contact_bg {
padding: 30px 0px;
width: 100%;
background: #eff9ee;
}
.contact_bg.buy { background: #fff6ed; }
.contact_wrp {
margin: 0px auto;
padding-bottom: 20px;
width: 85%;
max-width: 1200px;
background: #fff;
border-radius: 15px;
}
/* recaptcha */
.recaptcha_bg {
margin: 0px auto;
padding: 10px 15px;
width: 87%;
max-width: 380px;
font-size: 1.1rem;
font-weight: 600;
text-align: center;
line-height: 150%;
color: #787878;
letter-spacing: 0;
background: #dff9d8;
border-radius: 8px;
}
.recaptcha_bg.buy { background: #fce5ca; }
.recaptcha_bg a { color: #229006; }
.recaptcha_bg.buy a { color: #fa8200; }
.recaptcha_bg a:hover { color: #265420; opacity: 1; }
.recaptcha_bg.buy a:hover { color: #b95e00; opacity: 1; }
/* rechaptureロゴ非表示 */
.grecaptcha-badge { visibility: hidden; }

@media screen and (min-width: 600px) {
  .recaptcha_bg {
  margin: 0px auto 50px;
  font-size: 1.25rem;
  }
}
@media screen and (min-width: 834px) {
  .h1_contact {
  font-size: 3.5rem;
  }
  .h1_contact span.cota {
  font-size: 3.0rem;
  }
  .visual_contact {
  margin-top: 20px;
  height: 160px;
  }
  .contact_bg {
  padding: 70px 0px;
  }
  .contact_wrp {
  padding: 50px 0px;
  border-radius: 25px;
  }
  .content.contact.confirm {
  padding-top: 10px;
  }

}
/*************************************************/
/*    scroll
/*************************************************/

.scroll-block {
position: fixed;
bottom: 20px;
right: 10px;
width: 80%;
max-width:  270px;
margin: 0px auto;
background: #fff;
border-radius: 8px;
box-shadow: 0 0 6px #b1b3c9;
z-index: 100;
}
.scroll-block .up {
display: flex;
margin-bottom: 4px;
background: #f0f1fd;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.scroll-block .up .scroll_logo {
position: relative;
width: 52%;
padding: 9px 0px 6px 15px;
}
.scroll-block .up .scroll_logo h2.h2_name {
position: relative;
display: inline-block;
font-size: 1.5rem;
font-weight: 800;
line-height: 120%;
background: linear-gradient(90deg, #1a264e 0%, #4286e2 100%);
background: -webkit-linear-gradient(0deg, #1a264e 0%, #4286e2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
z-index: 10;
}
.scroll-block .up .scroll_logo:after {
content: "";
position: absolute;
top: 0px;
right: 0px;
border-top: 22px solid #d4dcf3;
border-right: 22px solid #d4dcf3;
border-bottom: 22px solid transparent;
border-left: 22px solid transparent;
}
.scroll-block .scroll_illust {
position: relative;
width: 48%;
}
.scroll-block .scroll_illust img.sc_illust {
position: absolute;
top: -11px;
left: 41%;
width: 84px;
height: auto;
transform: translate(-50%, 0%); /* positionに対して要素を中央に配置させる */
}
.fade-block {  /* 画面外 */
transform: translateX(330px);
transition: all .5s ease-in;
}
.fade-block.blockIn {  /* 画面に入った時の動き */
transform: translateX(0);
}
.inner_title {
margin: 0px auto;
padding: 8px 10px 0px;
width: 75%;
max-width: 233px;
font-size: 1.5rem;
font-weight: 700;
}
a.scroll-cell,
a.scroll-buy {
position: relative;
display: block;
margin: 3px auto 0px;
padding: 0px;
width: 75%;
height: 38px;
font-size: 1.6rem;
font-weight: 500;
line-height: 38px;
color: #fff;
text-align: center;
z-index: 0;
}
a.scroll-cell:before,
a.scroll-buy:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
left: 0;
transition: 0.5s;
background: linear-gradient(to right, #78d73f, #108c00);
border-radius: 50px;
}
a.scroll-buy:before {
background: linear-gradient(to right, #ffac2d, #ff7800);
}
a.scroll-cell:after,
a.scroll-buy:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
z-index: -2;
left: 0;
background: linear-gradient(to right, #50cc7f 0%, #f5d100 100%);
border-radius: 50px;
}
a.scroll-buy:after {
background: linear-gradient(to right, #ff9000 0%, #f9d423 100%);
}
a.scroll-cell:hover,
a.scroll-buy:hover {
opacity: 1;
}
a.scroll-cell:hover:before,
a.scroll-buy:hover:before {
opacity: 0;
}
.scroll-tel {
margin: 12px auto 7px;
padding: 7px 0px;
width: 75%;
max-width: 233px;
font-size: 1.4rem;
font-weight: 600;
text-align: center;
border-top: 1px solid #cacce3;
}
.scroll-tel a.sctel {
margin: 0px auto;
padding: 8px 0px 0px;
width: 75%;
}
.scroll-tel a.sctel img {
width: 100%;
height: auto;
}
.close {
position: absolute;
display: inline-block;
margin: 0;
top: 4px;
right: 4px;
padding: 1px;
font-size: 1.4rem;
font-weight: 800;
vertical-align: middle;
text-decoration: none;
text-align: center;
color: #828799;
line-height: 1;
transition: .25s;
background: #fff;
border: solid 1px transparent;
border-radius: 50%;
z-index: 1;
cursor: pointer;
}
.close:hover {
opacity: .3;
}
.viewoff {
display: none;
}

@media screen and (min-width: 1024px) {
  .scroll-block .up .scroll_logo h2.h2_name {
  font-size: 1.6rem;
  }
  .scroll-block {
  bottom: 50px;
  right: 24px;
  }
  .scroll-block .up .scroll_logo {
  padding: 11px 0px 8px 15px;
  }
  .inner_title {
  width: 85%;
  }
  a.scroll-cell,
  a.scroll-buy {
  margin: 2px auto 0px;
  width: 85%;
  font-size: 1.7rem;
  }
  .scroll-tel {
  padding: 7px 0px;
  width: 85%;
  }
  .scroll-tel a.sctel {
  display: block;
  padding: 0px;
  width: 85%;
  max-width: 200px;
  }
  .close {
  font-size: 1.6rem;
  }
}

/*************************************************/
/*    footer
/*************************************************/

footer {
margin: 40px 0px 0px;
padding: 20px 0px 0px;
text-align: center;
width: 100%;
background-image: url("../images/syasen_foot.png");
}
a.f_logo img {
margin-bottom: 7px;
width: 25%;
max-width: 130px;
}
a.f_logo:hover {
opacity: 0.5;
}
.f_address .ttl {
display: block;
text-align: center;
font-size: 1.7rem;
font-weight: 700;
margin-bottom: 10px;
}
.f_address {
text-align: center;
font-size: 1.3rem;
font-weight: 500;
line-height: 150%;
margin: 0px;
padding: 0px 10% 10px;
}
.tel_waku {
display: flex;
justify-content: center;
margin-bottom: 25px;
}
.f_tel {
margin: 0px auto;
width: 60%;
max-width: 180px;
}
.f_tel img {
width: 100%;
height: auto;
}
.f_tel span.open {
display: block;
padding: 5px 0px 0px 2px;
font-size: 1.2rem;
line-height: 100%;
}
.copyright {
font-family: "Poppins", serif;
font-size: 1.0rem;
text-align: center;
padding: 1px;
color: #fff;
font-weight: 500;
background: #4e57c6;
letter-spacing: 0.1em;
}
@media (min-width: 834px) {
  footer {
  margin-top: 80px;
  padding: 50px 0px 0px;
  }
  a.f_logo img {
  width: 40%;
  }
  .f_address .ttl {
  margin-bottom: 13px;
  font-size: 1.9rem;
  font-weight: 600;
  }
  .f_address {
  padding-bottom: 15px;
  font-size: 1.5rem;
  }
  .tel_waku {
  margin-bottom: 50px;
  }
  .f_tel {
  padding-top: 5px;
  max-width: 255px;
  font-size: 3.2rem;
  }
  .f_tel span.open {
  margin-top: 7px;
  font-size: 1.4rem;
  }
  .copyright {
  font-size: 1.05rem;
  padding: 2px 5px;
  letter-spacing: 0.1em;
  font-weight: 400;
  }
}