body,button,input,select,textarea{
  font-family: 'Poppins','Noto Sans JP', sans-serif;
  font-size: 16px;
}
body{
  overflow-y: scroll;
  letter-spacing: .2rem;
}
button{
  outline: none;
}
sup{
  font-size: 60%;
}
.monofade{
  opacity: 0;
  transition: 1s all ease;
}
.monofade.monoact{
  opacity: 1;
}
.wrap{
  width: calc(100% - 120px);
  max-width: 1200px;
  margin: 0 auto;
}
.big_wrap{
  width: calc(100% - 80px);
  max-width: 1400px;
  margin: 0 auto;
}
.flex{
  display: flex;
  flex-wrap: wrap;
}
.align_bottom{
  align-items: flex-end;
}
.awesome:before,.awesome:after{
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}
.ofi{
  object-fit: cover;
}
p{
  line-height: 200%;
}

.pc_hidden{
  display: none;
}

/* 基本となるテーブル */
.main_table{
  border-top:1px solid #000;
  table-layout: fixed;
  width: 100%;
}
.main_table th,.main_table td{
  border-bottom: 1px solid #000;
  text-align:center;
  padding: 10px;
}
.main_table th{
  color: #d00;
  font-size: 130%;
}
.main_table td{
  border: 1px solid #000;
}
.main_table tr td:first-child{
  border-left:none;
}
.main_table tr td:last-child{
  border-right:none;
}

header{
  padding: 25px 3%;
  border-bottom: 6px #0173BE solid;
  position: fixed;
  z-index: 100;
  width: 100%;
  top: 0;
  left: 0;
  transition:all .3s ease;
  background: #fff;
}
header.head_active{
  padding: 15px 3%;
  background:rgba(255,255,255,.8);
  backdrop-filter: blur(4px);
}

#head_logo{
  width: 210px;
}
#head_logo img{
  width: 100%;
}
#head_menu{
  width: calc(100% - 210px);
}
#head_menu ul{
  margin-left: 50px;
  display: flex;
}
#head_menu ul li{
  padding: 0px 2%;
  font-size: 90%;
  position: relative;
}
#head_menu ul li a{
  padding: 10px;
  color: #0073BD;
  letter-spacing: .2rem;
  font-weight: bold;
}
#head_menu ul li::after,#head_menu ul li.active::after{
  content: "";
  position: absolute;
  top: 30px;
  left: calc(50% - 2px);
  width: 4px;
  height: 4px;
  background: #0173BE;
  border-radius: 50px;
  transition:all .3s ease;
}

#head_menu ul li:hover::after,#head_menu ul li.active::after{
  border-radius: 50px 50px 0 0;
  height: 40px;
}
header.head_active #head_menu ul li:hover::after,header.head_active #head_menu ul li.active::after{
  height: 20px;
}
.sp_menu,#sp_menu_bt,#sp_menu_close,#sp_menu_close_area{
  display: none;
}

/* 共通フッター */
footer{
  background: #0173bc;
  width: 100%;
  color: #fff;
}
#footer_head{
  padding: 60px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#footer_head img{
  width: 250px;
}
#footer_nav{
  width: calc(100% - 350px);
}
#footer_nav .box{
  margin-bottom: 45px;
}
#footer_nav .box:last-child{
  margin-bottom: 0;
}
#footer_nav .box h3{
  font-size: 120%;
  border-bottom: 2px solid #fff;
  padding-bottom: 10px;
  margin-bottom: 40px;
}
#footer_nav .box ul{
  margin: 20px 0 0;
  justify-content: space-between;
}
#footer_nav .box ul li:first-child{
  width: 160px;
  font-weight: bold;
}
#footer_nav .box ul li:last-child{
  width: calc(100% - 200px);
}
#footer_nav .box ul li.flex{
  justify-content: flex-start;
}
#footer_nav .box ul li.flex a{
  display: block;
  color: #fff;
  margin-right: 20px;
  margin-bottom: 10px;
  padding-bottom: 2px;
  border-bottom: 1px solid #fff;
  transition: .5s all ease;
}
#footer_nav .box ul li.flex a:hover{
  color: yellow;
  border-color: yellow;
}

