/*
Theme Name: hyowa-child
Template: understrap
*/

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;500;700&family=Noto+Sans+JP:wght@400;700&familyfamily=Nunito+Sans:wght@300;400&display=swap');
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,  caption, tbody, tfoot, thead, tr, th, td {border: 0;font-family: inherit;font-size: 100%;font-style: inherit;font-weight: inherit;margin: 0;outline: 0;padding: 0;vertical-align: baseline;}
:focus {outline: 0;}

ol, ul {list-style: none;}
table {border-collapse: separate;border-spacing: 0;}
caption, th, td {font-weight: normal;text-align: left;}
blockquote:before, blockquote:after,q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
a img {border: 0;}
article, aside, details, figcaption, figure, footer, header,  menu, nav, section {display: block;}

* {
  box-sizing: border-box;
}

html{ font-size: 62.5% ; scroll-behavior: smooth;} /*初期値16pxの62.5%でルートが10px*/
body{
	line-height: 1.6;
	background: url("/img/common/back.jpg") 0  calc( 100% - 80px ) no-repeat; background-size: 65% auto;
	font-size: 1.6rem; /* 16px */
	font-family: 'Noto Sans JP', sans-serif;
	color:#000; -webkit-text-size-adjust: 100%;
    min-height: 100vh; 
	 font-weight: 400;
    
}


/*全てをクリア*/
.clear {clear: both;} 

/* new clearfix */
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */


/* リンク設定
------------------------------------------------------------*/
a,a:visited{
margin:0;
padding:0;
text-decoration:none;
outline:0;
vertical-align:baseline;
background:transparent;
 color:   #0683ce; transition: all 0.5s ease 0s;
  cursor: pointer;}

a:hover, a:active{transition: all 0.5s ease 0s;
outline: none;
color:#ff9900; text-decoration: none;}

 a:hover img{opacity:.7; }

/**** Clearfix ****/

/* レイアウト
------------------------------------------------------------*/
.inner{margin:0 auto;max-width:1150px; width:90%; position: relative;  }
.inner2{margin:0 auto;max-width:830px; width:90%;position: relative;}
.inner3{margin:0 auto;max-width:1000px; width:85%;position: relative;}
.inner4{margin:0 auto;max-width:700px; width:85%;position: relative;}
.inner4-2{margin:0 auto; max-width:calc( 700px + 2em ); width:calc( 85% + 2em );position: relative;}

#wrapper{margin:0 auto 0px; 
padding:0 0 0px; overflow: hidden; 
	display: flex;
  flex-direction: column;
  min-height: 100vh; 

}
/*.googlefont */

.lato-small {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.lato-regular {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.lato-bold {
  font-family: "Lato", sans-serif;
  font-weight:600;
  font-style: normal;
}

/* 共通変更 フォントサイズ　*/
.font12 { font-size: clamp( 10px, 1.2vw, 12px); }/*  10px 最大　2px*/
.font14 { font-size: clamp( 12px, 1.4vw, 14px); }/*  12px 最大　14px*/
.font16 { font-size: clamp( 14px, 1.6vw, 16px); }/*  14px 最大　16px*/
.font18 { font-size: clamp( 16px, 1.8vw, 18px); }/*  16px 最大　18px*/
.font20{ font-size: clamp( 16px, 2.0vw, 20px); }/*  16px 最大　20px*/
.font22 { font-size: clamp( 18px, 2.2vw, 22px ); }/*  18px 最大　22px*/
.font24{ font-size: clamp( 18px, 2.4vw, 24px); }/*  18px 最大　24px*/
.font26{ font-size: clamp( 18px, 2.6vw, 26px); }/*  20px 最大　26px*/
.font28 { font-size: clamp(20px, 2.8vw, 28px); }/*  20px 最大　28px*/
.font30{ font-size: clamp(24px, 3.0vw, 30px); }/*  24px 最大　30px*/
.font34{ font-size: clamp( 26px, 3.4vw, 34px); }/*  26px 最大　34px*/
.font36{ font-size: clamp( 28px, 3.6vw, 36px); }/*  28px 最大　36px*/
.font40{ font-size: clamp(30px, 4.0vw, 40px ); }/*  30px 最大　40px*/
.font46 { font-size: clamp( 32px, 4.6vw, 46px );}/*  32px 最大　46px*/
.font48 { font-size: clamp(36px, 4.8vw, 48px );}/*  36x 最大　48px*/

.blue{ color: #0683ce;}
.flex{ display: flex;}
.wrap{flex-wrap: wrap;}
.justify-content{justify-content: space-between;}
.reverse{flex-direction: row-reverse;}

.backblue{ background: #0683ce;}


/* ヘッダー
----------------------------------*/
#glovalheader{display: block; 
  z-index: 90;
  cursor: pointer;
  pointer-events: auto;  background: #fff;
 transition: all 0.5s ease 0s;  font-weight: 400;
 position: fixed; /*ポジションを固定する*/
  top: 0px;
 width:100%; text-align: center;
}
#glovalheader.scroll{filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.5));}

@media only screen and (min-width: 1000px){
 #glovalheader h1{margin: 20px 0 0; width:50%; max-width: 250px; text-align: left; }
.el_humburger {  display: none;}
    
#glovalheader nav{ width:100%; max-width: 700px; margin:20px 0 10px 0; }
#glovalheader nav li{ display: inline-block; vertical-align: middle; margin:0 0 0 1em; width:auto; position: relative;}
#glovalheader nav li:not(:last-child):after{ content:"/"; display: inline-block; position: absolute; right:-0.75em; top:50%; transform:translateY(-50%);}
#glovalheader nav li:last-child{ margin:0 0 0 1em;} 
    
.mainView{  margin: 125px 0 0 0;}   
.home .mainView{ margin: 125px 0 0 0;}   
  
#glovalheader nav a{ color: #000;
position: relative;
  display: inline-block;
  text-decoration: none;
} 
#glovalheader li a::after {
  position: absolute;
  bottom:6px;
  left: 0.5em;
  content: '';
  width: calc( 100% - 1em) ;
  height: 2px;
  background: #0268b6;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
}
#glovalheader li a:hover::after{
  bottom: 2px; 
  opacity: 1;
  visibility: visible;
}
#glovalheader li a:hover{color: #0268b6;}
#glovalheader li a:hover::before{ display: block;transition: .3s;}
    
.page-template-page-company #glovalheader li.companybtn a,.page-template-page-ex #glovalheader li.exbtn a,.home #glovalheader li.homebtn a,.page-template-page-business #glovalheader li.businessbtn a,.page-template-page-contact #glovalheader li.contactbtn a{color: #0268b6;}
.page-template-page-company #glovalheader li.companybtn  a::after,.page-template-page-ex #glovalheader li.exbtn  a::after,.home #glovalheader li.homebtn a::after,.page-template-page-business #glovalheader li.businessbtn a::after,.page-template-page-contact #glovalheader li.contactbtn a::after{ bottom: 2px; 
  opacity: 1;
  visibility: visible;}

}

