@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&family=Noto+Sans+JP:wght@100..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: 1100px;
  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-regular {
  font-family: "M PLUS Rounded 1c", serif;
  font-weight: 400;
  font-style: normal;
}

.beige {
  background: #fff1d5;
}
.white {
  background: #fff;
}
.green{ color: #009755;}
.greenback{ background: #009755;}

/* 共通変更 フォントサイズ　*/
.font12 {
  font-size: 12px;
  font-size: 1.2rem;
}
.font14 {
  font-size: 14px;
  font-size: 1.4rem;
}
.font16 {
  font-size: 16px;
  font-size: 1.6rem;
}
.font18 {
  font-size: 18px;
  font-size: 1.8rem;
}
.font20 {
  font-size: 20px;
  font-size: 2.0rem;
}
.font22 {
  font-size: 22px;
  font-size: 2.2rem;
}
.font24 {
  font-size: 24px;
  font-size: 2.4rem;
}
.font26 {
    font-size: 26px;
    font-size: 2.6rem;
  }
.font28 {
  font-size: 28px;
  font-size: 2.8rem;
}
.font30 {
  font-size: 30px;
  font-size: 3.0rem;
}
.font32 {
  font-size: 32px;
  font-size: 3.2rem;
}
.font34 {
  font-size: 34px;
  font-size: 3.4rem;
}
.font36 {
  font-size: 36px;
  font-size: 3.6rem;
}
.font40 {
  font-size: 40px;
  font-size: 4.0rem;
}

/* ヘッダー
----------------------------------*/
#glovalheader { padding:10px 0 10px ; z-index: 1000;position: fixed; /*← fixedで固定 */ width:100%; background: #fff; }
#glovalheader h1 { width:45%;  margin: 0 ; max-width:180px;}
#glovalheader h1 img {  width:100%; height: auto; display: block;}
#glovalheader .inner1{ display: flex;  margin: 0 auto; width:98%; max-width: 1100px;}
#glovalheader.smaller{ padding: 10px 0 10px ; border-bottom: 1px solid #ddd; background: #fff; }
#glovalheader.smaller h1 { margin: 0 ; max-width:120px;}


/* ナビ
----------------------------------*/
#menu { 
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;

  margin: 0 0;  width:75%; 
}
#menu-inner {width: 100% !important;}
#menu-btn {
  display: none;
}

#menu-content {
  margin: 0; padding:0.8em 0 0;
  list-style-type: none;  text-align: center;
}

#menu-content > li { margin: 0;
  position: relative; padding:0  20px;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;text-align: center;
}

#menu-content > li > a {
  display: block;
  padding: 0 0 0;
  color: #000;
  text-decoration: none; 
position: relative;
  cursor: pointer;
    
}
#menu-content >  li > a:hover  {
 color: #2f479f;
background-position: bottom left; /* 下線のホバー時位置 */
}

@media screen and (min-width: 1100px) {
    .moblogo{ display: none;}
#menu-inner { margin-left: 20px; }
  #menu-content {
  margin: 20px 0 0; 
  list-style-type: none; display: flex;
justify-content: flex-end;/*右寄せで配置*/
}
#glovalheader.smaller  #menu-content {
  margin: 0px 0 0; 
}
#menu-content > li > a::before {
font-family: 'Font Awesome 6 Free';
font-weight: 900;
  content: "\f1b0"; 
  position: absolute; color: #999; 
    left:50%; top:-1.5em; transform:  translateX(-50%);
} 
#menu-content > li > a:hover   {color: #009755; transition: all 0.5s ease 0s; }
#menu-content > li > a:hover::before {	color: #009755; transition: all 0.5s ease 0s;top:-1em; }
.home #menu-content > li > a.btnhome,.movie #menu-content > li > a.btnmovie,.about #menu-content > li > a.btnbout,.development #menu-content > li > a.btndevelopment,#contact #menu-content > li > a.btncontact  {color: #009755;  }
.home #menu-content > li > a.btnhome::before,.movie #menu-content > li > a.btnmovie::before,.about #menu-content > li > a.btnbout::before,.development #menu-content > li > a.btndevelopment::before,#contact #menu-content > li > a.btncontact::before  {	color: #009755; top:-1em; }    
 #menu-content > li.mob  {display: none;}

}
@media screen and (max-width: 1100px) {
#glovalheader {padding: 20px 0 10px ;z-index: 1000;}
#glovalheader h1 { width:45%;  margin: 0 ; max-width:180px;}
#glovalheader.smaller h1 { margin: 0 ; max-width:120px;}
nav {
    position: fixed;
    top: 0;
    left: -300px;
    bottom: 0;
    width: 60%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    z-index: 3;
    opacity: 0; background: #fff;
  }
    #glovalheader #navArea{ background: #ddd;}
    .moblogo{ display: block; margin: 1em auto; max-width:350px; height: auto; width:80%;}
    

  .open nav {
    left: 0;
    opacity: 1;
  }
 #navArea  nav .inner {
    padding: 1.5em 0; margin: 0  ; 
width: 100% !important;}
 #navArea  nav .inner ul {
    list-style: none; 
    margin: 0;
    padding: 0;
  }
 #navArea  nav .inner ul li {
    position: relative;
    margin: 0;
  }
 #navArea  nav .inner ul li a {
    display: block;
    color: #333;
    font-size: 14px;
    text-decoration: none;
    -webkit-transition-duration: 0.2s;
            transition-duration: 0.2s;
  }
  .toggle_btn {
    display: block;
    position: fixed; background:#009755;
    top: 10px;
    right: 20px;
    width: 50px;
    height:50px;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    cursor: pointer;
    z-index: 3;
  }
  .toggle_btn span {
    position: absolute;
    left: 4px;
    width:42px;
    height: 3px;
    background-color: #fff;
    border-radius: 4px;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
  .toggle_btn span:nth-child(1) {
    top:12px;
  }
  .toggle_btn span:nth-child(2) {
    top: 24px;
  }
  .toggle_btn span:nth-child(3) {
    bottom: 11px;
  }
  .open .toggle_btn span {
    background-color: #fff;
  }
  .open .toggle_btn span:nth-child(1) {
    -webkit-transform: translateY(12px) rotate(-315deg);
    transform: translateY(12px) rotate(-45deg); 
  }
  .open .toggle_btn span:nth-child(2) {
    opacity: 0;
  }
  .open .toggle_btn span:nth-child(3) {
    -webkit-transform: translateY(-12px) rotate(315deg);
    transform: translateY(-12px) rotate(45deg);
  }
    #glovalheader.smaller   .toggle_btn { top:3px;
    right: 20px;}
    
    
  #mask {
    display: none;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
  .open #mask {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.5;
    z-index: 2;
    cursor: pointer;
  }
    #navArea{ }
  #menu-content > li {
    width: 100%; 
    margin: 0 0 1px;
  }
  #menu-content > li:hover {
    background: none;
  }
  #menu-content > li > a {
    height: 100%;
    padding: 1em 1em 1em 1.5em;
    font-size: 100%;
    background: #fff; 
    text-align: left;
    border-bottom: 1px dotted #005da3;
  }
     #menu-content > li > a:hover {
    background: #005da3; color: #fff !important;
  } 