#footer_foot{
  background: #01375b;
  text-align:right;
  padding: 30px;
  font-size: 10px;
}

/* ボタンエリア */
.bt_area a,.bt_area button{
  padding: 10px 0;
  border: 2px solid #000;
  font-size: 110%;
  text-align:center;
  background: none;
  color: #000;
  display: block;
  position: relative;
  transition:all .5s ease;
  word-break:keep-all;
  overflow: hidden;
  font-weight: 600;
}
.bt_area a:hover,.bt_area button:hover{
  background: #C8161D;
  border-color: #C8161d;
  color: #fff;
}
.bt_area a::after,.bt_area button::after{
  content: "";
  position: absolute;
  right: 4px;
  bottom: 4px;
  border-top: 10px solid transparent;
  border-right: 10px solid #000;
  transition:all .5s ease;
}
.bt_area a:hover::after,.bt_area button:hover::after{
  border-top: 20px solid transparent;
  border-right: 20px solid #fff;
}


.bt_area.col2{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.bt_area.col2 button,.bt_area.col2 a{
  margin: 20px 10px;
}

#head_userlink{
  transition: .3s all ease;
  position: absolute;
  color: #fff;
  bottom: -25px;
  z-index: 30;
  display: flex;
  justify-content: flex-end;
  width: 94%;
}
#head_userlink a{
  font-size: 1vw;
  padding: 10px 2%;
  color:#fff;
  background: #0073bd;
}
#head_userlink a:nth-child(2){
  margin-left: 20px;
}
#head_userlink a:hover{
  background: tomato;
}

#loading{
  width: 100%;
  height: 100%;
  background: #fff;
  position: fixed;
  top:0;
  left:0;
  z-index: 9999;
}

#loading div{
  width: 100px;
  height: 90px;
  position: fixed;
  z-index: 101;
  top: calc(50% - 45px);
  left: calc(50% - 50px);
  text-align:center;
}
#loading div p{
  margin-top: 5px;
  color: #5eb7e8;
  font-size: 120%;
}
#loading path,#send_svg path{
  stroke-miterlimit:10;
  stroke-width:1px;
  stroke-dasharray: 200px;
  stroke-dashoffset: 200px;
  fill-opacity : 0%;
  animation: loadAnim 3s infinite linear;
  animation-fill-mode: forwards;
}
#loading .cls-1,#send_svg .cls-1{
  fill:#5eb7e8;
  stroke:#5eb7e8;
}
#loading .cls-2,#send_svg .cls-2{
  fill:#1e4780;
  stroke:#1e4780;
}
@keyframes loadAnim{
  0% {
    stroke-dashoffset: 0px;
    stroke-width:1px;
    fill-opacity : 100%;
  }
  50% {
    stroke-dashoffset: 200px;
    fill-opacity : 0%;
    stroke-width:1px;
  }
  100% {
    stroke-dashoffset: 0px;
    stroke-width:1px;
    fill-opacity : 100%;
  }
}

#top_visual{
  width: 100%;
  position: relative;
}

#top_img{
  width: 100%;
  object-fit: cover;
  opacity: 0;
  transition:all 1s ease;
}
#top_svg .cls-1{
  fill:none;
  stroke:#0173BE;
  stroke-miterlimit:10;
  stroke-width:1px;
  stroke-dasharray: 3000px;
  stroke-dashoffset: 3000px;
  fill-opacity : 0%;
}
#top_svg.active .cls-1{
  animation: strokeAnim 3s linear;
  animation-fill-mode: forwards;
}

#top_img.active{
  opacity: 1;
}
#top_svg{
  position: absolute;
  top:0;
  left:0;
  z-index: 1000;
}

@keyframes strokeAnim{
  0% {
    stroke-dashoffset: 3000px;
    fill-opacity : 0%;
    stroke-width:1px;
  }
  100% {
    stroke-dashoffset: 0px;
    stroke-width:1px;
    fill-opacity : 100%;
  }

}

