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


/* ::::::: header ::::::::*/

header{ z-index: 100; position: fixed; left: 0; top: 42px; width: 100%; height: 70px; padding: 10px 8%;
  background-color: transparent; display: flex; justify-content: space-between; align-items: center;
  transition: all 0.6s ease;}
header .header_logo{ width: 288px;}
header .navheader ul{ display: flex; justify-content: flex-end; gap: 2em;}
header .navheader ul li a{ display: block; font-size: 18px; font-weight: 500; letter-spacing: 0.5px; 
  line-height: 20px; color: #fff; padding: 15px 0px;}
header .navheader ul li a:hover{ color: #ec9d5d;}
header .navheader ul li.navbtn1 a{ padding: 15px 60px; background-color: var(--color-bw-text); 
  border-radius: 5px; font-size: 20px;}
/* scrolled */
header.scrolled{ top: 0; height: 50px; background-color: var(--color-base-text); box-shadow: 0 2px 10px rgba(0,0,0,0.1);}
header.scrolled .header_logo{ width: 200px;}
header.scrolled .navheader ul{ gap: 1.5em;}
header.scrolled .navheader ul li a{ font-size: 16px; line-height: 18px;
  color: #fff; padding: 10px 0px;}
header.scrolled .navheader ul li.navbtn1 a{ padding: 10px 60px; font-size: 18px;}
header .navheader ul li.navbtn1 a:hover{ background-color: #ec9d5d; color: #fff;}
@media (width < 1400px) {
  header{ padding: 10px 5%;}
  header .navheader ul{ gap: 1.5em;}
  header .navheader ul li a{ font-size: 16px; letter-spacing: 0.5px; line-height: 20px; padding: 10px 0px;}
  header .navheader ul li.navbtn1 a{ padding: 10px 30px; border-radius: 5px; font-size: 16px;}
}
@media (width < 1000px) {
  header{ top: 24px; padding: 10px 8%;
  background-color: transparent; display: flex; justify-content: space-between; align-items: center;
  transition: all 0.6s ease;}
  header .header_logo{ width: 288px;}
  header .navheader{ display: none;}
}
@media (width < 640px) {
  header .header_logo{ width: 200px;}
}

/* :::::: nav_sp :::::: */

/* toggle button */
#navTgl{ display: none;}
.navTglBtn{ display: none; cursor: pointer; position: fixed; top: 42px; right: 32px; width: 50px; height: 50px;
  z-index: 101; transition: all .6s;}
/*.navTglBtn span, */.navTglBtn::before, .navTglBtn::after{ display: block; position: absolute; top: 16px; left: 0px;
  content: ""; width: 50px; height: 2px; background-color: #C8956C; transition: all .6s;}

.navTglBtn::before { transform: translateY(-4px);}
.navTglBtn::after { transform: translateY(4px);}
#navTgl:checked + .navTglBtn span { transform: scaleX(0);}
#navTgl:checked + .navTglBtn::before { transform: rotate(45deg);}
#navTgl:checked + .navTglBtn::after { transform: rotate(-45deg);}
.navTglBtn:hover span, .navTglBtn:hover::before, .navTglBtn:hover::after{ background-color: #C8956C;}

.navTglBtn.navsc{ top: 8px; right: 8px;}
@media (width < 1000px) {
  .navTglBtn{ display: block;}
}

/* nav_sp menu */
.nav_sp{ z-index: 100; position: fixed; overflow: auto; top: 0; right: 0; width: 100%; height: 100%;
  background: #000; display: flex; justify-content: center; align-items: center; transition: all .6s;}
.nav_sp div{ width: 90%; max-width: 400px;}
.nav_sp h2, .nav_sp a{ color: #FFF;}
.nav_sp h2 { text-align: center; background-color: rgba(255,255,255,.2);}
.nav_sp ul { margin: 0; padding: 0;}
.nav_sp li { list-style: none; font-size: 16px; text-align: center; line-height: 1.4;
  border-bottom: 1px solid rgba(255,255,255,.2);}
.nav_sp a { display: block; padding: 1.6em 1.6em; text-decoration: none; transition: all .6s;}
#navTgl ~ .nav_sp { transform: translateX(100%);}
#navTgl:checked ~ .nav_sp { transform: none;}



/* ::::::: BASIC ::::::::*/


.title_jp{ display: inline-block; font-size: 40px; line-height: 1.7; font-weight: 700;
  background-image: linear-gradient(to right, #1B3A4B, #4089B1); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;}
.title_en{ display: inline-block; color: var(--color-bw-text);
  font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: 18px;  line-height: 1.7;
  margin-bottom: 0px; letter-spacing: 6px; text-transform: uppercase;}
.title_jp2{ display: inline-block; font-size: 40px; line-height: 1.7; font-weight: 700; padding: 1px; color: #fff;}
@media (width < 768px) {
  .title_jp{ font-size: 6vw; line-height: 1.6;}
  .title_en{ display: inline-block; color: var(--color-bw-text);
    font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: 16px;  line-height: 1.7;
    margin-bottom: 0px; letter-spacing: 6px; text-transform: uppercase;}
  .title_jp2{ font-size: 6vw; line-height: 1.6;}
}

.wrap_wt{ background-color: #fff; position: relative;}
.wrap_or{ background-color: #F7F4F0; position: relative;}
.wrap_bl{ background-color: #0F1E28; position: relative;}



.wrap_ltxt,.wrap_rtxt,.wrap_l2txt{ position: absolute; top: 0; font-family: "Cormorant Garamond", serif;
  font-weight: 700; font-size: min(17vw, 220px); line-height: 340px;}
.wrap_ltxt{ left: min(2.5%, 50px); color: rgba(27, 58, 75, 0.1);}
.wrap_rtxt{ right: min(2.5%, 50px); color: rgba(200, 149, 108, 0.1);}
.wrap_l2txt{ left: min(2.5%, 50px); color: rgba(200, 149, 108, 0.1);}
@media (width < 768px) {
  .wrap_ltxt,.wrap_rtxt,.wrap_l2txt{ line-height: 120px;}
}

.font_l{ font-size: 24px; font-weight: 600;}
.font_ml{ font-size: 20px; font-weight: 400;}
.font_m{ font-size: 18px;}
@media (width < 768px) {
  .font_ml{ font-size: 18px;}
}

.mb_s{ margin-bottom: var(--m-s);}
.mb_ms{ margin-bottom: var(--m-ms);}
.mb_m{ margin-bottom: var(--m-m);}
.mb_l{ margin-bottom: var(--m-l);}
.pt_l{ padding-top: var(--m-l);}
.pb_l{ padding-bottom: var(--m-l);}
.pt_ml{ padding-top: var(--m-ml);}
.pb_ml{ padding-bottom: var(--m-ml);}

.width_90{ width: 84%;}
.width_1200{ width: min(84%, 1200px);}
.width_contact{ width: min(84%, 674px);}
.width-flow{ width: min(84%, 970px);}
.width-faq{ width: min(84%, 900px);}
.width-form{ width: min(84%, 1200px);}
.width-news{ width: min(84%, 900px);}
@media (width < 768px) {
  .width-form{ width: 94%;}
}

.short_hr{ border: none; width: 50px; height: 2px; background-color: var(--color-bw-text); margin: 0 auto 60px 0;}

.main{ padding-top: 1px; margin-top: -1px;}



/* :::::: mv :::::: */

.mv1{ width: 100%; height: 100vh; background-image: url(../imagesofficereno/mv1.jpg);
  background-position: center center; background-size: cover; position: relative;
  display: flex; align-items: center; padding: 5% 8%;}
.mv2{ width: 100%; height: inherit; background-image: url(../imagesofficereno/mv1.jpg);
  background-position: center center; background-size: cover; position: relative;
  display: flex; align-items: center; padding: 7% 5% 0 8%;}
.mv_eng_title{ position: absolute; right: 8%; bottom: 0; font-family: "Cormorant Garamond", serif;
  color: rgba(255, 255, 255, 0.27); font-weight: 700; font-size: min(10vw, 150px); line-height: 1.1; text-align: right;}
.mv2 .mv_eng_title{ position: relative; right: 0; margin-left: auto; margin-right: 0; font-size: min(7vw, 100px); line-height: 0.9; text-align: right;}
.mvbox{ z-index: 1;}
.mvbox h1 span{ display: block;}
.mv_eng{ color: var(--color-bw-text); font-family: "Cormorant Garamond", serif; font-size: 21px; 
  line-height: 1.8; font-weight: 500; text-transform: uppercase; letter-spacing: 0.3em;}
.mv_jp{ font-size: 54px; line-height: 1.6; font-weight: 700; color: #fff; margin-top: 25px;}
.mv_text{ font-size: 24px; line-height: 1.8; margin-top: 25px;}
.mv_text span{ display: inline-block; background: rgba(29, 29, 29, 0.60);
  color: #fff; font-weight: 500; margin:4px 0;}
.mv_text span:nth-of-type(2n+1){ padding-left: 15px;}
.mv_text span:nth-of-type(2n){ padding-right: 15px;}
.mv_btntext{ color: #fff; font-size: 16px; font-weight: 500; margin: 45px 0 15px 0;}
.mv_btntext_all{ display: inline;}
.mv_btntext_pc{ display: inline;}
.mv_btntext_sp{ display: none;}
.mv_btn_box a{ display: inline-block; color: #fff; font-size: 18px; line-height: 1.2; font-weight: 500;
  border-radius: 5px;}
.mv_btn_box a::after{ content: "→"; margin-left: 0.5em;}
a.btn_line_header{ padding: 1em 3em; margin-right: 1em; background: linear-gradient(to right, #258529, #60a863); transition: all 0.6s;}
a.btn_contact_header{ padding: 1em 1.5em; background: linear-gradient(to right, #C8956C, #8E7058); transition: all 0.6s;}
a.btn_line_header:hover{ background: linear-gradient(to right, #20a824, #5ecf62);}
a.btn_contact_header:hover{ background: linear-gradient(to right, #e7a066, #b3825a);}
@media (width < 1200px) {
  .mv2{ padding: 15vh 5% 0 5%;}
  .mv_eng{ font-size: 18px; line-height: 1.8; letter-spacing: 0.3em;}
  .mv_jp{ font-size: 6vw; line-height: 1.6; margin-top: 18px;}
  .mv_text{ font-size: 20px; line-height: 1.8; margin-top: 18px;}
  .mv_text span{ margin:4px 0;}
  .mv_btntext{ font-size: 16px; margin: 30px 0 15px 0;}
  .mv_btn_box a{ font-size: 18px;}
  .btn_line_header{ padding: 1em 2em; }
  .btn_contact_header{ padding: 1em 1em;}
}
@media (width < 768px) {
  .mv_eng_title{ right: 5%; bottom: 0; font-size: 15vw; line-height: 1.0;}
  .mv1{ padding: 5% 5%;}
  .mv2 .mv_eng_title{ font-size: 15vw; line-height: 0.9; text-align: right;}
  .mvbox{ width: 100%;}
  .mv_eng{ font-size: 14px; line-height: 1.8; letter-spacing: 0.1em;}
  .mv_text{ font-size: 17px; line-height: 1.8; margin-top: 18px;}
  .mv_btn_box a{ display: block; font-size: 16px; line-height: 1.2; border-radius: 5px; max-width: 320px;
    margin-left: auto; margin-right: auto;}
  a.btn_line_header{ padding: 1em 2em; text-align: center; margin-bottom: 12px;}
  a.btn_contact_header{ padding: 1em 0.8em; text-align: center;}
  .mv_btntext{ text-align: center; font-size: 16px; margin: 40px 0 15px 0;}
  .mv_btntext span{ display: block;}
  .mv_btntext_pc{ display: none;}
  .mv_btntext_sp{ display: inline;}
}
@media (width < 560px) {
  .mv1{ width: 100%; height: calc(100vh - 67px); display: flex; align-items: center; padding: 5% 8%;}
  .mv2{ padding: 10vh 5% 0 5%;}
  .mv_eng_title{ bottom: 40px;}
  .mv2 .mv_eng_title{ bottom: 0;}
  .mv_jp{ font-size: 7vw; margin-top: 0px;}
  .mv_text span:nth-of-type(2n+1){ margin:0 0;}
  .mv_text span:nth-of-type(2n+1){ padding-left: 15px; padding-right: 15px;}
  .mv_text span:nth-of-type(2n){ padding-left: 15px; padding-right: 15px;}
  .mv_btn_box a::after{ content: "→"; margin-left: 0.3em;}
  a.btn_line_header{ padding: 1em 1em;}
  a.btn_contact_header{ padding: 1em 0em;}
  .mv_btntext{ margin: 20px 0 5px 0;}
}

/* :::::: problem :::::: */

.box_2a{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px;}
.problembox1 li{ background-color: #fff; border-radius: 5px; padding: min(5%, 20px); 
  display: grid; grid-template-columns: min(30%,130px) 1fr; align-items: center; gap: 20px;}
.problembox1 li h3{ font-size: 22px; line-height: 1.2; font-weight: 600; margin-bottom: 10px;}
.problembox1 li h3 span{ font-size: 32px; color: var(--color-bw-text); letter-spacing: 0.15em;}
@media (width < 768px) {
  .box_2a{ display: grid; grid-template-columns: 1fr; gap: 10px;}
  .icon1{ text-align: center;}
  .icon1 img{ max-width: 70px;}
  .problembox1 li{ padding: min(5%, 30px) min(3%, 30px) ; grid-template-columns: 70px 1fr; gap: min(5%, 30px);}
  .problembox1 li h3{ font-size: 18px; line-height: 1.2; font-weight: 600; margin-bottom: 10px;}
  .problembox1 li h3 span{ font-size: 24px; color: var(--color-bw-text); letter-spacing: 0.15em;}
  /*.problembox1 li p{ font-size: 16px;}*/
}


/* :::::: recommend :::::: */

.recommend_text{ display: flex; flex-wrap: wrap; justify-content: center; width: min(100%, 1000px); margin-top: 30px;}
.recommend_text li{ margin: 0 -0.5em 0 -0.5em; font-size: 24px; font-weight: 700; line-height: 3.3;}
.recommend_text li::before,.recommend_text li::after{ content: "｜";}
.recomend_next{ width: 100%; background: #1A3040 url(../imagesofficereno/recommend_next1.jpg) center center no-repeat; 
  background-size: cover; padding: var(--m-ml) 5%; display: flex; justify-content: center; align-items: center;}
.recomend_next p{ text-align: center; font-size: 24px; font-weight: 700; line-height: 2.4; 
  letter-spacing: 5px; color: #fff;}
@media (width < 768px) {
  .recommend_text li{ font-size: 18px; line-height: 2.6;}
  .recomend_next p{ font-size: 20px; line-height: 2.0; letter-spacing: 2px;}
}


/* :::::: results :::::: */

.results_text2{ text-align: center; max-width: 800px;}
.results_text{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 3vw; margin-top: var(--m-m); position: relative;}
.results_text li{ background-color: #fff; padding: 40px 25px 50px 25px; text-align: center; border-radius: 12px;}
.results_text .icon1{ margin-bottom: 20px;}
.results_text .num1{ font-size: 52px;}
.results_text .result_title{ display: block; font-size: 32px; color: var(--color-bw-text); margin-bottom: 20px;}
.results_text h3{ font-weight: 700; }
.results_text::after{ position: absolute; bottom: -2.5em; right: 0; content: "※当社実績";}
@media (width < 1300px) {
  .results_text li{ padding: 40px 18px 50px 18px;}
  .results_text .result_title{ display: block; font-size: 2.3vw; color: var(--color-bw-text); margin-bottom: 20px;}
}
@media (width < 768px) {
  .results_text{ grid-template-columns: repeat(2, 1fr); padding-bottom: 20px;}
  .results_text li{ padding: 20px 13px 30px 13px;}
  .results_text .icon1{ margin-bottom: 0px;}
  .results_text .num1{ font-size: 8vw;}
  .results_text .result_title{ font-size: 5vw; margin-bottom: 10px;}
  .results_text::after{ position: absolute; bottom: -1.0em; right: 0; content: "※当社実績";}
}


/* :::::: strengths :::::: */

.strengths_box{ display: flex; flex-direction: column;}
.strengths_box li{ display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap;}
.strengths_box li:nth-child(2n){ background-color: #F7F4F0; flex-direction: row-reverse;}
.strengths_img{ width: 55%; background-position: center center; background-size: cover;}
.strengths_text{ width: 45%; padding: var(--m-s) var(--m-s) var(--m-m) var(--m-s); }
.strengths_img_1{ background-image: url(../imagesofficereno/strengths_1.jpg);}
.strengths_img_2{ background-image: url(../imagesofficereno/strengths_2.jpg);}
.strengths_img_3{ background-image: url(../imagesofficereno/strengths_3.jpg);}
.strengths_img_4{ background-image: url(../imagesofficereno/strengths_4.jpg);}
.strengths_img_5{ background-image: url(../imagesofficereno/strengths_5.jpg);}
.strengths_text h3{ font-size: 24px; font-weight: 700; z-index: 1; margin-bottom: 20px;}
.strengths_text h3 span{ display: block; font-family: "EB Garamond", serif; font-weight: 500;
  font-size: 100px; line-height: 1; color: rgba(200, 149, 108, 0.2); margin-bottom: 10px; z-index: 2;}
.strengths_box li:nth-child(2n) h3 span{ color: rgba(200, 149, 108, 1.0);}
@media (width < 1200px) {
  .strengths_img{ width: 40%;}
  .strengths_text{ width: 60%;}
}
@media (width < 768px) {
  .strengths_box li{ display: flex; flex-direction: row; justify-content: space-between; flex-wrap: nowrap; align-items: bottom;}
  .strengths_box li:nth-child(2n){ background-color: #F7F4F0; flex-direction: row-reverse;}
  .strengths_img{ width: 90%; height: 80vw; background-position: center center; background-size: cover; z-index: 0;}
  .strengths_text{ position: relative; width: 95%; margin: 44vw 0 0 -80%; z-index: 1; background-color: rgba(255, 255, 255, 0.8);padding: var(--m-s) 10px var(--m-m) 20px; border-radius: 10px 0 0 0;}
  .strengths_box li:nth-child(2n) .strengths_text{ border-radius: 0 10px 0 0;}
  .strengths_box li:nth-child(2n) .strengths_text{ margin: 44vw -80% 0 0; background-color: rgba(247, 244, 240, 0.8);}
  .strengths_text h3{ font-size: min(4.6vw,20px); font-weight: 700; z-index: 1; margin-bottom: 24px;}
  .strengths_text h3 span{ font-size: 60px; line-height: 0.7;  color: rgba(200, 149, 108, 1.0); margin-bottom: 10px;}
}


/* :::::: to contact button :::::: */

.wrap_contact{ background-color: #1B3A4B; }
.wrap_contact_grad{ background: linear-gradient(to bottom right, #1B3A4B 0%, #1A3040 50%, rgba(71, 74, 75, 0.78) 63%, rgba(200, 149, 108, 0.15) 100%); padding: var(--m-m) 0; text-align: center;}
.wrap_contact_box{ width: min(84%, 674px);}
.wrap_contact_box h2{ font-size: 30px; font-weight: 400; letter-spacing: 1.5px; color: #fff; margin-bottom: var(--m-s);}
.contact_imgbox{ display: grid; grid-template-columns: 1fr 1fr; gap: 5%;}
.contact_btnbox{ display: grid; grid-template-columns: 1fr 1fr; gap: 5%;}
.contact_btnbox div{ border-radius: 10px; overflow: hidden;}
.contact_btnbox a{ padding: 20px; color: #fff; border-radius: 5px;}
.wrap_contact_box p{ margin: 50px 0 30px 0; color: #fff; font-size: 18px; text-align: center;}
.mv_btntext_all{ display: inline;}
.mv_btntext_pc{ display: inline;}
.mv_btntext_sp{ display: none;}
@media (width < 750px) {
  .mv_btntext_pc{ display: none;}
  .mv_btntext_sp{ display: inline;}
}
@media (width < 620px) {
  .wrap_contact_box{ width: min(90%, 674px);}
  .wrap_contact_box h2{ font-size: 5vw; font-weight: 400; letter-spacing: 1.5px; color: #fff; margin-bottom: var(--m-s);}
  .contact_btnbox{ display: grid; grid-template-columns: 1fr 1fr; gap: 3%;}
  .wrap_contact_box p{ margin: 20px 0 10px 0;}
  .contact_btnbox a{ padding: 10px 5px;}
}
@media (width < 450px) {
  .contact_btnbox{ grid-template-columns: 1fr; gap: 12px; margin: 0 5%;}
  .wrap_contact_box p{ font-size: 18px;}
}

/* :::::: works :::::: */

.worksbox{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5%;}
.worksbox li{ border-radius: 8px; overflow: hidden;}
@media (width < 620px) {
  .worksbox{ grid-template-columns: repeat(2, 1fr); gap: 10px;}
  .worksbox li{ border-radius: 4px; overflow: hidden;}
  .worksbox li:nth-child(3){ display: none;}
}


/* :::::: flow :::::: */

.flow_box li{ display: grid; grid-template-columns: 80px 1fr; gap: 50px;}
.flow_box li .num span{ display: block; width: 100%; aspect-ratio: 1 / 1;  display: flex; justify-content: center;
  align-items: center; background: linear-gradient(to bottom right, #1B3A4B, #2A5A6E); 
  font-family: "EB Garamond", serif; font-weight: 500; color: #fff; font-size: 28px; border-radius: 8px;}
.flow_box li .flow_text { padding-bottom: var(--m-ms);}
.flow_box li:last-child .flow_text { padding-bottom: 0;}
.flow_box li .flow_text h3{ font-size: 22px; font-weight: 700; margin-bottom: 10px;}
.flow_box li .num{ position: relative; z-index: 1;}
.flow_box li .num::before{ z-index: -1; position: absolute; content: ""; bottom: 0; left: calc(50% - 1px); 
  width: 2px; height: 90%; background-color: #C8956C;}
.flow_box li:nth-child(2) .num::before{ background-color: rgba(200, 149, 108, 0.85);}
.flow_box li:nth-child(3) .num::before{ background-color: rgba(200, 149, 108, 0.60);}
.flow_box li:nth-child(4) .num::before{ background-color: rgba(200, 149, 108, 0.45);}
.flow_box li:nth-child(5) .num::before{ background-color: rgba(200, 149, 108, 0.30);}
.flow_box li:nth-child(6) .num::before{ background-color: rgba(200, 149, 108, 0.15);}
.flow_box li:last-child .num::before{ display: none;}
@media (width < 620px) {
  .flow_box li{ display: grid; grid-template-columns: 40px 1fr; gap: 20px;}
  .flow_box li .flow_text h3{ font-size: 18px; font-weight: 700; margin-bottom: 10px;}
  .flow_box li .num span{ font-weight: 500; font-size: 22px; border-radius: 5px;}
}




/* :::::: voice :::::: */

.voice_box li{ padding: 30px; border-left: 4px solid #C8956C; background-color: #fff; border-radius: 0 8px 8px 0;}
.pb_voice{ padding-bottom: 200px;}
.voice_title{ padding-left: 60px; position: relative; margin-bottom: 20px;}
.voice_title:before{ position: absolute; left: 0; top: 50%; transform: translateY(-50%); content: "";
  width: 50px; height: 50px; border-radius: 50%; background-color: #C8956C;}
.voice_title h3{ font-weight: 700;}
.voice_title_sub{ color: #8FA3B0;}
@media (width < 768px) {
  .pb_voice{ padding-bottom: 90px;}
}

/* :::::: faq :::::: */

.faq_conts{ border-bottom: 1px solid rgba(27, 58, 75, 0.1); padding: var(--m-s) 0;}
.faq_q,.faq_a{ padding-left: 60px; position: relative;}
.faq_q{ font-size: 20px; font-weight: 700;}
.faq_a{ margin-top: var(--m-s);}
.faq_q::before,.faq_a::before{ position: absolute; top: 0; left: 0; width: 40px; height: 40px; padding: 8px 5px 12px 5px;
  font-size: 18px; line-height: 20px; text-align: center; font-weight: 700; border-radius: 8px;}
.faq_q::before{ content: "Q"; background-color: #C8956C; color: #fff;}
.faq_a::before{ content: "A"; background-color: #F7F4F0;}
@media (width < 768px) {
  .faq_q{ font-size: 18px;}
}


/* :::::: contact :::::: */

.formwrap{ background-color: #fff; padding: 30px 70px; border-radius: 12px;}
.formwrap h3{ font-size: 18px; font-weight: 700; color: var(--color-bw-text); margin: 30px 0;}
.formwrap hr{ border: none; width: 100%; height: 1px; background: linear-gradient(to right, #c8956c00 0%, #C8956C 50%, #C8956C00 100%); margin: var(--m-s) 0;}
.formTable1{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px;}
.formTable1_1{ grid-column: span 2; grid-row: span 1;}
.formTable1_2{ grid-column: span 1; grid-row: span 1;}
.form_ttl{ font-weight: 700; margin-bottom: 12px;}
.form_hissu,.form_nonehissu{ display: inline-block; margin-left: 15px; vertical-align: 2px; font-size: 10px; padding: 2px 10px; border-radius: 3px;}
.form_hissu{ color: #fff; background-color: #C8956C; border: 1px solid #C8956C;}
.form_nonehissu{ color: #8FA3B0; background-color: #fff; border: 1px solid #D4D4D4;}
.form_in input{ width: 100%; padding: 14px; background-color: #FAFAF8; border: 1px solid #D4D4D4; border-radius: 6px;}
.form_in input::placeholder{ color: rgba(27, 58, 75, 0.15);}
.form_in textarea{ width: 100%; padding: 14px; background-color: #FAFAF8; border: 1px solid #D4D4D4; border-radius: 6px;}
.formwrap .radio span{ display: inline-block; line-height: 3.0;}
.formwrap .radio label{ display: inline-block; margin-right: 2em; padding-left: 0.5em;}
.formwrap .radio input[type=radio]{ display: inline-block; width: 0.9em; height: 0.9em; background-color: #D9D9D9; border-radius: 50%; margin-bottom: 5px;}
.formwrap .radio input[type=radio]:checked{ background-color: #1B3A4B; border: 3px solid #D9D9D9; }
.formTable3 .form_in{ text-align: center; margin-top: 30px;}
.form_in input[type=checkbox]{ display: none;}
.check1_label{ position: relative; padding: 0 0 0 1.7em;}
.check1_label:after { position: absolute; content: ""; display: block; top: 2px; left: 0px; width: 1.2em; height: 1.2em;
  border: 2px solid #D9D9D9; border-radius: 2px; }
.check1_label:before { position: absolute; content: ""; display: block; top: 4px; left: 7px; /*margin-top: 6px;*/ width: 8px; height: 13px; border-right: 3px solid #1B3A4B; border-bottom: 3px solid #1B3A4B; transform: rotate(45deg); opacity: 0;}
.form_in input[type=checkbox]:checked + .check1_label:before { opacity: 1;}
.form_btn button{ display: block; margin: 30px auto; width: min(320px, 80%); text-align: center; color: #fff;
  background: linear-gradient(to right, #C8956C, #8E7058); padding: 15px 10px; border-radius: 4px;}
.form_btn button:hover{ background: linear-gradient(to right, #e7a066, #b3825a);}
.openBtn{ background: transparent;}
.openBtn:hover{ background: #fff;}
@media (width < 768px) {
  .formwrap{ background-color: #fff; padding: 5px 5%; border-radius: 12px;}
  .formTable1{ display: grid; grid-template-columns: 1fr; gap: 30px;}
  .formTable1_1{ grid-column: span 1; grid-row: span 1;}
  .formTable1_2{ grid-column: span 1; grid-row: span 1;}
  .form_in input{ padding: 10px; border-radius: 4px;}
  .form_in textarea{ padding: 10px; border-radius: 4px;}
  .formwrap .radio span{ line-height: 2.2; display: block;}
  .formwrap .radio label{ display: inline-block; margin-right: 0;}
  .formTable3 .form_in{ margin-top: 10px;}
  .form_btn button{ margin: 30px auto; padding: 10px 10px;}
}


/* -- modal -- */

.modal{ display: none; position: fixed; top: -100%; left: 0; width: 100%; height: 100vh;
  background-color: rgba(0, 0, 0, 0.8); transition: top 0.5s ease-in-out; z-index: 1000;}
.modal.is-show{ display: block; top: 0;}
.modal-content{ background: white; width: min(800px,80%); height: 80vh; margin: 10vh auto; padding: 30px 30px 80px 30px;
  position: relative;}
.modal-content section{ width: 100%; height: 100%; position: relative; overflow-y: scroll; font-size: 14px; border: 1px solid #ddd; padding: 20px;}
.modal-content h2{ font-weight: 700; font-size: 120%; text-align: center; margin-bottom: 1em;}
.modal-content h3{ font-weight: 700; margin: 1em 0;}
.modal-content button{ position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); display: block; width: min(300px, 90%); background-color: #1B3A4B; color: #fff; text-align: center; padding: 8px; font-size: 16px;
  font-weight: 700; border-radius: 8px;}
.openBtn{ display: inline-block; margin: 20px; border: 1px solid #D9D9D9; padding: 2px 10px; border-radius: 3px;}
@media (width < 768px) {
  .modal-content{ margin: 10vh auto; padding: 20px 20px 60px 20px;}
  .modal-content button{ bottom: 12px; width: min(200px, 90%); padding: 6px; font-size: 14px; border-radius: 4px;}
  .modal-content section{ padding: 12px;}
}


/* :::::: company :::::: */

.company_container{ display: grid; gap: 0 7%; grid-template-columns: 40% 53%; align-content: start;}
.company_container_detail{ color: rgba(255, 255, 255, 0.75); align-self: flex-start;}
.company_container_ttl{ align-self: flex-start;}
.company_title1{ color: #C8956C; font-size: 20px; font-weight: 700;}
.company_photo img{ width: min(640px, 100%);}
.company_map iframe{width: min(640px, 100%); aspect-ratio: 640 / 480;}
.company_container_detail th,.company_container_detail td{ padding:20px 0; border-bottom: 1px solid rgba(200, 149, 108, 0.15);}
.company_container_detail th{ white-space: nowrap; padding-right: 30px;}
.company_container_detail th br{ display: none;}
@media (width < 1000px) {
  .company_container{ grid-template-columns: 1fr;}
  .company_container_detail{ margin-top: var(--m-m);}
  .company_container_detail th{ padding-right: 20px;}
  .company_container_detail th br{ display: inline;}
}


/* :::::: news :::::: */

.news_list li{ border-bottom: 1px solid rgba(27, 58, 75, 0.10);}
.news_list li:first-child{ border-top: 1px solid rgba(27, 58, 75, 0.10);}
.news_list li a{ display: grid; grid-template-columns: 120px 120px 1fr; align-items: center; padding: 30px 20px;}
.news_list li a:hover{ background-color: #fff;}
.news_date{ color: #8FA3B0; letter-spacing: 0.6px;}
.news_cats span{ display: inline-block; width: 6em; color: #C8956C; border: 1px solid #C8956C; border-radius: 4px;
  background-color: #fff; padding: 3px; font-weight: 700; text-align: center;}
.listbtnbox a{ display: block; margin: var(--m-ms) auto 0 auto; width: min(230px, 80%); text-align: center; color: #1B3A4B;
  padding: 1em 10px; border: 2px solid #1B3A4B; border-radius: 4px; font-weight: 700;}
.listbtnbox a:hover{ background-color: #fff;}
@media (width < 640px) {
  .news_list li a{ display: grid; grid-template-columns: 100px 1fr; grid-template-rows: auto auto; padding: 15px 0;}
  .news_list li p{ grid-column: 1 / 3; padding-top: 10px;}
  .news_cats span{ padding: 1px; font-size: 90%;}
  .listbtnbox a{ display: block; margin: var(--m-ms) auto 0 auto; width: min(230px, 80%); text-align: center; color: #1B3A4B;
  padding: 15px 10px; border: 2px solid #1B3A4B; border-radius: 4px; font-weight: 700;}
}

/*  news detail  */

.width_news_detail{ width: min(90%,1100px);}
.news_detail{ margin-bottom: var(--m-ml);}
.news_detail_title{ font-size: 32px; line-height: 1.7; font-weight: 700; color: #1B3A4B; margin-bottom: 20px;}
.news_detail_img{ width: 100%; aspect-ratio: 100 / 50;}
.news_detail_img img{ width: 100%; height: 100%; object-fit: cover; object-position: top center;}
/* -------------------  記事本文  -------------------- */
.news_detail_body{ margin-top: 0px;}
.news_detail_body h2{ font-size: 20px; font-weight: 700; line-height: 1.3; padding: 12px 20px 20px 20px; color: #fff;
  background-color: #1B3A4B; margin: 50px 0 20px 0;}
.news_detail_body h3{ position: relative; font-size: 20px; font-weight: 700; line-height: 1.3; padding: 12px 0;
  color: #1B3A4B; margin: 50px 0 20px 0;}
.news_detail_body h3::before{ position: absolute; content: ""; bottom: 0; left: 0; width: 100%; height: 5px;
  background-color: #E2E2E2;}
.news_detail_body h3::after{ position: absolute; content: ""; bottom: 0; left: 0; width: 100px; height: 5px;
  background-color: #1B3A4B;}
.news_detail_body h4{ position: relative; font-size: 2.0rem; font-weight: 700; line-height: 1.3;
  padding: 12px 0 12px 20px; color: #1B3A4B; border-left: 5px solid #1B3A4B; margin: 50px 0 20px 0;}
.news_detail_body p{ margin-bottom: 20px;}
.news_detail_body ul,.post ol{ margin-bottom: 20px;}
.news_detail_body ul li{ margin-left: 30px; list-style: disc;}
.news_detail_body ol li{ margin-left: 34px; list-style: decimal;}
.news_detail_body iframe{ max-width: 100%!important;}
.news_detail_body table{ width: 100%; border-collapse: collapse;}
.news_detail_body table th,.post table td{ text-align: left; vertical-align: top; border: 1px solid #ccc; padding: 10px;}
.news_detail_body th{ background-color: #E1E1E1; white-space: nowrap;}
@media (width < 640px) {
  .news_detail_title{ font-size: 20px; margin-bottom: 10px;}
  .news_detail_body h2{ font-size: 18px; padding: 12px 20px 20px 20px; margin: 20px 0 10px 0;}
  .news_detail_body h3{ font-size:18px; padding: 12px 0; margin: 20px 0 10px 0;}
  .news_detail_body h3::before{ height: 3px;}
  .news_detail_body h3::after{ height: 3px;}
  .news_detail_body h4{ font-size: 18px; padding: 10px 0 10px 16px; border-left: 4px solid #1B3A4B; margin: 20px 0 10px 0;}
  .news_detail_body p{ margin-bottom: 10px;}
  .news_detail_body ul,.news_detail_body ol{ margin-bottom: 10px;}
  .news_detail_body ul li{ margin-left: 2em; list-style: disc;}
  .news_detail_body ol li{ margin-left: 2.5em; list-style: decimal;}
  .news_detail_body table th,.post table td{padding: 5px;}
}

/* :::::: footer :::::: */

.footer{ background-color: #0A1419; padding-top: var(--m-m); padding-bottom: var(--m-s);}
.footerbox{ display: flex; justify-content: space-between; align-items: center; width: min(1200px, 90%);
  border-bottom: 1px solid rgba(200, 149, 108, 0.1); padding-bottom: var(--m-s); margin-bottom: var(--m-s);}
.footer_logo{ background-color: #fff; border-radius: 5px; padding: 20px; text-align: center; width: min(332px,30%);}
.footerbox nav{ width: min(840px,65%); text-align: right;}
.footerbox nav a{ display: inline-block; color: #fff; margin-left: 2em;}
.footerbox nav a:hover{ text-decoration: underline;}
.copyright{ text-align: center; color: rgba(255, 255, 255, 0.25);}
@media (width < 1000px) {
  .footer_logo{ border-radius: 4px; padding: 10px;;}
}
@media (width < 768px) {
  .footerbox nav a{ font-size: 12px; margin-left: 1.5em;}
}
@media (width < 560px) {
  .footerbox{ display: block; padding-bottom: 10px; margin-bottom: 10px;}
  .footer_logo{ margin: 0 auto; border-radius: 5px; padding: 6px 10px; text-align: center; width: 200px; margin-bottom: 10px;}
  .footerbox nav{ width: 100%; text-align: center;}
  .footerbox nav a{ margin: 0 0.5em;}
  .footer{ padding-bottom: 80px;}
}

.foot_contact{ display: none; position: fixed; bottom: 0; width: 100%; z-index: 50;}
.foot_contact ul{ display: grid; grid-template-columns: 1fr 1fr 1fr; border-top: 1px solid #444e57; }
.foot_contact ul li{ list-style: none;}
.foot_contact ul li:nth-child(2),.foot_contact ul li:nth-child(3){ border-left: 1px solid #444e57;}
.foot_contact ul li a{ height: 66px; display: flex; align-items: center; justify-content: center; text-align: center; background-color: #0A1419; color: #fff; font-size: 12px; font-weight: 300;}
.foot_contact ul li a i{ display: block; font-size: 14px; padding-bottom: 1px;}
@media screen and (max-width: 560px) {
  .foot_contact{display: block;}
}


/* :::::: thanks :::::: */

.btn1{ display: block; margin: var(--m-ml) auto 0 auto; width: min(320px, 80%); text-align: center; color: #fff;
  background: linear-gradient(to right, #C8956C, #8E7058); padding: 15px 10px; border-radius: 4px;}
.btn1:hover{ background: linear-gradient(to right, #e7a066, #b3825a);}
@media screen and (max-width: 560px) {
  .btn1{ width: min(240px, 80%); padding: 8px 10px;}
}

/* ----------------------------------------------------------------------------------
   MT Pagebute pagelist
---------------------------------------------------------------------------------- */

.pagenate{ position:relative; overflow:hidden; margin: 60px 0;}
.pagenate ul{ position:relative; display: -webkit-box; display: -ms-flexbox; display: flex;
	-ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;}
.pagenate li{ list-style:none; font-size: 13px; margin: 4px; 	border: 1px solid #1B3A4B;}
.pagenate li a{ display:block; padding:8px 12px; background-color: #1B3A4B; text-decoration:none; color: #fff;}
.pagenate li a:hover{	background-color: rgba(27, 58, 75, 0.664); }
.pagenate li span{ display:block;	padding:8px 12px;	color: #1B3A4B;}
@media screen and (max-width: 640px) {
  .pagenate{ margin: 30px 0; }
  .pagenate li a,.pagenate li span{ padding:5px 8px;}
}


/* ----------------------------------------------------------------------------------
   BTN Shine Animation
---------------------------------------------------------------------------------- */

.btn_shine{ position: relative; overflow: hidden;}
.btn_shine::before{ position: absolute; content: ""; top: 0; left: -75%; width: 40%; height: 100%;
  background: linear-gradient( to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 800) 100%
  ); transform: skewX(-35deg); animation: shine 3s infinite;}
@keyframes shine {
  0%{ left: -75%;}
  70%{ left: -75%;}
  100% { left: 125%;}
}