#menu-content > li > a::before {
font-family: 'Font Awesome 6 Free';
font-weight: 900;
  content: "\f0da"; font-size: 12px;
  position: absolute; 
  left:5px; top:50%; transform:  translateY(-50%);
} 
    
    
    
    
  #menu-content > li > ul.second-content {
    visibility: visible;
    opacity: 1;
    width: 100%;
    position: relative;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  #menu-content > li > ul.second-content > li {
    width: 100%;
    text-align-last: left;
  }
  #menu-content > li > ul.second-content > li > a {
    padding-left: 1.5em;
  }
  #menu-content > li > ul.second-content > li > a:hover {
  background: #0268b6;
  color: #fff;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
#menu-content > li.mob.mob2{  margin: 1em 0 1px;}
 #menu-content > li.mob > a {
    height: 100%;
    padding: 0px 0 0 1em;
    font-size:95% !important;
    background: none; border: none;
  }
    

#footer nav {
   position:static;
    width: 98%;

    opacity: 1; background: none;
  }
    
}
@media screen and (max-width: 600px) {
 nav {
    width: 80%;
  }}


/* フッター
----------------------------------*/
.slider div{  margin: 0 8px ; padding:0 !important; }
.slider{  margin: 8px 0 0;   height: auto; width:100%; padding: 8px 0 0; }
.slider img{ border-radius: 20px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); margin-bottom: 0.5em; width:100%; }


#footer { margin: 0em auto 0; padding: 0em 0 0; width:100%;
  overflow: hidden;
  text-align: center;
  position: relative; 
}
#footer article  .contactbtn a img{vertical-align: middle;width:30px; height: auto; display: inline-block; margin: 0 0.5em;}
#footer article{ position: relative;}
#footer article img.dog3{ position:absolute; width: 170px; height: auto; bottom:10%;  right:-100px; }
#footer article h4,#footer article p{ margin: 0 auto; text-align: left; padding: 0;width:80%;  }

#footer article .contactbtn { align-items: center; color: #fff; margin: 0px auto 1em; width:95%;  border-radius:60px; position: relative; }
#footer article .contactbtn h3{ text-align: left; padding: 1em; line-height: 1.3;white-space: nowrap; /* 折り返しなし */}
#footer article .contactbtn div{ text-align: left !important; padding: 1em 0;}
#footer article .contactbtn div p{ width:100%; }
#footer article .contactbtn .fa-solid,.contactbtn b,.contactbtn a{ display:  inline-block; vertical-align: middle;}
#footer article .contactbtn b { margin: 0 1em 0 0.2em;}
#footer article .contactbtn a{ color: #fff;}
#footer small{ display: block;  color: #fff; text-align: center; padding: 0.5em;}
#footer article  p span{ display: inline-block; margin-left:1em ; vertical-align: middle}
#footer article .contactbtn u {  display: inline-block;  text-decoration: none;}

#footer article p.fax{ text-align: left; margin: 0.5em 0px 0 0;padding: 0.5em ; width:90% !important;  line-height: 1.3;  background:#fff ;  position: relative; border-radius:5px;  color: #000; }
#footer article p.fax a{ position: absolute;  font-size: 40px; top:50%;  transform: translateY(-50%); right:20px; color: red}
#footer article p.fax span{ display: block; margin: 0 80px 0 0;}
#footer article p.fax a:hover{color:#FFF16A;}
#footer article p.fax .chui{ position: absolute;  font-size: 40px; top:0; right:20px; color: red}
#footer article p.fax a.tofax{ position: absolute;  font-size: 12px; top:80%; transform: translateY(-80%); right:70px;  color: #297ACC;}


nav.footer { text-align: center; border-top: 1px dotted ;   }
nav.footer a{ display: inline-block; vertical-align:middle; margin: 0; padding:0.5em 1.5em ; position: relative;}
nav.footer a::before {
font-family: 'Font Awesome 6 Free';
font-weight: 900;
  content: "\f105"; font-size: 10px;
  position: absolute; 
    left:5px; top:50%; transform:  translateY(-40%);
} 