#top_info{
  position: absolute;
  z-index: 30;
  left: 10%;
  width: calc(90%);
}
#top_info svg{
  width: 100%;
  height: 190px;
  color: #fff;
}
#top_main_copy text{
  font-family: 'Noto Serif JP', serif;
  font-size: 60px;
  letter-spacing: 1.5rem;
  font-style:italic;
  text-shadow: 0 0 10px rgba(0, 0, 0, .8);
  stroke-miterlimit:10;
  stroke-width:1px;
  stroke-dasharray: 500px;
  stroke-dashoffset: 500px;
  stroke:#fff;
  fill: #fff;
  fill-opacity : 0%;
}
#top_main_copy.active text{
  animation: textAnim 1s linear;
  animation-fill-mode: forwards;
}
@keyframes textAnim{
  0% {
    stroke-dashoffset: 500px;
    fill-opacity : 0%;
    stroke-width:1px;
  }
  70% {
    stroke-dashoffset: 0px;
    fill-opacity : 0%;
    stroke-width:1px;
  }
  100% {
    stroke-dashoffset: 0px;
    stroke-width:0px;
    fill-opacity : 100%;
  }
}

#top_info img{
  width: 300px;
  margin: 60px 0 20px;
}
#top_info_inner{
  opacity: 0;
  transition:all 1s ease;

}
#top_info_inner.active{
  opacity: 1;
}
#top_info_inner p{
  color: #fff;
  font-size: 110%;
  text-shadow: 0 0 10px rgba(0, 0, 0, .8);
  line-height: 2.5rem;
}
#top_info_inner ul{
  margin-top: 40px;
  justify-content: space-between;
  width: 50%;
  max-width: 550px;
}
#top_info_inner li{
  width: calc(50% - 10px);
  border-top: 1px solid #fff;
  text-align:center;
}
#top_info_inner li p{
  font-size: .6vw;
  line-height: 1;
  margin: 10px 0;
  word-break: keep-all;
}
#top_info_inner li a{
  display: block;
  padding: 10px 0;
  text-align:center;
  color: #fff;
  background: #c00;
  font-style: italic;
  font-size: 100%;
  position: relative;
}

#top_info_inner li a::after{
  content: "";
  position: absolute;
  right: 4px;
  bottom: 4px;
  border-top: 10px solid transparent;
  border-right: 10px solid #fff;
  transition:all .5s ease;
}
#top_info_inner li a:hover::after{
  border-top: 20px solid transparent;
  border-right: 20px solid #fff;
}


#page_mv{
  position: relative;
}
#page_mv_img,.page_mv_content{
  transition:all 1s ease;
}
#page_mv_img{
  width: 100%;
  opacity: 0;
}
.page_mv_content{
  opacity: 0;
}

.page_mv_content.active{
  opacity: 1;
}

#page_mv_img.active{
  opacity: 1;
}
#page_mv_svg{
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  top:0;
  left:0;
}
#page_mv svg{
  position: absolute;
  fill:none;
  stroke:#0173BE;
  stroke-miterlimit:10;
  stroke-width:1px;
  stroke-dasharray: 3000px;
  stroke-dashoffset: 3000px;
  fill-opacity : 0%;
}
#page_mv_svg.active svg{
  animation: strokeAnim 3s linear;
  animation-fill-mode: forwards;
}

#page_mv .zehnder_logo{
  position: absolute;
  width: 20%;
  max-width: 150px;
  top: 3%;
  left: 2%;
  z-index: 2;
}
#comfohome_head br{
  display: none;
}
.page_mg_title{
  position: absolute;
  width: 100%;
  top: 40%;
  left: 0;
  text-align:center;
  color: #fff;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  font-size: 220%;
  letter-spacing: .4rem;
}
.page_mg_title h2{
  font-size: 200%;
  text-align:center;
  font-weight: bold;
}
.page_mg_title h2 span{
  display: block;
  font-size: 45%;
  color : #e00;
  text-shadow: none;
  line-height: 1;
  padding: 10px;
  background: #fff;
  margin: 0 auto;
  letter-spacing: .1rem;
}

.page_mg_title h2 strong{
  font-size: 100%;
}
.page_mg_title p{
  margin-top: 20px;
  font-style: italic;
}
.page_mg_title p sup{
  font-size: 40%;
}
.page_mg_title small{
  font-size: 60%;
}

