html, body {
 margin: 0; padding: 0;
 word-wrap: break-word;
 overflow-wrap: break-word;
 font-family: 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif;
 text-align: center;
 overflow-x: hidden;
}
html{
 scroll-behavior: smooth;
}
section {
 scroll-margin-top: 80px;
}
/* nmessage box */
.message_box{
 position: fixed;
 top: 30%;
 left: 50%;
 width: 380px;
 max-width: 80%;
 max-width: 380px;
 transform: translate(-50%, -50%);
 background-color: rgba(0, 0, 0, 0.8);
 color: #fff;
 padding: 12px 18px;
 border-radius: 5px;
 font-size: 16px;
 visibility: hidden;
 transition: opacity 0.5s ease, visibility 0.5s ease;
 display: block;
 z-index: 999999;
}
.message_box.show{
 opacity: 1;
 visibility: visible;
}
/* LINE */
.line_icon_btn{
 position: fixed;
 bottom: 30px;
 left: 10px;
 z-index: 9999;
 display: flex;
 align-items: center;
 gap: 10px;
 text-decoration: none;
 opacity: 0;
 transform: translateY(20px);
 animation: fadeInUp 0.8s ease-out forwards, shake 1.2s ease-in-out 2s infinite;
}
.line_icon_btn .line_icon{
 display: block;
 width: 50px;
 height: 50px;
 border-radius: 50%;
 padding: 1px;
 box-shadow: 0 4px 10px rgba(0,0,0,0.25);
 transition: transform 0.6s ease, box-shadow 0.2s ease;
}
.line_icon_btn:hover .line_icon {
 transform: translateY(-2px);
 box-shadow: 0 8px 16px rgba(0,0,0,0.3);
}
.line_label{
 background-color: #06C755;
 color: white;
 font-weight: bold;
 font-size: 14px;
 padding: 3px 10px;
}
@keyframes fadeInUp{
 0%{
  opacity: 0;
  transform: translateY(20px);
 }
 100%{
  opacity: 1;
  transform: translateY(0);
 }
}
@keyframes shake{
 0%   { transform: translateY(0); }
 20%  { transform: translateY(-2px) rotate(-3deg); }
 40%  { transform: translateY(2px) rotate(3deg); }
 60%  { transform: translateY(-2px) rotate(-1deg); }
 80%  { transform: translateY(1px) rotate(1deg); }
 100% { transform: translateY(0); }
}
/* header  */
.header_field{
 position: fixed;
 width: 100%;
 height: 70px;
 top: 0;
 left: 0;
 opacity: 0;
 transition: opacity 2s ease;
 background-color: white;
 z-index: 999999;
}
.header_field.active { opacity: 1; }
.header_innner{
 position: relative;
}
.hedear_logo{
 position: absolute;
 top: 20px; left: 80px;
 z-index: 1000;
 font-size: 22px;
 font-weight: bold;
 color: #333;
}
.hedear_logo a{
 color: #333;
 text-decoration: none;
}
/* menu */
.nav{
 position: fixed;
 top: 0;
 right: -3000px;
 width: 100%;
 height: 100%;
 background: #fff;
 box-shadow: -2px 0 5px rgba(0,0,0,0.3);
 transition: right 0.3s ease;
 z-index: 99999999;
 padding: 60px 20px;
}
.nav ul{
 list-style: none;
 padding: 0;
}
.nav ul li{
 margin-bottom: 20px;
}
.nav ul li a{
 text-decoration: none;
 color: #333;
 font-weight: bold;
}
.nav.open{
 right: 0;
}
.menu{
 cursor: pointer;
}
menu-open{
 overflow: hidden;
}
.navCloseBtn {
 position: absolute;
 top: 20px;
 right: 20px;
 font-size: 36px;
 color: #333;
 cursor: pointer;
 z-index: 10000;
}
.nav.open .navCloseBtn{
 display: block;
}
/* contact btn */
.contact_field{
 position: absolute;
 top: 12px;
 right: 4%;
}
.contact_btn i{
 display: none;
}
.contact_btn .contact_text{
 display: inline-block;
 font-size: 1rem;
}
.contact_btn{
 position: relative;
 overflow: hidden;
 display: flex;
 align-items: center;
 justify-content: center;
 background-color: #fff;
 border: 2px solid #333;
 border-radius: 30px;
 padding: 12px 30px;
 text-decoration: none;
 color: #333;
 font-weight: bold;
 transition: color 0.3s ease;
}
.contact_btn::before{
 content: "";
 position: absolute;
 bottom: 0;
 left: 0;
 width: 100%;
 height: 0%;
 background-color: #333;
 transition: height 0.3s ease;
 z-index: 0;
}
.contact_btn:hover::before{
 height: 100%;
}
.contact_btn span,
.contact_btn i {
 position: relative;
 z-index: 1;
}
.contact_btn:hover {
 color: #fff;
}
/* menu */
.menu{
 position: fixed;
 top: 8px; left: 8px;
 cursor: pointer;
 z-index: 999999;
}
.menu i{
 font-size: 56px;
 color: #333;
}
.material-symbols-outlined{
 font-size: 32px;
 color: #333;
 border-radius: 50%;
  border: 1px solid #fff;
}
/* indicator */
.material-symbols-outlined{
 font-size: 16px;
 color: #aaa;
}
.swiper_indicator a,
.indicator a{
 vertical-align: middle;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 20px;   /* お好みで */
 height: 20px;
 border-radius: 50%;
 text-decoration: none;
 transition: background-color 0.3s, color 0.3s;
}
.swiper_indicator a.active,
.indicator a.active {
 background-color: #666;
 border: 1px solid #666;
}
.swiper_indicator,
.indicator{
 vertical-align: middle;
 z-index: 9999;
}
.swiper_indicator i,
.indicator i{
 vertical-align: middle;
}
.swiper_indicator i.active,
.indicator i.active{
 background-color: #666;
 color: #666;
 border-radius: 50%;
 border: 1px solid #666;
}
.indicator{
 position: fixed;
 top: 50%; left: 20px;
 transform: translateY(-50%);
 display: flex; flex-direction: column; gap: 10px;
}
.swiper_indicator{
 position: fixed;
 bottom: 15px; left: 50%;
 transform: translateX(-50%);
 display: flex; gap: 10px;
}
/* contents */
.pc_field .block {
 height: 100vh;
 box-sizing: border-box;
 border-bottom: 1px solid #ccc;
}
main{
 margin: 0;
 padding: 0;
 width: 100%;
}
.contents_field section{
 padding: 3px 8px;
 width: 100%;
}
.swiper { display: none; }
/* section */
.section_title{
 opacity: 0;
 transform: translateX(-30px);
 transition: all 0.6s ease-out;
}
.section_title.visible{
 opacity: 1;
 transform: translateX(0);
}
.section_sub_title{
 font-size: 20px;
 display: block;
 color: #666;
}
/* contact ud */
.contact_us_box{
 display: inline-flex;
 align-items: center;
 gap: 6px;
 justify-content: center;
 padding: 10px 30px;
 background-color: #333;
 color: #fff;
 border-radius: 8px;
 text-decoration: none;
 font-size: 23px;
}
.contact_us_box i{
 font-size: 38px;
 border: none;
}
.contact_us_box span {
 display: inline-block;
}
/* page_1 */
.page_1{
 margin-top: 60px;
}
.page_1_img{
 position: relative;
 background-image: url('images/backgrand01.webp');
 background-size: contain;
 background-position: center;
 background-attachment: fixed;
 height: 600px;
 width: 100%;
 margin: 3px auto;
 transform: scale(1.1);
 opacity: 0;
 transition: all 1.2s ease;
}
.page_1_img.visible{
 transform: scale(1);
 opacity: 1;
}
.page_1_message{
 position: absolute;
 top: 85%; 
 left: 50%;
 transform: translate(-50%, -50%);
 color: #fff;
 font-size: 30px;
 font-weight: bold;
 text-align: center;
 text-shadow: 0 0 8px rgba(0,0,0,0.6);
 width: 90%;
}
.slogan_ja{
 font-size: 32px;
}
.slogan_en{
 color: #666;
}
/* Instagram */
.page_2{
 width: 100%;
}
.page_2 {
 position: relative;
 overflow: hidden;
 width: 100%;
}
.insta_slider,
.policy_list{
 list-style: none;
 padding: 0;
 margin: 0;  
}
.insta_slider {
 display: flex;
 gap: 10px;
 animation: scroll 30s linear infinite;
 margin: 35px auto 20px;
}
.insta_slider li{
 flex: 0 0 auto;
}
.insta_slider img{
 width: 200px;
 height: auto;
 display: block;
 border-radius: 8px;
}
@keyframes scroll{
 0% { transform: translateX(0); }
 100% { transform: translateX(-100%); }
}
.policy_list{
 list-style-type: decimal;
 padding: 0;
 margin: 1em auto;
 text-align: left;
 max-width: 500px;
}
.policy_list li{
 background: #f7e7d7;
 margin: 0.5em 0;
 padding: 0.5em 1em;
 border-radius: 4px;
}
.mission_content{
 max-width: 800px;
 margin: 0 auto;
}
.page_3_contents,
.page_4_contents{
 margin: 3px auto;
 text-align: left;
 width: 80%;
 font-size: 18px;
}
.page_3_contents p img,
.page_4_contents p img{
 margin-left: 10px;
 vertical-align: middle;
}
.sign_img{
 width: 165px;
 height: auto;
}
/* page_5 */
.company_history{
 list-style: none;
 margin: 0 auto;
 padding: 0;
 max-width: 700px;
}
.company_history li{
 display: flex;
 flex-direction: column;
 gap: 6px;
 padding: 1em 0;
 border-bottom: 1px solid #ddd;
}
.history_top{
 display: flex;
 align-items: center;
 gap: 10px;
}
.company_history i{
 font-size: 1.5rem;
 color: #333;
 flex-shrink: 0;
}
.history_line{
 font-weight: bold;
 font-size: 1.05rem;
}
.history_describe{
 color: #555;
 font-size: 0.9em;
 line-height: 1.6;
 margin-left: 2.1rem;
}
.page_5 .contact_us_box{
 margin-top: 60px;
}
/* page_6 */
.vision_field {
 width: 70%;
 margin: 0 auto;
 line-height: 1.8;
 font-size: 1rem;
}
.vision_inner{
 position: relative;
}
.vision_text img{
 float: right; 
 width: 260px;
 margin: 0 0 10px 30px;
 border-radius: 8px;
 padding: 4px;
 background: #fff;
 box-shadow: 0 4px 8px rgba(0,0,0,0.1);
 background-color: lightgray;
}
.vision_text{
 overflow: hidden;
}
.vision_text p{
 text-align: left;
 margin-bottom: 1em;
 font-size: 14px;
}
.page_6 .contact_us_box{
 margin-top: 30px;
}
/* page 7 */
.workstyle_text .contact_us_box{
 margin-top: 40px;
}
.workstyle_field{
 max-width: 800px;
 margin: 0 auto;
 line-height: 1.8;
 font-size: 1rem;
}
.workstyle_text{
 overflow: hidden;
}
.workstyle_text img{
 float: right;
 width: 200px;
 margin: 0 0 10px 20px;
 border-radius: 8px;
 padding: 4px;
 background: #fff;
}
.workstyle_text{
 background: #e6f0f8;
 border-radius: 8px;
 padding: 1.2em;
}
.workstyle_text p{
 text-align: left;
}
.workstyle_text ul{
 list-style: none;
 margin: 0;
 padding: 0;
}
.workstyle_text li{
 display: flex;
 align-items: flex-start;
 gap: 8px;
 margin-bottom: 0.8em;
 color: #333;
}
.workstyle_text i{
 font-size: 1.4rem;
 color: #007acc;
 flex-shrink: 0;
}
.support_training{
 text-align: center;
 background: #f0f8ff;
 padding: 2em 1em;
 border-radius: 8px;
}
.support_blocks{
 display: flex;
 flex-wrap: wrap;
 gap: 20px;
 justify-content: center;
}
.support_block{
 background: #fff;
 border: 1px solid #ddd;
 border-radius: 8px;
 width: 200px;
 padding: 1em;
 text-align: center;
}
.support_block img{
 width: 160px;
 height: 160px;
 object-fit: contain;
 margin-bottom: 0.5em;
}
.support_details{
 display: block;
}
.support_modal_open_btn{
 display: none;
}
.support_modal{
 display: none;
 position: fixed;
 z-index: 9999;
 top: 0; left: 0;
 width: 100%; height: 100%;
 background: rgba(0,0,0,0.6);
 justify-content: center;
 align-items: center;
 padding: 1em;
 box-sizing: border-box;
}
.support_modal_content{
 background: #fff;
 width: 90%;
 max-width: 400px;
 max-height: 80vh;
 overflow-y: auto;
 border-radius: 8px;
 padding: 1em;
}
.support_modal_close{
 float: right;
 font-size: 1.5rem;
 cursor: pointer;
}
.support_block ul{
 list-style: none;
 padding: 0;
 margin: 1em 0 0;
 text-align: left;
}
.support_block ul li{
 position: relative;
 padding-left: 1.8em;
 margin-bottom: 0.6em;
 line-height: 1.6;
 font-size: 0.9rem;
 color: #333;
}
.support_block ul li::before{
 content: "✔";
 position: absolute;
 left: 0;
 top: 0.1em;
 color: #007ACC;
 font-weight: bold;
 font-size: 1rem;
}
/* page_9  */
.page_9{
 padding: 40px 20px;
}
.tabs{
 max-width: 800px;
 margin: 0 auto;
}
.tabs input[type="radio"]{
 display: none;
}
.tabs label{
 display: inline-block;
 padding: 10px 20px;
 background: #eee;
 cursor: pointer;
 font-weight: bold;
 margin-right: 5px;
 border-radius: 5px 5px 0 0;
}
.tabs label:hover{
 background: #ddd;
}
.tab-panels{
 border: 1px solid #ccc;
 padding: 20px;
 background: #fff;
}
.tab-panel{
 display: none;
}
#tab1:checked ~ .tab-panels #model1,
#tab2:checked ~ .tab-panels #model2{
 display: block;
}
.tab-panel ul{
 padding: 0;
 margin: 0;
 list-style: none;
}
.tab-panel li{
 position: relative;
 padding-left: 1.5em;
 margin-bottom: 8px;
 text-align: left;
 line-height: 1.6;
}
.tab-panel li::before{
 content: "pets";
 font-family: 'Material Symbols Outlined';
 position: absolute;
 left: 0;
 color: #555;
 font-size: 1.2em;
}
.highlight-profit{
 background-color: #f7f7a1;
 padding: 8px 12px;
 border-radius: 6px;
 font-weight: bold;
 display: inline-block;
}
.highlight-profit li::before{
 content: none;
}
.highlight-rate{
 font-weight: bold;
 text-decoration: underline;
 color: #007B55;
}
.note-list{
 margin-top: 30px;
 padding: 15px 20px;
 background: #f9f9f9;
 border-left: 4px solid #ccc;
 border-radius: 4px;
 list-style: none;
 width: 40%;
 margin:10px auto;
}
.note-list li{
 position: relative;
 padding-left: 1.5em;
 margin-bottom: 6px;
 font-size: 0.7em;
 color: #555;
 line-height: 1.6;
 text-align: left;
}
.note-list li::before{
 content: "※";
 position: absolute;
 left: 0;
 color: #999;
}
/* page 10 */
.page_10 .faq{
 max-width: 800px;
 margin: 0 auto;
}
.faq_item{
 border-bottom: 1px solid #ccc;
}
.faq_question{
 width: 100%;
 text-align: left;
 background: none;
 border: none;
 font-size: 1.1em;
 font-weight: bold;
 padding: 15px 10px;
 cursor: pointer;
 display: flex;
 align-items: center;
 gap: 8px;
}
.faq_question i{
 font-size: 1.2em;
 color: #007B55;
}
.faq_answer{
 display: none;
 padding: 10px 15px 20px;
 background: #f9f9f9;
 color: #333;
 line-height: 1.6;
 text-align: left;
}
.faq_item.open .faq_answer{
 display: block;
}
.page_10 .contact_us_box{
 margin-top: 60px;
}
/* page 11 */
.contact_form{
 max-width: 70%;
 margin: 30px auto;
 padding: 0 20px;
}
.form_group{
 margin-bottom: 20px;
 text-align: left;
}
.form_group label{
 display: block;
 font-weight: bold;
 margin-bottom: 8px;
 font-size: 16px;
 color: #333;
}
.form_group input,
.form_group textarea{
 width: 100%;
 padding: 12px 16px;
 font-size: 16px;
 border: 1px solid #ccc;
 border-radius: 6px;
 box-sizing: border-box;
 transition: border-color 0.2s;
}
.form_group input:focus,
.form_group textarea:focus{
 border-color: #5a4bcf;
 outline: none;
}
.contact_submit_btn{
 display: inline-block;
 background-color: royalblue;
 color: #fff;
 font-size: 16px;
 padding: 14px 40px;
 border: none;
 border-radius: 30px;
 cursor: pointer;
 transition: background 0.3s;
}
.contact_submit_btn:hover{
 background: #4833c2;
}
@media (max-width: 768px){
 html, body {
  overflow-y: hidden;
  height: 100vh;
 }
 section {
  scroll-margin-top: 100px;
 }
 .page_1{
  overflow-y: hidden;
 }
 .section_title{
  font-size: 85%;
 }
 .section_sub_title{
  font-size: 70%;
 }
 .header_field{
  height: 70px;
 }
 .hedear_logo{
  font-size: 20px;
  left: 68px;
 }
 .indicator { display: none; }
 .swiper {
  display: flex; 
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  height: 100vh;
  overflow-y: hidden; 
 }
.slide {
 flex-shrink: 0;
 min-width: 100vw;
 height: 100vh;
 scroll-snap-align: start;
 box-sizing: border-box;
}
 main{
  padding-top: 60px;
  height: 100vh;
 }
 .main h1{
  margin: 3px auto;
 }
 .contact_field{
  position: absolute;
  top: 10px;
  right:18px;
 }
 .contact_btn{
  position: relative;
  width: 50px;
  height: 30px;
  padding: 6px 10px;
  border-radius: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
 }
 .contact_btn i{
  position: absolute;
  display: inline-block;
  font-size: 32px;
  border: none;
  top: -1px;
 }
 .contact_btn .contact_text{
  display: none;
 }
 .contact_btn::after {
  content: "お問い合わせ";
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: #333;
  text-align: center;
  white-space: nowrap;
 }
 .page_1_message{
  font-size: 20px;
 }
 .page_1,
 .page_2{
  position: relative;
  margin-top: 20px;
  padding: 0;
  height: 100vh;
 }
 .page_1{
  z-index: 2;
 }
 .page_2 {
  position: relative;
  z-index: 1;
  overflow: hidden;
 }
 .page_1 h1{
  font-size: 20px;
 }
 .page_1_img {
  background-size: contain;
  background-repeat: no-repeat;
  background-attachment: scroll;
  height: 338px;
 }
 .slogan_ja_mobile{
  display: block;
 }
 .slogan_ja{
  font-size: 23px;
 }
 .slogan_en{
  color: #666;
 }
 .page_2 p{
  font-size: 85%;
 }
 .page_2 h2{
  margin: 3px auto;
 }
 .insta_slider img {
  width: 115px;
 }
 .policy_list{
  margin: 3px 12px;
  max-width: 100%;
 }
 .policy_list li{
  margin: 0.3em 0;
  padding: 0.1em 1em;
  font-size: 82%;
 }
 .insta_slider{
  margin: 3px 8px;
 }
 .page_3_contents,
 .page_4_contents{
  width: 96%;
 }
 .page_3_contents p,
 .page_4_contents p{
  font-size: 10px;
 }
 .sign_img{
  width: 100px;
 }
 .history_line{
  font-size: 0.8rem;
 }
 .history_describe{
  font-size: 0.8em;
  line-height: 1;
  margin-left: 0.8rem;
  text-align: left;
 }
 .vision_field{
  width: 98%;
  line-height: 1.2;
 }
 .vision_text p{
  font-size: 13px;
  margin-bottom: 0.3em;
 }
 .vision_text img{
  width: 100px;
 }
 .page_10 .contact_us_box{
  margin-top: 20px;
 }
 .page_5 .contact_us_box,
 .page_6 .contact_us_box{
  display: none;
 }
 .workstyle_text{
  font-size: 0.8em;
 }
 .workstyle_text img{
  width: 100px;
 }
 .workstyle_text li{
  font-size: 0.8em;
 }
 .workstyle_text i{
  font-size: 1.2rem;
 }
 .workstyle_text .contact_us_box{
  margin-top: 10px;
 }
 /* page_8 */
 .support_training{
  min-height: 60vh;
  padding-top: 2em;
 }
 .support_blocks{
  gap: 6px;
 }
 .support_modal_content{
  height: 40vh;
  max-height: 60vh;
 }
 .support_comment{
  font-size: 0.8em;
 }
 .support_blocks{
  flex-direction: column;
  align-items: center;
 }
 .support_block{
  display: block;
  width: 90%;
  max-width: 96%;
  height: 19vh;
  padding: 0.1em 1em;
  margin: 0 auto 0.3em;
 }
 .support_details{
  display: none;
 }
 .support_modal_open_btn{
  display: inline-block;
  background: #007ACC;
  color: #fff;
  padding: 0.6em 1.2em;
  border: none;
  border-radius: 30px;
 }
 .support_img,
 .support_details_contents{
  display: inline-block;
  vertical-align: middle;
  margin-left: 15px;
 }
 .tab-panel li{
  line-height: 1.2;
  font-size: 14px;
 }
 .note-list{
  margin-top: 3px;
  padding: 6px 20px;
  width: 80%;
  margin:3px auto;
 }
 .note-list li{
  padding-left: 1.3em;
  margin-bottom: 3px;
  font-size: 0.3em;
  line-height: 1.4;
  text-align: left;
 }
 .faq_question{
  font-size: 0.95em;
 }
 .faq_answer{
  font-size: 14px;
 }
 .page_11 p{
  font-size: 13px;
 }
 .contact_form{
  max-width: 100%;
  margin: 10px auto;
  padding: 0 20px;
 }
 .form_group{
  margin-bottom: 3px;
  font-size: 14px;
 }
 .form_group label {
  margin-bottom: 3px;
  font-size: 14px;
 }
 .form_group input,
 .form_group textarea {
  padding: 8px 16px;
  font-size: 14px;
 }
}