.floater { 
position: fixed;
top: 10px;
right: 10px;
padding: 0px;
z-index: 1001; display: block;
}
.floater img{ width:120px; height: auto;}


#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: #297ACC;
  border-radius: 50%;
}
a#page-top1 {
  color: #fff !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;
}





/*トップ*//* ===== 背景動画エリア ===== */
.mainmovie{ background: #f0f0f0; margin: 0px 0 0 0; padding: 0px auto 0;} 
.fv-video-bg {
  position: relative; margin: 0px auto 0;
  width: 100%; max-width: 1250px;
  height:  min(100vh, 700px);
  overflow: hidden;background: #f0f0f0;
}
.fv-video-inner {
  position: relative;
}

.fv-video-inner video,
.fv-video-inner img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== 内側の動画配置 ===== */
.fv-video-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

/* ===== MP4動画用（cover で全画面表示） ===== */
.fv-video-inner video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;            /* 一番重要：画面いっぱいに表示 */
  transform: translate(-50%, -50%);
}

/* ===== 文字エリア ===== */
.fv-content {
  position: relative;
  z-index: 2;
}


/* ====== コンテンツ ====== */
.fv-content {
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  padding: 0 20px;
  color: #fff;
  height: 90%;
}
.mainmoji{  width:95%; max-width: 1050px; margin: 0 auto;;}
.fv-content .mainmoji{ position: relative; height:100% ;}
.fv-content h1{ position: absolute; left:0; bottom: 0;  width:95%;  max-width: 520px;}


/* ====== スマホ調整 ====== */
@media (max-width: 768px) {
    
.fv-video-bg {
  height:  min(100vh, 500px);
}    
        
  .fv-content h1 {
    font-size: 2rem;
  }
  .fv-content p {
    font-size: 1.1rem;
  }
}

@media (max-width: 500px) {
    
.fv-video-bg {
  height:  min(100vh, 450px);
}    

}

.circle{  position: relative;}
.circle2{ position: relative;}
.ru{ display: block; position: absolute;  bottom:60px; right:0; max-width:185px; width: 50%; }
.ro{ display: block; position: absolute;  top:0px; right:0; max-width:185px; width: 50%;  }
.ru2{ display: block; position: absolute;  bottom:0px; right:0; max-width:185px;width: 50%;  }

