@charset "utf-8";
/*basis*/
body { font-family:"Zen Kaku Gothic New" /* "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,  "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif */; font-weight: normal; color: #000000; }

.pcOnly {}
.spOnly { display: none;}
@media only screen and (max-width:768px){
  .pcOnly { display: none;}
  .spOnly { display: block;}
}

p { font-size: 1.4rem; line-height: 1.5; font-weight: 400;}
ol, ul{ list-style-type:none; }
li { font-size: 1.4rem; line-height: 1.5;}
a:hover { opacity: 0.5;}
a {text-decoration: none; color: #000000; font-size: 1.4rem; line-height: 1.5;}
table { border-collapse: collapse; }
th { font-size: 1.6rem; line-height: 1.5; font-weight: normal; text-align: center; padding: 10px; border: solid 1px #000;}
td { font-size: 1.6rem; line-height: 1.5; padding: 10px; border: solid 1px #000;}
dt { font-size: 1.6rem; line-height: 1.5;}
dd { font-size: 1.6rem; line-height: 1.5;}

@media only screen and (max-width:768px){
  p { font-size: 1.4rem; line-height: 1.5; font-weight: 400;}
  ol, ul{ list-style-type:none; }
  li { font-size: 1.4rem; line-height: 1.5;}
  a:hover { opacity: 0.5;}
  a {text-decoration: none; color: #000000; font-size: 1.4rem; line-height: 1.5;}
  table { border-collapse: collapse; }
  th { font-size: 1.4rem; line-height: 1.5; font-weight: normal; text-align: center; padding: 10px; border: solid 1px #000;}
  td { font-size: 1.4rem; line-height: 1.5; padding: 10px; border: solid 1px #000;}
  dt { font-size: 1.4rem; line-height: 1.5;}
  dd { font-size: 1.4rem; line-height: 1.5;}
}
img[src$=".svg"] { max-width: 100%; }

.inner { width: 100%; max-width: 1000px; margin: 0 auto;}
@media only screen and (max-width:768px){
  .inner { width: 90%;}
}

/*margin・padding*/
.mgnS { margin: 20px 0;}
.mgnM { margin: 40px 0;}
.mgnL { margin: 80px 0;}
.pdgS { padding: 20px;}
.pdgM { padding: 40px;}
.pdgL { padding: 80px;}
@media only screen and (max-width:768px){
  .mgnS { margin: 10px 0;}
  .mgnM { margin: 20px 0;}
  .mgnL { margin: 40px 0;}
  .pdgS { padding: 10px;}
  .pdgM { padding: 20px;}
  .pdgL { padding: 40px;}
}

/*iframe*/
.googleMap iframe { max-width: 100%; }
.youtube iframe { /*aspect-ratio: 10 / 6;*/ max-width: 100%; }

/*font*/
.fsS { font-size: 1.2rem;}
.fsM { font-size: 1.6rem;}
.fsL { font-size: 2.0rem;}
.fcWhite { color: #fff;}
.fcBlack { color: #000;}
.fcRed { color: #970000;}

/*indent*/
.indent1 { padding-left: 1rem;}/*約10px*/
.indent2 { padding-left: 2rem;}/*約20px*/

/*background*/
.bgWhite { background-color: #fff;}
.bgBlack { background-color: #000;}

/*フォーム*/
input { border: solid 1px #999; padding: 10px; font-size: 1.4rem;}
textarea { border: solid 1px #999; padding: 10px; font-size: 1.4rem;}
select { font-size: 1.4rem;}
input[type="submit"] { width: 20%; padding: 10px; margin: 10px; background: #ccc; color: #000; border: none; border-radius: 0; font-size: 1.4rem;}
input[type="reset"] { width: 20%; padding: 10px; margin: 10px; background: #ccc; color: #000; border: none; border-radius: 0; font-size: 1.4rem;}
@media only screen and (max-width:768px){
  /*iphoneだとform関係のfont-sizeを1.6remより小さくすると勝手に拡大させられる*/
  input { font-size: 1.6rem;}
  textarea { font-size: 1.6rem;}
  select { font-size: 1.6rem;}
  input[type="submit"] { width: 60%; font-size: 1.6rem;}
  input[type="reset"] { width: 60%; font-size: 1.6rem;}
}

/*parts*/
.btn { display: block; width: 200px; text-align: center; background: #000; padding: 10px; border-radius: 10px; color: #fff; cursor: pointer;}
.btn:hover { opacity: 0.5;}

/*ハンバーガーメニュー*/
.hamburger { display: block; width: 55px; height: 55px; cursor: pointer; text-align: center; z-index:11; background-color: #fff; border-radius: 5px; position: fixed; right: 15px; top: 15px;}
.hamburger span {display: block; position: absolute; width: 36px; height: 3px ; left: 9px; background :#000; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;}
.hamburger span:nth-child(1) { top: 15px;}
.hamburger span:nth-child(2) { top: 27px;}
.hamburger span:nth-child(3) { top: 39px;}
.hamburger.active span:nth-child(1) { top: 27px; left: 9px;-webkit-transform: rotate(-45deg);-moz-transform : rotate(-45deg);transform: rotate(-45deg);}
.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) { top: 27px; -webkit-transform: rotate (45deg); -moz-transform: rotate(45deg); transform: rotate(45deg);}
.gMenu { background: #999; background-repeat: no-repeat; z-index: 10; position: fixed; top: -100%; left: 0; width: 100%; height: 100%; padding: 0%; transition: 0.5s ease-in-out; box-shadow: 0 0 5px #999; overflow: hidden;}
.gMenu.active { display: block; overflow-y: auto; padding: 2%; transition: 0.5s ease-in-out; top: 0;}


/*link*/
/*aタグに何が付いているかで付くものが変わります。contentの中身を変更することで好きな表示に出来ます。*/
.link[target="_blank"]:after { content: "→"; display: inline-block; padding-left: 0.5em;}
.link[href^="#"]:after { content: "↓"; display: inline-block; padding-left: 0.5em;}
.link[href$=".docx"]:after { content: "Word"; display: inline-block; margin-left: 0.5em; background: #0000ff; padding: 0px 5px; border-radius: 5px; color: #fff;}
.link[href$=".xlsx"]:after { content: "Excel"; display: inline-block; margin-left: 0.5em; background: #008000; padding: 0px 5px; border-radius: 5px; color: #fff;}
.link[href$=".pdf"]:after { content: "PDF"; display: inline-block; margin-left: 0.5em; background: #ff0000; padding: 0px 5px; border-radius: 5px; color: #fff; font-size: 1.2rem;}

.toTop {position: fixed; bottom: 5%; right: 5%;}

/*▶系　width・heightの数値をいじると大きさが変わります。*/
.arrowT { position: relative;}
.arrowT:before { content: ""; display: block; width: 10px; height: 10px; position: absolute; top: 50%; right: -20px; transform: translateY(-50%); clip-path: polygon(50% 0%, 0% 100%, 100% 100%); background: #000;}
.arrowR { position: relative;}
.arrowR:before { content: ""; display: block; width: 10px; height: 10px; position: absolute; top: 50%; right: -20px; transform: translateY(-50%); clip-path: polygon(0% 0%,100% 50%, 0% 100% ); background: #000;}
.arrowB { position: relative;}
.arrowB:before { content: ""; display: block; width: 10px; height: 10px; position: absolute; top: 50%; right: -20px; transform: translateY(-50%); clip-path: polygon(0% 0%, 100% 0%, 50% 100%); background: #000;}
.arrowL { position: relative;}
.arrowL:before { content: ""; display: block; width: 10px; height: 10px; position: absolute; top: 50%; right: -20px; transform: translateY(-50%); clip-path: polygon(0% 50%, 100% 0%, 100% 100%); background: #000;}

/*headline*/
.headlineLeftBorder { font-size: 1.8rem; border-left: solid 5px #000; padding-left: 0.5em; margin-bottom: 10px;}
.headlineUnderline { font-size: 1.8rem; border-bottom: solid 1px #000; margin-bottom: 10px;}
.headlineBgColor { font-size: 1.8rem; padding: 10px; background: #000; color: #fff; text-align: center; margin-bottom: 10px;}
.headlineBig { font-size: 2.0rem; font-weight: bold; margin-bottom: 10px;}

.appear { animation: appear 0.5s ease forwards;}
@keyframes appear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/*ここから今回独自の記述*/

   .bacgroundArea { background-image:url(images/sansui_background.jpg); background-repeat: no-repeat; background-position: top center;  background-size:100%;}
   .headerArea{ width:100%; margin: 0 auto; position: relative;} 
   .headerImage img { width:100%;} 
   .headerNavi { font-size: 1.6rem; gap: 0 20px; position: absolute; top: 7%;
    right: 13%; } 
   .headerNavi a{ font-size: 1.6rem;}
   .headerArrow { width:10px; vertical-align: middle;}
   .goaisatsu { width:1000px; padding:80px 0; text-align: center;}
   .daihyou img { width: auto; height: 20px; max-width: 100%; object-fit: contain; }
   .news { width:700px; padding:80px 0; }
   .about { width:700px; padding:80px 0;}
   .history { width:800px; padding:80px 0;}
   .member { width:700px; padding:80px 0;}
   .footerArea { width:1000px; padding-top:120px; padding-bottom:50px;}
   h4 { font-size: 2rem; }
   .midasi{ width:80%; margin: 0 auto;}
   .midasiSub { font-size: 1.5rem; color:#14a0d2;position: relative;top: -10px;}
   .midashiphoto { width: 60%;}
   .midashiphoto01 { width: 40%;}
   .midashiphoto02 { width: 50%;}
   .aisatsuHonbun { line-height: 2;}
   .toggle {display: none;}
   .Label { font-size: 1.4rem; padding: 1.5em;display: block; border-top:0.5px solid #14a0d2; border-bottom:none; font-weight: bold; }
   .LabelLast { font-size: 1.4rem; padding: 1.5em;display: block; border-top:0.5px solid #14a0d2; border-bottom:0.5px solid #14a0d2; font-weight: bold; }
   .Label::before{content:"";width: 6px; height: 6px; border-top: 2px solid #14a0d2;border-right: 2px solid #14a0d2;
	-webkit-transform: rotate(45deg); position: absolute; top:calc( 50% - 3px ); right: 20px;transform: rotate(135deg); transition: 0.3s;}
  .LabelLast::before{content:"";width: 6px; height: 6px; border-top: 2px solid #14a0d2;border-right: 2px solid #14a0d2;
	-webkit-transform: rotate(45deg); position: absolute; top:calc( 50% - 3px ); right: 20px;transform: rotate(135deg);}
  .Label,.content {-webkit-backface-visibility: hidden;backface-visibility: hidden;transform: translateZ(0);transition: all 0.3s;}
  .LabelLast {-webkit-backface-visibility: hidden;backface-visibility: hidden;transform: translateZ(0);transition: all 0.3s; font-weight:bold; }
  .content {height: 0; padding:0 0 0 40px;overflow: hidden;}
  .toggle:checked + .Label { padding-bottom: 12px;}
  .toggle:checked + .Label + .content {	/*開閉時*/height: auto; padding:20px ;transition: all .3s; padding: 0px 0 24px 40px;}
  .toggle:checked + .LabelLast { padding-bottom: 12px; border-bottom: none;}
  .toggle:checked + .LabelLast + .content {	/*開閉時*/height: auto; padding:20px ;transition: all .3s; padding: 0px 0 24px 40px; border-bottom: 0.5px solid #14a0d2;}
  .toggle:checked + .Label::before {transform: rotate(-45deg) !important; top: calc(50% + 3px); transition: 0.3s;}
  .headaccesary { color: #14a0d2; }
  .linkPdf:after {content: 'PDF';display: inline-block; padding: 0 5px; font-size: 1.1rem; background: #F00; color: #FFF; margin: 0 5px;}
  .aboutTableTitle { color: #FFF; background-color: #14a0d2; padding:2px 15px;width: 130px; position:absolute; left:0; top:50%;transform: translate(0, -50%);text-align:justify;
  text-align-last:justify;font-weight: bold;}
  .aboutTableContent {  background-color: #FFF; width:600px; margin-left: auto; margin-bottom: 10px; padding:10px 10px 10px 50px; letter-spacing: 0.4rem; }
  .historyTableDate  { width:15%; padding: 8px 0; position: relative;}
  .historyTableDate::before { content: ""; display: block; width: 1px; height: 100%; background: #14a0d2; position: absolute; top: 19px; right: 2px;}
  .historyTableDate::after { content: ""; display: block; width: 5px; height: 5px; border-radius: 5px; position: absolute; top: 19px; right: 0; background: #14a0d2;}
  .historyTable:last-child .historyTableDate::before { content: none;}
  .historyTableContent  { width:85%; padding: 8px 0 8px 30px;}
    @media only screen and (max-width:768px){
  .historyTableContent  { width:100%; }
    }
  .bodyaccesary{ color: #14a0d2;}
  .memberTableDate { color: #FFF; background-color: #14a0d2; padding:2px 5px; position:absolute; left:-92px; top:50%;transform: translate(0, -50%); width: 115px;font-weight: bold;text-align:justify;
  text-align-last:justify;}
  .memberTableContent { background-color: #FFF; width:250px;margin-left: auto; margin-bottom: 10px; padding: 10px 0 10px 45px;}
  .whiteLine { background-image:url(images/white_line.svg); background-repeat: no-repeat; }
  .footerArrow { width:15px; vertical-align: middle; position: relative;top: -1px;right: -6px;}
  .footerArrowLast { width:15px; vertical-align: middle; position: relative;top: -2px;right: -10px;}
  .footerNavi{  padding: 10px 30px 0; }
  .gHojin { margin-bottom: 20px; }
  .gHojin p.gTitle { color: #fff; }
  .grounpfacilities{ color: #FFF;font-size: 1.8rem; font-weight: bold;}
  .facilities { color: #14a0d2; background-color: #FFF;border-radius:5px ; padding:5px 20px;  display: flex;
  justify-content: center; align-items: center; height: 34px; }
  .facilities a{ color: #14a0d2;}
  .facilities.migiaki { margin-right: 18px;}
  .facilitiesLast { color: #14a0d2; background-color: #FFF; border-radius:5px ;padding:6px 20px; display:inline-block;}
  .facilitiesLast a{ color: #14a0d2;}
  .companyName{ color: #FFF; border-top:1px solid #FFF; padding-top: 30px; }
  .footerinformation{ color: #FFF;}
  .copyright{ color: #FFF;font-size: 1.2em; text-align: center;}
  .blueLine{ height: 275px; position: absolute; left: 100px; top:241px;}
  .leftContent { margin-left:60px; }
  .footerBackArea { background-image:url(images/footerback.svg); background-repeat: no-repeat; background-size:cover;}
  .aisatsuHonbun {	font-size: 1.6rem; letter-spacing: 0.2rem; line-height: 2.5; }
  .prefecture { color: #FFF; padding: 5px;align-self: center;}
  .historyTable span {padding-left: 13em; }
  @media only screen and (max-width:768px){
    .headerImage { width: 100%; text-align:left;}
    .headerArea { width:100%; margin: 0 auto;}
    .headerNavi { display: none;  }
    .goaisatsu { width:100%; padding:30px 0;}
    .news { width:100%; padding:30px 0;}
    .about { width:100%; padding:30px 0;}
    .history { width:100%; padding:30px 0;}
    .member { width:100%; padding:30px 0;}
    .daihyou { margin-right: 10px !important;}
    .blueLine { display: none;  }
    .historyTable{ display: block; border-bottom: 1px dotted #14a0d2; padding-bottom: 10px; margin-bottom: 10px;}
    .historyTableDate  { width: 100%; padding: 0;}
    .historyTableDate::before { content: none;}
    .historyTableDate::after { content: none;}
    .historyTableContent { padding: 0;}
    .content { padding-left: 24px;}
    .toggle:checked + .Label + .content { padding-left: 24px;}
    .rightContent { margin-left: 60px }
    .footerArea { width:100%; padding-top:20px; padding-bottom:20px !important;margin-top:10px !important;}
    .aboutTableContent { width:80%;}
    .aboutTableTitle { width:90px;}
    .bacgroundArea { background-size:cover; background-position: bottom center;}
    .companyName { padding-left:10px;margin-top: 10px !important;}
    .footerinformation{ padding-left:10px; margin-top: 10px !important;}
    .copyright {margin-top: 10px !important;}
    .whiteLine { background-size:780px; background-position:left 10px top; }
    .footerNavi { padding-left: 10px;}
    .grounpfacilities {padding-left: 10px;}
    .facilities.migiaki{ margin-right: 10px;}
    .facilities {width: auto; justify-content: left;}
    .gHojin { margin: 20px 0; }
    .gHojin p.gTitle { padding-left: 15px; }
    .facilities.spmtyou {margin-top: 10px;}
    .facilitiesLast {width: auto;}
    .footerArrow {right: -18px;}
    .footerArrow.spcyouseiyou {right: -4px;}
    .footerArrowLast{right: -10px;}
    .toTop { width: 10%; right: 5%}
    .prefecture.hokkaido { margin-bottom: 0 !important; align-self: start;}
    .hokkaidofacilities{ display: block; }
    .footerBackArea { background-image:none; background:#51b4db ;}
    .grounpfacilities{ font-size: 1.6rem;}
    .memberTableDate { width: 100px; left: -60px;}
    .memberTableContent { padding-left: 55px;}
    .historyTable span {padding-left: 0; }
}