@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=M+PLUS+Rounded+1c:wght@400;800&family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap');
/* =Reset default browser CSS.
-------------------------------------------------------------- */
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, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, 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: """";
}
b{ font-weight: 500;}

a img {
  border: 0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}
html {
  font-size: 62.5%;/*初期値16pxの62.5%でルートが10px*/
   scroll-behavior: smooth;
scroll-padding-top: 80px;
} 
body {
  line-height: 1.5;
  font-size: 90%;
  font-family: 'Noto Sans JP', sans-serif;
  color: #000;
  -webkit-text-size-adjust: 100%;
  background: #fff;
  display: flex;
  flex-flow: column;
  min-height: 100vh;
}
/*全てをクリア*/
.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: #297ACC;
  transition: all 0.5s ease 0s;
  cursor: pointer;
}
a:hover, a:active {
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  -o-transition: opacity 1s;
  outline: none;
  color: #D3306A;
}

/**** Clearfix ****/
/* レイアウト
------------------------------------------------------------*/
.inner {
  margin: 0 auto;
  max-width: 1000px;
  width: 98%;
}
.inner2 {
  margin: 0 auto;
  padding: 30px 0; position: relative;
  max-width: 850px;
  width: 95%;
}

#wrapper {
  margin: 0 auto 0px;
  font-size: 16px;
  font-size: 1.6rem;
  padding: 0 0 0px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.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;
}
.m-plus-rounded-1c{
  font-family: "M PLUS Rounded 1c", serif;
   font-weight: 800;
}
.m-plus-rounded-1c2{
  font-family: "M PLUS Rounded 1c", serif;
   font-weight: 600;
}

.noto-serif-jp-bold  {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
}

.red{ color: #e50058;}


/* 共通変更 フォントサイズ　*/
.font12 { font-size: clamp( 12px, 1.2vw, 12px); }/*  10px 最大　2px*/
.font14 { font-size: clamp( 14px, 1.4vw, 14px); }/*  12px 最大　14px*/
.font16 { font-size: clamp( 14px, 1.6vw, 16px); }/*  14px 最大　16px*/
.font17 { font-size: clamp( 14px, 1.8vw, 17px); }/*  14px 最大　17px*/
.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*/
.font32{ font-size: clamp( 26px, 3.4vw, 32px); }/*  26px 最大　32x*/
.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*/


/* ヘッダー
----------------------------------*/
#glovalheader { background: #485bb3; text-align: center;  color: #fff;}
#glovalheader ul{ color: #fff100; display: flex; flex-wrap: wrap;  justify-content: space-between; margin: 1em auto 0;width:80%; max-width:550px;}
#glovalheader ul li{ border:2px solid  #fff100; border-radius: 15px; padding: 2px 5px;}



/* フッター
----------------------------------*/

#footer { margin: 2em auto 0; padding: 0em 0 0; width:100%;
  text-align: center;
}
#footer small{ background: #485bb3; color: #fff; display: block; padding: 0.5em; margin:0.5em 0 0 0;}


#page-top1 {
  display: block;
  position: fixed;
  z-index: 9999;
  bottom: -0px;
  right: 40px;
  width: 50px;
  height: 50px;
  text-align: center;
  text-decoration: none;
  transition: .5s;
  font-size: 16px;
  font-size: 1.6rem;
  vertical-align: middle;
  background: #fff; border: 1px solid #485bb3; 
  border-radius: 50%;
}
a#page-top1 {
  color: #485bb3 !important;
}
#page-top1 span {
  display: block;
  margin: 10px auto 0;
  font-size: 20px;
  font-size: 2.0rem;
}
.alignleft {
  float: left;
}
.alignright {
  float: right;
}
.center {
  text-align: center;
}

/* 共通文字
----------------------------------*/

ol {
  list-style: none;
  counter-reset: number;
}
li {
  position: relative;
  padding-left: 1.5em;
}


.content{  background:url("../img/main.jpg") 100% 10% no-repeat;  background-size: 85% auto; width:100%;}
.content div.headergroup{ margin: -4em 0 0 ;}
.content div.headergroup h1 {  max-width: 362px; width: 95%;  }
.content div.headergroup h1 img{  width:100%; height: auto;  }
.content div.headergroup h1,.content p.h1chui{ display: inline-block; vertical-align: top;}
.content p.h1chui{  margin: 5em 0 0 1em; font-weight: 600; width:calc(100% - 450px);}
.content div.headergroup h2 {background: linear-gradient(to right, rgba(255, 255, 0, 1), rgba(255, 255, 0, 0)); padding:0.5em;font-weight: 600; max-width: 50%;  }
.content div.headergroup h3 { max-width: 550px; width:65%; margin:80px 0 0;}

.content div.headergroup h3 img { width:100%; height: auto;  }
.content div.group2,.content img.hito{display: inline-block; vertical-align: middle; }
.content img.hito{ width:43%; height: auto; margin: -4em 0 0 0; }
.content div.group2{ width:55%; margin: -3em 0 0 0; }

img.car1{ width:60%; max-width: 340px; height: auto; margin-right: 1em;}
.flex{display: flex;}
.wrap{flex-wrap: wrap;}
.space-between{justify-content: space-between;/*両端揃えで配置*/}

.list1{ margin: 2em 0 0 0;}
img.car2{ width:30%; max-width: 150px; height: auto;}


h4.shosai{ background: #485bb3; border-radius: 20px; color: #fff;  padding: 0em 1em; width:7em; text-align: center; margin: 1.5em 0 0; font-weight: 800;}
h4.shosai,p.font24{ display: inline-block;  vertical-align: middle; margin: 1.5em 1em 0 0;}
p.font24{font-weight: 600;}
dl.flex.wrap{ margin: 1em  0 0 1em;}
dl.flex.wrap dt{font-weight: 600; margin: 0; width:7em;}
dl.flex.wrap dd{width:calc(100% - 9em);}
.colorblue{color:  #485bb3;}


/* お問合せ
------------------------------------------------------------*/
article.contact{margin: 3em auto 0;}
article.contact h3.red{  border: 2px solid ; padding: 0em 0.5em; width:3em; text-align: center;}
article.contact h4{ margin: 2em auto 0; background: #000; color: #fff; text-align: center;border: 1px solid #000; }

article.contact dl { border: 1px solid #000; 
  margin: 0px auto 20px;} 

article.contact dt {
  text-align: left;
 padding: 1em ; background: #f0f0f0 !important;
}

article.contact dd {padding: 0.8em 1em;
 text-align: left;border-bottom: 1px solid #ddd;background: none !important;
 
}
article.contact dd p{ margin: 0.3em 0;}
article.contact input[type="text"], article.contact input[type="email"], article.contact input[type="tel"], article.contact textarea {
  padding: 0.8em;
  outline: none;
  display: block;
  border: none;
 border: 1px solid #999;
  margin: 0 0 0.5em;
  max-width: 500px;
  width:calc(90% - 1.6em); background: #fff !important;
}

article.contact input[type="text"]:focus, article.contact texture:focus, article.contact input[type="tel"]:focus , article.contact input[type="email"]:focus{
  border: 1px solid #d42a28;background: #ffd7d7!important;
}
article.contact input.p-postal-code[type="text"] {
  max-width: 10em;
}

article.contact button {display: block; vertical-align: middle;
  font-size: 20px !important;
  font-size: 2.0rem !important;
  margin: 30px auto 25px;
  vertical-align: middle;
  color: #fff;
  background-color: #485bb3;
  padding: 0;
  height: 50px;
  line-height: 50px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #485bb3;
  -webkit-transition: .5s;
  transition: .5s;
  cursor: pointer;
  width: 60%;
  max-width: 250px; border-radius: 50px;
}

button.btn1 {display: block; vertical-align: middle;
  font-size: 20px !important;
  font-size: 2.0rem !important;
  margin: 30px auto 25px;
  vertical-align: middle;
  color: #fff;
  background-color: #485bb3;
  padding: 0;
  height: 50px;
  line-height: 50px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #485bb3;
  -webkit-transition: .5s;
  transition: .5s;
  cursor: pointer;
  width: 60%;
  max-width: 250px; border-radius: 50px;
}
article.contact button[type="reset"]{
width: 30%;
  max-width: 200px;
 background-color: #999; border: 1px solid #999;
}
article.contact button[type="reset"]:hover {
  background: #AA0C0C;
  border: 1px solid #AA0C0C;
  color: #fff;
}
article.contact button[type="submit"]:hover {
  background: #AA0C0C;
  border: 1px solid #AA0C0C;
  color: #fff;
}

input[type="checkbox"] {
  position: relative;
  width: 16px;
  height: 16px; background: #fff;
  border: 1px solid #000;
  vertical-align: -5px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

input[type="checkbox"]:checked:before {
  position: absolute;
  top: 1px;
  left: 4px;
  transform: rotate(50deg);
  width: 4px;
  height: 8px;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  content: '';
}

/* 基本のセレクトボックスのカスタマイズ */
.select {
  background: #fff; border: 1px solid #999;
  height: 40px;
  width: 300px;
  border-radius: 5px;
  position: relative;
  z-index: 1;
    margin-bottom: 0.5em;
}

.select::after {
  position: absolute;
  content: '';
  width: 8px;
  height: 8px;
  right: 10px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  border-bottom: 2px solid #3368B1;
  border-right: 2px solid #3368B1;
  z-index: -1;
}

select {
  /* 初期化 */
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  width: 100%;
  height: 100%;
  padding: 0 10px;
}
ul.chui{ margin: 1.5em 0 0;}
ul.chui li{ margin: 0.25em auto; position: relative; padding-left: 1.2em;}
ul.chui li:before{content: "※"; position: absolute;  left:0; top:0;}
.end h3{ margin: 1em auto 1em;}


/* メインメニュー iPadサイズ以下から
------------------------------------------------------------*/
@media only screen and (max-width:1200px) {.content div.headergroup{ margin: -2em 0 0 ;}}

@media only screen and (max-width:785px) {
    .content{  background:url("../img/main.jpg") 100% 10% no-repeat;  background-size: 85% auto; width:95%;}
.content div.headergroup{  top: -5em; left:0; width:100%;}
.content p.h1chui{  margin: 2em 0 0 1em; font-weight: 600;}
.content div.headergroup h2 {  max-width: 100%;  }
}

@media only screen and (min-width:650px) {.mob{ display: none;}}
@media only screen and (max-width:650px) {
    
.content{  background:none;}    
    .content div.headergroup{ margin: -0em auto 0 ; text-align: center;}
.content div.headergroup h1 {  max-width: 362px; width: 95%;  }
.content div.headergroup h1 img{  width:100%; height: auto;  display: block; margin: 0 auto; }
.content div.headergroup h1,.content p.h1chui{ display: inline-block; vertical-align: top;}
    
    
.content p.h1chui{ display: block; margin: 1em auto; width:100%;}
img.maingazo{ display: block;  margin: 1em auto 10px auto; width:100%;}
    .content div.headergroup h3 { max-width: 550px; width:65%; margin:-10em auto 0; min-width: 360px;}
    
    .font36{ font-size: clamp( 20px, 3.6vw, 36px); }
    .content div.group2,.content img.hito{display: block; margin:0.5em auto;  width:90%; max-width: 450px; }
    .content img.hito{ max-width: 350px; }
    
    
img.car1{ width:60%; max-width: 340px; ght: auto; margin: 1em auto;min-width: 360px;}
.flex{display: flex;  flex-wrap:  wrap;}
.space-between{justify-content: space-between;/*両端揃えで配置*/}

.list1{ margin: 2em 0 0 0;}
img.car2{ width:30%; max-width: 150px; height: auto; margin: 0 auto;}
    
    
}
@media only screen and (max-width: 440px) {
 #glovalheader ul li{ border:2px solid  #fff100; border-radius: 5px; padding: 2px;} 
    dl.flex.wrap dt{font-weight: 600; margin: 0; width:7em;}
dl.flex.wrap dd{width:calc(100% - 1em);}
    
}


@media print {
   .slider{ display: none !important }
      #wrapper {
    font-size: 14px;
    font-size: 1.4rem;
  }
    }
/*@print
A4用紙に特化したメディアクエリ*/
@page {
    size: A4;
    margin: 0;
}