/* ページ内メニュー */
#page_menu{
  position: fixed;
  right: 2%;
  z-index: 2000;
  width: 70px;
  opacity: .5;
  transition:all .5s ease;
}
#page_menu:hover{
  opacity: 1;
}
#page_menu li{
  width: 70px;
  height: 70px;
  position: relative;
  background: #0073bd;
  border-radius: 50%;
  margin: 15px 0;
  cursor: pointer;
  transition: .5s all ease;
}
#page_menu li.active{
  background: #ff6347;
}

#page_menu li img,#page_menu li .back,#page_menu li .text{
  transition:all .5s ease;
}

#page_menu li img{
  position: absolute;
  padding: 12px;
  width: 70px;
  height: 70px;
  z-index: 2;
}
#page_menu li .back{
  position: absolute;
  text-align:center;
  width:0px;
  height: 70px;
  z-index: 1;
  top: 0px;
  right: 0px;
  /* background: rgba(255, 0, 0, 0.5); */
  overflow: hidden;
}
#page_menu .text{
  position: absolute;
  color: #fff;
  right: 30px;
  top: 8px;
  border-radius: 50px 0 0 50px;
  background:rgba(0, 115, 189, 0.8);
  padding: 6px 50px 6px 30px;
  width: auto;
  word-break: keep-all;
}
#page_menu li.active .text{
  background: rgba(255, 99, 71, 0.8);
}
#page_menu li .text small{
  font-size: 60%;
  display: block;
}

#page_menu li:hover .back{
  width: 270px;
}
#sp_page_menu_bt{
  display: none;
}

/* ページ内のコンタクトエリア */
.contact_section{
  width: 100%;
  padding: 60px 0;
  background:#d6fff6;
  text-align:center;
  font-size: 120%;;
}
.white .contact_section{
  background: #fff;
}
.contact_section img{
  width: 300px;
  display: block;
  margin: 40px auto 0;
}
.contact_section span,.contact_section strong{
  display: block;
}
.contact_section strong{
  font-size: 220%;
  font-weight: bold;
  margin: 10px 0;
}
.contact_section span{
  font-size: 110%;
}
.contact_section .bt_area{
  margin-top: 40px;
}
.contact_section .bt_area a{
  width: calc(30% - 20px);
  font-size:90%;
}
.contact_section h2{
  font-weight: normal;
  font-size: 100%;
}

/* よくある質問 */
#qa_area{
  background:#d6fff6;
  padding: 60px;
  margin: 100px auto;
}
#qa_area h2{
  color: #01e1aa;
  text-align:center;
  font-size: 300%;
}
#qa_area li{
  padding: 40px 0;
  border-bottom: 1px solid #aaa;
}
#qa_area li:last-child{
  border-bottom:none;
  padding-bottom: 0;
}
.q_area,.a_area{
  padding: 15px 0 15px 60px;
  position: relative;
}
.q_area::before,.a_area::before{
  position: absolute;
  color: #01e1aa;
  left:0;
  font-size: 300%;
  top: calc(50% - 36px);
}
.q_area::before{
  content: "Q";
}
.a_area::before{
  content: "A";
}
.q_area p{
  font-size: 130%;
  font-weight: bold;
}
#qa_area .pdf_bt p{
  text-align:center;
  font-size: 90%;
}

#qa_area .pdf_bt a{
  display: block;
  padding: 20px 0;
  font-size: 110%;
  width: 100%;
  max-width: 600px;
  margin: 0 auto 20px;
  text-align:center;
  color: #fff;
  background: #c00;

}
/* 共通ポップアップ */
.pop_window{
  display: none;
  position: fixed;
  top:0;
  left:0;
  width:0;
  height:0;
  z-index: 10000;
}
.pop_box{
  position: fixed;
  z-index: 2;
  width: calc(100% - 80px);
  height: calc(100vh - 6%);
  top: 3%;
  max-width: 1200px;
  padding: 60px;
  background: rgba(240, 240, 240, 0.95);
  overflow-y: auto;
}
.pop_box h2{
  font-style:italic;
  font-size: 180%;
  margin-bottom: 30px;
  text-align:center;
}
.pop_box table{
  margin-top: 40px;
}
.pop_close{
  position: fixed;
  z-index: 1;
  width: 100%;
  height: 100%;
  top:0;
  left:0;
}
.pop_close_bt{
  z-index: 3;
  position: fixed;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  cursor: pointer;
}
.pop_close_bt::before,.pop_close_bt::after{
  position: absolute;
  content: "";
  top: 14px;
  width: 35px;
  height: 35px;
  border-top: 2px solid #000;
  transition:all .3s ease;
}
.pop_close_bt::before{
  transform:rotate(45deg);
  right: 14px;
}
.pop_close_bt::after{
  transform:rotate(-45deg);
  left: 14px;
}
.pop_close_bt:hover::before,.pop_close_bt:hover::after{
  border-color: red;
}