@media only screen and (min-width: 1050px){#glovalheader nav a{ padding:0 10px 10px; font-size: 16px;} }
@media only screen and (min-width: 1180px){#glovalheader nav a{ padding:0 15px 10px; font-size: 16px;} }
@media only screen and (max-width: 1000px){
.mainView{ margin:0 0 0 0;} 
#glovalheader{height: 60px; }
#glovalheader h1{  padding:20px 0px 0 !important ; text-align: left;  }
#glovalheader h1 a{ font-size: 28px!important; font-size:2.8rem !important;  text-align: left;  }
    
/*ハンバーガーボタン*/
.el_humburger {
  position: fixed; display: block;
  top:7px;  
  right: 10px;  
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding:15px 10px ;
  z-index: 65;
  cursor: pointer;
  pointer-events: auto;
  color: #000;  width: 60px; background: rgba( 255,255,255,0.8); height: 50px; 
  text-align: right;}
    .js_humburgerOpen .el_humburger{ width:60px; margin-right: 10px; }
.el_humburger_wrapper {
    margin-bottom: 5px;
    width:40px;
  display: inline-block; }
.js_humburgerOpen .el_humburger_text.el_humburger_text__menu {
  display: none; }
.el_humburger_text.el_humburger_text__close {
  display: none; }
.js_humburgerOpen .el_humburger_text.el_humburger_text__close {
  display: block; }

.el_humburger_text svg path {
    -webkit-transition: all 200ms cubic-bezier(0.16, 0.52, 0.25, 1);
    -o-transition: all 200ms cubic-bezier(0.16, 0.52, 0.25, 1);
    transition: all 200ms cubic-bezier(0.16, 0.52, 0.25, 1);
    fill: #000; }
  .js_humburgerOpen .el_humburger_text svg path {
    fill: #000; } 
  .el_humburger span.el_humburger_bar {
    left: 0;
    top: 0;}
.el_humburger span.el_humburger_bar {
  display: block;
  margin: 0 0 8px; text-align: left;
  height:4px;
  background: #005bab; border-radius: 3px;
  -webkit-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out; }
.el_humburger span.el_humburger_bar.bottom {margin-bottom: 0; }
.js_humburgerOpen .el_humburger span.el_humburger_bar.top {
  -webkit-transform: translateY(12px) rotate(-45deg);
  -ms-transform: translateY(12px) rotate(-45deg);
  transform: translateY(12px) rotate(-45deg); }
.js_humburgerOpen .el_humburger span.el_humburger_bar.middle { opacity: 0; }
 .js_humburgerOpen .el_humburger span.el_humburger_bar.bottom {
  -webkit-transform: translateY(-11px) rotate(45deg);
  -ms-transform: translateY(-11px) rotate(45deg);
  transform: translateY(-11px) rotate(45deg); 
 width: 100%;margin-top: 8px;}
.el_humburgerButton.el_humburgerButton__close {
  top: 2%;
  right: 2%; }
    
 
.el_humburgerButton__close span.el_humburger_bar {
  display: block;
  width: 55px;
  margin: 0 auto;
  height: 4px; }
 
.el_humburgerButton__close span.el_humburger_bar.top {
  -webkit-transform: translateY(5px) rotate(-45deg);
  -ms-transform: translateY(5px) rotate(-45deg);
  transform: translateY(5px) rotate(-45deg);}
 
.el_humburgerButton__close span.el_humburger_bar.bottom {
  -webkit-transform: translateY(-6px) rotate(45deg);
  -ms-transform: translateY(-6px) rotate(45deg);
  transform: translateY(-6px) rotate(45deg); }
nav.navi {
  position: fixed;
  right: 0; top:0;
  height: 100%;
  background-color: #fff !important;
  width: 100%;
  z-index: 60;
  padding-top:20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 600ms ease-out;
  -o-transition: all 600ms ease-out;
  transition: all 600ms ease-out;
  transform:translateZ(0) translateX(100%);
  overflow: auto; }
  .js_humburgerOpen .navi {
    transform:translateZ(0) translateX(0); 
}
.mob.logo{margin: 5px auto; width:60%; max-width: 210px;}
#glovalheader .navi li{ display:block; vertical-align: top; margin: 0em auto;  font-size: 18px; position: relative; width:90%; text-align: left;border-bottom: 1px dotted;  }
#glovalheader .navi ul { text-align: center;margin: 20px auto 0px; }
#glovalheader .navi li a{ position: relative; display: block; padding: 0.5em 2em;  }
#glovalheader .navi li  a:before {
font-family: "Font Awesome 5 Free"; position: absolute;
 font-weight: 900;  top:50%;  left: 3px; transform: translateY(-50%);
  content: "\f0da"; 
}#glovalheader .navi li.dwbtn a::before{
font-family: "Font Awesome 7 Free";
 font-weight: 900; 
 content: "\f0ed" !important;  left: 0.5em;
}
 }

@media only screen and (max-width: 500px){
#glovalheader h1{  padding:20px 0px 0 !important ; text-align: left;  }
#glovalheader h1 a{ font-size: 61px!important; font-size:3.0rem !important;  text-align: left;  }

/*ハンバーガーボタン*/
.el_humburger {
  padding:15px 10px ;}

.el_humburger_wrapper {
    margin-bottom: 5px;
    width: 45px; }  
	
}

@media (max-width: 768px) {
  html {
    font-size: 50%; /* 8px相当 */
  }
}






/* フッター
----------------------------------*/
footer.global article.contact{ border-top: 1px solid #0683ce; background:rgba(255,255,255,0.7); text-align: center; padding: 1em 0;}
footer.global article.contact a,footer.global article.contact span{ display: block; width:45%; max-width: 265px; background: #0683ce; color: #fff; text-align: center; }
footer.global article.contact p{  margin: 1.5em auto 1em;} 
footer.global article.contact .flex{box-sizing:border-box; justify-content: center; /* 縦方向の中央揃え */gap: 20px; /* 要素間の間隔を20pxに */}
footer.global article.contact img,footer.global article.contact b{ display: inline-block; vertical-align: middle; font-weight: 400;}
footer.global article.contact img{ width:30px; height: auto; margin-right: 15px;}
footer.global article.contact dl{ margin: 0.5em auto;}
footer.global article.contact dl dt,footer.global article.contact dl dd{  display: inline-block; vertical-align: middle; margin: 0 0.5em;}

footer.global article.contact a{transition: .3s;}
footer.global article.contact a:hover{transition: .3s; background: #ff9900;}

footer.global article.backblue{  color: #fff; padding: 0.5em 0;}
footer.global nav ul{ gap:1em;}
footer.global nav li { color: #fff; position: relative;}
footer.global nav li a{ color: #fff; display: block; padding: 0.5em 1em; background-image: linear-gradient(#fff, #fff);
  background-repeat: no-repeat;
  background-position: bottom right; /* 下線の初期位置 */
  background-size: 0 1px; /* 下線のサイズ（横幅、高さ） */
  transition: background-size 0.3s;}
footer.global nav li a:hover{ background-position: bottom left; /* 下線のホバー時位置 */
  background-size: 100% 1px; /* 下線の横幅を100%にする */}
footer.global nav li:last-of-type{
    margin-left: auto;
}
footer.global nav li:not(:first-child):before{ content:"|"; display: inline-block; position: absolute; left:-0.5em; top:50%; transform:translateY(-50%);}
footer.global nav li:last-of-type:before{ display: none;}
p.address{  text-align: center; padding:1em 0 0; }


#page-top1{
  display: block;
  position: fixed;
  z-index: 9999;
  bottom: 20px;
  right: 40px;
  width: 40px;
  height:40px;
  text-align: center;
  text-decoration: none; 
  transition: .5s; font-size: 14px; font-size: 1.4rem; 
	vertical-align:middle;background: #330000;  border-radius:50%;  }
a#page-top1 {  color: #fff !important;}
#page-top1 span {display: block; margin:0 auto 0;  font-size: 20px; font-size: 2.0rem; }

.alignleft{ float:left;}
.alignright{ float:right;}
.center{ text-align:center;}


 /* 共通
----------------------------------*/
.mob{ display:none!important;}

@media only screen and (max-width:999px){
.pc{ display:none !important;} 
.mob{ display:block!important;}}


#contents{ margin: 70px 0 0; }

/* ホーム
----------------------------------*/
.homeheader { position: relative;}
.slider{width: 100%;  margin: 0 auto;  text-align: center; max-height: 700px; overflow: hidden;  }
.slider li img{width: 100%; height: auto;  }

.maingazomoji {position: absolute; top:0%; left:0; width:100%; height: 100%;}
.maingazomoji hgroup{ position: relative;  height: 100%; }
.maingazomoji hgroup h1 span{ display: block;font-weight: 400; margin: 0 0 40px;}
.maingazomoji hgroup h1{  font-weight: 600;position:absolute;  left:5%; top:50%; transform: translateY(-50%); line-height: 1.4;}
.maingazomoji hgroup h2{ position:absolute; right:0; bottom: 20px; width:60%;}
.maingazomoji hgroup h2 img{filter: drop-shadow(2px 2px 3px #000);}
.content {padding: 40px 0 ;}



.home h2 span{ display: block; margin: 0.1em; }
.newstop { text-align: right;}
.newstop h2,.newstop ul{ display: inline-block; vertical-align: top; text-align: left;}
.newstop h2,.company h2{ width:180px;}
.newstop ul{  width: calc( 100% - 185px);}

.newstop li {background: #fff; margin: 0 0 0.5em; box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.47);  position: relative;  padding:0.5em  0.8em; }
.newstop li a{display: block; }
.newstop li h3,.newstop span {  display:  inline-block; vertical-align:middle;text-align: left;}
.newstop span {  margin-right: 0.8em;}
.newstop span.cate {  border: 1px solid #cc0000; color: #cc0000; padding: 0.1em 0.5em; border-radius: 15px; }
.newstop li.news span.cate { border: 1px solid #0268b6 !important; color: #0268b6 !important;}

.newstop li img { width:20px; height: auto;  display: block;  position: absolute; right:10px; top: 50%; transform: translateY( -50% );}
.newstop .more{ display: inline-block;; margin: 1em 1em ;border: 1px solid #0268b6; color: #0268b6; padding: 0.1em 1.5em 0.1em 0.5em; border-radius: 15px; position: relative; width:10em; text-align: center }
.newstop .more img { width:20px; height: auto;  display: block;  position: absolute; right:10px; top: 50%; transform: translateY( -50% );}
.newstop .more:hover{ border: 1px solid #ff9900; color: #fff; background: #ff9900; }



.topbusines{margin:45px auto 65px;align-items: flex-start; /* 追加 */ }
.topbusines p{  margin:0 0 1em;}
img.businesimg { width:43% ; height: auto ;  display: block; margin: 0 0 0 -4%; }

.topbusines div{ width:57%;}
.topbusines ul{ margin: 0;}
.topbusines li{ margin: 0.5em auto; position: relative; padding-left:1.5em;}
.topbusines li span{ display:  inline-block;  border-bottom: 1px solid #0683ce; }
.topbusines li:before{font-family: 'Font Awesome 6 Free';
font-weight: 900;
  content: "\f0c8"; font-size: 12px;
  position: absolute;  color: #0683ce;
  left:5px; top:50%; transform:  translateY(-50%);
} 
.topbusines nav{ margin:2em 0 0; text-align: center;}
.topbusines nav a{ display: inline-block; background: #0683ce; border-radius: 30px; padding: 0.3em 2.5em 0.3em 2em; position: relative; color: #fff;  margin: 0 1em;transition: all 0.5s ease 0s;}
.topbusines nav a img{
  position: absolute;  width:20px; height: auto;
  right:10px; top:50%; transform:  translateY(-50%);
} 

.topbusines nav a:hover{transition: all 0.5s ease 0s;
outline: none; border-radius: 5px; border: none; color: #fff;
background: #ff9900;  text-decoration: none;}


.company,.newstop { background: rgba( 255,255,255,0.8); padding: 20px; margin: 70px auto 50px;align-items: center;  }
.company a{ width:200px; display: inline-block; border:1px solid  #0683ce; border-radius: 30px; padding: 0.3em 2.5em 0.3em 2em; position: relative;  margin: 0 1em;transition: all 0.5s ease 0s;}
.company a:hover{transition: all 0.5s ease 0s; color: #fff;border:1px solid   #ff9900; 
background: #ff9900;  text-decoration: none;}

.company img{
  position: absolute;  width:20px; height: auto;
  right:10px; top:50%; transform:  translateY(-50%);
} 

.topbusines nav a:hover{transition: all 0.5s ease 0s;
outline: none; border-radius: 5px;
background: #ff9900;  text-decoration: none;}
.company ul{ justify-content:center; width:calc( 100% - 180px);}



/*サブページ*/
header.subheader{ background:url("/img/common/titleback.jpg") 0% 0% no-repeat; background-size: cover; padding: 78px 0 20px }
header.subheader h1{  color: #fff; border-bottom: 1px solid #fff; padding-bottom: 20px; }
header.subheader h1 span{  display:inline-block; vertical-align: middle; margin-right:0.5em;}

.sub article { margin: 60px auto 80px;}
.sub article h2 { margin: 0px auto 1em;
    padding: 15px 10px;/*文字回りの余白（上下 左右）*/
    display: block;
    position: relative; z-index: 1;
}
.sub article h2:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 2.5%;
    transform: translate(-50%, -50%);
    width: 3em;/*円の幅*/
    height: 3em;/*円の高さ*/
    background-color: #b7e3f9;
border-radius: 50%;   z-index: -1;
}

.sub article h2:after {
    content: "";
    position: absolute;
    top: 90%;
    left: 10px;
    width: calc( 100% - 10px );
    height: 1px;
    background-color: #0683ce;  
}



/* パンくずリスト */
.bread { padding: 6px 0 0 0;}
.bread li{color: #fff;
    display: inline;
  }
.bread  li a{ color: #fff;
    color: inherit;position: relative;
    text-decoration: none;
  }
.bread  li + li:before{
    content: "|";
    margin:.5em;
  }
.bread  li a:hover{ color: #fff }
  
.bread  li a::after {
  position: absolute;
  bottom:6px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #fff;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
}
.bread  li a:hover::after{
  bottom: -2px; 
  opacity: 1;
  visibility: visible;
}


.footerbread { padding: 6px; background: rgba(255,255,255,0.8); text-align: center; border-radius: 20px; margin: 0 auto 1.5em;}
.footerbread  li{ color:  #0683ce; 
    display: inline;
  }
.footerbread  li a{ color: #0683ce; 
    color: inherit;
    text-decoration: none; position: relative;
  }
.footerbread li + li:before{
    content: "|";
    margin:.5em;
  }

.footerbread  li a:hover{ color: #ff9900}
.footerbread li a::after {
  position: absolute;
  bottom:6px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #ff9900;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
}
.footerbread li a:hover::after{
  bottom: -2px; 
  opacity: 1;
  visibility: visible;
}



.sub article table {
     margin: 0 auto;
  border-collapse: collapse;
 
}
.sub article table th, .sub article table td {
  border-bottom: 2px solid #c1c7c6;
  padding: 1em;
}
.sub article table th {
  border-bottom: 2px solid  #0683ce;  
  text-align:left;
  width: 20%;
  min-width: 4em; 
}


/* ol デザイン */
.sub article.no04 ol {
  counter-reset: li;
}
.sub article.no04 ol > li:before {
  position: absolute;
  font-weight: bold;
  counter-increment: li;
  content: counter(li) "";
  left: -34px;
  top: -1px;
  color: #fff;
  width: 24px;
  height: 24px;
  font-size: 14px;
  text-align: center;
  box-sizing: border-box;
  font-weight: bold;
  line-height: 1;
  background: #1692ce;
  padding: 6px 0;
}

/*アクセス*/

.access .inner4-2 {  background: rgba( 255,255,255,0.8); padding: 1em;  margin: 0em auto 1em; border-radius: 10px; }
.access iframe{ width:100% ; height: 250px; }
.access dl{margin: 1em auto;}
.access dt { padding: 0 0 1em;}
.access dd {  border-left:2px solid #0683ce;   padding: 0 0 0 0.5em; margin-left: 1.5em}



/*事例*/
ul.list {
  position: relative;
}
ul.list li {
  line-height: 1.5;
  padding: 0.5em 0 0 1.5em;
  list-style-type: none!important;
}
ul.list li:before {
  
 font-family: 'Font Awesome 6 Free';
font-weight: 900;
  content: "\f138";/*アイコンの種類*/
  position: absolute;
  left : 0em;/*左端からのアイコンまでの距離*/
  color: #0683ce;/*アイコン色*/
}
ul.list li img{ display: block; margin: 1em auto; width:100%; height: auto;}

.sample{  background: rgba( 255,255,255,0.8); padding: 1em; gap: 10px 20px; margin: 3em auto; border-radius: 10px; }
.sample li{   width: calc( 100% / 3 - 20px );text-align: center;}
.sample li img{ display: block; margin: 10px auto;}
.sample::after{
  content:"";
  display: block;
  width:30%;
}
/*事業案内*/
.page-template-page-business-php h3{ line-height: 1.7; font-weight: 400;}
.page-template-page-business-php article ul.font20{ text-align: left; margin: 1em auto 0.5em;}
.page-template-page-business-php article ul.font20 li{ border: 1px solid  #ff9900; padding:  0.3em 0.5em; margin-bottom: 0.5em; max-width: 12em}


.page-template-page-business-php article ul.chui li{ position: relative; padding-left: 1em;}
.page-template-page-business-php article ul.chui li:before{ content:"※"; position: absolute; left:0; top:0;}
.page-template-page-business-php article ul.chui span{display: block; margin-left: 1em; position: relative; padding-left: 1em;}
.page-template-page-business-php article ul.chui span:before{ content:"・"; position: absolute; left:0; top:0;}
.page-template-page-business-php article.business2  h3{position: relative; padding-left: 1em; }
.page-template-page-business-php article.business2  h3:before{
font-family: 'Font Awesome 6 Free';
font-weight: 900; color: #0683ce;
position: absolute; top:6px; left: 0;  font-size: 10px;
 content: "\f111"; }
.page-template-page-business-php article.business2 ul.check{ margin: 1em  auto;}
.page-template-page-business-php article.business2 ul.check  li{position: relative; padding-left: 1.5em; margin: 0.5em 0; }
.page-template-page-business-php article.business2 ul.check li:before{
font-family: 'Font Awesome 6 Free';
font-weight: 900; color: #0683ce;
position: absolute; top:0; left: 0;  
 content: "\f14a"; }

.page-template-page-business-php article.business2 p{ margin: 0 0 3em 3em; }
.business3 { border:1px solid #0683ce; background: #fff; padding: 1.5em; border-radius: 10px;}
.page-template-page-business-php article.business3 h3 { color:#0683ce; }
.page-template-page-business-php article.business3 p {  margin: 1em; }
.page-template-page-business-php article.business3 p b{background:linear-gradient(transparent 75%, #ff9900 75%); font-weight: normal; }
.page-template-page-business-php article.business3 ul.check{ margin: 1em;}
.business3 ul.check  li{position: relative; padding-left: 1.5em; margin: 0.5em 0; }
.business3 ul.check li:before{
font-family: 'Font Awesome 6 Free';
font-weight: 900; color: #0683ce;
position: absolute; top:0; left: 0;  
 content: "\f14a"; }


/*個人情報保護方針*/
.page-id-3 .sub ul{ margin: 1em 0 }
.page-id-3 .sub ul li:before{
font-family: 'Font Awesome 6 Free';
font-weight: 900;
position: absolute; top:1px; left: 0px;  font-size: 8px;
content: "\f111"; }
.page-id-3 .sub ul li {
  line-height: 1.5em; position: relative; padding-left: 18px; }
.page-id-3 .sub p {text-align: left;
 margin:2em 0;}
.page-id-3 .sub  dt{ font-size:18px; margin: 1em 0 ;position: relative; padding-left: 18px; }
.page-id-3 .sub  dt:before{
font-family: 'Font Awesome 6 Free';
font-weight: 900;
position: absolute; top:5px; left: 0px; color:#5c9ee7; font-size: 14px;
 font-weight: 900;   content: "\f111";  

}
.page-id-3 .sub  dd{  margin: 0 0 3em 1em;}
.page-id-3 .sub .shomei{ border-left:2px solid #000; padding-left: 1em; margin: 1em 0 0 auto; width:18em;}


/* ニュース
------------------------------------------------------------*/
section.news ul li{ background: rgba( 255,255,255,0.8); margin: 0 0 80px; padding:30px; border-radius: 20px; }
section.news ul li h2 span{  display: inline-block; vertical-align: middle;}
section.news ul li h2 span.cate {  background: #cc0000; color: #fff; padding: 0.1em 0.5em; border-radius: 15px; margin-right: 0.5em; }
section.news ul li h2 span.cate.news {background: #0268b6 !important; }
section.news ul li span.days{ display: block; text-align: right;  margin: -1.5em 0 0;  }
section.news ul li .honbun{  margin: 20px auto; width:95%; max-width: 920px;
	text-align: left;}
section.news ul li .honbun a{ display: block; color:#003399; width:auto; 
  position: relative; margin: 0.5em 0 0.5em 2em; padding: 3px 0 0 30px;}
section.news ul li .honbun a:hover{width:auto;  color:#FF7B4D; }
section.news ul li .honbun a.link:before{
font-family: "Font Awesome 5 Free";
position: absolute; top:0; left: 0px;
 font-weight: 900; 
  content: "\f360";  font-size: 20px;
}
section.news ul li .honbun a.file:before{
font-family: "Font Awesome 5 Free"; 
position: absolute; top:0; left: 0px;
 font-weight: 900; 
  content: "\f381";  font-size: 20px;
}
section.news ul li .photo{  margin: 40px auto; width:auto; max-width: 90%;  text-align: center; }
section.news ul li .photo img{ width:auto;  max-width: calc(75% - 16px); height: auto; margin: 8px;  display:  inline-block; vertical-align: top; }

.tablenav {
color: #000;
background: rgba( 255,255,255,0.8); 
margin: 1em auto;
line-height:2em;
text-align:center;
}

a.page-numbers, .tablenav .current {
color: #000;
padding: 2px .5em;
border:solid 1px #000;
text-decoration:none;
font-size:smaller;
}

a.page-numbers:hover {
color:white;
background: #0683ce;
}

.tablenav .current {
color: white;
background: #000;
border-color: #000;
}

.tablenav .next, .tablenav .prev {
border:0 none;
background:transparent;
text-decoration:underline;
font-size:smaller;
}





/* お問合せ関連
------------------------------------------------------------*/
/* お問合せ
------------------------------------------------------------*/
.sub.contact article .inner4-2 {  background: rgba( 255,255,255,0.8); padding: 1em;  margin: 0em auto 1em; border-radius: 10px; }


.sub article .wpcf7-form dl{ margin:60px auto 20px; width:100% !important; max-width: 100%;  border-bottom: 1px  dotted #999;}
.sub article .wpcf7-form dt,.sub article .wpcf7-form dd{ border: none; border-top: 1px  dotted #999; display:inline-block;  vertical-align: top; }
.sub article .wpcf7-form.wpcf7-form dt{width: calc(35% - 5px);  padding: 20px 0px 0px 45px;  font-weight: 300; font-size: 16px; position: relative; }
.sub article .wpcf7-form.wpcf7-form dd{ width: calc(63%); padding: 20px 0px 0px;  }
.sub article .wpcf7-form.wpcf7-form dt.hissu:before {
	content: '必須'/* 他の文字列を入れたりlist-style-typeの設定をしたり */; position: absolute; left: 5px; top:25px;
	font-size: 12px; background:#AA0C0C; color: #fff; padding:0 0.3em; border-radius: 3px;
	/* その他任意のデザイン指定 */
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
    padding: 0.8em;
    outline: none; display: block;
    border: 1px solid #DDD;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px; margin: 0 0 0.5em;
    font-size: 16px;  width:100%;
}
.wpcf7-form textarea { height: 6em;}
.wpcf7-form input::placeholder {
  font-size: 14px;
}


span.wpcf7-form-control-wrap{display: inline-block; }
.wpcf7-form input[type="text"]:focus,
.wpcf7-form texture:focus {
    box-shadow: 0 0 7px #AA0C0C;
    border: 1px solid #AA0C0C;
}
.wpcf7-form input.p-postal-code[type="text"]{max-width: 10em;}

.wpcf7-form input[type="submit"].wpcf7-submit{font-size: 20px !important; font-size: 2.0rem !important;
  margin:30px auto ;  vertical-align: middle;color:#fff;
  background-color:#036EB7;
  padding: 0; height: 50px; line-height: 50px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #036EB7;
  -webkit-transition: .5s;
  transition: .5s;
  display:block;
  cursor: pointer;
width:80%; max-width: 250px;
}
.wpcf7-form input[type="submit"].wpcf7-submit:hover {
  background:#AA0C0C;  border: 1px solid #AA0C0C;color:#fff;
}
.wpcf7-form input[type="button"].wpcf7-previous{font-size: 16px !important; font-size: 1.6rem !important;
  margin:30px auto 5px;  vertical-align: middle;color:#000;
  background-color:#ddd;
  padding: 0; height: 40px; line-height: 40px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #ddd;
  -webkit-transition: .5s;
  transition: .5s;
  display:block;
  cursor: pointer;
width:200px;
}
.wpcf7-form input[type="button"].wpcf7-previous:hover {
  background:#AA0C0C;  border: 1px solid #AA0C0C;color:#fff;
}

.form-buttons{ margin-bottom: 3em;}

span.wpcf7-spinner {
  display: none;
}
p.hissu.hissu:before {  position: absolute; top:50%; transform: translateY(-50%);
	content: '必須'/* 他の文字列を入れたりlist-style-typeの設定をしたり */; 
	font-size: 12px; background:#AA0C0C; color: #fff; padding:0 0.3em; border-radius: 3px;
	/* その他任意のデザイン指定 */
}
p.hissu{ text-align: center; position: relative; margin: 0 auto 1em; width:95%; max-width: 350px !important;  border-bottom: 1px solid #AA0C0C;
}
.contact1 img{  width:30px; height: auto;margin:0 1em; }
.contact1 img,.contact1 b{ display: inline-block; vertical-align: middle;}
.contact1 p{ margin-bottom:1em;}
.sub article.contact1 dl{  border: 1px solid #999; padding:1em; background: #fff; margin: 1em auto 0;}
.sub article.contact1 dt,.sub article.contact1 dd{ display: block; width:auto; border: none;  padding: 0.5em 1em; margin: 0; }
.sub article.contact1 dt {
  position: relative; font-weight: 400;
}
.sub article.contact1 dt::before,.sub article.contact1 dt::after {
  content:'';
  width: 10px;
  height: calc(100% - 6px);
  position: absolute;
  top: 0;
}
.sub article.contact1 dt::before {
  border-left: solid 1px #000;
  border-top: solid 1px #000;
  border-bottom: solid 1px #000;
  left: 0;
}
.sub article.contact1 dt::after {
  content: '';
  border-top: solid 1px #000;
  border-right: solid 1px #000;
  border-bottom: solid 1px #000;
  right: 0;
}
.sub.contact .chuijiko {margin: 1em  0!important }


.page-template-page-privacy  .sub article{background: rgba(255,255,255,0.8); padding:0 1.5em 1.5em ; border-radius:30px; }

p.privacy{ text-align: center;}
.privacy h2{ text-align: center;   }
.privacy h3{ margin: 1em!important;}
.privacy h4{  font-size: 18px}

.privacy ol {
  counter-reset:num;
  list-style-type: none!important;
  padding:0;
  margin:1em;
}
.privacy ol li {
  position: relative;
  padding-left: 30px;
  line-height: 1.5em;
  padding: 0.5em 0.5em 0.8em 30px;
}
.privacy ol li:before {
  position: absolute;
  counter-increment: num;
  content: counter(num);
  display:inline-block;
  background: #555;
  color: #FFF;
  font-family: 'Arial',sans-serif;
  font-weight:bold;
  border-radius: 50%;
  left: 0;
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  top: 8px;
}
.privacy ol li p{ margin: 0.5em 0 0 1em}
.privacy ol li p.ten{ margin: 0em 0 0 2em}
.privacy ol li p.ten:before{content:"・"; margin: 0 0 0 -1em;}
.privacy ol li p.shomei{ margin: 0.5em 0 0 2em}


details { margin: 2em auto; width:90%;}
details .honbun {
  margin-left: 0;
  padding:1em 0 0.5em 1.5em;
}


details summary {position: relative; padding: 0.5em 1.8em;  display: block; list-style: none; border-bottom: 1px dotted;}

/* 一部ブラウザで消えなかった場合は以下も追記 */
summary::-webkit-details-marker {
  display:none;
}
details summary::before { position: absolute;  top:7px; left:0;
  font-family: "Font Awesome 5 Free";
 font-size: 18px; 
 font-weight: 900; 
  color:crimson; transition: all 0.1s ease-out;content: "\f067";  
}
/**
 * アコーディオンがオープン時はマイナスアイコンに変更
**/
details[open] summary::before {
  color:dodgerblue;
    position: absolute;  top:7px; left:5px;font-size: 18px; 
  font-size:1.2em; margin: 0;
  font-family: "Font Awesome 5 Free";
 font-weight: 900; 
transform:rotate(45deg);transition: all 0.2s ease-out;}


/*ここからモバイル*/

@media only screen and (min-width: 1500px){
}


@media only screen and (max-width: 1275x){
.slider{ background: red}
.slider li{overflow: hidden; background: red}
.slider li img{width:auto; height:100%;  }

}

@media only screen and (max-width: 1180px){
}

@media only screen and (max-width: 1000px){
}


@media only screen and (max-width: 900px){#wrapper{ font-size: 14px;font-size: 1.4rem;}
.page-id-22 .sub ul.first {  font-size: 16px; border:1px solid #5c9ee7; padding:0.5em;}
.page-id-22 .sub ul.first li { padding-left: 14px; }
.page-id-22 .sub ul.first li:before{
font-family: "Font Awesome 5 Free";
position: absolute; top:0; left: 0px; color:#5c9ee7; font-size: 12px;
 font-weight: 900; 
}
    
    


}
@media only screen and (max-width: 800px){
.spot li{ display:  inline-block; vertical-align: top; width: calc( 100% / 2 - 14px); position:relative; overflow: hidden; margin: 0 10px 0 0;}
.spot li:last-child{ margin: 0 ;}
.page-id-14 .sub li{ padding: 0px 0 50px ; }
.page-id-14 .sub h3  {display: block;}
.page-id-14 .sub img,.page-id-14 .sub div{ margin: 20px 0 0 0; padding: 0px 0 0 0;  }
.page-id-14 .sub div {  width:calc(60% - 30px ); margin: 20px 0 0 20px;}
.page-id-14 .sub img{  width:40%; height: auto; }
}

@media only screen and (max-width: 750px){	
.newstop h2 { font-size: 24px; font-size: 2.4rem; font-weight: 500;  }
.newstop li span,.newstop li h3 { display:block; }
.newstop li h3 { width: 100% ;   }
.newstop  a.more{   margin: 1em auto;  border: 1px solid #000; padding: 0.5em 0em 0.5em 1em; width:160px;}
.newstop  a.more img {right:0.5em; }
    
img.dog { position: absolute; bottom:-75px; right:-0px; width:150px; height: auto;}

.info .infomaingazo { float: none; width:95%; height: auto; display: block;margin: 20px auto;}
     
.access div.accessout,.access iframe{ display: block; vertical-align: top; }
.access div.accessout{  width:95%; height: auto;}
.access div.accessin{  width:90%;  max-width:400px;margin: 30px auto 20px;}
.access iframe{  width:100%;height: 257px;}
.access div.accessin h4 br{ display: none;}
footer.global nav  li:not(:last-child) {
  display: none; /* 最後の要素以外を非表示にする */
}
    
.room dl dt.item,.room dl dd.item{ width:100%; display:block;padding:0.5em 1em ; border: none; }
    .room dl dt.item{ background: #f0f0f0;}
    .yoyaku a.yoyakubtn {  display: block; margin: 10px auto;  }

div.calendar{ font-size:20px; font-weight: 500; padding: 0.2em 1em;}
    
    article.flex.company, article.newstop.flex{ display: block;}
.company h2{ width:100%; text-align: center;}
    .topbusines nav a{ font-size: 14px; }
    .company ul{ display: block;  text-align: center; margin: 1em auto;  width:95%; max-width: 500px; padding: 0 !important;   }
    .company ul li{   margin: 0 5px; width:calc( 50% - 10px); display: inline-block; }
    .company a{ width:100%; margin: 0; padding:0.5em 0; font-size: 14px; }
    
    .newstop div.flex{ display: block;}
    .newstop h2,.newstop h2 span{ width:100%; text-align: center;}
    .newstop ul{width:100%; margin: 1.5em auto 0}
   .newstop li h3,.newstop span,.newstop span.lato-regular {  display:  inline-block !important; vertical-align:middle;text-align: left;width:auto;  }
   .newstop span.lato-regular { width:5em; }
    .newstop span.cate {   width:7em; text-align: center; }
    .newstop li h3{ width:calc(100% - 12em);font-size: 14px;}
    .newstop .more{  margin: 1em 1em ; width:10em !important; text-align: center;font-size: 14px;padding: 0.2em 0.5em 0.2em 0 !important; border-radius:20px;  }
}


@media only screen and (max-width: 650px){
.info .photo .box,.info .photo .box:nth-child(2) { display: block;  margin: 10px auto 30px; width:80%; max-width: 400px;  }
.info .photo .box img,.info .photo .box:nth-child(2) img { display: block;  margin: 10px auto 5px; width:100%; height: auto; }
.info .photo .box:last-child  { width:100%; }
.info .photo .box:last-child  img { width:70%; height: auto; }
 article.contact  dl{margin:60px auto; max-width: 800px; width:100%;}
article.contact dt,article.contact dd{  display:block;  width: calc( 100% - 0px ); border: none}
article.contact dt { background: #f0f0f0; }

hr { margin: 30px 0 ;
}
.page-id-12 .sub h3 ,.page-id-12 .sub p{ display:block; }
.page-id-12 .sub h3 b{ ffont-size: 28px; font-size: 2.8rem; }
.page-id-12 .sub p{width:100% ;font-size: 16px; font-size: 1.6rem; margin: 1em 0 0 }
.page-id-12 .sub p span b{ font-size: 20px; font-size: 2.0rem; }
.page-id-12 .sub .box{ display: block; width:100%;  }
.page-id-12 .sub h4{ margin: 0px 0 10px;font-size: 18px; font-size: 1.8rem;  padding-left: 16px; }
.page-id-12 .sub h4:before{
font-family: "Font Awesome 5 Free";
position: absolute; top:3px; left: 0px; color:#5c9ee7; font-size: 12px;
 font-weight: 900; 
  content: "\f111";  
}
.page-id-12 .sub ul { margin-left: 16px;}
.page-id-12 .sub ul li {
  line-height: 1.5em; position: relative; padding-left: 16px; }
.page-id-12 .sub ul li .fas { display:inline-block; margin: 0 1em;}
.page-id-12 .sub ul li:before{
font-family: "Font Awesome 5 Free";
position: absolute; top:0; left: 0px; font-size: 12px;
 font-weight: 900; 
  content: "\f5de";  
}
.faci li { display:inline-block; margin: 5px; width:calc(50% - 20px ); text-align: center;}
.faci h2 { text-align: left !important; width:100%;  }
.faci ul  {  margin: 20px 0 0; }
}

@media only screen and (max-width: 600px){
#page-top1{
  bottom:5px;
  right: 5px; }
.topbusines{margin:5px auto 35px; }
.businesimg ,.topbusines div{ width:95% !important; margin: 0 auto; max-width:400px; }
img.businesimg{ max-width:380px;  width:95% !important;height: auto;  display: block; margin:1.5em  auto 0; }
 .topbusines{margin:0px auto ; }
   .company,.newstop { padding: 15px; margin: 30px auto 20px;align-items: center;  } 
    
/*サブページ*/

div.calendar{ font-size:18px;}
.reserve a{ width:calc( 50% - 2em); padding: 1em 0; font-size:18px; margin: 1em 0.5em; }
    .maingazomoji hgroup{ text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff;}

}
	
@media only screen and (max-width: 500px){
.page-id-14 .sub img,.page-id-14 .sub div{ display: block;  margin: 20px auto 0; width:100%; max-width: 350px;  }
.page-id-14 .sub h3  { font-size: 20px; font-size: 2.0rem; }
.page-id-22 .sub article h2{  font-size: 20px; font-size: 2.0rem; }
.page-id-22 .sub article h2 span{ display: block; }
.page-id-22 .sub ul  {margin: 30px auto 0;}
.page-id-14 .sub div .far,.page-id-14 .sub div .fas{display:  inline-block; margin: 0 0.2em;  }
.faci h2 span { display: block; margin: 0.3em 0 0;font-size: 70%;}
.yoyoaku_btn {margin: 0px auto 80px; text-align: center; width:90%; }
  footer.global article.contact img{ width:20px; height: auto; margin-right: 10px;}  
    .newstop .more{  margin: 1em 0.5em ;padding: 0.1em 1em 0.1em 0.5em; width:4em border-radius: 15px; text-align: center }
}

@media only screen and (max-width: 450px){
.info li { width: 90%; margin: 1em auto; text-align: left;}
    
    .access div.accessin h4{ font-size: 14px;}
.access div.accessin h4 b{  font-size: 20px;}
.access div.accessin span{  font-size: 14px;}
.access div.accessin img.accesslogo{ width:180px; height: auto; display: block; float: none; margin:15px auto; }
    .yoyaku a.yoyakubtn { width:300px; }
.faci .photo .box:nth-child(2) img {  width:100%; height: auto;  display: block; margin: 10px auto; max-width: 300px;  }
.room dl dl dt{  display: block;  width:auto; }
.room dl dl dt:before{ content:"・";}
.room dl dl dd.size{width:4em; margin: 0 0 1em 1em;}
.room dl dl dd{border: none; width: calc( 100% - 6em) ; margin: 0 0 1em;  }
        .maingazomoji hgroup.inner{ width:95%;}
      .newstop li h3{ display: block; width:calc(100% - 1em);font-size: 14px;}
}
@media only screen and (max-width:380px){
}