#contents{ margin: 80px 0 0; z-index: 100; padding: 0;}
.no01 h1 img{ width:90%; height: auto; max-width:450px; margin: 10px 0 0;}
.no01 .read{ margin:0 0 1.5em 0.5em; line-height: 1.3; font-weight: 600;}
.no01 .read span{ display: inline-block;  background: #fff; color:#009755 ; padding: 2px 0.5em;margin-right: 0.5em;}
.no01 h2{ margin:0 0 0.5em 0.5em; line-height: 1.3;}
.no01 h2 span{ display: block; margin-left: -0.5em;}
.no01 h3{color: #fff; border-radius: 50%; width:3em; height: 3em; line-height: 3em; text-align: center;}
.flex{ display:  flex; }
.flex-wrap{flex-wrap: wrap; }
.right{flex-direction: row-reverse; }


.no01 dl{  width: calc( 100% - 6em ); margin: 0 0 0 1em;display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;}
.no01 dl dt {
  position: relative;
  display: inline-block;
  margin: 0 0 1em ;
  padding: 0;
  width:190px; 
  text-align: center;
  background: #FFF;
  border: solid 2px #009755;
  box-sizing: border-box;
}
.no01 dl dt:not(:nth-of-type(2)){padding: 8px 0 0;}
.no01 dl dt:before {
  content: "";
  position: absolute;
  top: 50%;
  right: -24px;
  margin-top: -12px;
  border: 12px solid transparent;
  border-left: 12px solid #FFF;
  z-index: 2;
}
.no01 dl dt:after {
  content: "";
  position: absolute;
  top: 50%;
  right: -28px;
  margin-top: -13px;
  border: 13px solid transparent;
  border-left: 13px solid #009755;
  z-index: 1;
}
.no01 dl dd{  width: calc( 100% - 210px );  margin:0 0 1em 18px;padding: 0 0 6px;}


.no01 dl dd span{  display: block;  position: relative; padding-left: 1.5em;}
.no01 dl dd span::before {
font-family: 'Font Awesome 6 Free';
font-weight: 900;
  content: "\f04d"; font-size: 12px;
  position: absolute; 
    left:5px; top:50%; transform:  translateY(-50%);
} 
.no01 img.dog01{ box-shadow: 10px 10px 0 #999; margin: 20px auto 0; width:35%;  padding: 0 !important; height: auto;}

.no01 img.dog2{ position: absolute; width:160px; height: auto; left:-150px; top:-20px;}
.no02 h2 {
    position: relative;
    padding: 5rem 0 5rem 0.8em;
    margin-bottom: 0.2rem; z-index: 1;
}
.no02 h2:before {
    position: absolute;
    width: 90px;
    height: 90px;
    top: 50%;
    left: 0%;
    border-radius: 50%;
    background: #e5ef81;
    transform: translateY(-50%);
    content: '';
    z-index: -1;
}
.no02 .flex{ justify-content: space-between; margin-bottom: 2em}
.no02 div.right{ margin-bottom: 3em;}
.no02 div.txt{  width:calc( 60% - 2em );}
.no02 div.photo{  width:38%;text-align: center;}
.no02 div.photo img{  width:100%; height: auto; display: block; margin-bottom: 5px; border: 1px solid #ddd; border-radius: 10px;}
.no02 div.txt p{ margin: 1em 0;}
.no02 div.box{ margin: 2em auto; border: double 5px #009755; padding:0.5em 1.5em;}
.no02 a.tomovie { display: block; background: #2a7acc; border: 1px solid #2a7acc; color: #fff; margin: 1em auto; width:16em; text-align: center; padding: 3px; border-radius: 20px; }
.no02 a.tomovie .fa-youtube {  display:  inline-block; margin-right: 0.5em;}
.no02 a.tomovie:hover { background: #fff; color: #2a7acc;}

.no02 .txt p  {
	line-height:2.5em;
	background-image: linear-gradient(transparent 0, transparent 97%, #999 100%);
	background-size: 100% 2.5em;
}


.no03 img.dog01{ box-shadow: 10px 10px 0 #999; margin: 20px auto 0; width:35%;  padding: 0 !important; height: auto;}
.no03 .ordermade,.no01  img.dog01{ display: inline-block;vertical-align: top;}
.no03 .ordermade{width:60%; padding: 0 !important;  margin: 20px 0 0 3%; line-height: 1.3;}
.no03  .ordermade h4 u { text-decoration: none; color:  #d42a28; border-top:2px solid  #d42a28;border-bottom:2px solid  #d42a28; }
.no03  .ordermade p {  margin: 1em 0 0 0; }
.no03  .ordermade a{ display: block;  position: relative; padding-left: 1.5em; margin: 1em 0 0 auto;}
.no03  .ordermade a:before {
font-family: 'Font Awesome 6 Free';
font-weight: 900;
  content: "\f138"; 
  position: absolute; 
    left:5px; top:50%; transform:  translateY(-50%);
} 
.no03 img.dog2{ position: absolute; width:160px; height: auto; left:-150px; top:-20px;}
.no03 img.dog04{ position: absolute; width:120px; height: auto; right:-0px;bottom:10px;}

.no02 p{ margin: 1em 0;}
.no02 p span{  display: inline-block; vertical-align: middle; }
.no02 p span.gray{  padding: 0.1em 0.5em; margin: 0.5em 0.5em 0.5em 0; border-radius: 5px; background: #009755;  color: #fff; }











.no02 img.dog1{ position: absolute; width:50%; max-width: 400px; height: auto; right:-150px; top:20px;}


.no02 h5{ margin: 1em ;
  position: relative;
  display: block;
  padding: 0 55px 0 0;
}

.no02 h5:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: calc( 100% - 12em);
  height: 1px;
  background-color: black;

  right: 0;
}
/* グリッドスタイル */
  .image-grid {align-items: flex-start; max-width: 600px;
      display: flex; /* フレックスボックスを使用して画像を横並びに */
      justify-content: space-around; /* 画像間のスペースを均等に */
      gap: 5px; /* 画像間の余白 */ margin: 1em 0 1em 0;
    z-index: 100;
  }
  
  /* サムネイル画像のスタイル */
  .thumbnail {
      width: 100%; /* 幅を100%に設定 */ max-width: 150px;
      cursor: pointer;  /* カーソルをポインターにしてクリック可能に */
      transition: transform 0.3s; /* ホバー時の変化を滑らかに */
       filter: drop-shadow(5px 5px 5px #aaa);
  }
  .thumbnail:hover {
      transform: scale(1.05); /* ホバー時に少し拡大 */
  }

  /* モーダルのスタイル */
  .modal {
      display: none; /* 初期状態は非表示 */
      position: fixed; /* スクロールしても位置が固定 */
      z-index: 1; /* 他の要素の上に表示 */
      left: 0;
      top: 0;
      width: 100%; /* 幅は全体 */
      height: 100%; /* 高さも全体 */
      overflow: auto; /* コンテンツが多い場合はスクロール */
      background-color: rgba(0, 0, 0, 0.7); /* 背景の透明度 */  
  }

  .modal-content {
      margin: 5% auto; /* 中央寄せ */
      display: block; /* ブロック要素 */
      width: 80%; /* 幅は80% */
      max-width: 600px; /* 最大幅を設定 */
  }

  .close {
      position: absolute; /* 絶対位置に配置 */
      top: 5%; /* 上から10pxの位置 */
      left: 10%; /* 右から25pxの位置 */
      color: white; /* 色を白に */
      font-size: 35px; /* フォントサイズを35pxに */
      font-weight: bold; /* 太字 */
      cursor: pointer;  /* カーソルをポインターにしてクリック可能に */
    
  }


.flow h2{ text-align: center;}
.flow h2 span{ display:inline-block; vertical-align: middle; margin: 0 0.2em;}
.flow dl { flex-wrap: wrap;
  counter-reset: ol-step-counter;
  list-style: none;
  padding-left: 32px;
  margin: 32px 0 32px 14px;
  position: relative;
align-items: center;
}
.flow dl dt ,.flow dl dd{ display: inline-block; vertical-align: middle; }
.flow dl dt {
  counter-increment: ol-step-counter;
 margin: 0 0 2em;
  padding: 0.1em 0 0.2em 0.2em;
  box-sizing: border-box;
  background: #009755; 
  border-radius: 50px;
  width: 150px; 
  color: #fff;  text-align: center;
  position: relative;
}

.flow dl dt::before {
  position: absolute;
  left: .2em;
  top:50%; transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  content: counter(ol-step-counter);
  height: 30px;
  justify-content: center;
  margin: 0;
  width: 30px;
  background: #fff; 
  font-size: 22px;
  border-radius: 50%;
  color: #009755; 
 font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.flow dl dd{ width:calc(100% - 160px - 2em); line-height: 1.4; margin:-1em 0 2em 1em;   position: relative; padding:  0.1em 0 0.2em;}
.flow dl dd:not(:last-child):before {
  content: "";
  position: absolute;
  top: 120%;
  left: calc(50% - 100px);
 transform: translateX(-50%);
  margin-left: -30px;
  border: 30px solid transparent;
  border-top: 15px solid #009755;
}
.flow div.white{ padding: 1em; }
.flow div.white h4{ margin: 0; padding: 0 0 0 1em; text-align: left; position: relative;}

.flow div.white h4::before {
font-family: 'Font Awesome 6 Free';
font-weight: 900;
  content: "\f111"; font-size: 12px;
  position: absolute;  color: #009755;
    left:0; top:50%; transform:  translateY(-50%);
} 
.flow div.white p{ margin: 0.5em 1.5em;}

.flow p.red{ text-align: center; color:#d42a28; margin: 1.5em auto 0; }

artile.flow{  position: relative;  }
.flow p.red:before {
  content: "";
  position: absolute;
  bottom:-80px;
  left: calc(50% );
 transform: translateX(-50%);
  margin-left: -30px;
  border: 60px solid transparent;
  border-top: 30px solid #d42a28;
}

.flow img.dog2{ position: absolute; width:160px; height: auto; right:-150px; bottom:0px;}

/* サブページ
----------------------------------*/

.subread{   margin: 0 auto; width:98%; max-width: 1100px;}

.sub .image img{ width:100%;height: auto;
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);}
#about article.beige h2.ichi{ padding: 2em 0 0;}
#about article.beige h2.ichi span{ display:inline-block; vertical-align: middle; margin: 0 0.2em;}
.sub01{ flex-flow: wrap; justify-content:center;}
.sub01 div{width: 70%; padding: 0px 20px 0 0;}
.sub01 .image{ width:calc( 30% - 40px );
  display: inline-block;
  overflow: hidden; /* はみ出る部分を隠す */
   padding: 0px 0px 0 0;}
.sub01 .image img {border-radius:50%;
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.sub01 h2{ margin-bottom: 1em;}

.photo{ width:100%;}
.photo .image{ width:calc(100% / 3 - 1em);}
.start,.otukare {flex-direction: row-reverse; align-items: center;}
.sub02{ padding: 0 0 1em; margin: 0 auto;}
.sub02 h2.font24 {margin:1em auto 0.5em; }
.sub02 h2.font24 .fa-solid{ display: inline-block; margin-right: 0.5em; } 
.sub02 ol li{ margin:2em  auto; text-align: left;}

li .image img{border-radius:8px;
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);}
.sub02 ol  { 
  counter-reset: ol-step-counter;
  list-style: none;
   margin: 1em  auto 3em;
  position: relative;
}
.sub02 ol li h3 {
  box-sizing: border-box;
  background: #fff;
  border-radius: 50px;
  color:  #009755; 
 padding:0.2em 0.8em;  
}

.sub02 ol .photo{ margin: 1em auto; gap: 1em; width:95%;}
.otukare  .image { width:150px; height: auto; }
.otukare  .image img{ border-radius: 50%;}
.otukare h2{ width:60%; margin-left: 1.5em;}
.otukare  { margin: 30px auto;}

.btn-real-dent {
  /*周りの凹み*/
 margin: 1em auto;
  display: inline-block;
  position: relative;
  text-decoration: none;
  color: rgba(0, 151, 85, 1);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  text-align: center;
  background: #f7f7f7;
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.08);
}
.btn-real-dent i {
  /*ボタン自体*/
  position: absolute;
  content: '';
  width: 80px;
  height: 80px;
  line-height: 80px;
  left: 10px;
  top: 9px;
  border-radius: 50%;
  font-size: 40px;
  background-image: linear-gradient(#e8e8e8 0%, #d6d6d6 100%);
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(0, 0, 0, 0.19);
  border-bottom: solid 2px #b5b5b5;
}
  
.btn-real-dent .fa:active {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(0, 0, 0, 0.19);
  border-bottom: solid 2px #d8d8d8;
}
/*プライバシ*/
.privacy dt {
  margin: 1em auto 0;
  border-left: 5px solid #70a847;
  padding: 0 0 0 8px;
}
.privacy dd ul {
  margin: 0.5em;
}
.privacy dd ul li {
  margin: 0.5em 0 0.5em 1.4em;
}
.privacy dd ul li::before {
  content: '\f00c';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
  font-size: 16px;
  content: "\f14a"; 
  margin: 0 0.5em 0 -1.3em;
}
.privacy dd {
  margin: 0.5em 0 2em 15px;
}
.privacy .shomei {
  margin: 0 0 0 auto;
  max-width: 20em;
  width: 90%;
}
.privacy .shomei h3 {
  font-size: 18px;
  font-size: 1.8rem;
}
div.chuijiko {
  margin: 2em auto
}
div.chuijiko b {
  display: block;
  margin: 0 0 0 1.2em;
  padding: 0;
  font-weight: normal;
}
div.chuijiko b:before {
  content: "※";
  margin: 0 0.2em 0 -1em
}
/* お問合せ
------------------------------------------------------------*/
article.contact h2{ margin: 1em 0 ;}
article.contact h3.title{ margin: 3em 0 0;}
article.contact h3.font16{ margin: 0.5em 0 0;}
article.contact p.doctor{ position: relative; margin: 1em 0 ;background: #e5ef81; padding: 0.5em 0 0.5em 2em;}
article.contact p.doctor .fa-shield-dog{ position: absolute; left:0.5em; top:50%;  transform: translateY(-50%);}
article.contact a.policy{ display: block; margin: 1em auto; width:15em;  text-align: center;}
article.contact a.policy .fa-circle-check { display: inline-block; margin-right: 0.5em;}



hr.style6 {
  background-color: #fff1d5;
  border-top: 2px dotted #009755;
}



article.contact dl { border-top: 1px solid #ddd; 
  margin: 10px auto 20px;flex-flow: wrap;
        align-items: center;} 

article.contact dt {
  width:12em ;
  text-align: left;position: relative;
 padding: 1em 0 1em 0.5em; 
    background: none !important;
     border-bottom: 1px solid #ddd; 
}

article.contact dd {
  width: calc(100% - 13em);padding: 0.8em 0 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-bottom: 1px solid #DDD;
  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: inline-block; vertical-align: middle;
  font-size: 20px !important;
  font-size: 2.0rem !important;
  margin: 30px 0.5em 25px;
  vertical-align: middle;
  color: #fff;
  background-color: #297ACC;
  padding: 0;
  height: 50px;
  line-height: 50px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #297ACC;
  -webkit-transition: .5s;
  transition: .5s;
  cursor: pointer;
  width: 60%;
  max-width: 250px;
}
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;
  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;
}

.youtube { margin: 1em auto 4em;
  width: 100%;
  aspect-ratio: 16 / 9;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}

ol.testphoto　 {
  counter-reset: my-counter;
  list-style: none;
display: flex !important;
}

ol.testphoto li { margin: 2em auto;
  position: relative;
  list-style-type: none; float: left; width:45%;
}

ol.testphoto li:before {
  position: absolute; font-size: 20px; top:-1.6em;
  content: "(" counter(list-item) ")";
}
ol.testphoto li img{ width:100%; height: auto; }


/* メインメニュー iPadサイズ以下から
------------------------------------------------------------*/
@media only screen and (max-width:1153px) {
.no01 img.dog2{ left:-0px; top:-140px;}
.flow img.dog2{ width:160px; height: auto; right:-10px;}
.flow div.white p{ margin: 0.5em calc(1.5em + 150px) 0.5em 1.5em;}
#footer article img.dog3{ right:-70px; }
}

@media only screen and (max-width:1100px) {
.floater {  display: none;}
}
@media only screen and (max-width:900px) {
  #wrapper {
    font-size: 14px;
    font-size: 1.4rem;
  }
  /* 共通変更 フォントサイズ　*/
  .font12 {
    font-size: 10px;
    font-size: 1.0rem;
  }
  .font14 {
    font-size: 12px;
    font-size: 1.2rem;
  }
  .font16 {
    font-size: 14px;
    font-size: 1.4rem;
  }
  .font18 {
    font-size: 16px;
    font-size: 1.6rem;
  }
  .font20 {
    font-size: 18px;
    font-size: 1.8rem;
  }
  .font22 {
    font-size: 20px;
    font-size: 2.0rem;
  }
  .font24 {
    font-size: 22px;
    font-size: 2.2rem;
  }
  .font26 {
    font-size: 24px;
    font-size: 2.4rem;
  }
  .font28 {
    font-size: 26px;
    font-size: 2.6rem;
  }
     .font30 {
    font-size: 28px;
    font-size: 2.8rem;
  }
  .font32 {
    font-size: 30px;
    font-size: 3.0rem;
  }
  .font34 {
    font-size: 32px;
    font-size: 3.2rem;
  }
  .font36 {
    font-size: 34px;
    font-size: 3.4rem;
  }
  .font40 {
    font-size: 38px;
    font-size: 3.8rem;
  }
.font86 {
  font-size: 70px;
  font-size: 7.0rem;
  font-weight: 600;
}
  .close {
      top: 5%; /* 上から10pxの位置 */
      left: 5%; /* 右から25pxの位置 */
  }
 .contactbtn.flex{display: block;}
#footer article .contactbtn { padding: 0.8em 0;}
#footer article .contactbtn h3{ text-align:center; padding:0; }
#footer article .contactbtn h3 br{ display: none;}
#footer article .contactbtn div{  text-align: center !important; padding: 0; margin: 0.5em auto 0; width:95%; max-width: 500px;}
#footer article img.dog3{ right:-20px; bottom: 0; }  
    #footer article .contactbtn div p{ text-align: center;}   
    
#footer article p.fax{ text-align: left !important;  }
#footer article p.fax a{ right:0px; }
#footer article p.fax span{ display: block; margin: 0 60px 0 0;text-align: left !important; }
    #footer article p.fax{ ; margin: 0.5em auto 0 ;width:100% !important; }
#footer article p.fax a.tofax{  right:45px;  }
    
}
@media only screen and (max-width:810px) {
.slider img{ border-radius:10px; }
.no01 img.dog04{ width:100px; }
.no01  .ordermade p {  margin: 1em 80px 0 0; }
.no02 img.dog1{ right:-50px; top:20px;}
 .no02 h3{ margin: 0 40% 0 0;}
 .no02 h3 br{ display: none;}
.flow img.dog2{ width:120px; height: auto; right:-10px; bottom:4.5em;}
.flow div.white p{ margin: 0.5em calc(1.5em + 100px) 0.5em 1.5em;}
    

    
    
}
@media only screen and (max-width:750px) {  .close {
      top: 0; /* 上から10pxの位置 */
      left: 3%; /* 右から25pxの位置 */
  }
#footer article img.dog3{ width: 120px; height: auto;right:-20px; bottom: 20px; }
}
@media only screen and (min-width:680px) {
.no03 h4.mob{ display: none;}
}

@media only screen and (max-width:680px) {
  .font26 {
    font-size: 24px;
    font-size: 2.4rem;
  }
  .font28 {
    font-size: 24px;
    font-size: 2.4rem;
  }
     .font30 {
    font-size: 26px;
    font-size: 2.6rem;
  }
  .font32 {
    font-size: 28px;
    font-size: 2.8rem;
  }
  .font34 {
   font-size: 28px;
    font-size: 2.8rem;
  }
  .font36 {
    font-size: 32px;
    font-size: 3.2rem;
  }

.no01 dl.flex{ display: block}
.no01 dl dt {
  margin: 0 0 0.8em ; width: 100%; padding: 3px 0;
}
    .no01 dl dt:not(:nth-of-type(2)){padding: 3px 0;}
.no01 dl dt:before {
  top: auto;
  right:auto;
  margin-top: 0;
  border-left: none;
    bottom: -24px;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-top: 12px solid #FFF;
  z-index: 2;
    
}
.no01 dl dt:after {
  content: "";
  position: absolute;
  top: auto;
  right:auto;
  position: absolute;
  bottom: -28px;
  left: 50%;
  margin:0 0 0 -16px;
  border: 13px solid transparent;
  border-top: 13px solid #009755;
  z-index: 1;
}
.no01 dl dd{  width:auto;  margin:0 0 1em;}
  
 .no03  .ordermade h4 {  display:none;} 
.no03 .ordermade,.no01  img.dog01{ display:block;width:95%}

.no03 img.dog01{  display: block;  margin: 20px auto 0; width:90%;  padding: 0 !important; height: auto;}
    
article.contact dl{ text-align: center;}
article.contact dt, article.contact dd {
  display: block;
  vertical-align: top;  width:95% !important; 
  margin: 0 auto !important; text-align: left;
}
article.contact dt {
  width:95% ; display: block;
 position: relative;
 padding: 1em 0 0 !important; margin: 0 auto !important;
}
article.contact dd { padding: 1em 0 0; margin: 0 auto !important;
}
article.contact dt.hissu {
 padding: 1em 0 0 3.5em !important; margin: 0 auto !important;
}
 
article.contact dt.hissu:before {
  left:5px;
  top:1.2em
}
#footer article  p span:last-child{ display:block; margin:0; vertical-align: middle}  
    
    #footer article p.fax{ padding: 0.5em ; width:80% !important;}}
@media only screen and (max-width: 600px) {
.no02 img.dog1{ right:-50px; top:30px;}
.no02 h2 {
    padding: 2rem 0 2rem 0.8em;
    margin-bottom: 0.2rem; z-index: 1;
}
.no02 p span{  display: block; vertical-align: middle; }
.no02 p span.gray{  margin: 0.3em 0.5em 0em 0; border-radius: 3px;  }
    
.no02 .flex{ display: block;}
.no02 div.right{ margin-bottom: 3em;}
.no02 div.txt{  width:95%; margin: 0 auto;}
.no02 div.photo{   width:95%; margin: 10px auto 0; text-align: center;}
.no02 div.photo img{ display: block; margin: 10px auto 0; width:100%; height: auto;  max-width: 300px;}
    
    
#page-top1 {
  right: 5px;bottom: -5px;
}
.sub010,.start { display: block;}
.sub01 div{width: 95%; padding: 0 0 1em; margin:0 auto;}
.sub01 .image,.start .image{ width: 95%; max-width: 350px;
  display: block;
  overflow: hidden; /* はみ出る部分を隠す */
   padding:0; margin: 0 auto;}
.sub01 h2{ margin-bottom: 0em;}

.start  h2{width: 95%; padding: 0 0 1em; margin:0 auto; } 
.photo .image{ width:calc(50% - 1em);} 
.photo{ flex-wrap: wrap;}
.otukare  { margin: 30px auto;
   padding: 1em;
}
.otukare h2{ width:60%; margin-left: .5em;}
.otukare  .image { width:40% ; height: auto; }
    


   #footer article p.fax{ padding: 0.5em ; width:90% !important;}}

@media only screen and (max-width: 560px) {
 #glovalheader .inner h1 {width:70%; margin:35px 0 0 ; }
.sub #glovalheader .inner h1 {  width:50%;  margin:50px 0 0 10px ; }
#glovalheader .inner h2 {  width:50%; margin:30px 0 0 ; max-width:450px; }
.no01  .ordermade p {  margin: 1em 80px 0 0; }
#footer article .contactbtn div a{display: block; margin: 0 0 1em;}
#footer article .contactbtn {border-radius:20px; position: relative; }
}
@media only screen and (max-width: 520px) {
.no01 img.dog2{width:120px; height: auto; left:-0px; top:-100px;}
.no02 img.dog1{ right:-50px; top:0px;}
.no02 h3{ margin: 1.5em auto 0; width:95%;}
.no02 img.dog1{ min-width: 230px; height: auto; right:-10px; top:0px;}
.no03 img.dog04{ position: absolute; right:-10px;bottom:-10px;}
  .image-grid {align-items: flex-start; max-width: 600px;
      display: flex; /* フレックスボックスを使用して画像を横並びに */
      justify-content: space-around; /* 画像間のスペースを均等に */
      gap: 5px; /* 画像間の余白 */ margin: 1em 0 1em 0;
  }
  
  /* サムネイル画像のスタイル */
  .thumbnail {
      width: 30%; /* 幅を100%に設定 */ max-width: 150px;
      cursor: pointer;  /* カーソルをポインターにしてクリック可能に */
      transition: transform 0.3s; /* ホバー時の変化を滑らかに */
       filter: drop-shadow(2px 2px 2px #aaa);
  }
  .thumbnail:hover {
      transform: scale(1.05); /* ホバー時に少し拡大 */
  }
.flow dl.flex { display: block;
  padding: 0 1em;
  margin: 32px 0 32px ;
  position: relative;
align-items: center;
}
.flow dl dt ,.flow dl dd{ display: block;}
.flow dl dt { margin: 0;
  width:auto;  text-align: left; padding: 0.2em 0 0.1em 1.8em;
}
.flow dl dd{   width:auto;margin:0.5em 1em 1.8em;   position: relative; padding:  0.1em 0 0.2em;}
.flow dl dd:not(:last-child):before {
  top: 110%;
  left:50%;
 transform: translateX(-50%);
  margin-left: 0px;
}
.flow p.red{  line-height: 1.3; }  
.flow p.red span{ display: block; }   
.flow img.dog2{ bottom:6em;}
#footer article  p span{ display:block; margin:0; vertical-align: middle}  
#footer article h4,#footer article p{ margin: 0 auto; text-align: left; padding: 0;width:95%;  }
nav.footer a{ display: inline-block;  width:calc(40%  - 3.5em); text-align: left;}
    #footer article p.fax{padding: 0.5em 0.5em 1em; width:95%; }
    #footer article p.fax a{ top:40%;  transform: translateY(-40%); right:20px; }
    #footer article p.fax a.tofax{  top:95%; transform: translateY(-95%); right:5px; }
     #footer article p.fax a.tofax .fa-hand-point-right {
  transform: rotate(-90deg);
}
}
@media only screen and (max-width: 440px) {
    .no02 h2 span { display: block;
}
.no01  .flex{flex-wrap: wrap;  position: relative; padding: 10px 0 0;}
.no01 h3{ position: absolute;top:-10px; left:0;z-index: 100; }
.no01 dl{  width:  100% ;}
.no03 img.dog04{ display: none;}
}
@media only screen and (max-width:410px) {
     .font26 {
    font-size: 22px;
    font-size: 2.2rem;
  }
  .font28 {
    font-size: 23px;
    font-size: 2.34rem;
  }
     .font30 {
    font-size: 24px;
    font-size: 2.4rem; line-height: 1.3;
  }
  .font32 {
    font-size: 26px;
    font-size: 2.6rem;
  }
  .font34 {
   font-size: 26px;
    font-size: 2.6rem;
  }
  .font36 {
    font-size: 30px;
    font-size: 3.0rem;
  }
 .close {
      left: 0; /* 右から25pxの位置 */
  }




}

@media print {
   .slider{ display: none !important }
      #wrapper {
    font-size: 14px;
    font-size: 1.4rem;
  }
  /* 共通変更 フォントサイズ　*/
  .font12 {
    font-size: 10px;
    font-size: 1.0rem;
  }
  .font14 {
    font-size: 12px;
    font-size: 1.2rem;
  }
  .font16 {
    font-size: 14px;
    font-size: 1.4rem;
  }
  .font18 {
    font-size: 16px;
    font-size: 1.6rem;
  }
  .font20 {
    font-size: 18px;
    font-size: 1.8rem;
  }
  .font22 {
    font-size: 20px;
    font-size: 2.0rem;
  }
  .font24 {
    font-size: 22px;
    font-size: 2.2rem;
  }
  .font26 {
    font-size: 24px;
    font-size: 2.4rem;
  }
  .font28 {
    font-size: 26px;
    font-size: 2.6rem;
  }
     .font30 {
    font-size: 28px;
    font-size: 2.8rem;
  }
  .font32 {
    font-size: 30px;
    font-size: 3.0rem;
  }
  .font34 {
    font-size: 32px;
    font-size: 3.2rem;
  }
  .font36 {
    font-size: 34px;
    font-size: 3.4rem;
  }
  .font40 {
    font-size: 38px;
    font-size: 3.8rem;
  }
.font86 {
  font-size: 70px;
  font-size: 7.0rem;
  font-weight: 600;
}
  .close {
      top: 5%; /* 上から10pxの位置 */
      left: 5%; /* 右から25pxの位置 */
  }
 .contactbtn.flex{display: block;}
#footer article .contactbtn { padding: 0.8em 0;}
#footer article .contactbtn h3{ text-align:center; padding:0; }
#footer article .contactbtn h3 br{ display: none;}
#footer article .contactbtn div{  text-align: center !important; padding: 0; margin: 0.5em auto 0; width:95%; max-width: 500px;}
#footer article img.dog3{ right:-20px; bottom: 0; }  
    #footer article .contactbtn div p{ text-align: center;}   
 .slider img{ border-radius:10px; }
.no01 img.dog04{ width:100px; }
.no01  .ordermade p {  margin: 1em 80px 0 0; }
.no02 img.dog1{ right:-50px; top:20px;}
 .no02 h3{ margin: 0 40% 0 0;}
 .no02 h3 br{ display: none;}
.flow img.dog2{ width:120px; height: auto; right:-10px; bottom:4.5em;}
.flow div.white p{ margin: 0.5em calc(1.5em + 100px) 0.5em 1.5em;}
}
/*@print
A4用紙に特化したメディアクエリ*/
@page {
    size: A4;
    margin: 0;
}