/* プライバシーポリシー */
#prapory_area .pop_box h2{
   font-size: 200%;
}

.prapoly_box{
  margin-bottom: 50px;
  font-size: 80%;
}
.prapoly_box h3{
  font-size: 140%;
  margin-bottom: 20px;
}
.prapoly_box p{
  margin: 10px 0;
}
.prapoly_box ol li{
  list-style-type: decimal;
  margin-left: 30px;
  margin-bottom: 10px;
}
#prapory_area .pop_box {
    position: fixed;
    z-index: 2;
    width: 85%;
    height: 85%;
    border: 10px solid #ccc;
    top: 12.5%;
    margin: 0 auto;
    padding: 60px;
    background: rgba(240, 240, 240, 1);
    overflow-y: auto;
}

/* 下層ページ テキストベース */
.textbase{
  padding: 100px 0;
  background: #d6fff6;
}
.textbase:nth-child(2n+1){
  background: #fff;
}
.textbase h2{
  text-align: center;
  font-size: 350%;
  color:#01e1ab;
}
.textbase h2 small{
  display: block;
  color: #000;
  font-size: 50%;
}
.textarea{
  padding: 50px 0;
}
.textarea h3{
  font-size: 200%;
  margin-bottom: 35px;
  color: #0072bb;
}
.textarea p{
  margin: 8px 0;
}
.textarea small{
  display: block;
  margin: 8px 0;
  font-size: 90%;
}
.textarea .bt_area{
  margin-top: 50px;
  width: calc(100% - 60px);
  max-width: 400px;
}
.textarea .bt_area.col2{
  display: flex;
  justify-content: space-between;
  max-width: 800px;
  flex-wrap: nowrap;
}
.textarea .bt_area.col2 a{
  width: calc(50% - 10px);
}

/* タイトルが枠に埋まってるコンテンツ(アフターサービスページ) */
.title_u_text_box{
  border: 2px solid #000;
  padding: 55px 30px 40px;
  position: relative;
  font-size: 120%;
}
.title_u_text_box h4{
  position: absolute;
  font-size: 110%;
  text-align: center;
  left:0;
  top: 0;
  line-height: 0;
  width: 100%;
  font-weight: normal;
  word-break: keep-all;
}
.title_u_text_box h4 span{
  padding: 0 20px;
}
.title_u_text_box h4 span.green{
  background: #d6fff6;
}
.title_u_text_box ul{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: center;
}
.title_u_text_box li{
  list-style-type: disc;
  margin: 10px 0 10px 20px;
  font-size: 90%;
}
/* トラブルシューティング */
.ts_table{
  width: 100%;
}
.ts_table thead{
  background: #0072bb;
  color: #fff;
  font-weight: bold;
}
.ts_table th,.ts_table td{
  border: 1px solid #000;
  padding: 20px;
}
.ts_table th{
  text-align:center;
}
.ts_table tbody tr th{
  background: #c2e6ff;
}

/* グーグルマップ用 */
.gmap {
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
}
.gmap iframe {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}

/* 404エラーページ */
#erorpage{
  margin-top: 50px;
  text-align: center;
}

#erorpage .bt_area{
  width: calc(100% - 60px);
  max-width: 300px;
  margin: 30px auto 0;
}

/* リンク無効 */
#head_menu ul li .nolink{
  color: #777;
  cursor: no-drop;
}

#gcalendar iframe{
  width: 100%;
  aspect-ratio: 2/1;
}